@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  color-scheme: dark;
  font-family: Inter, "Microsoft YaHei", sans-serif;
  background: #090e17;
  color: #edf2f5;
  --surface: #111a27;
  --raised: #19263a;
  --line: #26384f;
  --muted: #a2aebc;
  --accent: #80bcff;
  --accent-ink: #081c34;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 78px; }
body { margin: 0; }
button, input, textarea, select { font: inherit; }
button, .button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 14px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--raised); color: inherit; font-size: 13px; font-weight: 650;
  text-decoration: none; cursor: pointer;
}
button:hover, .button:hover { border-color: #58716e; background: #25333b; }
button:disabled { cursor: default; opacity: .45; }
a { color: var(--accent); }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
.primary { background: linear-gradient(135deg,#9bd0ff,#6db1ff); border-color: #8dc5ff; color: var(--accent-ink); }
.primary:hover { background: #b4dbff; border-color: #b4dbff; }
.quiet { background: transparent; }
.wide { width: 100%; justify-content: space-between; min-height: 44px; }
.shell { width: min(1380px, calc(100% - 64px)); margin-inline: auto; }
.site-header {
  position: sticky; top: 0; z-index: 5; background: #0d1116eb; border-bottom: 1px solid #232b34;
  backdrop-filter: blur(12px);
}
.topbar { min-height: 68px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: clamp(10px,2vw,30px); }
.brand { display: inline-flex; align-items: center; gap: 11px; color: #f4faf9; font-size: 18px; font-weight: 800; text-decoration: none; justify-self: start; white-space: nowrap; }
.brand-mark {
  position: relative; display: grid; place-items: center; width: 36px; height: 39px;
  clip-path: polygon(50% 0%,100% 20%,100% 76%,50% 100%,0% 76%,0% 20%);
  overflow: hidden; border-radius: 10px; color: #eff8ff; background: linear-gradient(150deg,#4e9fef,#193c74 65%,#5048ab);
  font-size: 22px; line-height: 1; font-weight: 800; font-style: italic;
  box-shadow: inset 0 1px 3px #9ad4ff94; text-shadow: 0 2px 10px #071832;
}
.brand-mark::after { content:""; position:absolute; top:-25%; left:-110%; width:75%; height:150%; transform:rotate(28deg); background:linear-gradient(90deg,transparent,#d4efff66,transparent); animation:brand-sheen 8s ease-in-out infinite; }
.brand-name { font-weight:800; letter-spacing:.025em; }
.brand-name span { color:#bfdbff; font-size:12px; font-weight:650; letter-spacing:.05em; margin-left:3px; }
nav { display:flex; justify-content:center; align-items:center; gap:clamp(8px,1.65vw,24px); min-width:0; }
nav a, nav button {
  position:relative; color:#bdc7d1; text-decoration:none; font-size:13px; white-space:nowrap;
  padding:11px 2px; background:transparent; border:0; border-radius:0; font-weight:650;
}
nav a::after,nav button::after { content:""; position:absolute; inset:auto 0 2px; height:2px; border-radius:9px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .2s ease; }
nav a:hover,nav button:hover,nav a[aria-current] { color:var(--accent); background:transparent; }
nav a:hover::after,nav button:hover::after,nav a[aria-current]::after { transform:scaleX(1); }
.header-actions { display: flex; gap: 8px; justify-self: end; white-space:nowrap; }
.store-link { color: #ffda77; border-color: #5c4d29; background: #2c2416; white-space: nowrap; }
.store-link:hover { color: #fff0be; border-color: #ad8640; background: #48381b; }
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(360px, 42vw, 490px);
  display: grid; align-items: center; border-bottom: 1px solid #1d2d44;
  background: radial-gradient(ellipse at 77% 35%, #17365a 0%, transparent 54%), #090e17;
}
.hero-inner { position: relative; z-index: 2; }
.hero-copy { padding: 34px 0; max-width: 570px; }
.eyebrow { display: inline-block; color: #9cc8f7; font-size: 11px; letter-spacing: .26em; font-weight: 800; }
.hero h1 { margin: 10px 0 15px; font-size: clamp(46px, 6.6vw, 87px); line-height: 1.05; letter-spacing: -.065em; }
.hero h1 strong { color: #7abaff; }
.hero p { margin: 0 0 21px; color: #c2cddb; font-size: 14px; line-height: 1.75; }
.hero-art { position: absolute; inset: 0; display: flex; padding-left: 38%; align-items: center; justify-content: center; gap: clamp(10px, 2vw, 24px); overflow: hidden; }
.hero-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,#090e17 0%,#090e17c4 28%,#090e1724 69%),linear-gradient(0deg,#090e17,#090e1700 43%); }
.hero-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 49%; }
.hero-grid {
  position: absolute; inset: 0; opacity: .56; z-index: 1;
  background: repeating-linear-gradient(0deg, transparent 0 35px, #8dbfff27 35px 36px),
              repeating-linear-gradient(90deg, transparent 0 35px, #8dbfff27 35px 36px);
  mask-image: linear-gradient(0deg,#000,transparent 84%);
}
.hero-search { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; max-width: 490px; }
.hero-search input { border-radius: 9px; background: #0b1422e8; border-color: #36516f; }
.hero-search .primary { min-width: 83px; }
.hero .chips { margin-bottom: 0; }
.hero .chips button { background: #14243ae8; border-color: #2b4460; }
.hot-label { font-size:11px; color:#b3c4d8; margin-right:2px; }
.live-strip { display:flex; align-items:center; gap:14px; min-height:38px; border-bottom:1px solid var(--line); padding:7px 0; }
.online-indicator { display:inline-flex; align-items:center; gap:6px; color:#b9cecc; font-size:11px; white-space:nowrap; }
.online-indicator span { width:7px; height:7px; border-radius:50%; background:#6aebbd; box-shadow:0 0 8px #6aebbd80; }
.online-indicator strong { color:#9ff3d1; }
.activity-text { color:#a8bfd8; font-size:11px; min-width:0; overflow:hidden; white-space:nowrap; }
.activity-item { display:inline-block; animation:activity-reveal .28s ease both; }
@keyframes activity-reveal { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
@keyframes brand-sheen { 0%,75% { left:-110%; } 90%,100% { left:130%; } }
.workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(290px, 345px); gap: 28px; align-items: start; margin-top: 34px; }
.main-column, .brief { min-width: 0; }
.section { margin-bottom: 32px; }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.catalog-tools { display:flex; align-items:center; gap:7px; }
.catalog-tools button { padding:5px 8px; font-size:11px; }
.catalog-header { padding:18px 18px 0; margin-bottom:12px; border:1px solid #2a3d58; border-radius:16px; background:linear-gradient(125deg,#18283d,#101824 68%); }
.catalog-header h2 { font-size:clamp(22px,3vw,29px); }
.catalog-search { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; margin-bottom:13px; }
.catalog-search .search-label input { height:44px; padding-block:9px; background:#0c1523; }
.catalog-search .search-icon { top:13px; }
.catalog-search button { min-width:60px; }
.catalog-filters { display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin:0 -3px; padding:2px 3px 12px; }
.facet-menu { position:relative; }
.facet-menu > summary { display:flex; align-items:center; gap:8px; min-height:34px; padding:6px 10px; cursor:pointer; list-style:none; border:1px solid #364b66; border-radius:999px; background:#1b2a3e; color:#e1edf9; font-size:12px; font-weight:650; }
.facet-menu > summary::-webkit-details-marker { display:none; }
.facet-menu > summary::after { content:''; width:5px; height:5px; border-right:1px solid; border-bottom:1px solid; transform:rotate(45deg); margin:-3px 2px 0 0; }
.facet-menu[open] > summary,.facet-menu > summary:hover { border-color:#82b5e9; background:#263b55; }
.facet-menu[open] > summary::after { transform:rotate(225deg); margin-top:3px; }
.facet-menu > summary:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.facet-panel { position:absolute; z-index:4; top:calc(100% + 7px); left:0; width:min(340px,calc(100vw - 32px)); max-height:min(55vh,390px); overflow:auto; padding:10px; border:1px solid #435c7c; border-radius:12px; background:#1a283b; box-shadow:0 14px 35px #050a14d9; }
.facet-color .facet-panel,.facet-tag .facet-panel,.facet-sort .facet-panel { left:auto; right:0; }
.facet-sort { margin-left:auto; }
.facet-panel h3 { margin:9px 1px 5px; font-size:11px; color:#adc6df; }
.facet-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; margin-top:5px; }
.facet-season .facet-options { grid-template-columns:repeat(3,minmax(0,1fr)); }
.facet-option { justify-content:flex-start; min-height:34px; padding:5px 7px; gap:5px; text-align:left; font-size:11px; line-height:1.35; background:#101b2a; border-color:#364b66; color:var(--rarity-dot,#e7f1fb); }
.facet-option small { margin-left:auto; color:#a3b6ca; }
.facet-option[aria-pressed="true"] { border-color:#9fcbfb; background:#27405f; }
.facet-empty { margin:8px 2px 2px; color:var(--muted); font-size:12px; }
.facet-clear { min-height:34px; padding:5px 8px; font-size:11px; }
.inventory-filters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:12px; }
.inventory-filters input,.inventory-filters select { width:100%; }
.inventory-search { margin-bottom:12px; }
.inventory-search .input-row { margin-top:5px; }
.inventory-search button { flex:0 0 auto; }
.inventory-types { display:flex; gap:6px; flex-wrap:wrap; margin:0 0 12px; }
.inventory-types button { padding:7px 10px; border-radius:999px; font-size:12px; }
.inventory-types button[aria-pressed="true"] { border-color:#3b81c9; background:#142d47; color:#a9d5ff; }
h2, h3, p { margin-top: 0; }
h2 { margin-bottom: 0; font-size: 22px; letter-spacing: -.025em; }
h3 { margin-bottom: 0; font-size: 16px; }
.muted { color: var(--muted); line-height: 1.65; }
.small { font-size: 12px; }
.count-pill { white-space: nowrap; border: 1px solid #344f70; border-radius: 7px; background: #1b2f46; color: var(--accent); padding: 4px 8px; font-size: 11px; font-weight: 700; }
.count-pill:empty { display: none; }
.search-label { position: relative; display: block; }
.search-label input { padding: 14px 13px 14px 42px; font-size: 14px; background: #141b23; }
.search-icon { position: absolute; left: 16px; top: 14px; width: 13px; height: 13px; border: 2px solid #94aaa9; border-radius: 50%; pointer-events: none; }
.search-icon::after { content: ""; position: absolute; right: -5px; bottom: -4px; width: 6px; height: 2px; border-radius: 2px; background: #94aaa9; transform: rotate(45deg); }
.chips, .rarities, .tabs, .actions { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.chips { margin: 10px 0 15px; }
.chips button { padding: 5px 11px; border-radius: 999px; color: #bbc9d2; background: #161d25; font-size: 11px; }
.tabs { flex-wrap:nowrap; gap:6px; overflow-x:auto; scrollbar-width:thin; padding:0 3px 10px; }
.tabs button { flex:0 0 auto; min-height:37px; gap:5px; padding:8px 11px; border-radius:8px; background:#0f1724; color:#c6d4e6; white-space:nowrap; transition:background .18s,border-color .18s,color .18s; }
.tabs button:hover { color:#f4f8ff; border-color:#4b6e96; background:#18283c; }
.tabs button[aria-pressed=true] { color:#b7dcff; border-color:#5078a9; background:#213a56; }
.tabs small { color:#9bb2cc; font-size:10px; font-variant-numeric:tabular-nums; }
.tabs small:empty { display:none; }
#catalog-status, #inventory-status { min-height: 20px; margin: 0 0 12px; font-size: 12px; }
#catalog-status:empty { display:none; }
.cosmetic-sections { display: grid; gap: 13px; }
.cosmetic-section { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 17px; }
.group-head { display: flex; justify-content: space-between; align-items: center; gap: 9px; margin-bottom: 12px; }
.group-head h3 { display: flex; align-items: center; gap: 9px; font-size: 17px; }
.group-count { color: #a0b0bc; font-size: 12px; font-weight: 600; }
.group-head .quiet { border: 0; padding: 4px; font-size: 12px; color: var(--accent); white-space: nowrap; }
.rarities { margin-bottom: 14px; }
.rarity {
  --rarity-dot: #8998aa;
  --rarity-bg: #374353;
  --rarity-dark: #202a34;
}
.rarity-common { --rarity-dot: #c4cbd3; --rarity-bg: #59616f; --rarity-dark: #303844; }
.rarity-uncommon { --rarity-dot: #a3e66c; --rarity-bg: #4c853a; --rarity-dark: #1e402d; }
.rarity-rare { --rarity-dot: #65bffa; --rarity-bg: #27659c; --rarity-dark: #162f55; }
.rarity-epic { --rarity-dot: #cf94fc; --rarity-bg: #824fa7; --rarity-dark: #392b58; }
.rarity-legendary { --rarity-dot: #ffad77; --rarity-bg: #ad653e; --rarity-dark: #532f30; }
.rarity-mythic { --rarity-dot: #f8d97a; --rarity-bg: #9f7b31; --rarity-dark: #514326; }
.rarity-exotic { --rarity-dot: #77ebdd; --rarity-bg: #317e81; --rarity-dark: #194454; }
.rarity-series { --rarity-dot:#f8b8ee; --rarity-bg:#72477a; --rarity-dark:#302341; }
.rarity-chip {
  padding: 5px 9px; border-radius: 999px; background: #1d252e; color: #d0d7df; font-size: 11px;
}
.rarity-chip[aria-pressed=true] { color: var(--accent); border-color: #5074a0; background: #213855; }
.rarity-chip small { color: #adbbc6; font-size: 10px; }
.rarity-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--rarity-dot); }
.cosmetics { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px 10px; }
.cosmetic { display: flex; flex-direction: column; min-width: 0; gap: 6px; color: #ebeff5; }
button.cosmetic { border: 0; background: transparent; padding: 0; text-align: left; align-items: stretch; justify-content: start; font-weight: 600; }
button.cosmetic:hover { background: transparent; }
.thumb {
  position: relative; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; border-radius: 9px;
  border: 1px solid #ffffff17; background: radial-gradient(ellipse at 50% 37%, var(--rarity-bg), var(--rarity-dark) 86%);
  transition: border-color .15s, transform .15s;
}
.thumb img { display: block; width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0; }
.fallback { color: #e0e7ee; font-size: 12px; }
.cosmetic:hover .thumb { border-color: #a4e3de; transform: translateY(-2px); }
.cosmetic.selected .thumb { outline: 2px solid var(--accent); outline-offset: -2px; border-color: var(--accent); }
.select-mark { display: grid; place-items: center; width: 22px; height: 22px; position: absolute; right: 4px; bottom: 4px; border-radius: 6px; border: 1px solid #b9cacc80; color: white; background: #111822c9; font-size: 15px; line-height: 1; }
.selected .select-mark { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.cosmetic-name { display: block; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.cosmetic-caption { display:grid; gap:3px; min-width:0; }
.cosmetic-rarity { color:var(--rarity-dot); font-size:10px; line-height:1.35; overflow-wrap:anywhere; }
#catalog .cosmetic-section { background:#101a28; }
#catalog .cosmetics { grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
#catalog .cosmetic { gap:0; border:1px solid #2b3d56; border-radius:11px; background:#142031; overflow:hidden; transition:border-color .18s,background .18s; }
#catalog .cosmetic:focus-visible { outline-offset:1px; }
#catalog .cosmetic:hover { border-color:#648db8; background:#1a2e45; }
#catalog .cosmetic.selected { border-color:#80bcff; background:#192e46; }
#catalog .thumb { width:100%; border:0; border-radius:0; }
#catalog .thumb img { transition:transform .2s ease; }
#catalog .cosmetic:hover .thumb { transform:none; }
#catalog .cosmetic:hover .thumb img { transform:scale(1.055); }
#catalog .select-mark { right:7px; bottom:7px; }
#catalog .cosmetic-caption { padding:8px 9px 10px; text-align:left; }
.cosmetic-section { animation:activity-reveal .22s ease both; }
.group-pages { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 15px; }
.group-pages button { padding: 6px 9px; font-size: 11px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 15px; padding: 18px; }
.brief { position: sticky; top: 83px; }
.brief h2 { font-size: 20px; }
.chosen { display: grid; gap: 6px; max-height: 195px; overflow-y: auto; margin-bottom: 17px; }
.chosen-empty { padding: 13px 10px; border: 1px dashed #3b4855; border-radius: 8px; color: var(--muted); font-size: 12px; line-height: 1.5; margin: 0; }
.chosen-item { display: flex; gap: 9px; align-items: center; padding: 5px 7px; background: #1b252d; border-radius: 7px; }
.chosen-item .thumb { width: 32px; flex: 0 0 32px; border-radius: 5px; }
.chosen-item .fallback { font-size: 8px; }
.chosen-item > span { font-size: 11px; flex: 1; overflow-wrap: anywhere; }
.chosen-item button { padding: 3px 7px; border: 0; background: transparent; }
form, label, .field { display: grid; gap: 8px; }
#request-form { gap: 13px; }
label { color: #c7d0dc; font-size: 12px; font-weight: 650; }
input, select, textarea { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 10px; background: #10161d; color: #eef4f8; font-size: 13px; }
input::placeholder, textarea::placeholder { color: #8897a6; }
textarea { min-height: 73px; resize: vertical; }
.input-row { display: flex; gap: 8px; align-items: end; }
.input-row > * { flex: 1; min-width: 0; }
.input-row select { flex: 0 0 76px; }
.candidate-row { display: flex; align-items: center; justify-content: space-between; color: var(--accent); font-size: 12px; }
.candidate-row button { padding: 4px 8px; }
#request-result:not(:empty) { margin-top: 13px; }
.notice { padding: 12px; border: 1px solid #36577e; border-radius: 9px; background: #172b42; }
.notice p { margin: 5px 0 8px; color: #c5d6e9; font-size: 12px; line-height: 1.6; }
.notice textarea { font-size: 12px; margin-top: 8px; }
.receipt-code { display: block; margin: 8px 0; padding: 7px 8px; color: #d6eaff; background: #0d1a2a; border: 1px dashed #46698e; border-radius: 6px; font-size: 14px; letter-spacing: .04em; }
.submit-help { margin: -2px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.submit-help a { display:inline-block; margin-left:5px; }
.receipt-progress { margin-top:12px; color:#d4e6fa; }
.receipt-progress summary { cursor:pointer; font-size:12px; }
.progress-step { margin-top:8px; border-top:1px solid #36577e; padding-top:6px; font-size:12px; }
.progress-step small { color:var(--muted); margin-left:7px; }
.notice .actions { margin-top: 8px; }
.notice .actions button, .notice .actions a { padding: 6px 9px; font-size: 11px; }
.account-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.account { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.account h3 { margin: 7px 0; }
.account p { margin: 8px 0; font-size: 12px; }
.account p.account-price { color:#91c6ff; font-size:18px; font-weight:750; }
.account p.matched-cosmetics { color:#b5d7f6; font-size:12px; }
.stw-summary { color:#9ddcba; font-size:12px; }
.account-share { display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.account-share span:empty { display:none; }
.cosmetic-dialog { width:min(960px,calc(100% - 24px)); }
.cosmetic-dialog .cosmetic-dialog-head { top:-1px; }
.cosmetic-detail-layout { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:18px; align-items:start; }
.cosmetic-detail-visual { display:grid; place-items:center; min-height:290px; aspect-ratio:4/5; border:1px solid #ffffff20; border-radius:13px; background:radial-gradient(ellipse at 52% 30%,var(--rarity-bg),var(--rarity-dark) 83%); overflow:hidden; }
.cosmetic-detail-visual img { width:100%; height:100%; max-height:620px; object-fit:contain; }
.cosmetic-detail-visual.is-video { min-height:200px; aspect-ratio:16/9; }
.cosmetic-detail-visual iframe { width:100%; height:100%; min-height:200px; border:0; background:#080e1a; }
.cosmetic-media-controls { margin:0 0 10px; }
.cosmetic-media-controls button,.cosmetic-media-controls .button { padding:6px 8px; font-size:11px; }
.cosmetic-detail-info { min-width:0; overflow-wrap:anywhere; }
.cosmetic-detail-info > p { margin:0 0 10px; }
.cosmetic-detail-info > button { margin:8px 0; }
.cosmetic-detail-meta { color:#b6d8fc; font-size:13px; font-weight:700; }
.cosmetic-detail-facts { display:grid; grid-template-columns:max-content minmax(0,1fr); gap:7px 10px; padding:9px 11px; border:1px solid var(--line); border-radius:8px; font-size:12px; }
.cosmetic-detail-facts dt { color:var(--muted); }
.cosmetic-detail-facts dd { margin:0; }
.cosmetic-related,.cosmetic-variant { margin:12px 0; }
.cosmetic-related h3,.cosmetic-variant h3 { margin-bottom:7px; font-size:13px; }
.cosmetic-mini-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(62px,1fr)); gap:6px; }
.cosmetic-mini { display:flex; flex-direction:column; align-items:stretch; gap:4px; padding:4px; font-size:10px; text-align:left; overflow-wrap:anywhere; }
.cosmetic-mini .thumb { width:100%; }
.cosmetic-mini > img,.cosmetic-bundle > img { width:100%; aspect-ratio:1; object-fit:contain; border-radius:5px; }
.cosmetic-mini[aria-pressed="true"] { border-color:#9fcbfb; }
.cosmetic-bundle { display:flex; align-items:center; gap:8px; margin:5px 0; }
.cosmetic-bundle > img { width:43px; }
.recommendation { min-width:0; margin:12px 0; padding:12px; border:1px solid #385775; border-radius:10px; background:#101c2a; }
.recommendation h3,.recommendation p { margin:0 0 8px; }
.recommendation details { padding:6px 0; border-bottom:1px solid var(--line); }
.recommendation summary { color:var(--accent); cursor:pointer; }
.recommendation-items { display:grid; grid-template-columns:repeat(auto-fit,minmax(66px,1fr)); gap:6px; max-height:260px; overflow:auto; margin-top:8px; }
.recommendation-item { display:grid; align-content:start; gap:4px; padding:4px; border-radius:5px; background:#19263a; font-size:10px; overflow-wrap:anywhere; }
.recommendation-item img { width:100%; aspect-ratio:1; object-fit:contain; }
.recommendation-form { display:grid; gap:8px; margin-top:12px; }
.recommendation-form fieldset { min-width:0; border:1px solid var(--line); border-radius:7px; }
.recommendation-form label { display:flex; align-items:center; gap:7px; padding:4px 0; }
.recommendation-form input[type=radio] { width:auto; margin:0; }
.account-visual { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.account-visual .thumb { border-radius: 6px; }
.account .actions { margin-top: 10px; }
.account .actions button { padding: 7px 10px; font-size: 11px; }
.empty { grid-column: 1 / -1; padding: 20px 15px; border: 1px dashed #34414e; border-radius: 10px; color: var(--muted); font-size: 13px; margin: 0; text-align: center; line-height: 1.65; }
.footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; padding: 20px 0 28px; }
dialog { width: min(850px, calc(100% - 28px)); max-height: 86dvh; padding: 0; color: #edf2f5; border: 1px solid var(--line); border-radius: 15px; background: #10161d; }
dialog::backdrop { background: #04080ac4; }
.music-toggle {
  position: fixed;
  z-index: 4;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  width: 44px;
  height: 44px;
  padding: 0;
  gap: 5px;
  border-color: #38516c;
  border-radius: 50%;
  color: #d8e9ff;
  background: #101c2bee;
  box-shadow: 0 4px 18px #03081175;
}
.music-toggle:hover, .music-toggle[aria-pressed="true"] { border-color: #6aa4d8; background: #1b324c; }
.music-icon { color: var(--accent); font-size: 17px; line-height: 1; }
.music-action {
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-left: 6px solid currentColor;
  border-right: 0;
}
.music-toggle[aria-pressed="true"] .music-action {
  width: 6px;
  height: 8px;
  border: 0;
  border-left: 2px solid currentColor;
  border-right: 2px solid currentColor;
}
.dialog-shell { padding: 17px; }
#account-dialog-content { display: grid; gap: 12px; }
.account-profile { background:#111e2b; border:1px solid var(--line); border-radius:12px; padding:13px; }
.account-profile h3 { margin:0 0 10px; }
.account-profile dl { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:0; }
.account-profile dt { color:var(--muted); font-size:12px; }
.account-profile dd { margin:4px 0 0; color:#dcecff; font-weight:700; }
.account-profile details { margin-top:12px; }
.account-profile summary { cursor:pointer; color:#a9d5ff; }
.account-profile ul { display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:6px; padding:0; margin:10px 0 0; list-style:none; }
.account-profile li { background:#142333; border-radius:6px; padding:6px 8px; font-size:12px; }
.dialog-shell .section-head { position: sticky; top: 0; z-index: 2; padding: 6px 0; background: #10161d; }
.inventory-image { margin: 0 0 14px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: #10161d; }
.inventory-image summary { color: var(--accent); cursor: pointer; font-size: 12px; }
.inventory-image .button { margin: 10px 0; }
.inventory-image img { display: block; width: 100%; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }

@media (max-width: 1220px) { .cosmetics { grid-template-columns: repeat(5,minmax(0,1fr)); } }
@media (max-width: 1040px) {
  .shell { width: calc(100% - 40px); }
  .workspace { gap: 17px; grid-template-columns: minmax(0,1fr) minmax(275px, 305px); }
  .cosmetics { grid-template-columns: repeat(4,minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .topbar { grid-template-columns: minmax(0,1fr) auto; gap:7px; }
  .topbar nav { grid-column:1/-1; grid-row:2; justify-content:flex-start; }
  html { scroll-padding-top:107px; }
  .brief { top:110px; }
}
@media (max-width: 760px) {
  .shell { width: calc(100% - 26px); }
  .topbar { min-height: 55px; grid-template-columns: 1fr auto; gap: 8px; }
  .header-actions button, .header-actions a { padding: 7px 8px; font-size: 11px; min-width: 0; }
  .topbar nav { justify-content:flex-start; gap:16px; overflow-x:auto; scrollbar-width:none; padding:0 2px 7px; }
  nav a,nav button { font-size:11px; }
  .brand { gap:5px; font-size:14px; }
  .brand-mark { width:30px; height:33px; font-size:17px; }
  .brand-name span { font-size:10px; margin-left:0; }
  .header-actions { gap:4px; }
  .hero .chips { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding:4px 2px; }
  .hero .chips button,.hot-label { flex:0 0 auto; white-space:nowrap; }
  html { scroll-padding-top: 105px; }
  .hero { min-height: 282px; }
  .hero-copy { padding: 24px 0; max-width: 420px; }
  .hero h1 { font-size: clamp(36px, 9.3vw, 58px); margin-bottom: 10px; }
  .hero p { font-size: 11px; margin-bottom: 13px; }
  .hero .button { font-size: 11px; padding: 7px 10px; }
  .hero-art { gap: 5px; padding-left: 45%; }
  .hero-art::after { background: linear-gradient(90deg,#090e17eb,#090e1778 80%),linear-gradient(0deg,#090e17,#090e1700 50%); }
  .hero-backdrop { object-position: 67% center; }
  .workspace { grid-template-columns: minmax(0,1fr); gap: 0; margin-top: 20px; }
  .brief { position: static; margin-bottom: 20px; }
  .cosmetic-section { padding: 12px; }
  .cosmetics { gap: 12px 8px; }
  .tabs button { padding-inline: 8px; font-size: 12px; }
  .catalog-header { padding:12px 11px 0; }
  .catalog-filters { position:relative; }
  .facet-menu { position:static; }
  .facet-menu > summary { min-height:40px; }
  .facet-menu .facet-panel { inset:100% 0 auto; width:auto; }
  .facet-sort { margin-left:0; }
  .cosmetic-detail-layout { grid-template-columns:1fr; gap:12px; }
  .cosmetic-detail-visual { min-height:175px; max-height:45dvh; aspect-ratio:1; }
  .cosmetic-detail-visual.is-video { max-height:none; }
  .cosmetic-detail-visual img { max-height:45dvh; }
  #catalog .cosmetics { grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
  #catalog .cosmetic-caption { padding:6px 7px 8px; }
  .account-grid { grid-template-columns: minmax(0,1fr); }
  .account-visual { max-width: 270px; }
  .inventory-filters { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .footer { padding-top: 16px; }
}
@media (max-width: 345px) {
  .cosmetics { grid-template-columns:repeat(3,minmax(0,1fr)); }
  #catalog .cosmetics { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-height: 750px) { .chosen { max-height: 120px; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .thumb { transition: none; }
  .cosmetic:hover .thumb { transform: none; }
  #catalog .thumb img, #catalog .cosmetic, .tabs button { transition:none; }
  #catalog .cosmetic:hover .thumb img { transform:none; }
  .brand-mark::after,.activity-item,.cosmetic-section { animation:none; }
  nav a::after,nav button::after { transition:none; }
}