:root {
    --overviewColor: transparent;
}

    [data-theme="dark"] {
        --overviewColor: #1a1a1a !important;
    }
    [data-theme="dark"] .overview-box-a {
        background:
            linear-gradient(180deg,
                rgba(255,255,255,0.1) 0%,
                rgba(255,255,255,0.03) 45%,
                rgba(255,255,255,0.00) 46%,
                rgba(0,0,0,0.2) 100%
            ),
            var(--overviewColor) !important;
    }
    [data-theme="dark"] .overview-box-b {
        background:
            linear-gradient(180deg,
                rgba(255,255,255,0.05) 0%,
                rgba(255,255,255,0.02) 40%,
                rgba(0,0,0,0.1) 100%
            ),
            linear-gradient(to right, var(--bg-primary) 30%, transparent 80%),
            var(--overviewColor) !important;
    }
    [data-theme="dark"] .overview-container {
        background: var(--bg-primary) !important;
    }
    [data-theme="dark"] .overview-container * {
        color: var(--text-primary) !important;
    }
    .phone-image-container {
        padding: 2px;
        overflow: hidden;
        aspect-ratio: 3 / 5;
        width: 100%;
    }
    .layout-container {
        display: flex;
        min-height: 100vh;
        height: auto;
        margin-top: 14px;
        background: var(--bg-primary);
    }
    .sidebar {
        width: clamp(31%, calc(31% + 9% * ((1150px - 100vw) / 382px)), 40%);
       border-right: 10px solid var(--bg-big-border);
        min-height: 100vh;
        height: auto;
        overflow-y: auto;
        overflow-x: hidden;
    }
    .horizontal-boxes {
        display: none;
        width: 100%;
        flex-direction: column;
        gap: calc(0.5vw + 6px);
        margin: calc(1vw + 10px) 0;
    }
    .horizontal-scroll-box {
        width: 100%;
        height: auto;
        min-height: 140px;
        background: var(--bg-primary);
        border-top: 1px solid var(--color-card-borderbottom);
        border-bottom: 1px solid var(--color-card-borderbottom);
        padding: calc(0.3vw + 4px);
        margin-bottom: calc(0.3vw + 4px);
        box-sizing: border-box;
    }
    .horizontal-scroll-box .horizontal-scroll-container {
        height: auto;
        margin-bottom: calc(0.3vw + 4px);
        min-height: calc(7vw + 200px);
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        scrollbar-width: thin;
    }
    .overview-container {
        width: 100%;
        height: clamp(250px, calc(11.440476vw + 203.857143px), 324px);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .brand-item a{
        padding: clamp(3px, 0.4vw, 4px) 0px;
    }
    .overview-box-a {
        width: 100%;
        max-height: 13%;
        min-height: 13%;
        background:
            linear-gradient(180deg,
                rgba(255,255,255,0.175) 0%,
                rgba(255,255,255,0.06) 45%,
                rgba(255,255,255,0.00) 46%,
                rgba(0,0,0,0.04) 100%
            ),
            var(--overviewColor);
        display: flex;
        align-items: center;
       justify-content: start;
        color: white;
        padding-left: 5px;
        font: 300 24px/14px Arial,sans-serif;
        text-shadow: 1px 1px 2px rgba(0,0,0,.4);
    }
    .overview-box-b {
        width: 100%;
        height: 74%;
        background:
            linear-gradient(180deg,
                rgba(255,255,255,0.125) 0%,
                rgba(255,255,255,0.04) 40%,
                rgba(0,0,0,0.03) 100%
            ),
            linear-gradient(to right, var(--bg-primary) 30%, transparent 80%),
            linear-gradient(0deg, rgba(255,255,255,0.35), rgba(255,255,255,0.35)),
            var(--overviewColor);
        position: relative;
        display: flex;
    }
    .overview-box-b::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        pointer-events: none;
    }
    .overview-box-c {
        width: 100%;
        height: 13%;
        min-height: 13%;
            background: var(--overviewColor);
            display: flex;
            align-items: stretch;
            justify-content: center;
        }
    .overview-small-layout {
        width: 100%;
        height: 100%;
        display: none;
    }
    .overview-small-left {
        width: 50%;
        height: 100%;
    }
    .overview-small-right {
        width: 50%;
        height: 100%;
        background-color: var(--bg-secondary);
    }
    .overview-slides-container {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        position: relative;
    }
    .overview-slides-wrapper {
        flex: 1;
        position: relative;
        overflow: hidden;
        min-height: 100px;
    }
    .overview-slide {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        opacity: 0;
        display: none;
    }
    .overview-slide.active {
        opacity: 1;
        display: flex;
    }
    .slide-content {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: stretch;
        justify-content: flex-start;
        background-color: transparent;
    }
    .slide-list-container {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .slide-list-item {
        display: flex;
        font-size: calc(1vw + 7px);
        font-weight: 400;
        color: var(--text-primary);
        padding: calc(0.2vw + 2px);
        flex: 1;
        margin: 0;
    }
    .slide-emoji {
        font-size: calc(1.2vw + 8px);
        margin-right: calc(0.3vw + 3px);
        width: 20px;
        flex-shrink: 0;
    }
    .slide-values {
        display: flex;
        flex-direction: column;
        gap: calc(0.1vw + 1px);
        flex: 1;
    }
    .slide-value {
        font-size: calc(0.9vw + 6px);
        color: var(--text-primary);
        line-height: 1.2;
    }
    .overview-slide[data-slide="1"] .slide-value {
        font-size: calc(1.2vw + 9px);
        font-weight: 500;
    }
    .overview-slide-dots {
        position: absolute;
        bottom: 0%;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        justify-content: center;
        gap: calc(0.3vw + 2px);
        z-index: 10;
    }
    .slide-dot {
        width: calc(0.5vw + 6px);
        height: calc(0.5vw + 6px);
        border-radius: 50%;
        background-color: #ccc; 
        cursor: pointer;
        transition: background-color 0.3s ease;
        min-width: 6px;
        min-height: 6px;
    }
    .slide-dot.active {
        background-color: var(--hover-color); 
    }
    .overview-large-layout {
        width: 100%;
        height: 100%;
        display: flex;
    }
    .overview-large-left {
        width: 30%;
        height: 100%;
    }
    .overview-large-right {
        width: 70%;
        height: 100%;
    }
    .overview-image-placeholder {
        width: 100%;
        height: 100%;
        background-color: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        color: var(--text-secondary);
        font-size: calc(0.8vw + 8px);
        filter: brightness(0.95);
        min-height: 120px;
        overflow: hidden;
        aspect-ratio: 360 / 720;
    }
    .overview-image {
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: calc(0.3vw + 2px);
        aspect-ratio: 360 / 720;
    }
    .heart-icon-overview {
        position: absolute;
        left: 80%;
        z-index: 10;
        border-right-style: dotted;
        font-size: 20px;
        cursor: pointer;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 50%;
        width: 32px;
        height: 32px;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    .heart-icon-overview:hover {
        background: rgba(255, 255, 255, 1);
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }
    .heart-icon-overview:active {
        transform: scale(0.95);
    }
    .overview-details-container {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    .overview-section-b1 {
        height: 60%;
        background-color: transparent;
        display: flex;
        align-items: flex-start;
    }
    .b1-list-container {
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: calc(0.5vw + 2px);
        align-items: stretch;
    }
    .b1-list-column {
        display: flex;
        flex-direction: column;
        gap: calc(0.5vw + 1px);
        justify-content: start;
    }
    .b1-list-column:last-child {
        border-right: none;
    }
    .b1-list-item {
        text-shadow: 1px 1px 1px rgba(0,0,0,.1) !important;
        font: 300 clamp(12px, 1.5vw, 13px) Arial,sans-serif;
        color: var(--overview-text-color) !important;
        background-color: transparent;
    }
    .b1-list-item::before {
        content: none;
    }
    .b1-list-item:not(:last-child) {
    }
    .overview-section-b2 {
        width: 100%;
        height: 40%;
        background-color: transparent;
        display: flex;
        align-items: center;
    }
    .b2-devices-container {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .b2-device-item {
        flex: 1;
        height: 100%;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: calc(0.1vw + 1px);
        min-width: 0;
        min-height: 40px;
        border-right: 1px solid var(--border-color);
    }
    .b2-device-item:last-child {
        border-right: none;
    }
    .b2-device-item {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: calc(0.2vw + 1px);
    }
    .b2-device-svg {
        font-size: clamp(15px, 1.9vw, 20px);
    }
    .overview-section-merged {
        width: 100%;
        height: 100%;
        background-color: transparent;
        display: flex;
        align-items: stretch;
        flex-wrap: nowrap;
        justify-content: flex-start;
        margin: 0;
        padding: 0;
    }
    .overview-merged-left { flex: 0 0 100%; min-width: 0; padding-right: 10px; box-sizing: border-box; }
    .overview-merged-right { flex: 0 0 0%; display: flex; flex-direction: column; gap: 8px; align-items: stretch; justify-content: center; box-sizing: border-box; }
    .overview-merged-right .overview-button { width: 100%; height: 40px; }
    .overview-merged-left ul { list-style: none; margin: 0; padding: 0; }
    .overview-merged-left ul li { display: grid; grid-template-columns: 20px 1fr; align-items: start; column-gap: 6px; padding: 4px 6px; }
    .overview-merged-left ul li:nth-child(2n) {  }
    .overview-merged-left ul li img { width: 16px; height: 16px; display: block; }
    .overview-merged-left ul li span { display: block; }
    .overview-merged-left .battery-line { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
    .overview-merged-left .battery-chip { display: inline-flex; align-items: center; gap: 6px; }
    .merged-item {
        flex: 1 1 25%;
        min-width: 0; 
        max-width: 100%;
        white-space: normal; 
        overflow-wrap: anywhere; 
        word-break: break-word;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, 0.2);
        min-height: 40px;
        color: var(--overview-text-color) !important;
        font-size: calc(0.5vw + 6px);
        font-weight: 600;
        background-color: transparent;
    }
    .versions-section{
        font: 14px Arial,sans-serif;
        background-color: var(--bg-primary);
        color: var(--overview-text-color) !important;   
        text-shadow: 1px 1px 0px hsla(0,0%,100%,.4)!important;
    }
    .merged-item .b1-list-item {
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }
    .merged-item h1,
    .merged-item span,
    .merged-item div {
        margin: 0;
        padding: 0;
    }
    .merged-item .item-emoji {
        display: inline-block;
        margin-right: 4px;
    }
    .b2-device-h1 {
        font: 600 clamp(15px, 1.9vw, 20px) Arial,sans-serif;
        color: var(--text-primary);
        margin: calc(0.1vw + 2px) 0;
        text-align: center;
    }
    .b2-device-span {
        font-size: calc(0.4vw + 7px);
        font-weight: 400;
        text-align: center;
        line-height: 1.2;
    }
    .b2-device-item h2 {
        margin: 0;
        font-size: calc(0.35vw + 4px);
        font-weight: 600;
        color: var(--text-primary);
    }
    .b2-device-item p {
        margin: 0;
        font-size: calc(0.3vw + 3px);
        color: var(--text-secondary);
    }
    .overview-button {
        text-transform: uppercase;
        background-color: transparent;
        color: #ffffff;
        text-shadow: 1px 1px 1px rgba(0,0,0,.4);
        cursor: pointer;
        font: 600 16px/44px Arial,sans-serif;
        transition: all 0.2s ease;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 50px;
        flex: 1 1 0;
        height: 100%;
        box-sizing: border-box;
    }
    .overview-button:hover {
        background-color: var(--hover-color);
        color: #ffffff;
        transform: translateY(-1px);
    }
        .horizontal-scroll-container::-webkit-scrollbar-track {
            background: #f1f1f1;
        }
        .horizontal-scroll-container::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 3px;
        }
        .horizontal-scroll-container::-webkit-scrollbar-thumb:hover {
            background: #555;
        }
        .horizontal-scroll-item {
            display: inline-block;
            width: 120px;
            margin-right: 10px;
            padding: 8px;
            text-decoration: none;
            color: var(--text-primary);
            text-align: center;
        }
        .horizontal-scroll-image {
            width: 100%;
            height: auto;
            object-fit: contain;
            border-radius: 4px;
            margin-bottom: 6px;
            aspect-ratio: 3 / 5;
        }
        .horizontal-scroll-name {
            font: 700 14px/16px Arial,sans-serif;
            height: 38px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            text-overflow: ellipsis;
            text-align: center;
            padding: 0 4px;
            line-height: 1.1;
        }
    .device-card {
       min-height: 160px;
       max-height: 160px;
        cursor: pointer;
        transition: all 0.2s ease;
        text-decoration: none;
        color: var(--text-primary);
        display: flex;
        flex-direction: column;
        align-items: center;
        min-width: 0;
        overflow: hidden;
    }
    .phone-image-container {
        padding: 2px;
        overflow: hidden;
    }
    .device-card:hover {
        color: var(--hover-color);
        transform: none;
    }
    .device-card img {
        transition: transform 1s cubic-bezier(0.26,0.695,0.375,0.965);
        width: 100%;
        height: auto;
        object-fit: contain;
        object-position: center;
        filter: brightness(0.95);
        aspect-ratio: 3 / 5;
    }
    .device-card:hover img{
        transform: scale(1.05);
    }
    .device-card:hover .phone-image-container img {
        transform: scale(1.05);
    }
    .device-card .model {
        font: var(--font-sidebar);
        text-align: center;
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        flex-grow: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        color: var(--text-color-brandlist);
    }
    .device-card-container {
        display: flex;
        margin: 0px 7px;
        flex-direction: column;
        align-items: center;
        margin-bottom: 15px;
    }
    .compare-btn {
        border: none;
        border-radius: 4px;
        padding: 6px 0px;
        font-size: 11px;
        font-weight: 600;
        cursor: pointer;
        transition: background-color 0.2s ease;
        width: 100%;
        max-width: 80px;
    }
    .compare-btn:hover {
        background: #c82333;
    }
    .compare-btn-small {
        background: var(--accent-color);
        color: white;
        border: none;
        border-radius: 4px;
        padding: 4px 8px;
        font-size: 10px;
        font-weight: 500;
        cursor: pointer;
        transition: background-color 0.2s ease;
        margin-top: 4px;
    }
    .compare-btn-small:hover {
        background: #c82333;
    }
    .horizontal-scroll-item-container {
        display: inline-flex;
        flex-direction: column;
        padding-bottom: calc(0.3vw + 8px);
        align-items: center;
        gap: 4px;
    }
    .details-section {
        width: clamp(60%, calc(69% - 9% * ((1150px - 100vw) / 382px)), 69%);
        background: var(--bg-color-secondary);
        overflow-y: auto;
        padding: 0;
        margin: 0;
    }
    #phone-details {
        margin: 0;
        padding: 0;
    }
    #phone-details h1 {
        margin: 0;
        padding: 0;
    }
    .sidebar-section{
        width:100%;
        margin-bottom:1px;
    }
    .section-title {
        font-weight: 700;
        height:clamp(20px, 4.5vw, 40px);
        margin: 0;
        border-left: 10px solid #7c7c7c !important;
        align-items: center;
        color: var(--overview-text-color);
    }
    .section-title svg {
        width: 18px;
        height: 18px;
    }
    .section-content {
        max-height: 335px;
        min-height: 335px;
        overflow-y: auto;
        scrollbar-width: thin;
        overflow-x: hidden;
        box-sizing: border-box;
    }
    .sidebar .brand-grid {
        display: flex !important;
        flex-direction: column !important;
        height: clamp(250px, calc(11.440476vw + 203.857143px), 324px) !important;
    }
    .sidebar .all-brands-link {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .sidebar .brand-list {
        height: 74% !important;
    }
    .sidebar .brand-grid-footer {
        height: 13% !important;
        padding-left: 10px;
        background: var(--overviewColor) !important;
        display: flex !important;
        align-items: center !important;
        border-left: 10px solid #7c7c7c !important;        
        color: var(--overview-text-color) !important;
        text-transform: uppercase;
        font-weight: 700;
    }
    .phone-grid{
        display:grid;
        grid-template-columns:repeat(3,1fr);
        width:100%;
        box-sizing:border-box;
    }
    .phone-card{
        padding:0;
        cursor:pointer;
        transition:all 0.2s ease;
        text-decoration:none;
        color:var(--text-primary);
        display:flex;
        flex-direction:column;
        align-items:center;
        min-width:0;
        margin-bottom:10px;
        border-radius: 10px;
    }
    .phone-card:hover{
        background:var(--hover-color);
        color:#fff;
        transform:none;
    }
    .phone-image{
        width:100%;
        object-fit:cover;
        object-position:center;
        filter: brightness(0.95);
    }
    .phone-name{
        font-weight:500;
        text-align:center;
        line-height:1.2;
        overflow:hidden;
        text-overflow:ellipsis;
        display:-webkit-box;
        -webkit-line-clamp:3;
        -webkit-box-orient:vertical;
        flex-grow:1;
        display:flex;
        align-items:center;
        justify-content:center;
        width:100%;
        color: var(--text-color-brandlist);
    }
    .phone-image-container{ 
        padding: 2px; 
        overflow: hidden; 
    }
    .image-not-found {
        display: none;
        width: 100%;
        height: 100%;
        background: var(--bg-color-secondary);
        color: var(--text-secondary);
        font-size: 12px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--border-color);
    }
    .specs-table {
        width: 100%;
        border-collapse: collapse;
        border: 1px solid var(--bg-color-listborder);
        box-sizing: border-box;
        max-width: 100%;
        margin: 0;
    }
      html, body, .specs-table, .specs-table td {
        -webkit-text-size-adjust: none;
        text-size-adjust: none;
    }
    .specs-table td {
        border-bottom: 1px solid var(--bg-color-listborder);
        padding: 3px 5px;
        text-align: left;
        vertical-align: top;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    .specs-table td.spec-section {
        font:700 16px Arial,sans-serif;
        color: #dc3545;
        width: 20%;
        background-color: var(--bg-color-bglist);
        text-align: start;
    }
    .specs-table td.spec-label {
        width: 20%; 
        color: var(--text-secondary);
        font:700 14px Arial,sans-serif;
        background-color: var(--bg-color-bglist);
    }
    .specs-table td.spec-value {
        vertical-align: top;
        font: 14px Arial,sans-serif;
        line-height: 16px !important;
        width: 60%;
        background-color: var(--bg-color-bglist);
    }
    .specs-table td.spec-value .br-gap { display:block; height:6px; }
    .spec-section-gap td {
        height: 5px;
        padding: 0;
        border: none !important;
        background: var(--bg-mainlistgap);
    }
    .network-tech-value {
        position: relative;
    }
    .tech-section-layout {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: 0; 
        overflow-x: hidden; 
    }
    .tech-details-section {
        flex: 0 0 80%;
        max-width: 80%;
        overflow: hidden;
        text-overflow: ellipsis;
        word-wrap: break-word;
        line-height: 1.4;
        font-size: 14px;
        overflow-x: hidden; 
        cursor: pointer; 
        transition: background-color 0.2s ease; 
    }
    .spec-value.network-tech-value {
        cursor: pointer; 
        transition: background-color 0.2s ease; 
        position: relative; 
    }
    .spec-value.network-tech-value:hover {
    }
    .tech-controls-section {
        flex: 0 0 20%;
        max-width: 20%;
        display: flex;
       justify-content: end;
        align-items: center;
        min-height: 20px;
        overflow-x: hidden; 
    }
    .tech-controls-section:empty {
        border-left: none;
        padding-left: 0;
        margin-left: 0;
    }
    .toggle-text {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        color: var(--text-primary);
        cursor: pointer; 
        font-size: 14px;
        max-width: 100%; 
        overflow: hidden; 
    }
    .toggle-label {
        font:700 13px Arial,sans-serif;
    }
    .toggle-text .toggle-arrow {
        display: inline-block;
        transition: transform .2s ease;
    }
    .toggle-text[aria-expanded="true"] .toggle-arrow {
        transform: rotate(180deg);
    }
    .network-band-row {
        overflow: hidden;
        transition: height .25s ease, padding .25s ease, opacity .2s ease;
    }
    .js-enabled .network-band-row.is-collapsed {
        height: 0 !important;
        opacity: 0;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        border: none !important;
        display: none !important;
    }
    .no-js .network-band-row.is-collapsed {
        height: auto !important;
        opacity: 1 !important;
        padding-top: initial !important;
        padding-bottom: initial !important;
        border: inherit !important;
        display: table-row !important;
    }
    .js-enabled .network-band-row.is-collapsed td {
        padding: 0 !important;
        border: none !important;
    }
    .specs-table tbody {
        display: table-row-group;
    }
    .specs-table tr {
        display: table-row;
    }
    .specs-table td {
        display: table-cell;
    }
    .spec-value ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .spec-value li {
        padding: 2px 0;
        margin: 0;
        line-height: 1.4;
        border-bottom: 1px solid var(--border-color);
    }
    .spec-value li:last-child {
        border-bottom: none;
    }
    .overview-large-layout {
        display: flex;
        gap: 5px;
    }
    .mobile-button-box { display: none; }
    .overview-box-c {
        display: flex; 
    }
    .sidebar .device-card-container { margin: 0; display: flex; flex-direction: column; height: 100%; }
    .sidebar .phone-grid {
        display: grid;
        padding-top: 5px;
        background-color: var(--bg-color-brandlist);
        grid-template-columns: repeat(3, 1fr);
        align-items: stretch;
        column-gap: 12px;
        row-gap: 30px; 
    }
    .sidebar .phone-grid { display: block; }
    .sidebar .device-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 110px auto 30px; 
        column-gap: 12px;
        row-gap: 0;
        margin: 0 7px 20px;
    }
    .sidebar .device-row .row-img { grid-row: 1; display:block; text-decoration:none; color:inherit; margin:0; padding:0; }
    .sidebar .device-row .row-img .phone-image-container { height: 110px; padding:2px; margin:0; box-sizing: border-box; }
    .sidebar .device-row .row-img img { width:100%; height:100%;
         object-fit:contain; 
         filter: brightness(0.95);
         object-position:center; display:block; 
         transition: transform .25s ease; }
    .sidebar .device-row .row-img:hover img { transform: scale(1.05); }
    .sidebar .device-row .row-model-band { grid-column: 1 / -1; grid-row: 2; }
    .sidebar .device-row .row-model { grid-row: 2; display:flex; align-items:center; justify-content:center; text-decoration:none; color:inherit; margin:0; padding:0; position:relative; }
    .sidebar .device-row .row-model .model { display:-webkit-box; 
        -webkit-line-clamp:3; 
        -webkit-box-orient:vertical; 
        overflow:hidden;
        font: 700 14px/18px Arial,sans-serif;
        text-overflow:ellipsis; 
        width:100%;
        text-align:center;
        color:var(--text-color-brandlist);
        line-height:1.2; 
        }
    .sidebar .device-row .row-compare { grid-row: 3; height:30px; width:100%; max-width:none; margin:0;
     text-transform: uppercase;
     font: 700 11px/16px Arial,sans-serif;
    color: red;
    background: transparent;
   letter-spacing: 0.5px;
    }
    .sidebar .device-row .row-compare:hover {
        color: #ffffff;
        background: var(--hover-color);
    }
    .sidebar .device-card-container {
        display: grid;
        grid-template-rows: 60px auto 36px; 
        gap: 0;
        margin: 0; 
        height: 100%;
    }
    .sidebar .device-card {
        background: transparent;
        border: none;
        border-radius: 0;
        padding: 0;
        text-decoration: none;
        color: var(--text-primary);
        display: grid;
        grid-template-rows: 1fr auto;
        align-items: stretch;
        min-width: 0;
        transition: none;
        height: 100%;
    }
    .sidebar .device-card:hover {
        background: transparent;
        color: inherit;
        transform: none;
        box-shadow: none;
    }
    .sidebar .device-card img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
        filter: brightness(0.95);
    }
    .sidebar .device-card .phone-image-container { padding: 0; margin: 0; height: 60px; }
    .sidebar .device-card .model {
        font: var(--font-sidebar);
        color: var(--text-primary);
        text-align: center;
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        padding:12px 0px;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        width: 100%;
        background: var(--bg-secondary); 
        margin: 0;
    }
    .sidebar .device-card .phone-image-container { flex: 1 1 auto; height: auto; width: 100%; padding: 0; }
    .sidebar .device-card-container .compare-btn-small {
        display: none;
    }
    .sidebar .phone-grid > .device-card-container { margin: 0; }
    .sidebar .section-content {
        background: var(--bg-color-brandlist);
        padding: 0;
    }
    .sidebar .device-card-container .compare-btn {
        height: 36px;
        width: 100%;
        max-width: none;
        margin: 0;
    }
    .sidebar .phone-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .sidebar .phone-grid > .device-card-container {
        margin: 0 7px 25px;
    }
    .sidebar .section-content {
        padding: 0;
    }
    .sidebar .phone-grid {
        grid-template-columns: repeat(3, 1fr);
        align-items: stretch;
    }
    .sidebar .phone-grid > .device-card-container {
        margin: 0 7px 20px;
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .sidebar .device-card-container .phone-card {
        margin: 0;
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-width: 0;
        gap: 0;
    }
    .sidebar .device-card-container .phone-image-container { padding: 0; flex: 1 1 auto; }
    .sidebar .device-card-container .phone-image { height: 100%; object-fit: contain; object-position: center; }
    .sidebar .device-card-container .phone-name { flex: 0 0 auto; }
    .sidebar .device-card-container .compare-btn { flex: 0 0 36px; height: 36px; width: 100%; max-width: none; margin: 0; }
    .sidebar .section-content {
        padding: 0;
    }
    .rumor-scroll-wrapper { width: 100%; height: auto; min-height: 120px; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 8px; padding: 12px; margin-bottom: 15px; box-sizing: border-box; }
    .rumor-scroll-container {
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        padding: 0;
        margin: 0;
        -webkit-overflow-scrolling: touch;
    }
    .rumor-scroll-item { display: inline-block; width: 100px; height: calc(0.3vw + 150px); margin-right: 8px; padding: 6px; vertical-align: top; text-decoration: none; color: var(--text-primary); text-align: center; white-space: normal; }
    .rumor-scroll-image { width: 100%; height: auto; object-fit: contain; border-radius: 4px; margin-bottom: 6px; aspect-ratio: 3 / 5; }
    .rumor-scroll-name { font-size: 0.9em; line-height: 1.2; height: 2.2em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; }
    .rumor-scroll-container::-webkit-scrollbar {
        height: 4px;
    }
    .rumor-scroll-container::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 2px;
    }
    .rumor-scroll-container::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 2px;
    }
    .rumor-scroll-container::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
    .loading {
        text-align: center;
        padding: 50px;
        color: var(--text-secondary);
    }
    .error {
        color: #e74c3c;
        text-align: center;
        padding: 20px;
    }
    .review-card {
        background-color: var(--bg-primary);
        height: calc(1vw + 240px);
        display: flex;
        border: 20px solid var(--bg-primary);
        overflow: hidden;
        position: relative;
    }
    .review-card::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        pointer-events: none;
        background:
            linear-gradient(180deg,
                rgba(255,255,255,0.22) 0%,
                rgba(255,255,255,0.12) 18%,
                rgba(255,255,255,0.06) 36%,
                rgba(255,255,255,0.02) 56%,
                transparent 72%
            ),
            linear-gradient(-20deg,
                rgba(255,255,255,0.18) 0%,
                rgba(255,255,255,0.10) 12%,
                rgba(255,255,255,0.00) 40%
            );
    }
    .review-card-left {
        width: 40%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: calc(0.5vw + 10px);
        box-sizing: border-box;
    }
    .review-card-right {
        width: 60%;
        height: 100%;
        display: flex;
        flex-direction: column;
        padding: calc(0.5vw + 15px);
        box-sizing: border-box;
        position: relative;
        z-index: 1;
    }
    .review-image-placeholder {
        width: 100%;
        height: 100%;
        background-color: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: calc(0.3vw + 4px);
        overflow: hidden;
        min-height: 200px;
        aspect-ratio: 360 / 720;
    }
    .review-image {
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: calc(0.3vw + 4px);
        aspect-ratio: 360 / 720;
    }
    .overview-image {
        width: 100%;
        height: 100%;
        object-fit: contain;
        box-sizing: border-box;
        padding: calc(0.3vw + 6px);
    }
    .review-header {
        margin-bottom: calc(0.5vw + 10px);
    }
    .review-model-title {
        font-size: calc(1.2vw + 7px);
        font-weight: 700;
        color: var(--text-primary);
        margin: 0;
        text-shadow: 1px 1px 2px rgba(0,0,0,.4);
        line-height: 1.2;
    }
    .review-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .review-introduction {
        font-size: calc(0.8vw + 12px);
        line-height: 1.5;
        color: var(--text-primary);
        text-shadow: 1px 1px 1px rgba(0,0,0,.3);
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
    }
    .review-intro-text {
        font-size: calc(0.8vw + 12px);
        line-height: 1.5;
        color: var(--text-primary);
        text-shadow: 1px 1px 1px rgba(0,0,0,.3);
    }
    .loading-text {
        font-size: calc(0.8vw + 12px);
        color: var(--text-secondary);
        font-style: italic;
    }
    .no-review-text {
        font-size: calc(0.8vw + 12px);
        color: var(--text-secondary);
        font-style: italic;
    }
    .error-text {
        font-size: calc(0.8vw + 12px);
        color: #e74c3c;
        font-style: italic;
    }
    .review-footer {
        margin-top: auto;
        display: flex;
        justify-content: end;
    }
    .revie-button {
        background: var(--accent-color);
        color: white;
        padding: calc(0.4vw + 1px) calc(0.8vw + -4px);
        font-size: calc(0.6vw + 12px);
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
        transition: all 0.2s ease;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .revie-button:hover {
        background: #c82333;
        transform: translateY(-1px);
    }
    .vertical-scroll-box, .horizontal-scroll-box {
        -webkit-overflow-scrolling: touch; 
    }
    @media (max-width: 768px) {
            .heart-icon-overview {
        position: absolute;
        left: 80%;
    }
        [data-theme="dark"] .overview-box-b {
            background:
                linear-gradient(180deg,
                    rgba(255,255,255,0.05) 0%,
                    rgba(255,255,255,0.02) 40%,
                    rgba(0,0,0,0.1) 100%
                ),
                linear-gradient(to right, var(--bg-primary) 50%, transparent 80%),
                var(--overviewColor) !important;
        }
        .horizontal-boxes {
            display: flex !important;
        }
        .layout-container { flex-direction: column; }
        .sidebar {
            width: 100%;
            min-height: unset;
            border-right: none;
            border-bottom: 1px solid var(--border-color);
            display: none!important;
        }
        .details-section {
            width: 100%;
            padding: 0;
        }
        body { padding: 0; margin: 0; }
        .specs-table { width: 100%; overflow-x: hidden; }
        .specs-table tr { display: flex; flex-wrap: wrap; align-items: stretch;padding: 0px 5px; }
        .specs-table td { display: block;  box-sizing: border-box; padding: 8px 1px; }
        .specs-table td.spec-section { 
            flex: 0 0 100%; 
            font:700 15px Arial,sans-serif;
            }
        .tech-details-section {
        font-size: 13px;
    }
        .specs-table td.spec-label { flex: 0 0 20%; max-width: 20%; 
        font:700 13px Arial,sans-serif; }
        .specs-table td.spec-value { flex: 0 0 80%; max-width: 80%;
       font: 13px Arial,sans-serif;
        }
        .tech-section-layout { flex-direction: row; align-items: center; }
        .tech-details-section { flex: 0 0 80%; max-width: 80%; margin-bottom: 0; }
        .tech-controls-section { flex: 0 0 20%; max-width: 20%; justify-content: flex-end; border-left: 1px solid var(--boder-color); border-top: none; padding-top: 0; margin-top: 0; }
        .spec-section-gap {height: 15px; background-color: var(--bg-mainlistgap);}
        .b1-list-column { gap: calc(0.5vw + 12px); }
        .b1-list-item { font-size: calc(0.5vw + 9px); }
        .overview-large-layout { display: flex;  }
        .overview-small-layout { display: none; }
        .overview-large-layout { display: flex; }
        .mobile-button-box { display: none; }
        .overview-box-c { display: flex; }
        .review-card { height: 250px; margin: calc(0.5vw + 8px) 0; }
        .overview-container{ height: calc(1vw + 300px); min-height: 250px; max-height: 300px; }
        .review-card-left { height: calc(1vw + 300px); min-height: 250px; max-height: 300px; }
        .review-card-right { width: 65%; padding: calc(0.3vw + 12px); }
        .review-model-title { font-size: calc(1vw + 7px); }
        .review-introduction { font-size: calc(0.7vw + 11px); -webkit-line-clamp: 3; }
        .revie-button { font-size: calc(0.5vw + 11px); padding: calc(0.3vw + 6px) calc(0.6vw + 12px); }
        .rumor-scroll-wrapper {
            min-height: 100px;
            padding: 8px;
        }
        .rumor-scroll-item {
            width: calc(0.3vw + 150px);
            margin-right: 6px;
            padding: 4px;
        }
          .horizontal-scroll-box .horizontal-scroll-container {
        min-height: calc(10vw + 230px);
    }
        .rumor-scroll-image {
            width: 100%;
            height: auto;
            aspect-ratio: 3 / 5;
            object-fit: contain;
        }
        .toggle-label {
        font:700 11px Arial,sans-serif;
    }
        .rumor-scroll-name {
            font: 700 12px/18px Arial,sans-serif;
            height: 2em;
            height: 20%;
        }
        .versions-section{
        font: 13px Arial,sans-serif;
        padding: 0px 5px;
    }
        .horizontal-scroll-item-container { width: 110px; height: 180px; display: inline-flex; flex-direction: column; align-items: stretch; gap: 0; box-sizing: border-box; justify-content: space-between; }
        .horizontal-scroll-item { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 6px; margin: 0; box-sizing: border-box; }
        .horizontal-scroll-image { flex: 0 0 110px; width: 100%; height: 110px; object-fit: contain; margin: 0 0 6px 0; }
        .horizontal-scroll-name {
            font: 700 14px/16px Arial,sans-serif;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: normal;
            line-height: 1.1;
            height: 38px;
            text-align: center;
            padding: 0 4px;
            font-weight: 700;
        }
        .compare-btn-small { flex: 0 0 32px; height: 32px; width: 70%; margin: 6px 0 4px; align-self: center; font-size: clamp(10px, 3vw, 12px) !important; text-shadow: 0 2px 6px rgba(0,0,0,0.2) !important; text-transform: uppercase; }
    }
    @media (max-width: 480px) {
      .toggle-label{
        display: none;
      }
        .overview-container {
            margin-bottom: 15px;
            height: calc(35vh + 20px) !important;
            min-height: 150px !important;
            position: relative;
        }
        .mobile-button-box { 
            width: 100%;
             height: auto;
             background-color: var(--bg-primary); 
              display: grid !important;
               grid-template-columns: repeat(1, 1fr); 
                margin:0 0 20px ; 
                border: none;
                flex-direction: column; align-items: center; 
                justify-content: center; }
     .mobile-button-box .overview-button {
         width: 100%;
         height: calc(4.5vw + 26px);
         margin: 0;
         font-size: 15px;
         font-weight: 600; 
         text-shadow: none;
         color: var(--text-secondary);
         border-bottom: 1px solid var(--button-border);
         transition: all 0.2s ease;
         display: flex;
         align-items: center;
         justify-content: space-between;
         padding: 0 15px;
     }
     .mobile-button-box .overview-button::after {
         content: ">";
         color: #ff0000;
         font-weight: bold;
         font-size: 14px;
     }
    .overview-button:hover {
        background-color: var(--bg-primary);
        color: #000000;
        transform: translateY(0px);
    }
        .overview-box-b {
            background: linear-gradient(to right, var(--bg-primary) 50%, transparent 80%), var(--overviewColor);
        }
        .overview-box-b { min-height: 100px !important; }
        .overview-box-c {
            display: none !important;
            height: 0 !important;
            overflow: hidden !important;
            margin: 0 !important;
            padding: 0 !important;
        }
        .slide-values { display: flex; flex-direction: column;  flex: 1;text-align: start; }
        .overview-slide[data-slide="1"] .slide-value { font-size: calc(1.2vw + 7px); }
        .slide-list-item .slide-value:first-child {  font-size: 16px;font-weight: 600; color: var(--text-secondary); }
        .slide-list-item .slide-value:last-child {
        font-size: 13px;
        font-weight: 400;
        color: var(--text-secondary);
        opacity: 0.8;
    }
        .specs-table td { display: block;  box-sizing: border-box; padding: 8px 1px; }
        .specs-table td.spec-section { flex: 0 0 100%;  font:700 14px Arial,sans-serif;}
        .specs-table td.spec-label { flex: 0 0 30%; max-width: 30%;  font:700 12px Arial,sans-serif; }
        .specs-table td.spec-value { flex: 0 0 70%; max-width: 70%;  font: 12px Arial,sans-serif; }
        .tech-section-layout { flex-direction: row; align-items: center; }
        .tech-details-section { flex: 0 0 75%; max-width: 75%; margin-bottom: 0;font: 10px Arial,sans-serif; }
        .tech-controls-section { flex: 0 0 10%; max-width: 10%; justify-content: flex-end; border-left: 1px solid var(--boder-color); border-top: none; padding-top: 0; margin-top: 0; }
        .overview-large-layout { display: none !important; }
        .overview-small-layout { display: flex !important; }
        .overview-small-left { width: 50% !important; }
        .overview-small-right { width: 50% !important; background-color: var(--bg-secondary) !important;}
        .overview-slides-container { display: flex; }
        .overview-slides-wrapper { display: block; }
        .overview-box-a { height: 15% !important; min-height: 15% !important; }
        .overview-box-b {
            height: 85% !important;
            min-height: 85% !important;
            background:
                linear-gradient(180deg,
                    rgba(255,255,255,0.125) 0%,
                    rgba(255,255,255,0.04) 40%,
                    rgba(0,0,0,0.03) 100%
                ),
                linear-gradient(to right, var(--bg-primary) 50%, transparent 80%),
                linear-gradient(0deg, rgba(255,255,255,0.35), rgba(255,255,255,0.35)),
                var(--overviewColor);
        }
        .horizontal-scroll-item { width: 100px; margin-right: 8px; padding: 6px; height: auto; box-sizing: border-box; }
        .horizontal-scroll-item-container { height: 100%; display: inline-flex; flex-direction: column; justify-content: space-between; }
        .horizontal-scroll-item { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 6px; margin: 0; box-sizing: border-box; }
        .horizontal-scroll-image { flex: 0 0 90px; width: 100%; height: auto; object-fit: contain; margin: 0 0 6px 0; }
        .horizontal-scroll-name {
            font: 700 14px/16px Arial,sans-serif;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: normal;
            line-height: 1.1;
            height: 38px;
            text-align: center;
            padding: 0 4px;
            font-weight: 700;
        }
        .compare-btn-small { flex: 0 0 32px; height: 32px; width: 70%; margin: 6px 0 4px; align-self: center; font-size: clamp(11px, 3vw, 13px) !important; text-shadow: 0 2px 6px rgba(0,0,0,0.2) !important; text-transform: uppercase; }
        .review-card {
            border-bottom: 1px solid var(--color-card-borderbottom);
            border-top: 1px solid var(--color-card-borderbottom);
            position: relative !important; display: block !important; height: auto !important; overflow: hidden !important; }
        .review-card-left { width: 100% !important; height: clamp(120px, 56vw, 200px) !important; position: relative !important; display: block !important;  overflow: hidden !important; }
        .review-image-placeholder { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; }
        .review-image { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: contain !important; image-rendering: -webkit-optimize-contrast !important; }
        .review-card-right { position: static !important; width: 100% !important; height: auto !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding: calc(0.5vw + 6px) calc(1vw + 8px) !important; margin: 0 !important; background: transparent !important; }
        .review-header { width: 100% !important; padding: 0 !important; margin: 0 !important; display: flex !important; justify-content: center !important; }
        .review-model-title { font-size: clamp(14px, 3.2vw, 18px) !important; line-height: 1.25 !important; color: var(--text-primary) !important; text-align: center !important; margin: 0 !important; }
        .review-content, .review-introduction { display: none !important; }
        .review-footer { width: 100% !important; display: flex !important; justify-content: center !important; padding: calc(0.5vw + 2px) 0 calc(1vw + 6px) 0 !important; }
        .revie-button { background: var(--accent-color) !important; color: #fff !important; border: none !important; border-radius: 6px !important; padding: calc(0.5vw + 4px) calc(3vw + 10px) !important; font-size: clamp(12px, 3vw, 14px) !important;  }
    }
    @media (max-width: 310px) {
        .slide-values {
        display: flex;
        flex-direction: row;
        text-align: center;
        flex: 1;
    }
    .mobile-button-box .overview-button{
        height: calc(4.5vw + 21px);
        font-size: 13px;
    }
    .overview-slide[data-slide="1"] .slide-value{
        font-size: calc(1.2vw + 6px);
    }
    .slide-list-item .slide-value:first-child{
        font-size: calc(1.2vw + 7px);
    }
    .specs-table td { display: block;  box-sizing: border-box; padding: 8px 1px; }
        .specs-table td.spec-section { flex: 0 0 100%;   font:700 12px Arial,sans-serif;}
        .specs-table td.spec-label { flex: 0 0 30%; max-width: 30%; font:700 10px Arial,sans-serif; }
        .specs-table td.spec-value { flex: 0 0 70%; max-width: 70%;  font: 10px Arial,sans-serif; }
        .tech-section-layout { flex-direction: row; align-items: center; }
        .tech-details-section { flex: 0 0 75%; max-width: 75%; margin-bottom: 0; font: 10px Arial,sans-serif;}
        .tech-controls-section { flex: 0 0 25%; max-width: 25%; justify-content: flex-end; border-left: 1px solid var(--boder-color); border-top: none; padding-top: 0; margin-top: 0; }
}