@font-face { font-family: 'Arimo'; font-style: normal; font-weight: 400; src: local('Arimo Regular'), url('fonts/Arimo-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Arimo'; font-style: normal; font-weight: 700; src: local('Arimo Bold'), url('fonts/Arimo-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 400; src: local('Oswald Regular'), url('fonts/Oswald-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 300; src: local('Oswald Light'), url('fonts/Oswald-Light.ttf') format('truetype'); }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 200; src: local('Oswald ExtraLight'), url('fonts/Oswald-ExtraLight.ttf') format('truetype'); }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 500; src: local('Oswald Medium'), url('fonts/Oswald-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 600; src: local('Oswald SemiBold'), url('fonts/Oswald-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 700; src: local('Oswald Bold'), url('fonts/Oswald-Bold.ttf') format('truetype'); }
body { margin-top:14px; }
.container { display:flex; min-height:calc(100vh - 60px); background-color:var(--bg-primary); height:auto; }
.sidebar { width:clamp(31%, calc(31% + 9% * ((1150px - 100vw) / 382px)), 40%); min-height:100vh; height:auto; overflow-y:auto; overflow-x:hidden; background:var(--bg-primary); }
.main-content { border-left:1px solid var(--color-card-shadow); width:clamp(60%, calc(69% - 9% * ((1150px - 100vw) / 382px)), 69%); padding:0 10px; overflow-y:auto; box-sizing:border-box; }
.review-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; padding:10px; background:var(--bg-layer2); }
.review-card { background:var(--bg-primary); border:1px solid var(--color-card-borderbottom); overflow:hidden; text-decoration:none; color:var(--text-primary); display:flex; flex-direction:column; }
.review-thumb { width:100%; height:200px; object-fit:cover; background:var(--bg-secondary); }
.review-info { padding:10px; }
.review-title { font-weight:600; }
.pagination { padding:10px 0; display:flex; justify-content:center; align-items:center; gap:10px; margin:30px 0; flex-wrap:wrap; }
.pagination-wrap { background:var(--bg-secondary); border-radius:6px; padding:10px; margin:20px 0; }
.pagination button { padding:8px 12px; border:1px solid var(--border-color); background:var(--bg-primary); color:var(--text-primary); cursor:pointer; border-radius:5px; font-size:14px; transition:all .2s ease; }
.pagination button:hover { background-color:var(--bg-secondary); border-color:var(--accent-color); }
.pagination button:disabled { opacity:.5; cursor:not-allowed; }
.pagination button.active { background-color:var(--accent-color); color:#fff; border-color:var(--accent-color); }
.pagination-info { margin:0 15px; color:var(--text-secondary); font-size:14px; }
.sidebar-section { width:100%; margin-bottom:1px; }
.section-title { font-weight:700; letter-spacing:.02em; text-align:center; text-transform:uppercase; padding:14px 0; margin:0; border-bottom:1px solid var(--border-color); display:flex; align-items:center; gap:8px; color:var(--text-primary); }
.section-title svg { width:18px; height:18px; }
.section-content { height:335px; overflow-y:auto; scrollbar-width:thin; margin-left:10px; overflow-x:hidden; box-sizing:border-box; }
.phone-grid { background-color:var(--bg-color-brandlist); display:grid; padding:4px 0 0;  grid-template-columns:repeat(3,1fr); width:100%; box-sizing:border-box; }
.phone-card { margin:0 7px 10px; cursor:pointer; transition:all .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; }
.phone-image { transition:transform 1s cubic-bezier(.26,.695,.375,.965); width:100%; object-fit:cover; object-position:center; filter:brightness(.95); }
.phone-card:hover .phone-image { transform:scale(1.05); }
.phone-name { font:700 13px/18px Arimo, Arial, sans-serif; text-align:center; line-height:1.2; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; flex-grow:1; display:flex; align-items:center; justify-content:center; width:100%; color:var(--text-color-brandlist); }
.favorite-list { background-color:var(--bg-color-brandlist); width:100%; box-sizing:border-box; }
.favorite-item { display:flex; justify-content:space-between; align-items:center; background-color:var(--bg-color-button); transition:all .2s ease; text-decoration:none; cursor:pointer; }
.favorite-item:nth-child(odd) { background-color:#fff; }
.favorite-item:nth-child(even) { background-color:#e8f5e8; }
.favorite-item:hover { background-color:var(--bg-color-button-hover); transform:translateY(-1px); text-decoration:none; }
.favorite-model { font-size:14px; font-weight:500; color:var(--text-primary); flex:1; text-align:left; }
.favorite-number { font-size:14px; font-weight:600; padding:4px 8px; border-radius:4px; min-width:40px; text-align:center; }
.sidebar-section.top-hit-section .favorite-item:nth-child(even) { background-color:#e3f2fd; }
.comparison-list { background-color:var(--bg-color-brandlist); width:100%; box-sizing:border-box; }
.comparison-item { display:flex; justify-content:space-between; align-items:center; padding:12px 0; background-color:var(--bg-color-button); transition:all .2s ease; text-decoration:none; cursor:pointer; }
.comparison-item:nth-child(odd) { background-color:#fff; }
.comparison-item:nth-child(even) { background-color:#fff3e0; }
.comparison-item:hover { background-color:var(--bg-color-button-hover); transform:translateY(-1px); text-decoration:none; }
.comparison-models { flex:1; display:flex; flex-direction:column; gap:4px; }
.comparison-model { font-size:13px; font-weight:500; color:var(--text-primary); text-align:left; line-height:1.2; }
.comparison-vs { font-size:12px; font-weight:700; padding:6px 8px; border-radius:4px; min-width:30px; text-align:center; }
[data-theme="dark"] .favorite-item { background-color:#2a2a2a!important; }
[data-theme="dark"] .favorite-item:nth-child(even) { background-color:#232323!important; }
[data-theme="dark"] .comparison-item { background-color:#2a2a2a!important; }
[data-theme="dark"] .comparison-item:nth-child(even) { background-color:#232323!important; }
[data-theme="dark"] .favorite-item:hover, [data-theme="dark"] .comparison-item:hover { background-color:#3a3a3a!important; }
.horizontal-section { display:none; }
.mobile-section-title { padding:0 5px; border-top:1px solid var(--color-card-borderbottom); text-transform:uppercase; font-weight:700; color:var(--hover-color); }
.horizontal-scroll-container { overflow-x:auto; border-bottom:1px solid var(--color-card-borderbottom); overflow-y:hidden; white-space:nowrap; background-color:var(--bg-primary); padding-left:10px; padding-right:10px; height:200px; -webkit-overflow-scrolling:touch; }
.horizontal-scroll-item { display:inline-grid; grid-template-rows:1fr 1fr; width:175px; height:100%; vertical-align:top; text-decoration:none; color:var(--text-primary); margin-right:10px; text-align:center; }
.horizontal-scroll-image { width:100%; height:100%; object-fit:fill; display:block; margin: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: left;
    padding: 10px 0 0;
    font-weight:700;
}
@media (max-width:768px) { .sidebar{display:none!important;} .main-content{width:100%;} .review-grid{grid-template-columns:repeat(2,1fr);} .review-thumb{height:160px;} .horizontal-section{display:none;} }
@media (max-width:480px) { .review-grid{grid-template-columns:repeat(1,1fr);} }