h1 { font-size: var(--f-3xl); }
h2 { font-size: var(--f-xl); }
h3 { font-size: var(--f-lg); }
h4 { font-size: var(--f-base); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s5); }
.page { padding: var(--s7) 0 var(--s10); min-height: 60vh; }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.row-b { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
.gap1 { gap: var(--s1) } .gap2 { gap: var(--s2) } .gap3 { gap: var(--s3) }
.gap4 { gap: var(--s4) } .gap5 { gap: var(--s5) } .gap6 { gap: var(--s6) }
.grow { flex: 1; min-width: 0; }
.wrapx { flex-wrap: wrap; }
.hide { display: none !important; }
.center { text-align: center; }
.muted { color: var(--text-2); }
.muted2 { color: var(--text-3); }
.tnum { font-variant-numeric: tabular-nums; }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.scroll-x::-webkit-scrollbar { height: 6px; }

.hdr {
  position: sticky; top: 0; z-index: 60;
  height: var(--header-h);
  background: rgba(9, 12, 19, .86);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.hdr-in { height: 100%; display: flex; align-items: center; gap: var(--s4); }
.brand { display: flex; align-items: center; gap: var(--s2); flex-shrink: 0; }
.brand-mark { width: 28px; height: 28px; flex-shrink: 0; }
.brand-name { font-size: var(--f-lg); font-weight: 800; letter-spacing: .04em; }

.gnb { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }

.gnb a {
  padding: 8px 11px; border-radius: var(--r-sm); white-space: nowrap;
  font-size: var(--f-md); font-weight: 600; color: var(--text-2);
  letter-spacing: .02em; text-transform: uppercase;
  transition: color .15s var(--ease), background .15s var(--ease);
}
.gnb a:hover { color: var(--text); background: var(--surface-2); }
.gnb a.on { color: var(--text); background: var(--surface-3); }

.hdr-r { display: flex; align-items: center; gap: var(--s2); margin-left: auto; flex-shrink: 0; }

.hsearch { position: relative; width: clamp(150px, 17vw, 250px); }

.iconbtn {
  position: relative; width: 38px; height: 38px; border-radius: var(--r-full);
  display: grid; place-items: center; color: var(--text-2);
  border: 1px solid transparent; transition: .15s var(--ease);
}
.iconbtn:hover { background: var(--surface-2); color: var(--text); }
.iconbtn .dot {
  position: absolute; top: 5px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--danger); color: #fff; border-radius: var(--r-full);
  font-size: 10px; font-weight: 800; display: grid; place-items: center;
  border: 2px solid var(--bg);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  height: 40px; padding: 0 var(--s4); border-radius: var(--r-sm);
  font-size: var(--f-md); font-weight: 700; white-space: nowrap;
  border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text);
  transition: background .15s var(--ease), border-color .15s var(--ease), transform .08s var(--ease);
}
.btn:hover { background: var(--surface-hover); border-color: var(--line-3); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
.btn-ghost { background: transparent; border-color: var(--line-2); color: var(--text-2); }
.btn-ghost:hover { color: var(--text); background: var(--surface-2); }
.btn-quiet { background: transparent; border-color: transparent; color: var(--text-2); }
.btn-quiet:hover { background: var(--surface-2); color: var(--text); }
.btn-danger { background: var(--danger-soft); border-color: rgba(224,90,90,.35); color: #F08585; }
.btn-danger:hover { background: rgba(224,90,90,.2); }
.btn-tg { background: #2AA0DA; border-color: #2AA0DA; color: #04121E; }
.btn-tg:hover { background: #2490c6; border-color: #2490c6; }
.btn-lg { height: 48px; padding: 0 var(--s6); font-size: var(--f-lg); border-radius: var(--r-md); }
.btn-sm { height: 32px; padding: 0 var(--s3); font-size: var(--f-sm); border-radius: var(--r-xs); }
.btn-full { width: 100%; }

.btn-full { white-space: normal; min-width: 0; line-height: 1.25; height: auto; min-height: 48px;
            padding-top: 8px; padding-bottom: 8px; }
.btn-full svg { flex-shrink: 0; }

.btn-sm.btn-full { min-height: 34px; }
.btn-icon { padding: 0; width: 40px; }
.btn-icon.btn-sm { width: 32px; }

.field { display: flex; flex-direction: column; gap: 7px; }
.field > label { font-size: var(--f-sm); font-weight: 700; color: var(--text-2); }

.hint, .selfhint { font-size: var(--f-xs); color: var(--text-3); line-height: 1.5; }
.field .err { font-size: var(--f-xs); color: #F08585; }

.input, .select, .textarea {
  width: 100%; background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); color: var(--text); font-size: var(--f-base);
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.input, .select { height: 42px; padding: 0 var(--s3); }
.textarea { padding: 11px var(--s3); min-height: 110px; resize: vertical; line-height: 1.6; }
.input::placeholder, .textarea::placeholder { color: var(--text-4); }

.input:focus, .select:focus, .textarea:focus { border-color: var(--accent-line); background: var(--surface-2); }
.select {
  appearance: none; -webkit-appearance: none; padding-right: 32px; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23717D95' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
.input-affix { position: relative; }
.input-affix .suffix {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-size: var(--f-sm); font-weight: 700; color: var(--text-3); pointer-events: none;
}
.input-affix .input { padding-right: 52px; }

.badge {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 8px; border-radius: var(--r-xs);
  font-size: var(--f-xs); font-weight: 800; letter-spacing: .02em;
  border: 1px solid transparent; white-space: nowrap;
}
.badge svg { width: 12px; height: 12px; }
.badge-new      { color: var(--tier-new);      background: rgba(113,125,149,.12); border-color: rgba(113,125,149,.28); }
.badge-active   { color: var(--tier-active);   background: rgba(110,155,196,.12); border-color: rgba(110,155,196,.3); }
.badge-trusted  { color: var(--tier-trusted);  background: var(--ok-soft);        border-color: rgba(52,188,133,.32); }
.badge-verified { color: var(--tier-verified); background: var(--accent-soft);    border-color: var(--accent-line); }
.badge-top      { color: var(--tier-top);      background: var(--gold-soft);      border-color: rgba(199,167,106,.34); }
.badge-tg       { color: #56B6E8; background: rgba(42,160,218,.13); border-color: rgba(42,160,218,.32); }
.badge-warn     { color: var(--warn); background: var(--warn-soft); border-color: rgba(217,166,60,.3); }
.badge-mock     { color: var(--text-3); background: var(--surface-3); border-color: var(--line-2); }

.st { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px;
      border-radius: var(--r-xs); font-size: var(--f-xs); font-weight: 800; }
.st::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st-AVAILABLE { color: var(--ok); background: var(--ok-soft); }
.st-RESERVED  { color: var(--warn); background: var(--warn-soft); }
.st-SOLD      { color: var(--text-3); background: var(--surface-3); }
.st-CANCELLED { color: var(--text-4); background: var(--surface-3); }

.av { border-radius: 50%; background: var(--surface-3); object-fit: cover; flex-shrink: 0; display: block; }
.av-16 { width: 16px; height: 16px } .av-20 { width: 20px; height: 20px }
.av-24 { width: 24px; height: 24px } .av-28 { width: 28px; height: 28px }
.av-32 { width: 32px; height: 32px } .av-40 { width: 40px; height: 40px }
.av-48 { width: 48px; height: 48px } .av-72 { width: 72px; height: 72px }
.av-96 { width: 96px; height: 96px }

.thumb { border-radius: var(--r-xs); background: var(--surface-3); object-fit: cover;
         flex-shrink: 0; display: block; }
.thumb-24 { width: 24px; height: 24px } .thumb-48 { width: 48px; height: 48px }
.av-ring { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--accent-line); }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
}
.card-pad { padding: var(--s5); }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5); }

.sec { margin-bottom: var(--s8); }
.sec-hd { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s4); }
.sec-hd h2 { font-size: var(--f-xl); }
.sec-hd .sub { font-size: var(--f-sm); color: var(--text-3); margin-top: 3px; }
.sec-more { font-size: var(--f-sm); font-weight: 700; color: var(--text-2); display: inline-flex; align-items: center; gap: 4px; }
.sec-more:hover { color: var(--accent); }

.pagehd {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap;
  margin-bottom: var(--s5);
}

.pagehd > div { flex: 1 1 260px; min-width: 0; }
.pagehd h1 { font-size: var(--f-3xl); letter-spacing: -.02em; }
.pagehd p { margin-top: 4px; font-size: var(--f-md); line-height: 1.55; }

.pagehd-a { flex: 0 0 auto; display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }

.postwrap.cml-doc > .pagehd { margin-bottom: 0; }

@media (max-width: 640px) {
  .pagehd { align-items: flex-start; gap: var(--s3); margin-bottom: var(--s4); }
  .pagehd h1 { font-size: var(--f-2xl); }
  .pagehd p { font-size: var(--f-sm); }
  
  .pagehd-a { width: 100%; }
  .pagehd-a > .btn-primary { flex: 1; justify-content: center; }
}

.skrows { display: grid; gap: var(--s3); }
.sk-row { height: 88px; border-radius: var(--r-md); }

.empty-slot .empty { padding: var(--s6) var(--s4); }
.empty-slot .empty .ei { width: 44px; height: 44px; margin-bottom: var(--s3); }
.empty-slot .empty h4 { font-size: var(--f-lg); }
.empty-slot .empty .btn { margin-top: var(--s4); }

#opsbar {
  display: flex; align-items: center; gap: var(--s2);
  padding: 9px var(--s5);
  background: var(--warn-soft); border-bottom: 1px solid rgba(217,166,60,.32);
  color: var(--warn); font-size: var(--f-sm); line-height: 1.45;
}
#opsbar .ob-i { display: flex; flex-shrink: 0; }
#opsbar .ob-t { flex: 1; min-width: 0; }
#opsbar .ob-t b { color: var(--warn); }
#opsbar .ob-x {
  flex-shrink: 0; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: var(--r-xs);
  color: inherit; opacity: .7;
}
#opsbar .ob-x:hover { opacity: 1; background: rgba(217,166,60,.14); }
@media (max-width: 640px) { #opsbar { padding: 8px var(--s4); font-size: var(--f-xs); } }

.firsttime {
  display: inline-flex; align-items: center; gap: var(--s2);
  margin-top: var(--s4); padding: 8px var(--s4); border-radius: var(--r-full);
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--text-2); font-size: var(--f-sm);
  transition: border-color .15s var(--ease), color .15s var(--ease);
}
.firsttime b { color: var(--accent); font-weight: 700; }
.firsttime svg { flex-shrink: 0; opacity: .75; }
.firsttime:hover { border-color: var(--accent-line); color: var(--text); }
@media (max-width: 480px) { .firsttime { font-size: var(--f-xs); padding: 7px var(--s3); } }

.guidegrid { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.guidecard {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4); border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line);
  color: var(--text); transition: border-color .15s var(--ease), background .15s var(--ease);
}
.guidecard:hover { border-color: var(--accent-line); background: var(--surface-2); }
.guidecard .gnum {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
  font-size: var(--f-sm); font-weight: 800;
}
.guidecard > svg { flex-shrink: 0; color: var(--text-3); }
.guidecard .muted2 { font-size: var(--f-sm); line-height: 1.5; }
@media (max-width: 640px) { .guidegrid { grid-template-columns: 1fr; } }

.docnav { display: grid; gap: var(--s3); grid-template-columns: 1fr 1fr; margin-top: var(--s5); }
.docnav-a {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
  padding: var(--s3) var(--s4); border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line); color: var(--text);
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.docnav-a:hover { border-color: var(--accent-line); background: var(--surface-2); }
.docnav-a .muted2 { display: inline-flex; align-items: center; gap: 4px; font-size: var(--f-sm); }
.docnav-a b { font-size: var(--f-md); line-height: 1.4; }
.docnav-n { text-align: right; align-items: flex-end; }
.docnav-n .muted2 { flex-direction: row-reverse; }
@media (max-width: 560px) {
  .docnav { grid-template-columns: 1fr; }
  .docnav-n { text-align: left; align-items: flex-start; }
  .docnav-n .muted2 { flex-direction: row; }
}

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: var(--s5);
        overflow-x: auto; scrollbar-width: none;
        
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
        mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); }

.tabs.at-end { -webkit-mask-image: none; mask-image: none; }

.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  padding: 10px 15px; font-size: var(--f-md); font-weight: 700; color: var(--text-3);
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; flex: 0 0 auto;
  transition: color .15s var(--ease);
}
.tabs button:hover { color: var(--text-2); }
.tabs button.on { color: var(--text); border-bottom-color: var(--accent); }
.tabs .cnt { font-size: var(--f-xs); color: var(--text-4); margin-left: 5px; }

.chips { display: flex; gap: var(--s2); flex-wrap: wrap; }
.chip {
  height: 32px; padding: 0 13px; border-radius: var(--r-full);
  border: 1px solid var(--line-2); background: var(--surface);
  font-size: var(--f-sm); font-weight: 700; color: var(--text-2);
  display: inline-flex; align-items: center; gap: 5px; transition: .15s var(--ease);
}
.chip:hover { color: var(--text); border-color: var(--line-3); }
.chip.on { background: var(--accent-soft); border-color: var(--accent-line); color: #7CC2F5; }

.ovl {
  position: fixed; inset: 0; z-index: 200; background: rgba(4, 6, 11, .72);
  display: flex; align-items: center; justify-content: center; padding: var(--s5);
  animation: fade .16s var(--ease);
}
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.985) } to { opacity: 1; transform: none } }
@keyframes slideup { from { transform: translateY(100%) } to { transform: none } }

.modal {
  width: 100%; max-width: 520px;
  
  max-height: calc(100vh - 80px);
  max-height: calc(100dvh - 80px);
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-xl); box-shadow: var(--sh-3);
  display: flex; flex-direction: column; animation: pop .18s var(--ease);
}
.modal-lg { max-width: 720px; }
.modal-hd { display: flex; align-items: center; gap: var(--s3); padding: var(--s5) var(--s5) var(--s3); }
.modal-hd h3 { font-size: var(--f-lg); flex: 1; }
.modal-bd { padding: var(--s2) var(--s5) var(--s5); overflow-y: auto; }
.modal-ft { display: flex; gap: var(--s2); padding: var(--s4) var(--s5); border-top: 1px solid var(--line); }
.modal-ft .btn { flex: 1; }

.toasts {
  position: fixed; z-index: 300; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--mobile-nav-h) + 16px); display: flex; flex-direction: column;
  gap: var(--s2); pointer-events: none; width: min(420px, calc(100vw - 32px));
}
@media (min-width: 861px) { .toasts { bottom: 24px; } }
.toast {
  background: var(--surface-3); border: 1px solid var(--line-2); color: var(--text);
  border-radius: var(--r-md); padding: 12px var(--s4); font-size: var(--f-md); font-weight: 600;
  box-shadow: var(--sh-3); animation: pop .18s var(--ease); display: flex; align-items: center; gap: var(--s2);
}
.toast-ok { border-color: rgba(52,188,133,.4); }
.toast-ok .ti { color: var(--ok); }
.toast-err { border-color: rgba(224,90,90,.4); }
.toast-err .ti { color: var(--danger); }
.toast .ti { flex-shrink: 0; line-height: 0; }

.sk { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
      background-size: 400% 100%; animation: shim 1.3s ease infinite; border-radius: var(--r-sm); }
@keyframes shim { from { background-position: 100% 50% } to { background-position: 0 50% } }
.sk-card { height: 292px; border-radius: var(--r-lg); }
.sk-line { height: 13px; }

.empty { text-align: center; color: var(--text-3); }
.empty p { font-size: var(--f-md); line-height: 1.6; }

.pager { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: var(--s7); flex-wrap: wrap; }
.pager button {
  min-width: 36px; height: 36px; padding: 0 10px; border-radius: var(--r-xs);
  border: 1px solid var(--line); background: var(--surface); color: var(--text-2);
  font-size: var(--f-sm); font-weight: 700;
}
.pager button:hover:not(:disabled) { border-color: var(--line-3); color: var(--text); }
.pager button.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.pager button:disabled { opacity: .35; cursor: not-allowed; }

.note {
  display: flex; gap: var(--s3); padding: 13px var(--s4);
  background: var(--surface-2); border: 1px solid var(--line-2);
  border-radius: var(--r-md); font-size: var(--f-sm); color: var(--text-2); line-height: 1.6;
}
.note .ni { flex-shrink: 0; color: var(--text-3); line-height: 0; margin-top: 2px; }
.note-warn { background: var(--warn-soft); border-color: rgba(217,166,60,.3); color: #E3BC6B; }
.note-warn .ni { color: var(--warn); }
.note-info { background: var(--accent-soft); border-color: var(--accent-line); color: #86C4EE; }
.note-info .ni { color: var(--accent); }

.stars { display: inline-flex; gap: 1px; color: var(--gold); line-height: 0; }
.stars svg { width: 14px; height: 14px; }
.stars .off { color: var(--line-3); }
.stars-lg svg { width: 20px; height: 20px; }

.rate-pick { display: inline-flex; gap: 4px; }
.rate-pick button { color: var(--line-3); line-height: 0; padding: 9px;
                    min-width: 44px; min-height: 44px;
                    display: inline-flex; align-items: center; justify-content: center; }
.rate-pick button.on { color: var(--gold); }
.rate-pick svg { width: 26px; height: 26px; }

.mnav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 70;
  height: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(9,12,19,.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  display: none; align-items: stretch;
}
.mnav a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  
  font-size: 11.5px; font-weight: 700; color: var(--text-3); letter-spacing: .02em; position: relative;
  white-space: nowrap;              
  text-transform: uppercase;        
}

@media (max-width: 380px) {
  
  .mnav a { font-size: 10.5px; letter-spacing: 0; gap: 2px; }
  html[lang="en"] .mnav a { font-size: 9.5px; }
}
.mnav a.on { color: var(--accent); }
.mnav a .dot {
  position: absolute; top: 7px; left: 50%; margin-left: 4px; min-width: 15px; height: 15px; padding: 0 4px;
  background: var(--danger); color: #fff; border-radius: var(--r-full);
  font-size: 9px; font-weight: 800; display: grid; place-items: center;
}
.mnav .sell { color: var(--accent); }

.ftr { border-top: 1px solid var(--line); padding: var(--s7) 0 var(--s8); margin-top: var(--s9); color: var(--text-3); font-size: var(--f-sm); }
.ftr .cols { display: flex; gap: var(--s8); flex-wrap: wrap; margin-bottom: var(--s6); }
.ftr h5 { font-size: var(--f-sm); color: var(--text-2); margin: 0 0 var(--s3); font-weight: 800; }

.ftr a { display: block; padding: 3px 0; }
@media (max-width: 720px) {
  .ftr a { padding: 9px 0; }
}
.ftr a:hover { color: var(--text-2); }
.ftr .fine { line-height: 1.7; max-width: 640px; }

.gimg { position: relative; aspect-ratio: 1/1; display: grid; place-items: center;
        background: radial-gradient(circle at 50% 42%, #263149 0%, #151B29 70%); overflow: hidden; }

.gimg > img, .gimg > svg { width: 76%; height: 76%; object-fit: contain; }
.bgt-onyx-black    { background: radial-gradient(circle at 50% 42%, #23262E 0%, #0E1014 72%); }
.bgt-deep-navy     { background: radial-gradient(circle at 50% 42%, #1E2E52 0%, #0D1424 72%); }
.bgt-charcoal      { background: radial-gradient(circle at 50% 42%, #2E3340 0%, #14171E 72%); }
.bgt-midnight-blue { background: radial-gradient(circle at 50% 42%, #1B3A63 0%, #0B1729 72%); }
.bgt-cocoa         { background: radial-gradient(circle at 50% 42%, #3D2C24 0%, #1A1310 72%); }
.bgt-ivory         { background: radial-gradient(circle at 50% 42%, #4A473F 0%, #22211D 72%); }
.bgt-steel-grey    { background: radial-gradient(circle at 50% 42%, #333A44 0%, #171A20 72%); }
.bgt-emerald       { background: radial-gradient(circle at 50% 42%, #1B4438 0%, #0C1F1A 72%); }
.bgt-burgundy      { background: radial-gradient(circle at 50% 42%, #4A2130 0%, #1F0F16 72%); }
.bgt-sand          { background: radial-gradient(circle at 50% 42%, #46402F 0%, #1E1B15 72%); }

.gcard {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
  transition: border-color .16s var(--ease), transform .16s var(--ease), box-shadow .16s var(--ease);
}
.gcard:hover { border-color: var(--line-3); transform: translateY(-2px); box-shadow: var(--sh-2); }
.gimg > .st { position: absolute; top: 9px; left: 9px; z-index: 2; }
.detail-img .gimg > .st { top: 14px; left: 14px; }

.gcard .fav {
  
  position: absolute; top: 7px; right: 7px; border-radius: 50%; z-index: 2;
  display: grid; place-items: center; color: var(--text-2);
  background: rgba(9,12,19,.55); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.07);
  transition: .15s var(--ease);
}
.gcard .fav:hover { color: var(--text); background: rgba(9,12,19,.8); }
.gcard .fav.on { color: #F0716F; }
.gcard-bd { padding: var(--s3) 13px 13px; display: flex; flex-direction: column; gap: var(--s2); flex: 1; }
.gcard-nm { font-size: var(--f-md); font-weight: 700; line-height: 1.35; }
.gcard-nm .num { color: var(--text-3); font-weight: 600; }
.gtraits { display: flex; gap: 4px; flex-wrap: wrap; }
.gtrait {
  font-size: 11px; font-weight: 700; color: var(--text-3);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-xs);
  padding: 2px 6px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gprice { font-size: var(--f-lg); font-weight: 800; letter-spacing: -.01em; margin-top: auto; }
.gprice .u { font-size: var(--f-sm); font-weight: 700; color: var(--text-3); margin-left: 3px; }
.gseller { display: flex; align-items: center; gap: 6px; padding-top: 9px; border-top: 1px solid var(--line); }

.gseller .nm { font-size: var(--f-sm); font-weight: 700; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 4.5em; }
.gseller .rt { font-size: var(--f-xs); color: var(--text-3); margin-left: auto; display: flex; align-items: center; gap: 3px; white-space: nowrap; }
.gtime { font-size: var(--f-xs); color: var(--text-4); }

.gcard-row { display: flex; gap: var(--s3); padding: var(--s3); align-items: center; }
.gcard-row .gimg { width: 68px; height: 68px; border-radius: var(--r-sm); flex-shrink: 0; aspect-ratio: auto; }

.ggrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: var(--s4); }

.ggrid-4c { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); }

.homefoot { display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--s4); }
.homefoot h2 { font-size: var(--f-lg); }
.homefoot .row-b > a, .homefoot .stack > a { padding: 5px 0; }
.ggrid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); }
.grail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(212px, 1fr); gap: var(--s4); overflow-x: auto; padding-bottom: 4px; }

.scard { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4);
         background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
         transition: border-color .16s var(--ease), transform .16s var(--ease); }
.scard:hover { border-color: var(--line-3); transform: translateY(-2px); }
.scard-top { display: flex; align-items: center; gap: var(--s3); }
.scard-nm { font-size: var(--f-base); font-weight: 800; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.scard-tg { font-size: var(--f-xs); color: var(--text-3); }
.scard-stats { display: flex; gap: var(--s4); font-size: var(--f-xs); color: var(--text-3); }
.scard-stats b { display: block; font-size: var(--f-md); color: var(--text); font-weight: 800; }

.trust { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; font-size: var(--f-sm); color: var(--text-2); }
.trust .dv { color: var(--line-3); }

.hero { padding: var(--s9) 0 var(--s8); text-align: center; position: relative; }

.hero::before {
  content: ''; position: absolute; inset: -10% 0 auto; height: 380px; z-index: -1;
  background: radial-gradient(ellipse 92% 100% at 50% 0%, rgba(61,158,232,.09), transparent 72%);
}
.hero h1 { font-size: var(--f-4xl); letter-spacing: -.02em; margin-bottom: var(--s3); }
.hero .lead { font-size: var(--f-lg); color: var(--text-2); max-width: 620px; margin: 0 auto var(--s6); line-height: 1.6; }
.hero .eyebrow {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: var(--s4);
  padding: 5px 13px; border-radius: var(--r-full); font-size: var(--f-xs); font-weight: 800;
  letter-spacing: .06em; color: #86C4EE; background: var(--accent-soft); border: 1px solid var(--accent-line);
}

.bigsearch { position: relative; max-width: 660px; margin: 0 auto; }
.bigsearch input {
  width: 100%; height: 58px; padding: 0 128px 0 50px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-full);
  font-size: var(--f-lg); color: var(--text); box-shadow: var(--sh-2);
  transition: border-color .16s var(--ease);
}
.bigsearch input:focus { border-color: var(--accent-line); }
.bigsearch input::placeholder { color: var(--text-4); }
.bigsearch .ico { position: absolute; left: 19px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.bigsearch .go { position: absolute; right: 7px; top: 7px; height: 44px; padding: 0 var(--s5); border-radius: var(--r-full); }
.bigsearch-scope { display: flex; justify-content: center; gap: var(--s2); margin-top: var(--s3); }

.examples { display: flex; justify-content: center; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s4); }
.examples span { font-size: var(--f-sm); color: var(--text-4); align-self: center; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); margin: var(--s8) 0 var(--s9); }
.stat { padding: var(--s4) var(--s5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.stat b { display: block; font-size: var(--f-2xl); font-weight: 800; letter-spacing: -.02em; }
.stat span { font-size: var(--f-xs); color: var(--text-3); font-weight: 700; letter-spacing: .04em; }

.sugg {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 90;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-md);
  box-shadow: var(--sh-3); overflow: hidden; max-height: 440px; overflow-y: auto;
}

.sugg-h { padding: 9px var(--s4) 5px; font-size: 11px; font-weight: 800; color: var(--text-4); letter-spacing: .06em;
          text-transform: uppercase; }
.sugg-i { display: flex; align-items: center; gap: var(--s3); padding: 9px var(--s4); cursor: pointer; }
.sugg-i:hover, .sugg-i.on { background: var(--surface-2); }
.sugg-i .gimg { width: 36px; height: 36px; border-radius: var(--r-xs); aspect-ratio: auto; flex-shrink: 0; }
.sugg-i .t { font-size: var(--f-md); font-weight: 700; }
.sugg-i .s { font-size: var(--f-xs); color: var(--text-3); }
.sugg-i .p { margin-left: auto; font-size: var(--f-md); font-weight: 800; white-space: nowrap; }

.rvcard { padding: var(--s4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
          display: flex; flex-direction: column; gap: var(--s2); }
.rvcard .txt { font-size: var(--f-md); color: var(--text-2); line-height: 1.6; }
.rvcard .meta { font-size: var(--f-xs); color: var(--text-4); }

.market { display: grid; grid-template-columns: 244px 1fr; gap: var(--s6); align-items: start; }
.filters { position: sticky; top: calc(var(--header-h) + 16px); }
.fgroup { border-bottom: 1px solid var(--line); padding: var(--s4) 0; }
.fgroup:first-child { padding-top: 0; }
.fgroup:last-child { border-bottom: 0; }
.fgroup > h4 { font-size: var(--f-sm); font-weight: 800; color: var(--text-2); margin-bottom: var(--s3); display: flex; align-items: center; justify-content: space-between; }
.fgroup .opts { display: flex; flex-direction: column; gap: 2px; max-height: 232px; overflow-y: auto; }
.fopt {
  display: flex; align-items: center; gap: var(--s2); padding: 6px 8px; border-radius: var(--r-xs);
  font-size: var(--f-sm); color: var(--text-2); cursor: pointer; transition: background .13s var(--ease);
}
.fopt:hover { background: var(--surface-2); color: var(--text); }
.fopt.on { background: var(--accent-soft); color: #7CC2F5; font-weight: 700; }
.fopt .c { margin-left: auto; font-size: var(--f-xs); color: var(--text-4); }
.fprice { display: flex; align-items: center; gap: 6px; }
.fprice .input { height: 36px; font-size: var(--f-sm); }
.fprice span { color: var(--text-4); }

.mbar { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); flex-wrap: wrap; }
.mbar .select, .mbar .input { width: auto; min-width: 150px; }
.mbar #mfilter { display: none; }   
.mbar .cnt { font-size: var(--f-md); color: var(--text-2); font-weight: 600; }
.mbar .cnt b { color: var(--text); font-weight: 800; }
.mbar .spacer { flex: 1; }
.applied { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--s4); }
.applied .chip { height: 28px; font-size: var(--f-xs); }

.detail { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: var(--s7); align-items: start; }
.detail-img { border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line); }
.detail-img .gimg { aspect-ratio: 1/1; }
.detail h1 { font-size: var(--f-3xl); letter-spacing: -.02em; }
.detail h1 .num { color: var(--text-3); font-weight: 700; }
.price-big { font-size: var(--f-4xl); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.price-big .u { font-size: var(--f-xl); color: var(--text-3); margin-left: 6px; }

.kv { display: grid; grid-template-columns: 96px 1fr; gap: 10px var(--s4); font-size: var(--f-md); }
.kv dt { color: var(--text-3); font-weight: 600; }
.kv dd { margin: 0; font-weight: 700; }

.sellerbox { padding: var(--s4); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); }
.sellerbox .top { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
.sellerbox .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); text-align: center; }
.sellerbox .grid div { padding: 9px 4px; background: var(--surface); border-radius: var(--r-xs); }
.sellerbox .grid b { display: block; font-size: var(--f-base); font-weight: 800; }
.sellerbox .grid span { font-size: 11px; color: var(--text-3); }

.actionbar { display: flex; gap: var(--s2); flex-wrap: wrap; min-width: 0; }
.actionbar > .btn { min-width: 0; }
.copybox {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: var(--s3); font-size: var(--f-sm); color: var(--text-2); line-height: 1.65;
  white-space: pre-wrap; margin-bottom: var(--s3);
}

.profile-hd { display: flex; gap: var(--s5); align-items: flex-start; padding-bottom: var(--s6); flex-wrap: wrap; }
.profile-hd .who { flex: 1; min-width: 240px; }
.profile-hd h1 { font-size: var(--f-2xl); display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.ratebox { display: flex; align-items: center; gap: var(--s5); padding: var(--s4) var(--s5);
           background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); flex-wrap: wrap; }
.ratebox .big { font-size: var(--f-3xl); font-weight: 800; line-height: 1; }
.ratebox .brk { display: flex; gap: var(--s5); font-size: var(--f-xs); color: var(--text-3); }
.ratebox .brk b { display: block; font-size: var(--f-md); color: var(--text); }
.mini-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); }
.mini-stats div { padding: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); text-align: center; }
.mini-stats b { display: block; font-size: var(--f-lg); font-weight: 800; }
.mini-stats span { font-size: 11px; color: var(--text-3); }

.review { padding: var(--s4) 0; border-bottom: 1px solid var(--line); display: flex; gap: var(--s3); }
.review:last-child { border-bottom: 0; }
.review .bd { flex: 1; min-width: 0; }
.review .hd { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin-bottom: 5px; }
.review .who { font-size: var(--f-md); font-weight: 700; }
.review .txt { font-size: var(--f-md); color: var(--text-2); line-height: 1.65; }
.review .sub { font-size: var(--f-xs); color: var(--text-4); margin-top: 5px; }

.plist { border-top: 1px solid var(--line); }
.pitem { display: flex; gap: var(--s4); padding: var(--s4) var(--s2); border-bottom: 1px solid var(--line); transition: background .13s var(--ease); }
.pitem:hover { background: var(--surface); }
.pitem .bd { flex: 1; min-width: 0; }
.pitem .cat { font-size: var(--f-xs); font-weight: 800; color: var(--accent); letter-spacing: .04em; }
.pitem h3 { font-size: var(--f-base); margin: 3px 0 5px; }
.pitem .ex { font-size: var(--f-sm); color: var(--text-3); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pitem .meta { display: flex; align-items: center; gap: var(--s3); font-size: var(--f-xs); color: var(--text-4); margin-top: 8px; flex-wrap: wrap; }
.pitem .thumb { width: 82px; height: 82px; border-radius: var(--r-sm); object-fit: cover; flex-shrink: 0; background: var(--surface-2); }

.postbody { font-size: var(--f-base); line-height: 1.8; color: var(--text); white-space: pre-wrap; }
.postbody img { border-radius: var(--r-md); margin: var(--s3) 0; display: block; }

.cmt { display: flex; gap: var(--s3); padding: var(--s4) 0; border-top: 1px solid var(--line); }
.cmt.reply { padding-left: var(--s7); }
.cmt .bd { flex: 1; min-width: 0; }
.cmt .who { font-size: var(--f-sm); font-weight: 700; }
.cmt .txt { font-size: var(--f-md); color: var(--text-2); line-height: 1.65; white-space: pre-wrap; margin-top: 3px; }
.cmt .acts { display: flex; gap: var(--s3); margin-top: 7px; font-size: var(--f-xs); color: var(--text-4); }
.cmt .acts button:hover { color: var(--text-2); }
.cmt .acts button.on { color: var(--accent); }

.gpv { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3);
       background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-md); margin-top: var(--s3); max-width: 420px; }
.gpv .gimg { width: 48px; height: 48px; border-radius: var(--r-xs); aspect-ratio: auto; flex-shrink: 0; }
.gpv .t { font-size: var(--f-sm); font-weight: 700; }
.gpv .s { font-size: var(--f-xs); color: var(--text-3); }
.gpv .p { margin-left: auto; font-size: var(--f-md); font-weight: 800; white-space: nowrap; }

.nitem { display: flex; gap: var(--s3); padding: var(--s4) var(--s3); border-bottom: 1px solid var(--line); }
.nitem.unread { background: var(--accent-soft); }
.nitem .ic { width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center;
             background: var(--surface-3); color: var(--text-2); flex-shrink: 0; }
.nitem .t { font-size: var(--f-md); font-weight: 700; }
.nitem .b { font-size: var(--f-sm); color: var(--text-3); margin-top: 2px; }
.nitem .w { font-size: var(--f-xs); color: var(--text-4); margin-top: 4px; }

.adm { display: grid; grid-template-columns: 210px 1fr; gap: var(--s6); align-items: start; }
.admnav { position: sticky; top: calc(var(--header-h) + 16px); display: flex; flex-direction: column; gap: 2px; }
.admnav button {
  display: flex; align-items: center; gap: var(--s2); padding: 9px 12px; border-radius: var(--r-sm);
  font-size: var(--f-md); font-weight: 700; color: var(--text-2); text-align: left; width: 100%;
}
.admnav button:hover { background: var(--surface-2); color: var(--text); }
.admnav button.on { background: var(--surface-3); color: var(--text); }
.admnav .n { margin-left: auto; font-size: 11px; font-weight: 800; padding: 1px 6px; border-radius: var(--r-full);
             background: var(--danger); color: #fff; }
.adm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: var(--s3); margin-bottom: var(--s6); }
.dtable { font-size: var(--f-sm); }
.dtable th { text-align: left; font-size: var(--f-xs); color: var(--text-3); font-weight: 800;
             padding: 9px var(--s3); border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.dtable td { padding: 11px var(--s3); border-bottom: 1px solid var(--line); vertical-align: middle; }
.dtable tr:hover td { background: var(--surface-2); }
.tblwrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }

.tblwrap > table { min-width: 640px; }
.tblwrap > table td, .tblwrap > table th { overflow-wrap: normal; word-break: keep-all; }

@media (max-width: 1180px) { .hsearch { display: none; } }

@media (max-width: 980px) {
  #sellBtn { display: none; }
  .hdr-r { gap: 6px; }
}

@media (max-width: 1100px) {
  .detail { grid-template-columns: 1fr; }
  .detail-img { max-width: 460px; }
  .ggrid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ggrid-4c { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .market { grid-template-columns: 1fr; }
  .filters { display: none; }
  .mbar #mfilter { display: inline-flex; }
  .adm { grid-template-columns: 1fr; }
  .admnav { position: static; flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
  .admnav button { white-space: nowrap; width: auto; }
}

@media (max-width: 980px) {
  .gnb { display: none; }
  .mnav { display: flex; }
  .page { padding-bottom: calc(var(--mobile-nav-h) + var(--s8)); }
  .ftr { margin-bottom: var(--mobile-nav-h); }
}

@media (max-width: 860px) {
  :root { --header-h: 56px; }
  .wrap { padding: 0 var(--s4); }
  .page { padding: var(--s5) 0 calc(var(--mobile-nav-h) + var(--s8)); }

  .hero { padding: var(--s7) 0 var(--s6); }
  .hero h1 { font-size: var(--f-2xl); }
  .hero .lead { font-size: var(--f-md); margin-bottom: var(--s5); }
  .bigsearch input { height: 50px; font-size: var(--f-base); padding: 0 16px 0 44px; }
  .bigsearch .go { display: none; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: var(--s2); margin: var(--s6) 0 var(--s7); }
  .stat { padding: var(--s3) var(--s4); }
  .stat b { font-size: var(--f-xl); }

  
  .ggrid, .ggrid-4c { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
  .homefoot { grid-template-columns: 1fr; }
  .grail { grid-auto-columns: 34%; gap: var(--s3); }
  .gcard-bd { padding: 10px 11px 11px; gap: 6px; }
  .gcard-nm { font-size: var(--f-sm); }
  .gprice { font-size: var(--f-base); }
  .sec { margin-bottom: var(--s7); }
  .sec-hd h2 { font-size: var(--f-lg); }

  .detail h1 { font-size: var(--f-xl); }
  .price-big { font-size: var(--f-2xl); }
  .detail-img { max-width: 100%; }
  .mini-stats { grid-template-columns: repeat(2, 1fr); }
  .profile-hd { gap: var(--s4); }

  
  .ovl { align-items: flex-end; padding: 0; }
  .modal { max-width: 100%; max-height: 88vh; max-height: 88dvh;
           border-radius: var(--r-xl) var(--r-xl) 0 0;
           border-left: 0; border-right: 0; border-bottom: 0; animation: slideup .22s var(--ease);
           padding-bottom: env(safe-area-inset-bottom); }
  .modal-ft { position: sticky; bottom: 0; background: var(--surface); }

  .pitem .thumb { width: 64px; height: 64px; }
  .ftr .cols { gap: var(--s6); }
}

@media (max-width: 620px) {
  .ggrid, .ggrid-4c { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ggrid-4 { grid-template-columns: 1fr; }
  .grail { grid-auto-columns: 46%; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 380px) {
  .gtraits { display: none; }   
}

@media (hover: none) {
  .btn-sm { height: 36px; }
  .cmt .acts button { padding: 4px 0; }
  
}

.tgbox {
  border-color: rgba(42, 160, 218, .32);
  background: linear-gradient(180deg, rgba(42, 160, 218, .07), transparent 62%), var(--surface);
}
.tgbox .tgrow { align-items: stretch; }

.tgbox .tgrow .input { min-width: 200px; height: 42px; flex: 1 1 auto; }
.tgbox .btn-tg { flex-shrink: 0; }
.tgfound { align-items: flex-start; }
.tgtraits { display: flex; gap: 5px; flex-wrap: wrap; margin: 7px 0 4px; }
.tgtraits .gtrait { font-size: var(--f-xs); }

.srcline {
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  font-size: var(--f-sm); color: var(--text-3);
}
.srcline a { color: #56B6E8; font-weight: 700; }
.srcline a:hover { text-decoration: underline; }
.addr {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--f-xs); color: var(--text-3);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-xs); padding: 2px 7px;
  overflow-wrap: anywhere;
}
.kv dd .rar { font-size: var(--f-xs); color: var(--text-3); font-weight: 700; margin-left: 5px; }

@media (max-width: 620px) {
  .tgbox .tgrow { flex-direction: column; }
  .tgbox .tgrow .btn { width: 100%; }
}

.imgrow { align-items: center; }
.imgrow #imgNote b { font-size: var(--f-md); }

.badge-premium {
  color: #C08BE8; background: rgba(192, 139, 232, .13); border-color: rgba(192, 139, 232, .34);
}

.statechip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--r-full); font-size: 11px; font-weight: 700;
  color: var(--text-3); background: var(--surface-3); border: 1px solid var(--line);
}
.statechip.ok   { color: var(--ok);   background: var(--ok-soft);   border-color: transparent; }
.statechip.wait { color: var(--warn); background: var(--warn-soft); border-color: transparent; }
.statechip.off  { color: var(--danger); background: var(--danger-soft); border-color: transparent; }
.badge-off { color: var(--text-3); background: var(--surface-3); border-color: var(--line); }

.trustwhy { display: grid; }
.trustwhy .twgrid { display: grid; grid-template-columns: repeat(3, 1fr); }
.trustwhy .tw { display: grid; gap: 6px; align-content: start; }
.trustwhy .tw p { margin: 0; line-height: 1.55; }
@media (max-width: 720px) { .trustwhy .twgrid { grid-template-columns: 1fr; } }

.gcard .pflag {
  position: absolute; left: 8px; bottom: 8px; z-index: 2;
  padding: 2px 7px; border-radius: var(--r-full);
  font-size: 10px; font-weight: 800; letter-spacing: .02em;
  color: #C08BE8; background: rgba(20, 16, 28, .78);
  border: 1px solid rgba(192, 139, 232, .38); backdrop-filter: blur(4px);
}

.prodgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.langbtn {
  height: 34px; min-width: 38px; padding: 0 9px; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: var(--surface);
  color: var(--text-2); font-size: var(--f-xs); font-weight: 800; letter-spacing: .04em;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: .15s var(--ease);
}
.langbtn { gap: 5px; }
.langbtn svg { flex-shrink: 0; opacity: .8; }
.langbtn:hover { color: var(--text); border-color: var(--line-3); }
.langbtn:hover svg { opacity: 1; }
@media (max-width: 1180px) { .langbtn { min-width: 34px; padding: 0 7px; font-size: 11px; } }

.spgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
          gap: var(--s3); margin-bottom: var(--s6); }
.spcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s4); }
.sphd { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s3); }
.sphd span { font-size: var(--f-xs); color: var(--text-3); font-weight: 800; letter-spacing: .04em; }
.sphd b { font-size: var(--f-xl); font-weight: 800; letter-spacing: -.02em; }   

.spark { display: block; width: 100%; height: 56px; }
.spark rect.v { fill: currentColor; }
.spark rect.z { fill: var(--line-2); }      
.spft { display: flex; justify-content: space-between; gap: var(--s2); white-space: nowrap; margin-top: 6px; font-size: 11px; color: var(--text-4); }

.sp-a { color: var(--accent); }
.sp-b { color: var(--tier-active); }
.sp-c { color: var(--ok); }
.sp-d { color: var(--gold); }
.sp-e { color: var(--text-2); }

.sp-f { color: #56B6E8; }

.langbar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--line-2); }
.langbar i { display: block; height: 100%; }
.langbar .lk { background: var(--accent); }
.langbar .le { background: #56B6E8; }
.langlg { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: 8px; font-size: var(--f-sm); color: var(--text-2); }
.langlg b { color: var(--text); }
.langlg i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: baseline; }

.statcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
            gap: var(--s4); margin-bottom: var(--s5); }
.kvrow { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
         padding: 7px 0; border-bottom: 1px solid var(--line); }
.kvrow:last-of-type { border-bottom: 0; }
.kvrow span { font-size: var(--f-sm); color: var(--text-2); }
.kvrow b { font-weight: 800; }
.kvrow b.hot { color: var(--warn); }        

.admh { margin: var(--s6) 0 var(--s3); font-size: var(--f-lg); color: var(--text); }
.admh:first-child { margin-top: 0; }

.adm #admbody { min-width: 0; }

.badgecell { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); }

.stat { position: relative; }
.stat .stat-today {
  display: block; margin-top: 2px;
  font-size: var(--f-xs); font-style: normal; font-weight: 800;
  color: var(--ok);
}

[hidden] { display: none !important; }

.stickycta {
  position: fixed; left: 0; right: 0; z-index: 90;
  bottom: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom));
  padding: var(--s2) var(--s4) var(--s3);
  background: linear-gradient(180deg, rgba(9,12,19,0) 0%, var(--bg) 34%);
  animation: ctaUp .24s var(--ease-out);
}
@keyframes ctaUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.stickycta .sc-in {
  display: flex; align-items: center; gap: var(--s3);
  max-width: var(--wrap); margin: 0 auto;
  padding: var(--s2) var(--s2) var(--s2) var(--s4);
  border: 1px solid var(--line-2); border-radius: var(--r-full);
  background: var(--surface); box-shadow: var(--sh-3);
}
.stickycta .sc-info { display: grid; min-width: 0; }
.stickycta .sc-info b { font-size: var(--f-lg); line-height: 1.2; }

.stickycta .sc-info > span:not(.tonprice) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--f-xs); }
.stickycta .btn { flex-shrink: 0; height: 42px; padding: 0 var(--s5); border-radius: var(--r-full); }

@media (min-width: 861px) { .stickycta { display: none; } }

.authbox { max-width: 440px; margin: var(--s8) auto; }

.pendico { line-height: 0; }
.pendico.is-info { color: var(--accent); }
.pendico.is-warn { color: var(--warn); }

.pendsteps .pstep { align-items: flex-start; }
.pendsteps .stepno {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; line-height: 0;
  font-size: var(--f-xs); font-weight: 800;
  background: var(--surface-3); color: var(--text-3);
}
.pendsteps .pstep.done .stepno { background: var(--ok-soft); color: var(--ok); }
.pendsteps .pstep.now  .stepno { background: var(--accent-soft); color: var(--accent); }

.pendsteps .livedot, .pendsteps .livedot::after { background: var(--accent); }

.prodgrid { gap: var(--s4); margin-bottom: var(--s5); }
.prodcard .prodprice { color: var(--text); font-weight: 800; }

.sellerside, .mystats { min-width: 300px; }

.ratebox.trustbox { align-items: stretch; }
.trustbox .rt-top { display: flex; align-items: baseline; gap: var(--s2); }
.trustbox .big { font-size: var(--f-4xl); font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.trustbox .rt-of { font-size: var(--f-sm); font-weight: 700; color: var(--text-4); }

.trustbox.is-none .big { color: var(--text-3); }

.trustbox .rbar {
  display: block; height: 6px; border-radius: var(--r-full);
  background: var(--surface-3); overflow: hidden;
}
.trustbox .rbar > i {
  display: block; height: 100%; width: 0; border-radius: inherit;
  background: var(--gold);
  transition: width var(--t-slow) var(--ease-out);
}
.trustbox.is-none .rbar > i { background: var(--line-3); }

.trustwhy { padding: var(--s5); gap: var(--s4); margin-bottom: var(--s5); }
.trustwhy .twgrid { gap: var(--s5); }
.trustwhy .tw-hd {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s3); flex-wrap: wrap;
}
.trustwhy .tw { padding-left: var(--s4); border-left: 2px solid var(--line); }
.trustwhy .tw-top { flex-wrap: wrap; }
.trustwhy .twno {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 800;
  background: var(--surface-3); color: var(--text-3);
}

.trustwhy .tw-caution { border-left-color: var(--warn); }
.trustwhy .tw-caution p b { color: var(--warn); font-weight: 800; }
@media (max-width: 720px) { .trustwhy .twgrid { gap: var(--s4); } }

.rbrk { margin-bottom: var(--s4); }
.rbrk .brkgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.rbrk .brki { display: grid; gap: 5px; align-content: start; }
.rbrk .brki .lb { font-size: var(--f-xs); color: var(--text-3); }
.rbrk .brki b { font-size: var(--f-lg); font-weight: 800; line-height: 1.1; }
.rbrk .brki .bar {
  display: block; height: 5px; border-radius: var(--r-full);
  background: var(--surface-3); overflow: hidden;
}
.rbrk .brki .bar > i {
  display: block; height: 100%; width: 0; border-radius: inherit;
  background: var(--accent);
  transition: width var(--t-slow) var(--ease-out);
}

.actrow .actic {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: var(--r-sm);
  display: grid; place-items: center; line-height: 0;
  color: var(--text-3); background: var(--surface-3);
  transition: color var(--t-base) var(--ease-out), background-color var(--t-base) var(--ease-out);
}
@media (hover: hover) {
  .actrow:hover .actic { color: var(--accent); background: var(--accent-soft); }
}

.sellertabs { margin-top: var(--s5); }
.metabs button.on, .sellertabs button.on {
  font-weight: 800;
  background: linear-gradient(180deg, transparent 45%, var(--accent-soft) 100%);
  border-radius: var(--r-xs) var(--r-xs) 0 0;
}
.metabs button.on .cnt, .sellertabs button.on .cnt { color: var(--accent); font-weight: 800; }

.cfhd { display: flex; align-items: center; gap: var(--s4); margin-bottom: var(--s4); }
.cfhd .cfhd-n {
  min-width: 46px; height: 46px; padding: 0 10px; flex-shrink: 0;
  display: grid; place-items: center; border-radius: var(--r-md);
  font-size: var(--f-xl); font-weight: 800;
  color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line);
}
.cflist { display: grid; gap: var(--s3); margin-top: var(--s4); }
.cfcard { display: grid; gap: var(--s3); }
.cfwho { display: flex; align-items: center; gap: var(--s3); }
.cfwho .who { font-size: var(--f-md); font-weight: 700; display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.cfwho .sub { font-size: var(--f-xs); color: var(--text-4); margin-top: 2px; }
.cfgift {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); flex-wrap: wrap;
  padding: var(--s3) var(--s4); border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--line);
}
.cfgift .cf-nm { font-size: var(--f-md); font-weight: 700; }
.cfgift .cf-nm .num { color: var(--text-3); font-weight: 700; }
.cfgift .cf-ton { font-size: var(--f-lg); font-weight: 800; }
.cfgift .cf-ton .u { font-size: var(--f-xs); color: var(--text-3); margin-left: 4px; font-weight: 700; }
.cfact { display: flex; gap: var(--s2); flex-wrap: wrap; }
.cfact .btn { height: 44px; flex: 1 1 140px; font-size: var(--f-md); font-weight: 700; }
.cfact .cf-yes { gap: 6px; }

.cfact .cf-no { border-color: var(--line-3); color: var(--text-2); }
.cfact .cf-no:hover { border-color: var(--danger); color: #F08585; background: var(--danger-soft); }

.rankboard .rankrow {
  align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s2);
  border-radius: var(--r-sm);
  transition: background-color var(--t-base) var(--ease-out);
}
@media (hover: hover) { .rankboard .rankrow:hover { background: var(--surface-2); } }
.rankboard .rankno {
  width: 30px; height: 30px; flex-shrink: 0;
  display: grid; place-items: center; border-radius: 50%;
  font-size: var(--f-md); font-weight: 800; color: var(--text-4);
  font-variant-numeric: tabular-nums;
}
.rankboard .rankrow.top1 .rankno { background: var(--gold); color: var(--bg); box-shadow: var(--sh-1); }
.rankboard .rankrow.top2 .rankno,
.rankboard .rankrow.top3 .rankno { background: var(--gold-soft); color: var(--gold); }
.rankboard .rankrow.top .bd b { font-size: var(--f-base); }
.rankboard .rankval { flex-shrink: 0; font-size: var(--f-md); color: var(--text-2); }
.rankboard .rankrow.top1 .rankval { color: var(--text); }

.notiwrap { max-width: 760px; margin: 0 auto; }

.notiwrap .unreadchip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--r-full);
  font-size: var(--f-xs); font-weight: 800;
  color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line);
}
.notiwrap .nsk { height: 66px; border-radius: var(--r-md); margin-bottom: var(--s2); }

#nlist .nitem {
  position: relative; align-items: flex-start;
  padding: var(--s4); margin-bottom: var(--s2);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color var(--t-base) var(--ease-out),
              background-color var(--t-base) var(--ease-out);
}
#nlist .nitem.unread { background: var(--accent-soft); border-color: var(--accent-line); }
#nlist .nitem.unread .t { color: var(--text); font-weight: 800; }
#nlist .nitem.unread .ic { color: var(--accent); }
@media (hover: hover) { #nlist .nitem:hover { border-color: var(--line-3); background: var(--surface-2); } }
@media (hover: hover) { #nlist .nitem.unread:hover { border-color: var(--accent); background: var(--accent-soft); } }

.ndot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
#nlist .nitem .ndot { margin-top: 6px; }

.sellersbar .sq { max-width: 260px; }
.scount { font-size: var(--f-sm); font-weight: 700; color: var(--text-3); white-space: nowrap; }

.sec-hd .cnt {
  font-size: var(--f-xs); font-weight: 800; color: var(--text-3);
  padding: 2px 8px; border-radius: var(--r-full);
  background: var(--surface-2); border: 1px solid var(--line);
}

.pk-hd { margin-bottom: 6px; }
.pkval { font-size: var(--f-sm); font-weight: 800; color: var(--gold); min-height: 20px; }
.rate-pick button { transition: transform var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); }
.rate-pick button:active { transform: scale(.9); }

@media (max-width: 640px) {
  .trustbox .big { font-size: var(--f-3xl); }
  .sellerside, .mystats { min-width: 0; width: 100%; }
  .rbrk .brkgrid { gap: var(--s3); }
  .cfact .btn { flex: 1 1 100%; }
  .sellersbar .sq { max-width: none; flex: 1 1 100%; }
  .rankboard .rankrow { gap: var(--s2); padding: var(--s3) 0; }
  .rankboard .rankval { font-size: var(--f-sm); }
}

.admsk { display: flex; flex-direction: column; gap: var(--s2); }
.admsk-bar { height: 44px; border-radius: var(--r-md); }
.admsk-row { height: 38px; border-radius: var(--r-sm); }

.admh-top { margin-top: 0; }
.admq {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: var(--s3); margin-bottom: var(--s6);
}
.qitem {
  position: relative;                     
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4) var(--s5);
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-md);
  box-shadow: inset 3px 0 0 var(--warn);  
  transition: transform var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out),
              background-color var(--t-base) var(--ease-out);
}
.qitem .qi { flex-shrink: 0; line-height: 0; color: var(--warn); }
.qitem .ql { font-size: var(--f-md); font-weight: 700; color: var(--text); }
.qitem .qn {
  margin-left: auto; font-size: var(--f-2xl); font-weight: 800;
  letter-spacing: -.02em; color: var(--warn);
}
.qitem .qgo {
  flex-shrink: 0; line-height: 0; color: var(--text-4);
  transition: transform var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out);
}
@media (hover: hover) {
  .qitem:hover { transform: translateY(-2px); background: var(--surface-2); border-color: var(--line-3); }
  .qitem:hover .qgo { transform: translateX(3px); color: var(--text-2); }
}
.qitem:active { transform: translateY(0) scale(.995); }

.qclear {
  grid-column: 1 / -1;
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: var(--s4) var(--s5);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: inset 3px 0 0 var(--ok);
}
.qclear .qi.ok { flex-shrink: 0; line-height: 0; margin-top: 2px; color: var(--ok); }
.qclear b { font-size: var(--f-base); }

.admh-live { display: flex; align-items: center; gap: var(--s2); }
.admh-when { margin-left: auto; font-size: var(--f-xs); font-weight: 600; color: var(--text-4); }
.stat.st-now { background: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%); border-color: var(--line-2); }

.adm-today { grid-template-columns: repeat(auto-fit, minmax(min(148px, 100%), 1fr)); max-width: 520px; }

.adm .dtable td.tnum, .adm .dtable th.num { text-align: right; }
.adm .dtable .nowrap { white-space: nowrap; }
.adm .dtable tbody tr:nth-child(even) td { background: var(--bg-2); }
.adm .dtable tbody tr:hover td { background: var(--surface-2); }   
.adm .dtable td { transition: background-color var(--t-fast) var(--ease-out); }

.adm .dtable tbody tr.rowwait td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.admlist .panel.rowwait-p { box-shadow: inset 3px 0 0 var(--warn); }
.admlist { gap: 10px; }
@media (hover: hover) { .admlist .panel:hover { border-color: var(--line-2); } }

@keyframes admRowDone { from { background: var(--ok-soft); } to { background: transparent; } }
.adm .dtable tbody tr.rowdone td { animation: admRowDone 1.4s var(--ease-out) 1; }

.waitfor { font-size: 11px; font-weight: 700; color: var(--warn); }

.adm .tglink { color: var(--accent); font-weight: 700; }
.adm .tglink:hover { text-decoration: underline; }

.logact {
  display: inline-block; padding: 1px 6px; white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--f-xs); font-weight: 700; color: var(--text-2);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-xs);
}

.adm .ordtbl th.c-paid, .adm .ordtbl td.c-paid { color: var(--text); }
.adm .ordtbl td.c-paid { font-weight: 700; }
.adm .ordtbl th.c-granted, .adm .ordtbl td.c-granted { color: var(--text-3); }
.adm .ordtbl th.gsep, .adm .ordtbl td.gsep { border-left: 1px solid var(--line-2); }
.statcols .kvrow b.paid { color: var(--ok); }
.statcols .kvrow b.granted { color: var(--text-3); }
.adm .dtable tbody tr.ord-paid td:first-child { box-shadow: inset 3px 0 0 var(--ok); }
.adm .dtable tbody tr.ord-granted td:first-child { box-shadow: inset 3px 0 0 var(--text-4); }

.spcard {
  transition: transform var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}
.spark rect { transition: opacity var(--t-fast) var(--ease-out); }
@media (hover: hover) {
  .spcard:hover { transform: translateY(-2px); border-color: var(--line-2); box-shadow: var(--sh-2); }
  .spcard:hover .spark rect.v { opacity: .32; }
  .spcard .spark rect.v:hover { opacity: 1; }
}

.spcard .spft .spd { font-weight: 800; }
.spcard .spft .spd.up { color: var(--ok); }
.spcard .spft .spd.down { color: var(--danger); }
.spcard .spft .spd.flat { color: var(--text-4); }

.mbar .aq { max-width: 280px; }
.adm .adm-st { height: 32px; font-size: var(--f-sm); }
.rpact { max-width: 180px; height: 34px; }
.rpmemo { max-width: 240px; height: 34px; }
.tsel { max-width: 160px; }
.mem-days { max-width: 110px; }

@media (max-width: 720px) {
  .admq { grid-template-columns: 1fr; }
  .qitem { padding: var(--s3) var(--s4); }
  .qitem .qn { font-size: var(--f-xl); }
  .rpact, .rpmemo { max-width: none; width: 100%; }
}

.cml-t-gen   { --cml-tone: var(--text-3); }
.cml-t-alert { --cml-tone: var(--danger); }   
.cml-t-want  { --cml-tone: var(--warn); }     
.cml-t-deal  { --cml-tone: var(--ok); }       
.cml-t-price { --cml-tone: var(--accent); }   
.cml-t-show  { --cml-tone: var(--gold); }     
.cml-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  display: inline-block; background: var(--cml-tone, var(--text-3));
}

.cml-bar {
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  min-height: 38px; padding: 7px var(--s4); margin: var(--s5) 0 var(--s4);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
  font-size: var(--f-sm); color: var(--text-3);
}
.cml-bar[hidden] { display: none; }
.cml-bar b { color: var(--text); font-weight: 800; }
.cml-bar .cml-when { color: var(--text-2); font-weight: 700; }
.cml-sep { color: var(--line-3); }
.cml-newbtn {
  margin-left: auto;
  background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent);
}
.cml-newbtn[hidden] { display: none; }

.cml-chips { margin-bottom: var(--s3); }
.cml-chip .muted2 { color: var(--text-4); }
.cml-chip.on .cml-dot { box-shadow: 0 0 0 3px var(--accent-soft); }

.pitem.cml-row { position: relative; align-items: flex-start; }
.pitem.cml-row::before {                      
  content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px;
  border-radius: 2px; background: var(--cml-tone, var(--accent));
  opacity: 0; transition: opacity var(--t-base) var(--ease);
}
@media (hover: hover) { .pitem.cml-row:hover::before { opacity: .8; } }
.pitem.cml-row .cat {
  display: flex; align-items: center; gap: 6px;
  color: var(--cml-tone, var(--accent));
}
.pitem.cml-row h3 { color: var(--text); }
.pitem.cml-row .cml-who { color: var(--text-3); font-weight: 700; }
.pitem.cml-row .meta .av { margin-right: -2px; }

.cml-new {
  display: inline-flex; align-items: center; height: 16px; padding: 0 5px;
  border-radius: 4px; font-size: 10px; font-weight: 800; letter-spacing: .04em;
  color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line);
}

.pitem.cml-row.is-read h3 { color: var(--text-3); font-weight: 600; }
.pitem.cml-row.is-read .ex { color: var(--text-4); }
.pitem.cml-row.is-read .cml-dot { opacity: .4; }

.cml-m { display: inline-flex; align-items: center; gap: 4px; line-height: 1; }
.cml-m svg { opacity: .7; }
.cml-m b { font-weight: 700; color: inherit; }
.cml-m.is-on { color: var(--text-2); }
.cml-m.is-on svg { opacity: 1; }
.cml-talk.is-hot { color: var(--warn); }
.cml-talk.is-hot svg { opacity: 1; }
.cml-talk.is-hot b { font-weight: 800; }

.cml-sk-title { height: 28px; width: 72%; margin-bottom: var(--s5); }
.cml-sk-line { height: 13px; margin-bottom: 11px; }
.cml-sk-line.w2 { width: 88%; }
.cml-sk-line.w3 { width: 64%; }

.postwrap.cml-doc {
  max-width: 820px; margin: 0 auto;
  display: flex; flex-direction: column; gap: var(--s7);
}
.postwrap.cml-doc-sm { max-width: 720px; gap: var(--s5); }
.postwrap.cml-doc-tight { gap: var(--s4); }
.postwrap.cml-form { max-width: 820px; margin: 0 auto; }
.cml-back { align-self: flex-start; }

.cml-artcat {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--f-xs); font-weight: 800; letter-spacing: .06em;
  color: var(--cml-tone, var(--accent));
}
.cml-title { font-size: var(--f-3xl); line-height: 1.32; letter-spacing: -.02em; }
.cml-by { padding-bottom: var(--s4); border-bottom: 1px solid var(--line); }
.cml-bymeta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--f-xs); margin-top: 2px; }

.postbody.cml-body { font-size: var(--f-lg); line-height: 1.85; white-space: normal; }
.cml-body .cml-p, .cml-body .cml-quote { white-space: pre-wrap; margin: 0 0 var(--s4); }
.cml-body > :last-child { margin-bottom: 0; }
.cml-body .cml-quote {
  padding: 3px 0 3px var(--s4); border-left: 3px solid var(--line-2); color: var(--text-2);
}
.postbody.cml-body-sm { font-size: var(--f-base); line-height: 1.75; }
.cml-img { border-radius: var(--r-md); display: block; }
.cml-react { flex-wrap: wrap; }

.cml-cmthd { font-size: var(--f-lg); }
.cmt.cml-cmt { border-top: 0; padding: var(--s2) 0; align-items: flex-start; }
.cmt.cml-cmt .bd { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.cmt.cml-cmt .cml-cmthd2 { font-size: var(--f-xs); }
.cmt.cml-cmt .txt.cml-bubble {
  margin-top: 0; max-width: 100%;
  padding: 9px var(--s3);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 3px var(--r-md) var(--r-md) var(--r-md);
  color: var(--text);
}
.cmt.cml-cmt .acts { margin-top: 1px; }

.cmt.cml-cmt.is-target .txt.cml-bubble { border-color: var(--accent-line); background: var(--accent-soft); }

.cmt.cml-cmt.reply { position: relative; padding-left: var(--s6); }
.cmt.cml-cmt.reply::before {
  content: ''; position: absolute; left: 13px; top: 0; width: 12px; height: 26px;
  border-left: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
  border-bottom-left-radius: 8px;
}

.cml-cmtin { min-height: 84px; }

.cml-rtag {
  display: inline-flex; align-items: center; gap: 3px;
  height: 22px; padding: 0 3px 0 9px; margin-right: 6px;
  border-radius: var(--r-full); font-size: var(--f-xs); font-weight: 700;
  background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent);
}
.cml-rtag[hidden] { display: none; }
.cml-rx { display: inline-flex; align-items: center; line-height: 0; padding: 3px; border-radius: 50%; color: inherit; opacity: .7; }
.cml-rx:hover { opacity: 1; }

.cml-count { color: var(--text-4); white-space: nowrap; }
.cml-count.is-near { color: var(--warn); }

.cml-dir { align-items: center; margin: var(--s4) 0 var(--s5); }
.cml-wtb { position: relative; display: flex; flex-direction: column; gap: var(--s3); }
.cml-wtb::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--warn); opacity: .6;
}
.cml-wtb-top { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.cml-wtb-when { margin-left: auto; font-size: var(--f-xs); }
.cml-wtb-nm { font-size: var(--f-lg); font-weight: 800; letter-spacing: -.01em; line-height: 1.35; }
.cml-wtb-bg {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2);
  padding: 9px var(--s3); border-radius: var(--r-sm); background: var(--warn-soft);
}
.cml-wtb-bg .l { font-size: var(--f-xs); font-weight: 700; color: var(--warn); }
.cml-wtb-bg b { font-size: var(--f-xl); font-weight: 800; color: var(--text); }
.cml-wtb-bg .u { font-size: var(--f-sm); color: var(--text-3); margin-left: 4px; }
.cml-wtb-ex {
  font-size: var(--f-sm); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cml-wtb-ft {
  display: flex; align-items: center; gap: 6px; margin-top: auto;
  padding-top: var(--s3); border-top: 1px solid var(--line);
  font-size: var(--f-xs); color: var(--text-4);
}
.cml-wtb-ft .nm { color: var(--text-2); font-weight: 700; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cml-wtb-ft .st8 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cml-wtb.is-closed { opacity: .6; }
.cml-wtb.is-closed::before { background: var(--text-4); }
.cml-lbl {
  font-size: var(--f-xs); font-weight: 800; letter-spacing: .06em;
  color: var(--warn); margin-bottom: 2px;
}
.cml-wdetail.is-closed { opacity: .8; }

.cml-notice { position: relative; overflow: hidden; }
.cml-notice + .cml-notice { margin-top: var(--s4); }
.cml-notice-t { font-size: var(--f-base); }
.cml-notice.is-pin { border-color: var(--accent-line); }
.cml-notice.is-pin::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent);
}

@media (max-width: 600px) {
  .cml-title { font-size: var(--f-2xl); }
  .postbody.cml-body { font-size: var(--f-base); line-height: 1.8; }
  .cml-bar { font-size: var(--f-xs); }
  .cml-newbtn { margin-left: 0; }
  
  .cml-chips {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-left: calc(var(--s4) * -1); margin-right: calc(var(--s4) * -1);
    padding: 0 var(--s4) 2px;
  }
  .cml-chips::-webkit-scrollbar { display: none; }
  .cml-chips .chip { flex: 0 0 auto; }
  .cmt.cml-cmt.reply { padding-left: var(--s5); }
  .cmt.cml-cmt.reply::before { left: 7px; }
  .cml-wtb-bg b { font-size: var(--f-lg); }
}

.gcard { position: relative; }

.gcard .gcard-nm {
  font-size: var(--f-sm); font-weight: 700; color: var(--text-2);
  
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  transition: color var(--t-base) var(--ease-out);
}
.gcard:hover .gcard-nm { color: var(--text); }

.gmoney {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s2); flex-wrap: wrap; margin-top: auto;
}
.gcard .gmoney .gprice {
  margin-top: 0; font-size: var(--f-xl); font-weight: 800;
  color: var(--text); letter-spacing: -.02em; line-height: 1.2;
}
.gcard .gmoney .gprice .u { font-size: var(--f-xs); font-weight: 700; color: var(--text-3); margin-left: 4px; }
.gcard .gtime { font-size: var(--f-xs); color: var(--text-4); white-space: nowrap; margin-left: auto; }

.gtime.is-new, .ptime.is-new, .rtime.is-new, .wtime.is-new { color: var(--accent); font-weight: 700; }

.gcard .gimg > .st {
  height: 22px; padding: 0 8px; max-width: calc(100% - 46px);
  background: rgba(9, 12, 19, .62); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, .06);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.gcard .fav { width: 32px; height: 32px; }
.gcard .fav svg { transition: transform var(--t-fast) var(--ease-spring); }
.gcard .fav.on svg { transform: scale(1.14); }
@media (hover: none) { .gcard .fav { width: 38px; height: 38px; top: 6px; right: 6px; } }

.gcard .gimg img { animation: gimgIn .42s var(--ease-out); }
@keyframes gimgIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

:is(.ggrid, .ggrid-4c, .ggrid-4, .grail) > :is(.gcard, .scard) {
  animation: gcardIn .42s var(--ease-out) backwards;
}
@keyframes gcardIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
:is(.ggrid, .ggrid-4c, .ggrid-4, .grail) > :is(.gcard, .scard):nth-child(2) { animation-delay: .035s; }
:is(.ggrid, .ggrid-4c, .ggrid-4, .grail) > :is(.gcard, .scard):nth-child(3) { animation-delay: .07s; }
:is(.ggrid, .ggrid-4c, .ggrid-4, .grail) > :is(.gcard, .scard):nth-child(4) { animation-delay: .105s; }
:is(.ggrid, .ggrid-4c, .ggrid-4, .grail) > :is(.gcard, .scard):nth-child(5) { animation-delay: .14s; }
:is(.ggrid, .ggrid-4c, .ggrid-4, .grail) > :is(.gcard, .scard):nth-child(6) { animation-delay: .175s; }
:is(.ggrid, .ggrid-4c, .ggrid-4, .grail) > :is(.gcard, .scard):nth-child(7) { animation-delay: .21s; }
:is(.ggrid, .ggrid-4c, .ggrid-4, .grail) > :is(.gcard, .scard):nth-child(n+8) { animation-delay: .245s; }

.gcard .gseller .rt { color: var(--text-2); font-weight: 700; }
.gcard .gseller .rt svg { color: var(--gold); }

.stars { align-items: center; }
.stars .hf { position: relative; display: inline-flex; }
.stars .hf-b { display: inline-flex; color: var(--line-3); }
.stars .hf-f {
  position: absolute; left: 0; top: 0; bottom: 0; width: 50%;
  overflow: hidden; display: inline-flex; color: var(--gold);
}
.stars .hf-f svg { flex: none; }

.ratewrap { display: inline-flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.ratewrap .rv { font-size: var(--f-md); font-weight: 800; color: var(--text); letter-spacing: -.01em; }
.ratewrap .rc { font-size: var(--f-sm); color: var(--text-3); }
.ratewrap .stars-lg ~ .rv { font-size: var(--f-xl); }

.scard .scard-nm {
  display: block; font-size: var(--f-base); font-weight: 800;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sbadges { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s1); min-height: 22px; }

.sbadges .bdiv { width: 1px; height: 14px; background: var(--line-2); margin: 0 4px; flex-shrink: 0; }

.scard .scard-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; text-align: center;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 9px 0;
}
.scard .scard-stats > div + div { border-left: 1px solid var(--line); }
.scard .scard-stats b { display: block; font-size: var(--f-lg); font-weight: 800; color: var(--text); line-height: 1.2; }
.scard .scard-stats span { display: block; font-size: 11px; color: var(--text-3); margin-top: 2px; }
.scard .scard-join { font-size: var(--f-xs); margin-top: -2px; }

.empty { padding: var(--s8) var(--s5); }
.empty .ei {
  width: 58px; height: 58px; margin: 0 auto var(--s4);
  display: grid; place-items: center; border-radius: 50%;
  color: var(--text-3); background: var(--surface-2); border: 1px solid var(--line);
}
.empty h4 { font-size: var(--f-xl); color: var(--text); margin-bottom: var(--s2); }
.empty p { max-width: 400px; margin: 0 auto; color: var(--text-3); }
.empty .etips { max-width: 400px; margin: var(--s4) auto 0; display: grid; gap: 7px; text-align: left; }
.empty .etips li { position: relative; padding-left: 15px; font-size: var(--f-sm); color: var(--text-3); }
.empty .etips li::before {
  content: ''; position: absolute; left: 3px; top: 9px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--line-3);
}
.empty .btn { margin-top: var(--s5); }

.pager button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.pager button.on { font-weight: 800; box-shadow: 0 0 0 3px var(--accent-soft); }
.pager .pgnav { padding: 0 var(--s3); }
.pager .pgnav svg { flex: none; }
.pager .pgnav.prev svg { transform: rotate(180deg); }
.pager .pgap { min-width: 22px; text-align: center; color: var(--text-4); font-weight: 700; }
.pgnote { text-align: center; margin-top: var(--s3); font-size: var(--f-xs); color: var(--text-4); }
@media (max-width: 430px) {
  .pager .pgnav span { display: none; }     
  .pager .pgnav { padding: 0; min-width: 36px; }
}

.gpv .p .u { font-size: var(--f-xs); font-weight: 700; color: var(--text-3); margin-left: 3px; }
.wtbc .wbudget b { font-size: var(--f-lg); font-weight: 800; letter-spacing: -.01em; }
.wtbc .wbudget .u { font-size: var(--f-xs); font-weight: 700; color: var(--text-3); margin-left: 3px; }

@media (max-width: 860px) {
  .gcard .gmoney .gprice { font-size: var(--f-lg); }
}
@media (max-width: 380px) {
  .gcard .gmoney { gap: 4px; }
  .gcard .gmoney .gprice { font-size: var(--f-base); }
  .scard .scard-stats b { font-size: var(--f-md); }
}

@media (prefers-reduced-motion: reduce) {
  :is(.ggrid, .ggrid-4c, .ggrid-4, .grail) > :is(.gcard, .scard),
  .gcard .gimg img { animation: none !important; }
}

@media (min-width: 1101px) {
  .detail { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); }
  
  .detail-img { max-width: 440px; }
}

.giftmeta {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6);
  padding-bottom: var(--s3); border-bottom: 1px solid var(--line);
}
.giftmeta > div { display: grid; gap: 1px; min-width: 0; }
.giftmeta span { font-size: var(--f-xs); color: var(--text-3); font-weight: 600; }
.giftmeta b { font-size: var(--f-md); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.traitgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s2); }
.traitcard {
  display: grid; gap: 2px; align-content: start;
  padding: 10px var(--s3);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.traitcard .tk { font-size: var(--f-xs); color: var(--accent); font-weight: 700; letter-spacing: .02em; }
.traitcard .tv { font-size: var(--f-base); font-weight: 700; word-break: break-word; }

.traitcard .tr {
  justify-self: start; margin-top: 2px;
  padding: 1px 6px; border-radius: var(--r-xs);
  font-size: 11px; font-weight: 800;
  color: var(--text-2); background: var(--surface-3);
}
.traitcard.is-empty .tv { color: var(--text-4); font-weight: 600; }

@media (min-width: 1181px) and (max-width: 1340px) {
  .gnb a { padding: 8px 8px; }
  .hdr-r { gap: 6px; }
}

@media (min-width: 1101px) {
  .detail {
    grid-template-areas: "media info" "more info";
    grid-template-rows: auto 1fr;
  }
  .detail-media { grid-area: media; }
  .detail-info  { grid-area: info; }
  .detail-more  { grid-area: more; }
}

.brandlock {
  max-width: 460px; margin: var(--s6) auto var(--s3);
  line-height: 0; background: #02060F;
  
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%),
                      linear-gradient(to bottom, transparent 0, #000 11%, #000 89%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%),
                      linear-gradient(to bottom, transparent 0, #000 11%, #000 89%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
.brandlock img { width: 100%; height: auto; }
@media (max-width: 520px) { .brandlock { max-width: 330px; margin-top: var(--s4); } }

.brand-mark { border-radius: 7px; }

.gimg .giftanim {
  position: absolute; inset: 0; z-index: 1;
  display: block; width: 100%; height: 100%;
  
  pointer-events: none;
}
.gimg .giftanim svg, .gimg .giftanim video { width: 100% !important; height: 100% !important; display: block; }

.gimg .giftanim video { object-fit: contain; }

.gimg .animflag {
  position: absolute; right: 8px; bottom: 8px; z-index: 2;
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--text-2); background: rgba(9, 12, 19, .72);
  border: 1px solid var(--line-2); backdrop-filter: blur(4px);
}

.gimg .animplay { display: none; }
.gimg.anim-paused .animplay {
  display: grid; place-items: center;
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3;
  width: 54px; height: 54px; border-radius: 50%;
  color: var(--text); background: rgba(9, 12, 19, .74);
  border: 1px solid var(--line-3); backdrop-filter: blur(6px);
}
.gimg.anim-paused .animplay:hover { background: rgba(9, 12, 19, .9); }

.tonprice {
  display: inline-flex; align-items: center; gap: 5px;
  white-space: nowrap; line-height: 1.1;
}
.tonprice .tonmark { flex-shrink: 0; display: block; }
.tonprice b { font-weight: 800; font-variant-numeric: tabular-nums; }
.tonprice .u {
  font-size: .74em; font-weight: 700; color: var(--text-3);
  letter-spacing: .02em; margin-left: -1px;
}

.tonprice.is-big { gap: 8px; }
.tonprice.is-big .u { font-size: .5em; }

.gcard .gprice, .pitem .p, .wtbc .wbudget { display: flex; align-items: center; }
.price-big .tonprice b { font-size: inherit; letter-spacing: -.03em; }

.tsecs { display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s4); }

.tsec { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.tsec[open] { border-color: var(--line-2); }

.tshd {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4) var(--s5);
  cursor: pointer; list-style: none; user-select: none;
}
.tshd::-webkit-details-marker { display: none; }
.tshd:hover { background: var(--surface-2); }
.tshd:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.tschev { display: inline-flex; line-height: 0; color: var(--text-3); flex-shrink: 0;
  transition: transform var(--t-base) var(--ease-out); }
.tsec[open] .tschev { transform: rotate(90deg); }
.tsi { display: inline-flex; line-height: 0; color: var(--text-3); flex-shrink: 0; }
.tst { flex: 1 1 auto; min-width: 0; font-size: var(--f-md); font-weight: 800; }

.tsn { flex-shrink: 0; min-width: 24px; padding: 2px 8px; text-align: center;
  border-radius: var(--r-full); background: var(--surface-3); border: 1px solid var(--line-2);
  color: var(--text-2); font-size: var(--f-xs); font-weight: 800; }
.tsz { flex-shrink: 0; color: var(--text-4); font-size: var(--f-xs); font-weight: 700; }

.tsbody { display: flex; flex-direction: column; gap: var(--s3); padding: 0 var(--s5) var(--s5); }
.tshint { max-width: 78ch; margin: 0; color: var(--text-3); font-size: var(--f-sm); line-height: 1.6; }
.tsempty { margin: 0; color: var(--text-4); font-size: var(--f-sm); }

.tsitem { padding: var(--s4); }
.tsnote { font-size: var(--f-sm); line-height: 1.6; overflow-wrap: anywhere; }

.tsday { color: var(--text-2); font-weight: 700; }
.tsday.is-long { color: var(--warn); }
.tsratio { color: var(--text-2); font-weight: 700; }

.tsfoot { margin-top: var(--s5); font-size: var(--f-sm); }

@media (max-width: 640px) {
  .tshd { gap: var(--s2); padding: var(--s3) var(--s4); }
  .tsbody { padding: 0 var(--s4) var(--s4); }
  .tst { font-size: var(--f-sm); }
}

.tstats.panel { display: grid; grid-template-columns: none; gap: var(--s3); padding: var(--s4) var(--s5); }
.tstats-hd { display: grid; gap: 2px; padding-bottom: var(--s3); border-bottom: 1px solid var(--line); }
.tstats-hd b { font-size: var(--f-md); }
.tstats-hd .muted2 { font-size: var(--f-xs); line-height: 1.5; }

.tstats .ts { display: grid; gap: 3px; }
.tstats .ts + .ts { padding-top: var(--s3); border-top: 1px solid var(--line); }
.tstats .ts-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.tstats .ts-lb { font-size: var(--f-md); font-weight: 700; }
.tstats .ts-top b { font-size: var(--f-xl); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.tstats .ts-hint { font-size: var(--f-xs); color: var(--text-3); line-height: 1.55; }

.tstats .ts-self, .tstats .ts-wait { padding-left: var(--s3); border-left: 2px solid var(--line-2); }
.tstats .ts-self .ts-top b, .tstats .ts-wait .ts-top b { font-size: var(--f-lg); color: var(--text-2); }

.tstats .ts-foot { padding-top: var(--s3); border-top: 1px solid var(--line); font-size: var(--f-xs); color: var(--text-4); }

.mystats .mini-stats { grid-template-columns: repeat(2, 1fr); }

.cfask { display: flex; align-items: flex-start; gap: var(--s3); }
.cfask .cfask-ic {
  flex-shrink: 0; width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: var(--r-sm); background: var(--surface-3); color: var(--text-2); line-height: 0;
}
.cfask.is-seller .cfask-ic { background: var(--accent-soft); color: var(--accent); }
.cfask b { font-size: var(--f-base); }
.cfask .sub { font-size: var(--f-xs); color: var(--text-3); margin-top: 2px; line-height: 1.5; }
.cfask .cf-when { flex-shrink: 0; font-size: var(--f-xs); color: var(--text-4); }

.cfother {
  display: grid; gap: var(--s3); padding: var(--s3);
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-md);
}
.cfother .cfwho { flex-wrap: wrap; }
.cfother .cfwho .btn { flex-shrink: 0; }
.cfnums { display: flex; flex-wrap: wrap; gap: var(--s2); }
.cfnums span {
  flex: 1 1 120px; display: flex; align-items: baseline; gap: 6px;
  padding: 8px var(--s3); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); font-size: var(--f-xs); color: var(--text-3);
}
.cfnums b { font-size: var(--f-lg); font-weight: 800; color: var(--text); }
.cfnote { font-size: var(--f-xs); color: var(--text-3); line-height: 1.55; }

.cfno .cfpick {
  display: flex; gap: var(--s3); padding: var(--s3) var(--s4); cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-md);
  transition: border-color .13s var(--ease), background .13s var(--ease);
}
.cfno .cfpick:hover { border-color: var(--line-3); }
.cfno .cfpick input { flex-shrink: 0; width: 16px; height: 16px; margin: 4px 0 0; accent-color: var(--accent); }
.cfno .cfpick-bd { display: grid; gap: 3px; min-width: 0; }
.cfno .cfpick-bd b { font-size: var(--f-md); }
.cfno .cfpick-bd .sub { font-size: var(--f-xs); color: var(--text-3); line-height: 1.55; }
.cfno .cfpick:has(input:checked) { border-color: var(--accent-line); background: var(--accent-soft); }

.cfno .field[hidden] { display: none; }

@media (max-width: 640px) {
  .tstats.panel { padding: var(--s4); }
  .cfask .cf-when { display: none; }
  .cfnums span { flex: 1 1 100%; }
}

.tstate {
  display: flex; gap: var(--s2); align-items: flex-start;
  padding: 10px var(--s3);
  background: var(--surface-2); border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  font-size: var(--f-sm); color: var(--text-2); line-height: 1.55;
}
.tstate .ti { flex-shrink: 0; line-height: 0; margin-top: 2px; color: var(--text-3); }
.tstate.ts-ok { background: var(--ok-soft); border-color: rgba(52,188,133,.3); color: #63D3A6; }
.tstate.ts-ok .ti { color: var(--ok); }
.tstate.ts-warn { background: var(--warn-soft); border-color: rgba(217,166,60,.3); color: #E3BC6B; }
.tstate.ts-warn .ti { color: var(--warn); }

.claimbox {
  padding: var(--s3);
  background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-md);
}
.claimbox .row { align-items: flex-start; }
.claimbox .ti { flex-shrink: 0; line-height: 0; margin-top: 2px; color: var(--text-3); }

.pick {
  display: flex; gap: var(--s3); align-items: flex-start;
  padding: var(--s3);
  background: var(--surface-2); border: 1px solid var(--line-2);
  border-radius: var(--r-md); cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.pick:hover { border-color: var(--line-3); }
.pick input { flex-shrink: 0; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--accent); }
.pick .pk { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.pick .pk b { font-size: var(--f-md); color: var(--text); }
.pick .pk span { font-size: var(--f-xs); color: var(--text-3); line-height: 1.5; }
.pick.on { background: var(--accent-soft); border-color: var(--accent-line); }

.pickbody { padding-left: 28px; }
@media (max-width: 420px) { .pickbody { padding-left: 0; } }

.srccmp { display: flex; flex-direction: column; gap: var(--s2); }
.srccmp > div { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.srccmp > div > span { min-width: 62px; font-size: var(--f-xs); color: var(--text-3); }

#tstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); margin-bottom: var(--s4); }

.tradelist { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line);
             border-radius: var(--r-md); overflow: hidden; }
.traderow {
  display: grid; align-items: center; gap: var(--s3);
  grid-template-columns: 56px minmax(0, 1fr) minmax(0, 320px) auto auto;
  padding: 10px var(--s4); background: var(--surface);
  transition: background-color var(--t-fast) var(--ease-out);
}
.traderow:hover { background: var(--surface-2); }
.traderow .tr-img { display: block; width: 56px; }
.traderow .tr-img .gimg { border-radius: var(--r-sm); }
.traderow .tr-nm { display: block; font-weight: 700; font-size: var(--f-md);
                   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.traderow .tr-nm .num { color: var(--text-3); }
.traderow .gtraits { margin-top: 2px; }

.traderow .tr-who { display: flex; align-items: center; gap: 6px; min-width: 0; }
.traderow .tr-p { display: inline-flex; align-items: center; gap: 5px; min-width: 0;
                  font-size: var(--f-sm); color: var(--text-2); }
.traderow .tr-p span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.traderow .tr-p:hover { color: var(--text); }
.traderow .tr-arrow { color: var(--text-4); flex-shrink: 0; line-height: 0; }
.traderow .tr-price { white-space: nowrap; }
.traderow .tr-when { white-space: nowrap; font-size: var(--f-xs); }

@media (max-width: 1100px) { .traderow .tr-p .badge { display: none; } }

@media (max-width: 900px) {
  .traderow { grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-areas:
              "img main price" "img who when"; row-gap: 4px; }
  .traderow .tr-img { grid-area: img; width: 48px; }
  .traderow .tr-main { grid-area: main; }
  .traderow .tr-who { grid-area: who; }
  .traderow .tr-price { grid-area: price; justify-self: end; }
  .traderow .tr-when { grid-area: when; justify-self: end; }
}
@media (max-width: 520px) {
  #tstats { grid-template-columns: 1fr 1fr; }
  #tstats .stat:last-child { grid-column: 1 / -1; }
  .traderow .gtraits { display: none; }   

  
  .traderow { grid-template-areas: "img main price" "img when when" "who who who"; }
  .traderow .tr-who { grid-area: who; justify-self: start; padding-top: 2px; }
  .traderow .tr-p span { min-width: 0; }
}

.gimg .giftbd {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; display: block;
  pointer-events: none;
}

.giftbd mask { mask-type: alpha; }

.gimg > img.has-bd { position: relative; z-index: 1; width: 100%; height: 100%;
                     
                     min-width: 0; }

.gimg[data-anim-on="done"] > img.has-bd { visibility: hidden; }