* { box-sizing: border-box; }

html, body {
margin: 0;
width: 100%;
height: 100%;
font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
background: #dfeaf6;
color: #1f1f1f;
}

body {
display: flex;
align-items: center;
justify-content: center;
background: #dfeaf6;
}

.root {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 991px) minmax(0px, 1fr);
width: 100%;
height: 100vh;
}

.browser-shell {
position: relative;
width: 100%;
max-width: 1280px;
height: 100vh;
background: #f3f3f3;
border: 1px solid rgba(215, 215, 215, 0.7);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06);
display: flex;
flex-direction: column;
overflow: hidden;
}

.right-shell {
position: relative;
height: 100%;
background:
    linear-gradient(180deg, rgba(157, 202, 255, 0.4), rgba(125, 175, 255, 0.4)),
    url("../images/bg.jpg") center center / cover no-repeat;
}

.right-shell:after {
display: block;
content: "";
width: 100%;
height: 100%;
}

.mobile-ad {
display: none;
}

body.mobile-prompt-open {
overflow: hidden;
}

.content-split {
display: flex;
flex: 1;
position: relative;
z-index: 1;
min-height: 0;
}

.content-panel {
flex: 1;
min-width: 0;
background: rgba(255,255,255,0.88);
}

.browser-shell > * {
position: relative;
z-index: 1;
}

.browser-toolbar {
height: 52px;
background: #f5f5f5;
border-bottom: 1px solid #dcdcdc;
display: flex;
align-items: center;
padding: 0 18px;
gap: 14px;
}

.nav-icons {
display: flex;
align-items: center;
gap: 16px;
color: #7c7c7c;
font-size: 20px;
}

.address-bar {
flex: 1;
height: 32px;
background: #f7f7f7;
border: 1px solid #d9d9d9;
border-radius: 16px;
display: flex;
align-items: center;
padding: 0 16px;
color: #5d5d5d;
font-size: 14px;
}

.toolbar-actions {
display: flex;
align-items: center;
gap: 12px;
color: #666;
}

.toolbar-actions span {
display: inline-flex;
width: 18px;
height: 18px;
border-radius: 50%;
border: 1px solid #b7b7b7;
align-items: center;
justify-content: center;
font-size: 11px;
}

.page {
flex: 1;
background: rgba(255, 255, 255, 0.88);
padding: 20px 18px 16px;
}

.app-header {
max-width: 1180px;
margin: 0 auto 16px;
display: flex;
align-items: center;
gap: 12px;
background: rgba(255,255,255,0.65);
border-radius: 12px;
}

.brand {
display: flex;
align-items: center;
gap: 12px;
min-width: 220px;
padding-right: 20px;
}

.brand-mark {
width: 28px;
height: 28px;
border-radius: 8px;
background: linear-gradient(135deg, #4da1ff 0%, #1f64e8 100%);
position: relative;
overflow: hidden;
}

.brand-mark::before,
.brand-mark::after {
content: "";
position: absolute;
background: rgba(255,255,255,0.9);
border-radius: 50%;
}

.brand-mark::before {
width: 12px;
height: 12px;
left: 6px;
top: 7px;
}

.brand-mark::after {
width: 8px;
height: 8px;
right: 6px;
bottom: 7px;
}

.brand-name {
font-size: 24px;
font-weight: 600;
letter-spacing: 1px;
}

.main-nav {
flex: 1;
display: flex;
align-items: center;
gap: 24px;
padding-left: 26px;
}

.nav-tab {
position: relative;
color: #2d2d2d;
font-size: 18px;
font-weight: 500;
padding: 8px 6px;
cursor: default;
}

.nav-tab.active {
color: #1e5fe4;
}

.nav-tab.active::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -6px;
height: 3px;
border-radius: 3px;
background: #1b62e8;
}

.nav-tab.small {
font-size: 16px;
color: #4b4b4b;
}

.search-wrap {
display: flex;
align-items: center;
gap: 12px;
}

.search-box {
width: 330px;
height: 42px;
background: rgba(214, 228, 255, 0.4);
border: 1px solid #d8e3ff;
border-radius: 10px;
padding: 0 14px;
display: flex;
align-items: center;
gap: 10px;
color: #8f9cb6;
}

.search-box input {
border: 0;
outline: none;
background: transparent;
flex: 1;
font-size: 14px;
color: #444;
}

.download-btn {
height: 42px;
padding: 0 18px;
border: none;
background: linear-gradient(180deg, #1a66ff 0%, #0c5ae3 100%);
color: white;
border-radius: 10px;
font-size: 15px;
font-weight: 600;
box-shadow: 0 8px 20px rgba(26, 102, 255, 0.24);
}

.content {
max-width: 1180px;
width: 100%;
margin: 0 auto;
display: flex;
gap: 24px;
min-height: 0;
}

.sidebar {
width: 195px;
display: block;
padding-top: 6px;
}

.category-box {
padding-left: 4px;
}

.category-title {
font-size: 13px;
color: #6d6d6d;
margin: 10px 0 14px;
}

.category-list {
list-style: none;
margin: 0;
padding: 0;
}

.category-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px 8px 6px;
color: #3d3d3d;
border-radius: 8px;
font-size: 15px;
}

.category-item .icon {
width: 16px;
height: 16px;
background: linear-gradient(135deg, #e6e6e6, #cfcfcf);
border-radius: 4px;
opacity: 0.8;
}

.category-item .count {
margin-left: auto;
color: #7b7b7b;
font-size: 12px;
}

.main-panel {
flex: 1;
min-width: 0;
width: 100%;
}

.toolbar-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 2px;
}

.sort-box {
position: relative;
width: 140px;
}

.sort-toggle {
width: 100%;
height: 36px;
border: 1px solid #d4d7dc;
background: #f7f7f7;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: #5e6471;
font-size: 14px;
padding: 0 14px;
cursor: pointer;
position: relative;
outline: none;
}

.sort-toggle:focus {
border-color: #a9c7ff;
box-shadow: 0 0 0 3px rgba(68, 124, 255, 0.12);
}

.sort-toggle span {
flex: 1;
text-align: center;
}

.sort-toggle::after {
content: "▾";
font-size: 12px;
color: #5a6170;
}

.sort-menu {
position: absolute;
top: calc(100% + 6px);
right: 0;
width: 140px;
background: #ffffff;
border: 1px solid #dfe5ee;
border-radius: 8px;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
display: none;
overflow: hidden;
z-index: 10;
}

.sort-box.open .sort-menu {
display: block;
}

.sort-option {
width: 100%;
border: none;
background: transparent;
color: #4d5460;
font-size: 14px;
text-align: left;
padding: 10px 12px;
cursor: pointer;
}

.sort-option:hover {
background: #f3f7ff;
}

.sort-option.active {
background: #eaf2ff;
color: #1a67f6;
font-weight: 600;
}

.items-grid {
display: grid;
grid-template-columns: repeat(4, minmax(215px, 1fr));
gap: 20px 24px;
padding: 8px 6px 12px;
}

.item-card {
background: rgba(255,255,255,0.55);
border: 1px solid #e9ebee;
border-radius: 12px;
padding: 1.2rem 16px;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.item-card:hover {
transform: translateY(-1px);
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.04);
}

.item-meta {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
gap: 10px;
}

.item-title {
width: 100%;
font-size: 15px;
color: #2a2a2a;
text-align: center;
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.rating {
font-size: 12px;
color: #f0b12b;
letter-spacing: 1px;
white-space: nowrap;
}

.item-tag {
display: inline-block;
margin-top: 6px;
font-size: 13px;
color: #1d6bff;
background: rgba(32, 118, 255, 0.08);
border-radius: 8px;
width: 100%;
text-align: center;
padding: 10px 8px;
text-decoration: none;
transition: all .125s linear;
}

.item-tag:hover {
background: #1d6bff;
color: #fff;
opacity: .9;
}

@media (max-width: 1439px) {
.root {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1280px) minmax(0, 1fr);
}

.right-shell {
    display: none;
}

.mobile-ad {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(12, 24, 43, 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.mobile-ad__background {
    position: relative;
    width: min(92vw, 390px);
    height: min(84vh, 680px);
    background: url("../images/bg.jpg") center center / cover no-repeat;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 20px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
    overflow: hidden;
}

.mobile-ad .close-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 1;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #24344d;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.mobile-ad .close-btn:focus-visible {
    outline: 3px solid #1769ff;
    outline-offset: 3px;
}

.mobile-ad.hidden {
    display: none;
}
}

@media (max-width: 1080px) {
.items-grid {
    grid-template-columns: repeat(4, minmax(150px, 1fr));
}
}

@media (max-width: 900px) {
body {
    align-items: flex-start;
}

.page {
    padding: 12px 10px 14px;
}

.browser-shell {
    max-width: 100%;
    min-height: 100vh;
    height: auto;
}

.content {
    width: 100%;
    max-width: none;
}

.sidebar { display: none; }
.app-header {
    flex-wrap: wrap;
    margin-bottom: 12px;
    gap: 10px;
}
.main-nav {
    order: 3;
    width: 100%;
    padding-left: 0;
    gap: 14px;
}
.nav-tab {
    font-size: 15px;
}
.search-wrap {
    width: 100%;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}
.search-box {
    width: 100%;
    min-width: 0;
}
.items-grid {
    grid-template-columns: repeat(2, minmax(140px, 1fr));
    gap: 14px 12px;
}
}

@media (max-width: 540px) {
html,
body {
    height: auto;
    min-height: 100%;
}

body {
    display: block;
}

.root {
    display: block;
    height: auto;
    min-height: 100vh;
}

.left-shell,
.right-shell {
    display: none;
}

.browser-shell {
    border: none;
    box-shadow: none;
    min-height: 100vh;
    height: auto;
}

.mobile-ad {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(12, 24, 43, 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.mobile-ad__background {
    position: relative;
    width: min(92vw, 390px);
    height: min(84vh, 680px);
    background: url("../images/bg.jpg") center center / cover no-repeat;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 20px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
    overflow: hidden;
}

.mobile-ad .close-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 1;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #24344d;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    touch-action: manipulation;
}

.mobile-ad .close-btn:focus-visible {
    outline: 3px solid #1769ff;
    outline-offset: 3px;
}

.mobile-ad.hidden {
    display: none;
}

.app-header {
    align-items: stretch;
}

.main-nav {
    justify-content: space-between;
}

.search-wrap {
    flex-direction: column;
    align-items: stretch;
}

.search-box,
.sort-box {
    width: 100%;
}

.items-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100%;
}

.item-card {
    min-height: 120px;
    padding: 14px 12px 12px;
    width: 100%;
}
}