:root{
  --bg:#0d0f14; --bg-2:#141822; --card:#171c28; --card-2:#1d2330;
  --line:#262d3d; --txt:#e8ecf4; --muted:#8a93a6; --accent:#6c8cff;
  --accent-2:#8b6cff; --ok:#37d399; --err:#ff6b6b; --radius:14px;
  --shadow:0 8px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:radial-gradient(1200px 600px at 70% -10%,#1a2030 0,var(--bg) 55%);
  color:var(--txt);
  font:15px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  min-height:100vh;display:flex;flex-direction:column;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
code{background:var(--bg-2);padding:1px 6px;border-radius:6px;font-size:.85em;color:#b9c2d6}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 20px}
.muted{color:var(--muted)}
.main{flex:1;padding:28px 20px 60px}

/* header */
.site-head{position:sticky;top:0;z-index:20;background:rgba(13,15,20,.82);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.head-inner{display:flex;align-items:center;justify-content:space-between;height:62px}
.brand{display:flex;align-items:center;gap:9px;font-size:20px;font-weight:700;color:var(--txt)}
.brand:hover{text-decoration:none}
.brand .logo{font-size:22px}
.brand b{color:var(--accent)}
.nav{display:flex;align-items:center;gap:18px}
.nav a{color:var(--muted);font-weight:600}
.nav a:hover{color:var(--txt);text-decoration:none}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);
  background:var(--card-2);color:var(--txt);padding:9px 16px;border-radius:10px;
  font-weight:600;cursor:pointer;font-size:14px;transition:.15s;line-height:1;white-space:nowrap}
.btn:hover{text-decoration:none;border-color:#3a455c;transform:translateY(-1px)}
.btn-accent{background:linear-gradient(135deg,var(--accent),var(--accent-2));border:none;color:#fff}
.btn-accent:hover{filter:brightness(1.08)}
.btn-ghost{background:transparent}
.btn-lg{padding:13px 22px;font-size:15px;border-radius:12px}

/* hero */
.hero{padding:38px 0 10px}
.hero h1{font-size:clamp(30px,5vw,52px);line-height:1.08;margin:0 0 16px;letter-spacing:-.02em}
.hero p{font-size:17px;color:var(--muted);max-width:620px;margin:0 0 24px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.stats{display:flex;gap:30px;margin-top:34px;flex-wrap:wrap}
.stats div{display:flex;flex-direction:column}
.stats b{font-size:24px}
.stats span{color:var(--muted);font-size:13px}

/* blocks */
.block{margin-top:46px}
.block-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.block-head h2{font-size:20px;margin:0}
.block-head a{font-size:14px;color:var(--muted)}
.page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.page-head h1{font-size:26px;margin:0}

/* grid + cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;transition:.16s}
.card:hover{text-decoration:none;transform:translateY(-3px);border-color:#36425c;box-shadow:var(--shadow)}
.card-thumb{position:relative;aspect-ratio:3/2;background:#0a0c11;overflow:hidden}
.card-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.chip{position:absolute;top:8px;font-size:11px;font-weight:700;padding:3px 8px;border-radius:20px;
  text-transform:uppercase;letter-spacing:.03em;backdrop-filter:blur(4px)}
.chip-layout{left:8px;background:rgba(108,140,255,.85);color:#fff}
.chip-image{right:8px;background:rgba(55,211,153,.85);color:#06281c}
.chip-video{right:8px;background:rgba(255,107,107,.85);color:#350}
.chip-mixed{right:8px;background:rgba(139,108,255,.85);color:#fff}
.card-count{position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,.6);color:#fff;
  font-size:11px;font-weight:600;padding:3px 8px;border-radius:20px}
.card-body{padding:11px 13px 13px}
.card-title{font-size:14.5px;margin:0 0 5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-meta{display:flex;gap:6px;flex-wrap:wrap;color:var(--muted);font-size:12px}

/* filters + pager */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.inp{background:var(--card);border:1px solid var(--line);color:var(--txt);
  padding:10px 13px;border-radius:10px;font-size:14px;outline:none}
.inp:focus{border-color:var(--accent)}
.filters .inp{min-width:150px}
.filters input[type=search]{flex:1;min-width:200px}
.pager{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:34px;flex-wrap:wrap}
.pg{min-width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:9px;color:var(--txt);font-weight:600}
.pg:hover{text-decoration:none;border-color:var(--accent)}
.pg-cur{background:var(--accent);border-color:var(--accent);color:#fff}
.pg-gap{color:var(--muted)}

/* single zip */
.crumbs{color:var(--muted);font-size:13px;margin-bottom:14px}
.zip-head{border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:22px}
.zip-head h1{font-size:26px;margin:0 0 12px}
.zip-meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.tag{background:var(--card-2);border:1px solid var(--line);border-radius:20px;padding:4px 12px;font-size:12.5px;color:#c4ccdb}
.tag-accent{background:rgba(108,140,255,.16);border-color:rgba(108,140,255,.4);color:#aebfff}
.zip-sub{font-size:13px;margin-bottom:16px}
.zip-sub code{font-size:11px}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.g-item{margin:0;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.g-item img,.g-item video{width:100%;display:block;background:#000;aspect-ratio:1/1;object-fit:cover}
.g-item figcaption{padding:8px 10px;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* uploader */
.upload-lead{max-width:680px;margin:-6px 0 22px}
.dropzone{border:2px dashed var(--line);border-radius:18px;background:var(--card);
  padding:54px 20px;text-align:center;transition:.18s;cursor:pointer}
.dropzone.drag{border-color:var(--accent);background:rgba(108,140,255,.08)}
.dz-icon{font-size:46px;margin-bottom:10px}
.dz-title{font-size:19px;font-weight:600;margin:0 0 4px}
.dz-sub{color:var(--muted);margin:6px 0}
.dz-buttons{display:flex;gap:10px;justify-content:center;margin:8px 0 16px}
.dz-hint{font-size:12.5px;line-height:1.7}
.upload-config{margin-top:20px}
.field{display:flex;flex-direction:column;gap:6px;max-width:420px}
.field span{font-size:13px;color:var(--muted)}
.field .inp{width:100%}
.file-list{list-style:none;padding:0;margin:18px 0;max-height:340px;overflow:auto;
  border:1px solid var(--line);border-radius:12px;background:var(--bg-2)}
.file-list:empty{display:none}
.file-list li{display:flex;gap:12px;align-items:center;padding:8px 14px;border-bottom:1px solid var(--line);font-size:13px}
.file-list li:last-child{border-bottom:none}
.fl-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fl-head{font-weight:700;background:var(--card-2)}
.upload-actions{display:flex;gap:12px;margin-top:8px}
.upload-bar{margin:16px 0}
.progress{height:10px;background:var(--bg-2);border-radius:20px;overflow:hidden;border:1px solid var(--line)}
.progress-fill{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .2s}
.upload-bar span{display:inline-block;margin-top:7px;font-size:13px}
.result{margin-top:20px;padding:16px 18px;border-radius:12px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.result-ok{background:rgba(55,211,153,.1);border:1px solid rgba(55,211,153,.35)}
.result-err{background:rgba(255,107,107,.1);border:1px solid rgba(255,107,107,.35);color:#ffb4b4}

/* misc */
.empty{text-align:center;padding:50px 20px;color:var(--muted);border:1px dashed var(--line);border-radius:14px}
.empty-lg h1{font-size:64px;margin:0;color:var(--accent)}
.site-foot{border-top:1px solid var(--line);padding:22px 0;color:var(--muted);font-size:13px}
.foot-inner{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
@media(max-width:560px){.stats{gap:20px}.head-inner{height:56px}.gallery,.grid{gap:12px}}

/* auth: nav state */
.nav-user{color:var(--txt);font-weight:600;font-size:14px}
.logout-form{margin:0;display:inline}
.linklike{background:none;border:none;color:var(--muted);font:inherit;font-weight:600;cursor:pointer;padding:0}
.linklike:hover{color:var(--txt)}

/* auth: login / signup cards */
.auth-wrap{display:flex;justify-content:center;padding:30px 0 50px}
.auth-card{width:100%;max-width:420px;background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:32px;box-shadow:var(--shadow)}
.auth-card h1{font-size:24px;margin:0 0 6px}
.auth-card>.muted{margin:0 0 20px}
.auth-form{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.auth-form .field{max-width:none}
.auth-submit{justify-content:center;margin-top:6px}
.auth-alt{margin-top:18px;text-align:center;color:var(--muted);font-size:14px}
.auth-errors{background:rgba(255,107,107,.1);border:1px solid rgba(255,107,107,.35);
  color:#ffb4b4;border-radius:10px;padding:12px 14px;margin-bottom:18px;font-size:14px;display:flex;flex-direction:column;gap:4px}
.zip-owner{color:var(--muted)}
.zip-owner a{color:var(--accent)}

/* upload: md5-title option */
.check{display:flex;align-items:flex-start;gap:9px;margin-top:14px;font-size:13.5px;color:var(--muted);max-width:560px;cursor:pointer}
.check input{margin-top:2px}
.check code{font-size:.85em}
.inp:disabled{opacity:.5;cursor:not-allowed}

/* ============================================================
   v6 — Font Awesome + visual polish
   ============================================================ */
:root{ --glow:0 6px 22px rgba(108,140,255,.35); --ring:0 0 0 3px rgba(108,140,255,.25); }

i.fa-solid,i.fa-regular,i.fa-brands{line-height:1}
.btn i{font-size:.95em}

/* header / nav */
.site-head{background:rgba(13,15,20,.72);border-bottom:1px solid rgba(255,255,255,.06)}
.brand .logo{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;font-size:16px;box-shadow:var(--glow)}
.nav a,.linklike{display:inline-flex;align-items:center;gap:7px}
.nav a i{opacity:.85}
/* nav buttons must keep their button text colour (beats .nav a) */
.nav a.btn{color:var(--txt)}
.nav a.btn-accent{color:#fff}
.nav a.btn:hover{color:#fff;text-decoration:none}
.nav-user{display:inline-flex;align-items:center;gap:7px;background:var(--card-2);border:1px solid var(--line);
  padding:7px 12px;border-radius:10px;font-size:13.5px}
.nav-user i{color:var(--accent)}

/* buttons: icon gap + glow */
.btn-accent{box-shadow:var(--glow)}
.btn-accent:hover{box-shadow:0 8px 26px rgba(108,140,255,.5)}
.btn-sub{opacity:.8;font-weight:500}

/* hero */
.hero{padding:50px 0 18px;position:relative}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(108,140,255,.12);
  border:1px solid rgba(108,140,255,.3);color:#aebfff;padding:6px 14px;border-radius:30px;
  font-size:13px;font-weight:600;margin-bottom:20px}
.grad{background:linear-gradient(120deg,var(--accent),var(--accent-2) 60%,#c08bff);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stats{gap:14px;margin-top:38px}
.stats div{flex-direction:row;align-items:center;gap:13px;background:var(--card);border:1px solid var(--line);
  padding:14px 18px;border-radius:14px;flex:1 1 150px}
.stat-ic{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;
  background:rgba(108,140,255,.14);color:var(--accent);font-size:17px;flex:none}
.stat-val{display:flex;flex-direction:column;line-height:1.15}
.stat-val b{font-size:21px}
.stat-val span{font-size:12px;color:var(--muted)}

/* section headers */
.block-head h2{display:flex;align-items:center;gap:10px}
.block-head h2 i{color:var(--accent)}
.block-head a{display:inline-flex;align-items:center;gap:6px}

/* cards: image zoom + hover overlay */
.card-thumb img{transition:transform .35s ease}
.card:hover .card-thumb img{transform:scale(1.06)}
.card-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(10,12,17,.45);color:#fff;font-size:26px;opacity:0;transition:.2s;backdrop-filter:blur(1px)}
.card:hover .card-overlay{opacity:1}
.chip,.card-count{display:inline-flex;align-items:center;gap:5px}
.card-count{background:rgba(0,0,0,.62)}
.card-meta span{display:inline-flex;align-items:center;gap:5px}
.card-meta i{opacity:.7;font-size:.9em}

/* search field with icon */
.search-wrap{position:relative;flex:1;min-width:220px;display:flex;align-items:center}
.search-wrap i{position:absolute;left:14px;color:var(--muted);pointer-events:none;font-size:14px}
.search-wrap .inp{width:100%;padding-left:38px}
/* custom select caret */
select.inp{appearance:none;-webkit-appearance:none;padding-right:34px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%238a93a6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center}
.inp:focus{box-shadow:var(--ring)}

/* single zip page */
.crumbs{display:flex;align-items:center;gap:8px}
.crumbs i{font-size:11px;opacity:.6}
.zip-head h1{display:flex;align-items:center;gap:0}
.tag{display:inline-flex;align-items:center;gap:6px}
.tag i{opacity:.75;font-size:.9em}
.tag-accent i{opacity:1}
.zip-sub{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.zip-actions .btn{box-shadow:var(--glow)}
.g-img{position:relative;display:block}
.g-zoom{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:8px;display:flex;
  align-items:center;justify-content:center;background:rgba(0,0,0,.5);color:#fff;font-size:12px;opacity:0;transition:.2s}
.g-item:hover .g-zoom{opacity:1}
.g-item figcaption{display:flex;align-items:center;gap:6px}
.g-item figcaption i{opacity:.7}

/* uploader */
.dz-icon{font-size:40px;color:var(--accent);margin-bottom:14px}
.dropzone.drag .dz-icon{transform:scale(1.1)}
.dz-icon i{transition:.2s}
.fl-ic{color:var(--accent)}
.fl-head{color:var(--txt)}

/* auth icon badge */
.auth-ic{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;font-size:22px;margin-bottom:18px;box-shadow:var(--glow)}

/* empty states */
.empty-ic{font-size:40px;color:var(--line);margin-bottom:14px}
.empty-lg .empty-ic{font-size:56px}

/* footer */
.foot-inner{align-items:center}
.foot-brand{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--txt)}
.foot-brand i{color:var(--accent)}
.site-foot .muted i{margin-right:4px;color:var(--accent);opacity:.8}

/* settings */
.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px;align-items:start}
.settings-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px}
.settings-card h2{display:flex;align-items:center;gap:9px;font-size:18px;margin:0 0 4px}
.settings-card h2 i{color:var(--accent)}
.settings-card>.muted{margin:0 0 18px;font-size:13.5px}
.settings-card .field small{font-weight:400}
.flash-ok{display:flex;align-items:center;gap:9px;background:rgba(55,211,153,.12);
  border:1px solid rgba(55,211,153,.4);color:#7df0c0;padding:12px 16px;border-radius:11px;margin-bottom:20px}
.flash-ok i{color:var(--ok)}
.nav-user{cursor:pointer}
.nav-user:hover{border-color:var(--accent);text-decoration:none}

/* ===== upload page v7 ===== */
.btn-sm{padding:6px 12px;font-size:13px}
.up-steps{display:flex;gap:10px;list-style:none;padding:0;margin:0 0 20px;flex-wrap:wrap}
.up-step{display:flex;align-items:center;gap:9px;color:var(--muted);font-weight:600;font-size:13.5px;
  background:var(--card);border:1px solid var(--line);padding:9px 16px;border-radius:30px}
.up-num{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;
  background:var(--card-2);color:var(--muted);font-size:12px;border:1px solid var(--line)}
.up-step.is-active{color:var(--txt);border-color:var(--accent)}
.up-step.is-active .up-num{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;border:none}
.up-step.is-done{color:var(--ok)}
.up-step.is-done .up-num{background:rgba(55,211,153,.2);color:var(--ok);border-color:transparent}

.up-summary{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:18px;
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 18px}
.up-summary-main{display:flex;align-items:center;gap:14px}
.up-summary-main>div{display:flex;flex-direction:column;line-height:1.3}
.up-summary-main strong{font-size:16px}
.up-sum-ic{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;
  background:rgba(108,140,255,.14);color:var(--accent);font-size:18px}

.file-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px;margin:18px 0}
.file-grid:empty{display:none}
.ftile{position:relative;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.ftile-thumb{aspect-ratio:1/1;background:#0a0c11;display:flex;align-items:center;justify-content:center}
.ftile-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ftile-vid{color:var(--accent-2);font-size:30px;background:linear-gradient(135deg,#161b27,#0e1118)}
.ftile-x{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:7px;border:none;cursor:pointer;
  background:rgba(10,12,17,.7);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center;
  opacity:0;transition:.15s;backdrop-filter:blur(3px)}
.ftile:hover .ftile-x{opacity:1}
.ftile-x:hover{background:var(--err)}
.ftile-meta{padding:7px 9px;display:flex;flex-direction:column;gap:1px}
.ftile-name{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ftile-size{font-size:10.5px;color:var(--muted)}
.ftile-more{display:flex;align-items:center;justify-content:center;color:var(--muted);font-weight:700;
  text-align:center;aspect-ratio:1/1;border-style:dashed}

.result-ic{color:var(--ok);font-size:20px}
.result-ok b{color:#bdf5dd}

/* upload bar row (progress text + cancel) */
.upload-bar-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px}
.upload-bar-row span{margin-top:0}
.result-ic.err{color:var(--err)}

/* ============================================================
   v10 — modern refresh (palette · depth · glass · motion)
   Overrides earlier layers via the cascade. Markup unchanged.
   ============================================================ */
:root{
  /* deeper, cooler base with a touch of indigo */
  --bg:#080a10; --bg-2:#0f1320; --card:#141926; --card-2:#1b2130;
  --line:#232c3f; --txt:#eef1f8; --muted:#8b94aa;
  /* richer accent ramp: indigo → violet → cyan */
  --accent:#7c8cff; --accent-2:#a06bff; --accent-3:#3fd8ff;
  --ok:#3ee0a6; --err:#ff6b6b;
  --radius:16px;
  --shadow:0 18px 50px -12px rgba(0,0,0,.6);
  --glow:0 8px 30px -6px rgba(124,140,255,.5);
  --ring:0 0 0 4px rgba(124,140,255,.22);
  --grad:linear-gradient(120deg,var(--accent),var(--accent-2) 55%,var(--accent-3));
}

/* aurora backdrop + crisper text rendering */
body{
  background:var(--bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  letter-spacing:-.005em;
}
body::before{
  content:"";position:fixed;inset:-10% -10% auto -10%;height:120vh;z-index:-1;pointer-events:none;
  background:
    radial-gradient(620px 460px at 78% -8%, rgba(124,140,255,.20), transparent 60%),
    radial-gradient(560px 420px at 12% 4%, rgba(160,107,255,.16), transparent 62%),
    radial-gradient(700px 520px at 50% 100%, rgba(63,216,255,.07), transparent 60%);
  animation:auroraDrift 24s ease-in-out infinite alternate;
}
@keyframes auroraDrift{from{transform:translate3d(-2%,-1%,0) scale(1)}to{transform:translate3d(3%,2%,0) scale(1.08)}}

/* custom scrollbar */
*{scrollbar-width:thin;scrollbar-color:var(--card-2) transparent}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:var(--card-2);border:3px solid transparent;background-clip:content-box;border-radius:20px}
::-webkit-scrollbar-thumb:hover{background:#2c3650;background-clip:content-box}

::selection{background:rgba(124,140,255,.32);color:#fff}

/* glass header */
.site-head{background:rgba(8,10,16,.6);backdrop-filter:saturate(160%) blur(16px);
  -webkit-backdrop-filter:saturate(160%) blur(16px);border-bottom:1px solid rgba(255,255,255,.07)}
.brand .logo{background:var(--grad);box-shadow:var(--glow)}
.brand b{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* buttons: layered gradient + sheen */
.btn{border-radius:12px;transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s,border-color .18s,filter .18s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-accent{background:var(--grad);background-size:140% 140%;box-shadow:var(--glow);position:relative;overflow:hidden}
.btn-accent::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.22),transparent 42%);pointer-events:none}
.btn-accent:hover{filter:brightness(1.06);box-shadow:0 12px 34px -6px rgba(124,140,255,.62)}
.btn-ghost{background:rgba(255,255,255,.025);backdrop-filter:blur(4px)}
.btn-ghost:hover{background:rgba(255,255,255,.05)}

/* hero: bigger type, glowing gradient headline */
.hero{padding:64px 0 22px}
.hero h1{font-weight:800;letter-spacing:-.035em;line-height:1.05}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 6px 28px rgba(124,140,255,.28))}
.hero p{font-size:17.5px;line-height:1.6}
.hero-badge{background:rgba(124,140,255,.10);border-color:rgba(124,140,255,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);backdrop-filter:blur(6px)}
.hero-badge i{color:var(--accent-3)}

/* stat tiles → glass cards with hover */
.stats div{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  border:1px solid rgba(255,255,255,.07);border-radius:16px;backdrop-filter:blur(6px);transition:.2s}
.stats div:hover{transform:translateY(-2px);border-color:rgba(124,140,255,.4)}
.stat-ic{background:rgba(124,140,255,.16);box-shadow:inset 0 0 0 1px rgba(124,140,255,.18)}

/* section headers: gradient accent icons */
.block{margin-top:54px}
.block-head h2{font-weight:750;letter-spacing:-.02em}
.block-head h2 i,.page-head h1 i{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.block-head a:hover{color:var(--txt)}

/* cards: gradient hairline on hover + smoother lift */
.card{background:linear-gradient(180deg,var(--card),#11151f);border:1px solid var(--line);
  border-radius:var(--radius);position:relative;
  transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s,border-color .22s}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:var(--grad);opacity:0;transition:opacity .22s;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.card:hover{transform:translateY(-5px);border-color:transparent;box-shadow:var(--shadow)}
.card:hover::before{opacity:1}
.card-overlay{background:linear-gradient(0deg,rgba(8,10,16,.55),rgba(8,10,16,.2))}
.card-overlay i{filter:drop-shadow(0 4px 12px rgba(0,0,0,.5))}
.chip-layout{background:rgba(124,140,255,.9)}
.card-title{font-weight:650;letter-spacing:-.01em}

/* landscape thumbs: scrim for legibility + crisper overlays */
.card-thumb::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(8,10,16,.62) 0,rgba(8,10,16,0) 36%)}
.card-thumb .chip,.card-thumb .card-count,.card-thumb .card-overlay{z-index:2}
.chip{top:10px;box-shadow:0 2px 8px rgba(0,0,0,.32)}
.chip-layout{left:10px}
.chip-image,.chip-video,.chip-mixed{left:10px;right:auto}
.card-count{bottom:10px;left:10px;right:auto;background:rgba(0,0,0,.5);
  border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(4px)}
.card-body{padding:12px 14px 14px}
.card-title{font-size:15px;margin:0 0 7px}
.card-meta{gap:5px 14px;align-items:center}
.card-meta span{white-space:nowrap}
/* slimmer cards read better in a denser landscape grid */
.grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}

/* inputs: softer fields, modern focus ring */
.inp{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;transition:.16s}
.inp:hover{border-color:#33405b}
.inp:focus{border-color:var(--accent);box-shadow:var(--ring);background:rgba(255,255,255,.05)}

/* pager */
.pg{border-radius:11px;transition:.16s}
.pg:hover{border-color:var(--accent);background:rgba(124,140,255,.1)}
.pg-cur{background:var(--grad);border-color:transparent;box-shadow:var(--glow)}

/* tags */
.tag{background:rgba(255,255,255,.04);border-color:var(--line);border-radius:30px}
.tag-accent{background:rgba(124,140,255,.14);border-color:rgba(124,140,255,.4)}

/* single-zip gallery items */
.zip-head{border-bottom:1px solid rgba(255,255,255,.07)}
.g-item{border-radius:14px;background:linear-gradient(180deg,var(--card),#11151f);
  border:1px solid var(--line);transition:transform .2s,border-color .2s}
.g-item:hover{transform:translateY(-3px);border-color:rgba(124,140,255,.4)}

/* dropzone */
.dropzone{border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.008));
  border:2px dashed #2c3650}
.dropzone:hover{border-color:#3a486a}
.dropzone.drag{border-color:var(--accent);background:rgba(124,140,255,.08);box-shadow:var(--ring)}
.dz-icon{color:var(--accent)}

/* auth + settings cards */
.auth-card,.settings-card{background:linear-gradient(180deg,var(--card),#11151f);
  border:1px solid var(--line);border-radius:20px}
.auth-ic,.auth-card h1 + *{}
.auth-ic{background:var(--grad);box-shadow:var(--glow);border-radius:18px}

/* upload step pills */
.up-step.is-active{box-shadow:var(--ring)}
.up-step.is-active .up-num{background:var(--grad)}

/* progress fill uses the full ramp */
.progress-fill{background:var(--grad)}

/* footer */
.site-foot{border-top:1px solid rgba(255,255,255,.07)}

/* respect reduced-motion */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  body::before{animation:none}
}

@media(max-width:560px){.hero{padding:40px 0 12px}.block{margin-top:40px}}

/* ===== marketplace: wallet, pricing, previews ===== */

/* nav balance pill */
.nav-wallet{display:inline-flex;align-items:center;gap:6px;font-weight:650;color:var(--txt);
  background:rgba(124,140,255,.12);border:1px solid rgba(124,140,255,.3);
  padding:5px 11px;border-radius:20px;transition:.16s}
.nav-wallet:hover{text-decoration:none;border-color:var(--accent);background:rgba(124,140,255,.2)}
.nav-wallet .zc{color:var(--muted);font-weight:500;font-size:.85em}

/* buy / price on zip page */
.zip-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.buy-form{display:inline-flex;margin:0}
.price-usd{font-size:13px}
.owned-badge{display:inline-flex;align-items:center;gap:6px;color:var(--ok);font-weight:600;font-size:14px}

/* like / report social row */
.zip-social{display:flex;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}
.social-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);
  background:var(--card-2);color:var(--txt);padding:8px 14px;border-radius:20px;
  font-size:13.5px;font-weight:600;cursor:pointer;transition:.15s}
.social-btn:hover{text-decoration:none;border-color:#3a455c;transform:translateY(-1px)}
.social-btn .social-count{color:var(--muted);font-weight:700}
.social-btn.is-liked{color:var(--err);border-color:rgba(255,107,107,.5);background:rgba(255,107,107,.1)}
.social-btn.is-liked .social-count{color:var(--err)}
.social-btn-report:hover{color:var(--err);border-color:rgba(255,107,107,.5)}
.social-btn:disabled{opacity:.6;cursor:default;transform:none}

/* report dialog */
.report-dialog{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);
  color:var(--txt);padding:0;max-width:460px;width:calc(100% - 32px)}
.report-dialog::backdrop{background:rgba(5,7,12,.6)}
.report-form{padding:22px 24px;display:flex;flex-direction:column;gap:14px}
.report-form h3{margin:0;display:flex;align-items:center;gap:9px;font-size:18px}
.report-form>p{margin:0}
.report-field{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600}
.report-field select,.report-field textarea{background:var(--bg-2);border:1px solid var(--line);
  color:var(--txt);border-radius:10px;padding:9px 11px;font:inherit;width:100%;box-sizing:border-box}
.report-field select:focus,.report-field textarea:focus{border-color:var(--accent);outline:none}
.report-field textarea{resize:vertical}
.report-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:4px}

/* nav cart */
.nav-cart{position:relative}
.cart-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;
  padding:0 5px;border-radius:9px;background:var(--accent);color:#fff;font-size:11px;font-weight:700;line-height:1}

/* add-to-cart button (zip page) */
#addCartBtn{cursor:pointer}
#addCartBtn.in-cart{color:var(--ok);border-color:rgba(55,211,153,.5);background:rgba(55,211,153,.1)}

/* cart page */
.cart-layout{display:grid;grid-template-columns:1fr 300px;gap:22px;align-items:start}
.cart-items{display:flex;flex-direction:column;gap:12px}
.cart-item{display:grid;grid-template-columns:88px 1fr auto auto;gap:14px;align-items:center;
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px}
.cart-item-off{opacity:.6}
.cart-thumb{display:block;width:88px;height:66px;border-radius:8px;overflow:hidden;background:var(--bg-2)}
.cart-thumb img{width:100%;height:100%;object-fit:cover}
.cart-info{min-width:0;display:flex;flex-direction:column;gap:5px}
.cart-title{font-weight:700;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cart-title:hover{color:var(--accent);text-decoration:none}
.cart-meta{display:flex;gap:12px;font-size:12.5px;flex-wrap:wrap}
.cart-unavail{color:var(--err);font-size:12.5px;font-weight:600}
.cart-price{display:inline-flex;align-items:center;gap:6px;font-weight:700;white-space:nowrap}
.cart-price i{color:var(--accent)}
.cart-rm{margin:0}
.icon-btn{background:none;border:1px solid var(--line);color:var(--muted);width:34px;height:34px;
  border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:.15s}
.icon-btn:hover{color:var(--err);border-color:rgba(255,107,107,.5)}
.cart-clear{margin:4px 2px 0}

.cart-summary{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.cart-summary h2{margin:0 0 14px;font-size:18px}
.cart-summary hr{border:none;border-top:1px solid var(--line);margin:12px 0}
.cart-row{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px;margin:8px 0}
.cart-row .neg{color:var(--err);font-weight:700}
.cart-total{font-size:17px;font-weight:700;margin:10px 0 16px}
.cart-checkout{width:100%;justify-content:center}
.cart-summary>form{margin:0}
.cart-summary>.btn{width:100%;justify-content:center}
.cart-shortfall{color:var(--err);font-size:13px;margin:12px 0;display:flex;align-items:center;gap:7px}

@media (max-width:720px){
  .cart-layout{grid-template-columns:1fr}
  .cart-item{grid-template-columns:64px 1fr auto}
  .cart-thumb{width:64px;height:48px}
  .cart-price{grid-column:2}
}

/* price chip on listing cards */
.card-price{position:absolute;bottom:8px;left:8px;z-index:2;background:rgba(124,140,255,.9);color:#fff;
  font-size:11px;font-weight:700;padding:3px 8px;border-radius:20px;display:inline-flex;align-items:center;gap:5px;backdrop-filter:blur(4px)}

/* flashes */
.flash{display:flex;align-items:center;gap:9px;padding:11px 15px;border-radius:12px;margin:14px 0;font-size:14px}
.flash-ok{background:rgba(55,211,153,.12);border:1px solid rgba(55,211,153,.35);color:#7ee9c0}
.flash-err{background:rgba(255,107,107,.1);border:1px solid rgba(255,107,107,.35);color:#ff9d9d}
.flash a{color:inherit;text-decoration:underline}

/* preview teaser grid */
.preview-h{margin:26px 0 12px;font-size:18px}
.preview-grid{display:flex;flex-wrap:wrap;gap:5px}
.pv-item{position:relative;margin:0;height:50px;border-radius:5px;overflow:hidden;
  background:#0a0c11;border:1px solid var(--line)}
.pv-item img{height:50px;width:auto;display:block}
.pv-sprite{display:block;height:50px;background-image:var(--sprite);
  background-repeat:no-repeat;background-size:auto}
.pv-vid{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(8,10,16,.32);color:#fff;font-size:12px;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.preview-note{margin-top:12px;font-size:13px;display:flex;align-items:center;gap:7px}

/* wallet page */
.wallet-card{background:linear-gradient(180deg,var(--card),#11151f);border:1px solid var(--line);
  border-radius:18px;padding:22px 24px}
.nowrap{white-space:nowrap}
.dot{opacity:.5;margin:0 2px}

/* balance hero */
.wallet-hero{position:relative;overflow:hidden;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:22px;padding:30px 30px;margin-bottom:18px;border-radius:20px;
  border:1px solid rgba(124,140,255,.32);
  background:linear-gradient(135deg,#1b2030 0%,#1a1f3a 55%,#231d3d 100%);
  box-shadow:var(--shadow)}
.wallet-hero-glow{position:absolute;top:-120px;right:-60px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(124,140,255,.34),transparent 68%);pointer-events:none}
.wallet-hero-coin{position:absolute;right:26px;bottom:-22px;font-size:140px;
  color:rgba(124,140,255,.10);transform:rotate(-12deg);pointer-events:none}
.wallet-hero-main{position:relative;z-index:1}
.wallet-hero-label{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:var(--accent)}
.wallet-hero-amt{font-size:clamp(40px,6vw,56px);font-weight:800;letter-spacing:-.03em;line-height:1.05;
  margin:6px 0 4px;display:flex;align-items:baseline;gap:12px}
.wallet-hero-amt .zc{font-size:18px;font-weight:600;color:var(--muted);letter-spacing:0}
.wallet-hero-sub{color:var(--muted);font-size:14.5px}
.wallet-hero-actions{position:relative;z-index:1;display:flex;flex-direction:column;gap:10px;min-width:200px}
.wallet-hero-actions .btn{justify-content:center;width:100%}
.wallet-hero-ref{border-color:rgba(124,140,255,.4);color:var(--txt)}
.wallet-hero-ref:hover{border-color:var(--accent);background:rgba(124,140,255,.12)}
@media(max-width:560px){.wallet-hero{padding:24px 22px}.wallet-hero-actions{width:100%}}

/* deposit card */
.deposit-card{margin-bottom:8px}
.deposit-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px}
.deposit-ic{flex:0 0 auto;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  font-size:18px;color:var(--accent);background:rgba(124,140,255,.14);border:1px solid rgba(124,140,255,.25)}
.deposit-card h2{margin:0;font-size:18px}
.deposit-tag{margin:3px 0 0;font-size:13.5px}
.deposit-body{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap}
.deposit-addr{flex:1;min-width:240px}
.addr-label{display:flex;align-items:center;gap:6px;font-size:12.5px;margin-bottom:7px}
.qr-box{background:#fff;padding:12px;border-radius:14px;line-height:0;flex:0 0 auto;
  box-shadow:0 4px 16px rgba(0,0,0,.4)}
.eth-qr img,.eth-qr canvas{display:block;border-radius:6px}
.addr-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.eth-addr{font-size:13px;word-break:break-all;background:var(--bg-2);padding:11px 13px;border-radius:10px;
  border:1px solid var(--line);flex:1;min-width:0;letter-spacing:.01em}
.copy-btn.copied{color:var(--ok);border-color:rgba(55,211,153,.4)}
.deposit-hint{font-size:12.5px;margin:0;line-height:1.5}
.deposit-hint i{margin-right:5px;opacity:.7}
.price-hint{font-size:12px;display:block;margin-top:4px}

/* transactions list */
.txns-head{display:flex;align-items:baseline;gap:12px;margin:30px 0 14px}
.txns-h{margin:0;font-size:18px}
.txns-count{font-size:12.5px;color:var(--muted);background:var(--bg-2);border:1px solid var(--line);
  padding:2px 10px;border-radius:20px}
.txn-list{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:16px;
  overflow:hidden;background:linear-gradient(180deg,var(--card),#11151f)}
.txn-row{display:flex;align-items:center;gap:14px;padding:13px 16px;border-bottom:1px solid var(--line);
  transition:background .15s}
.txn-row:last-child{border-bottom:none}
.txn-row:hover{background:rgba(255,255,255,.025)}
.txn-ic{flex:0 0 auto;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  font-size:15px;background:rgba(255,255,255,.06);color:var(--muted)}
.txn-ic.txn-topup,.txn-ic.txn-sale,.txn-ic.txn-grant,.txn-ic.txn-referral,.txn-ic.txn-refund{
  background:rgba(55,211,153,.14);color:#7ee9c0}
.txn-ic.txn-purchase,.txn-ic.txn-fee{background:rgba(124,140,255,.14);color:#aeb9ff}
.txn-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.txn-label{font-weight:650;font-size:14.5px}
.txn-meta{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.txn-amt{flex:0 0 auto;text-align:right;display:flex;flex-direction:column;gap:1px}
.txn-delta{font-weight:700;font-size:15px;font-variant-numeric:tabular-nums}
.txn-delta.pos{color:var(--ok)}
.txn-delta.neg{color:#ff9d9d}
.txn-bal{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}

/* referral signup banner + small CTAs (shared by /signup and /wallet) */
.ref-banner{display:flex;align-items:center;gap:10px;background:rgba(124,140,255,.12);
  border:1px solid var(--line);border-radius:12px;padding:11px 14px;margin:0 0 16px;font-size:14px;text-align:left}
.ref-banner i{color:var(--accent);font-size:18px}
.ref-code{background:var(--bg-2);border:1px solid var(--line);border-radius:7px;
  padding:1px 7px;font-weight:700;letter-spacing:.05em}
.ref-cta{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-size:13px;font-weight:600;color:var(--accent)}
.ref-cta i{font-size:14px}

/* ---- /referrals page ---- */
.refp{max-width:880px;margin:0 auto}
.refp-hero{position:relative;text-align:center;padding:36px 24px 30px;border-radius:22px;overflow:hidden;
  border:1px solid var(--line);margin-bottom:22px;
  background:radial-gradient(120% 150% at 50% -30%,rgba(124,140,255,.22),transparent 60%),linear-gradient(180deg,var(--card),#11151f)}
.refp-hero-ic{width:64px;height:64px;border-radius:19px;margin:0 auto 16px;display:flex;align-items:center;
  justify-content:center;font-size:29px;color:#fff;background:var(--grad);box-shadow:var(--glow)}
.refp-hero h1{font-size:clamp(26px,4vw,38px);margin:0 0 10px;letter-spacing:-.02em}
.refp-hero p{color:var(--muted);max-width:540px;margin:0 auto 18px;font-size:15.5px}
.refp-hero p b{color:var(--txt)}
.refp-pills{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.refp-pill{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;padding:8px 16px;
  border-radius:30px;background:rgba(124,140,255,.14);border:1px solid rgba(124,140,255,.3);color:#cdd6ff}
.refp-pill.alt{background:rgba(55,211,153,.13);border-color:rgba(55,211,153,.32);color:#9ff0cf}
.refp-pill i{font-size:13px}

.refp-card{background:linear-gradient(180deg,var(--card),#11151f);border:1px solid var(--line);
  border-radius:18px;padding:22px;margin-bottom:22px}
.refp-label{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  font-weight:700;margin-bottom:10px}
.refp-linkbox{display:flex;gap:10px;flex-wrap:wrap}
.refp-linkbox input{flex:1;min-width:0;background:var(--bg-2);border:1px solid var(--line);border-radius:12px;
  color:var(--txt);font-size:14.5px;padding:13px 15px;font-family:ui-monospace,Menlo,monospace;outline:none}
.refp-linkbox input:focus{border-color:var(--accent);box-shadow:var(--ring)}
.refp-copy{flex:none;display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer;color:#fff;
  font-weight:700;font-size:14.5px;padding:0 22px;border-radius:12px;background:var(--grad);box-shadow:var(--glow);transition:.15s}
.refp-copy:hover{filter:brightness(1.08)}
.refp-copy.ok{background:var(--ok);box-shadow:none;color:#06281c}
.refp-share-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px}
.refp-share-row .muted{font-size:13px}
.refp-soc{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:11px;
  font-size:16px;color:var(--txt);background:var(--bg-2);border:1px solid var(--line);transition:.15s}
.refp-soc:hover{transform:translateY(-2px);text-decoration:none;border-color:#3a455c}
.refp-soc.wa:hover{color:#25d366;border-color:#25d366}
.refp-soc.tg:hover{color:#2aabee;border-color:#2aabee}
.refp-soc.em:hover{color:var(--accent);border-color:var(--accent)}
.refp-codeline{margin-top:16px;font-size:13px;color:var(--muted)}
.refp-codeline b{font-family:ui-monospace,Menlo,monospace;letter-spacing:.08em;color:var(--txt);
  background:var(--bg-2);border:1px solid var(--line);padding:3px 10px;border-radius:8px}

.refp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:24px}
.refp-stat{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:16px 18px}
.refp-stat-ic{width:46px;height:46px;flex:none;border-radius:13px;display:flex;align-items:center;justify-content:center;
  font-size:19px;color:var(--accent);background:rgba(124,140,255,.12)}
.refp-stat b{display:block;font-size:23px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.refp-stat span{font-size:12.5px;color:var(--muted)}
@media(max-width:680px){.refp-stats{grid-template-columns:1fr}}

.refp-how{margin-bottom:26px}
.refp-how h2,.refp-list h2{font-size:18px;margin:0 0 14px}
.refp-steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:680px){.refp-steps{grid-template-columns:1fr}}
.refp-steps li{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px}
.refp-step-n{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;
  font-weight:800;font-size:14px;color:#fff;background:var(--grad);box-shadow:var(--glow);margin-bottom:12px}
.refp-steps b{display:block;margin-bottom:4px;font-size:15px}
.refp-steps p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.5}
.refp-user{display:flex;align-items:center;gap:10px}
.refp-user a{font-weight:600;color:var(--txt)}

/* big collage hero on the single zip page */
.zip-hero{position:relative;margin:14px 0 20px;border-radius:16px;overflow:hidden;
  border:1px solid var(--line);background:#0a0c11}
.zip-hero img{width:100%;display:block;max-height:480px;object-fit:cover}
.zip-hero-tag{position:absolute;left:12px;bottom:12px;background:rgba(8,10,16,.62);
  backdrop-filter:blur(4px);color:#fff;font-size:12px;font-weight:600;padding:4px 10px;
  border-radius:20px;display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(255,255,255,.12)}

/* ============================================================
   v11 — upload page polish (config card · dropzone · steps)
   Pure cascade overrides; markup classes added in views/upload.php.
   ============================================================ */

/* lead copy */
.upload-lead{font-size:15.5px;color:var(--muted)}

/* dropzone: roomier, with a gradient icon badge that lifts on drag */
.dropzone{padding:58px 24px;position:relative;overflow:hidden}
.dropzone::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .25s;
  background:radial-gradient(520px 220px at 50% 0%,rgba(124,140,255,.12),transparent 70%)}
.dropzone:hover::before,.dropzone.drag::before{opacity:1}
.dz-icon{width:82px;height:82px;margin:0 auto 18px;border-radius:24px;display:flex;align-items:center;
  justify-content:center;font-size:34px;color:#fff;background:var(--grad);box-shadow:var(--glow);
  transition:transform .25s cubic-bezier(.2,.7,.3,1)}
.dropzone:hover .dz-icon{transform:translateY(-3px)}
.dropzone.drag .dz-icon{transform:translateY(-3px) scale(1.06)}
.dz-title{font-size:20px;font-weight:700;letter-spacing:-.01em}
.dz-sub{margin:8px 0}
.dz-hint{margin-top:6px}

/* step pills: connect them with a hairline rail */
.up-steps{align-items:center}
.up-step{transition:color .2s,border-color .2s,box-shadow .2s}

/* selection summary: subtle gradient surface */
.up-summary{background:linear-gradient(180deg,var(--card),#11151f)}
.up-sum-ic{background:var(--grad);color:#fff;box-shadow:var(--glow)}

/* config: a single titled card with a responsive field grid */
.upload-config{background:linear-gradient(180deg,var(--card),#11151f);border:1px solid var(--line);
  border-radius:18px;padding:20px 22px 22px;box-shadow:var(--shadow)}
.cfg-head{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15px;letter-spacing:-.01em;
  margin:0 0 16px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.06)}
.cfg-head i{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.cfg-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.upload-config .field{max-width:none;gap:7px}
.field-wide{grid-column:1 / -1}
.field span{display:inline-flex;align-items:center;gap:7px;font-weight:500}
.field span i{color:var(--accent);font-size:.95em;opacity:.85}
@media(max-width:560px){.cfg-grid{grid-template-columns:1fr}}

/* price field with inline ≈ USD pill */
.price-wrap{position:relative;display:flex;align-items:center}
.price-wrap .inp{width:100%;padding-right:84px}
.price-eq{position:absolute;right:8px;font-size:12px;font-weight:600;color:var(--muted);
  background:rgba(124,140,255,.12);border:1px solid rgba(124,140,255,.28);
  padding:3px 9px;border-radius:8px;pointer-events:none}

/* md5-title option: boxed toggle row */
.check{margin-top:16px;padding:13px 15px;border:1px solid var(--line);border-radius:13px;
  background:rgba(255,255,255,.025);align-items:center;max-width:none;transition:.16s}
.check:hover{border-color:#33405b}
.check input{width:16px;height:16px;accent-color:var(--accent);margin-top:0;flex:0 0 auto}
.check b{color:var(--txt);font-weight:600}

/* file grid tiles: lift + accent hairline on hover */
.ftile{transition:transform .18s cubic-bezier(.2,.7,.3,1),border-color .18s,box-shadow .18s}
.ftile:hover{transform:translateY(-3px);border-color:rgba(124,140,255,.45);box-shadow:0 10px 24px -12px rgba(0,0,0,.7)}

/* progress: a touch taller with a soft glow while active */
.progress{height:12px;box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}
.progress-fill{box-shadow:0 0 16px -2px rgba(124,140,255,.6)}

/* primary action gets the glow treatment here too */
.upload-actions .btn-accent{box-shadow:var(--glow)}

/* ===== my zips / edit (v16) ===== */
.myzip-item{display:flex;flex-direction:column;gap:8px}
.myzip-item .card{flex:1}
.myzip-actions{display:flex;gap:8px}
.myzip-actions .btn{flex:1;justify-content:center}
.myzip-hidden{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);
  background:var(--card-2);border:1px solid var(--line);border-radius:20px;padding:3px 10px;align-self:flex-start}
.field-check{flex-direction:row;align-items:center;gap:10px;cursor:pointer}
.field-check input{width:17px;height:17px;accent-color:var(--accent);flex:none}
.edit-preview{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.edit-preview img{width:96px;height:72px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.edit-preview .muted{font-size:13px}

/* ===== listing card refinement (v17) ===== */
/* price reads as currency: warm gold pill, distinct from the blue category chips */
.card-price{bottom:10px;right:10px;left:auto;background:linear-gradient(180deg,#ffcd5b,#f1a73a);
  color:#3a2606;border:1px solid rgba(255,255,255,.35);
  box-shadow:0 2px 10px -2px rgba(241,167,58,.55);text-shadow:0 1px 0 rgba(255,255,255,.25)}
.card-price i{color:#7a4d05}

/* category chips: glassier, with a hairline edge so they sit cleanly on any thumb */
.chip{border:1px solid rgba(255,255,255,.18)}

/* overlays glide up a touch as the card lifts — small, premium motion */
.card-price,.card-count,.chip{transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s}
.card:hover .chip{transform:translateY(-2px)}
.card:hover .card-price,.card:hover .card-count{transform:translateY(2px)}

/* title: allow two lines, reserve the height so every card body lines up */
.card-title{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;line-height:1.32;min-height:2.64em}

/* meta: a hairline above it, icons warm to accent on hover */
.card-body{display:flex;flex-direction:column;gap:9px}
.card-meta{margin-top:auto;padding-top:9px;border-top:1px solid rgba(255,255,255,.06)}
.card:hover .card-meta i{color:var(--accent);opacity:1}
.card-meta i{transition:color .2s,opacity .2s}

/* ============================================================
   v20 — generated avatars, user dropdown, profile page
   ============================================================ */

/* generated initial avatar */
.avatar{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:26px;height:26px;border-radius:50%;color:#fff;font-weight:700;
  font-size:13px;line-height:1;text-transform:uppercase;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.avatar-lg{width:40px;height:40px;font-size:18px}
.avatar-xl{width:84px;height:84px;font-size:38px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.16),var(--glow)}

/* nav: avatar dropdown */
.user-menu{position:relative}
.user-trigger{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  background:var(--card-2);border:1px solid var(--line);border-radius:10px;
  padding:5px 10px 5px 5px;color:var(--txt);font:inherit;font-weight:600;font-size:13.5px}
.user-trigger:hover{border-color:var(--accent)}
.user-caret{font-size:11px;color:var(--muted);transition:transform .18s}
.user-menu.open .user-caret{transform:rotate(180deg)}
.user-dropdown{position:absolute;top:calc(100% + 8px);right:0;min-width:212px;z-index:60;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:6px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:2px}
.user-dropdown[hidden]{display:none}
.user-dropdown a,.user-dropdown button{display:flex;align-items:center;gap:10px;width:100%;
  text-align:left;padding:9px 11px;border-radius:8px;color:var(--txt);font:inherit;
  font-weight:600;font-size:14px;background:none;border:none;cursor:pointer}
.user-dropdown a:hover,.user-dropdown button:hover{background:var(--card-2);text-decoration:none}
.user-dropdown i{width:18px;text-align:center;color:var(--muted)}
.user-dropdown a:hover i,.user-dropdown button:hover i{color:var(--accent)}
.user-dropdown form{margin:0}
.user-dd-head{padding:9px 11px}
.user-dd-id{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.user-dd-name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-dd-sub{font-size:12px;color:var(--muted);font-weight:500}
.user-dd-sep{height:1px;background:var(--line);margin:4px 6px}

/* profile page */
.profile-head{display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  padding:8px 0 26px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.profile-id{flex:1 1 240px;min-width:0}
.profile-id h1{margin:0 0 4px;font-size:30px;word-break:break-word}
.profile-id .muted{margin:0 0 12px;font-size:14px}
.profile-stats{display:flex;gap:22px;flex-wrap:wrap;color:var(--muted);font-size:14px}
.profile-stats b{color:var(--txt);font-size:17px;margin-right:4px}
.profile-edit{flex:none;align-self:flex-start}
.profile-zips-title{display:flex;align-items:center;gap:10px;margin:22px 0 16px;font-size:20px}
.profile-zips-title i{color:var(--accent)}

/* ============================================================
   v21 — upload UX: review-first flow + compact dropzone
   The dropzone collapses into a slim "add more" bar once files
   are picked, so the review grid + details sit above the fold.
   Markup adds .has-files on the form (toggled in app.js).
   ============================================================ */

/* whole dropzone is clickable now, not just the buttons */
.dropzone{cursor:pointer}
.dropzone:focus-visible{outline:none;border-color:var(--accent);box-shadow:var(--ring)}

/* compact state: horizontal bar with a small icon + the add buttons */
.has-files .dropzone{padding:14px 16px}
.has-files .dz-inner{display:flex;align-items:center;gap:14px;text-align:left;flex-wrap:wrap}
.has-files .dz-icon{width:44px;height:44px;font-size:18px;margin:0;border-radius:13px;flex:none}
.has-files .dz-title{font-size:14.5px;margin:0}
.has-files .dz-title::after{content:" — or drag more in";color:var(--muted);font-weight:500;font-size:13px}
.has-files .dz-sub,.has-files .dz-hint{display:none}
.has-files .dz-buttons{margin:0 0 0 auto;gap:8px}
.has-files .dz-buttons .btn{padding:8px 14px;font-size:13.5px}
@media(max-width:560px){
  .has-files .dz-buttons{margin:10px 0 0;width:100%}
  .has-files .dz-buttons .btn{flex:1;justify-content:center}
}

/* review grid sits right under the summary now — give it a clear gap */
.has-files .file-grid{margin-top:14px}

/* sticky action row so "Create zip" is always reachable on long lists */
.upload-actions{position:sticky;bottom:0;z-index:5;
  margin-top:14px;padding:14px 0;
  background:linear-gradient(180deg,transparent,var(--bg) 22%)}

  /* pin the progress bar to the bottom of the screen while uploading, so it
     stays visible no matter where the user has scrolled. It's only in the DOM
     when shown (hidden until upload starts) and sits above the action row. */
  .upload-bar:not([hidden]){position:fixed;left:0;right:0;bottom:0;z-index:20;
    margin:0;padding:12px 14px calc(12px + env(safe-area-inset-bottom));
    background:var(--bg);border-top:1px solid var(--line);
    box-shadow:0 -8px 24px -8px rgba(0,0,0,.5)}

/* ============================================================
   v23 — phone-friendly navbar
   On small screens the header collapses to compact, thumb-sized
   icon actions. "Browse" moves into the avatar dropdown, the
   username label is dropped, and on tiny screens the brand
   wordmark is hidden — so nothing overflows or crowds on a phone.
   The .dd-mobile Browse link in the dropdown is hidden on desktop
   (it's redundant with the bar's Browse there).
   ============================================================ */
.dd-mobile{display:none}

@media(max-width:600px){
  .head-inner{height:56px;gap:8px}
  .nav{gap:8px}

  /* logged-in: Browse relocates into the avatar menu to free the bar.
     (guests keep the bar's Browse — they have no dropdown.) */
  .nav-auth .nav-browse{display:none}
  .nav-auth .dd-mobile{display:flex}

  /* comfortable ~40px tap targets across the bar */
  .nav-wallet,.user-trigger,.nav .btn{min-height:40px}

  /* cart: a clear icon button with a corner badge */
  .nav-cart{display:inline-flex;align-items:center;justify-content:center;
    width:40px;height:40px;border:1px solid var(--line);border-radius:10px;
    background:var(--card-2)}
  .nav-cart:hover{border-color:var(--accent)}
  .nav-cart .cart-badge{position:absolute;top:-5px;right:-5px}

  /* wallet stays a glanceable balance pill, just a touch tighter */
  .nav-wallet{padding:0 11px}

  /* upload: icon-only square, still the prominent accent action */
  .nav .btn-accent .btn-label{display:none}
  .nav .btn-accent{width:40px;height:40px;padding:0;justify-content:center}
  .nav .btn-accent i{font-size:16px}

  /* avatar trigger: drop the username, keep avatar + caret */
  .user-name{display:none}
  .user-trigger{padding:5px 9px 5px 5px}

  /* roomier dropdown rows + keep it on-screen */
  .user-dropdown{min-width:210px;max-width:calc(100vw - 24px)}
  .user-dropdown a,.user-dropdown button{padding:11px 12px;font-size:14.5px}
}

@media(max-width:400px){
  /* very small phones: logo only, hide the brand wordmark */
  .brand>span:last-child{display:none}
  .nav{gap:6px}
}

/* ============================================================
   v24 — single zip page: responsive two-column product layout
   Desktop: hero + preview on the left, a sticky buy/info panel
   on the right. Phones: everything stacks, actions go full-width,
   and a fixed bottom buy bar keeps the primary action one tap
   away. Markup classes live in views/zip.php. Pure cascade
   overrides — earlier zip-page rules still apply where not reset.
   ============================================================ */

/* two-column grid: hero (top-left), preview (below it), panel (right, spans) */
.zip-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;
  grid-template-areas:"hero panel" "prev panel";gap:26px;align-items:start;margin-top:4px}
.zip-layout--nohero{grid-template-areas:"prev panel"}
.zip-hero{grid-area:hero;margin:0}
.zip-preview{grid-area:prev;min-width:0}
.zip-panel-wrap{grid-area:panel;min-width:0}

/* the buy/info panel — a card that sticks beside the gallery on desktop */
.zip-panel{position:sticky;top:78px;background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:20px;box-shadow:var(--shadow)}
.zip-title{font-size:21px;line-height:1.28;margin:0 0 14px;display:block;
  overflow-wrap:anywhere;word-break:break-word}
.zip-panel .zip-meta{margin-bottom:12px}
.zip-panel .zip-sub{display:flex;flex-direction:column;align-items:flex-start;gap:7px;
  font-size:12.5px;margin:0 0 16px}
.zip-stat{display:inline-flex;align-items:center;gap:7px}
.zip-stat i{opacity:.7;width:14px;text-align:center}
.zip-owner-link{color:var(--txt);font-weight:600}
.zip-owner-link:hover{color:var(--accent);text-decoration:none}

/* price block */
.zip-price-block{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  margin:2px 0 16px;padding-top:14px;border-top:1px solid var(--line)}
.zip-price{display:inline-flex;align-items:center;gap:8px;font-size:25px;font-weight:800;line-height:1}
.zip-price i{color:var(--accent);font-size:.78em}
.zip-price small{font-size:13px;font-weight:600;color:var(--muted)}
.zip-price-free{color:var(--ok)}
.zip-price-usd{font-size:13px}

/* actions stack full-width inside the panel */
.zip-panel .zip-actions{flex-direction:column;align-items:stretch;gap:10px;margin:0}
.zip-panel .zip-actions .btn{width:100%;justify-content:center}
.zip-panel .buy-form{display:flex}
.zip-panel .buy-form .btn{width:100%}
.zip-panel .price-usd{display:block;text-align:center;margin-top:-2px}
.zip-panel .owned-badge{justify-content:center}

/* social row + archive id sit at the foot of the panel */
.zip-panel .zip-social{margin-top:16px;padding-top:15px;border-top:1px solid var(--line)}
.zip-panel .zip-social .social-btn{flex:1;justify-content:center}
.zip-id{display:block;margin-top:14px;font-size:10.5px;color:var(--muted);
  background:none;padding:0;word-break:break-all}

/* preview grid — gently larger tiles; sprite scales crisply via --ph/--sh */
.preview-h{margin:0 0 12px}
.preview-grid{--ph:56;--sh:50;display:flex;flex-wrap:wrap;gap:6px}
.preview-grid .pv-item{height:calc(var(--ph) * 1px);border-radius:6px}
.preview-grid .pv-item img{height:calc(var(--ph) * 1px);width:auto}
.preview-grid .pv-sprite{--s:calc(var(--ph) / var(--sh));
  height:calc(var(--ph) * 1px);width:calc(var(--w) * var(--s) * 1px);
  background-image:var(--sprite);background-repeat:no-repeat;
  /* Scale the WHOLE sprite (full height --gh) by --s so each row lands at --ph.
     Falls back to one row (--sh) for old single-row manifests. */
  background-size:auto calc(var(--gh, var(--sh)) * var(--s) * 1px);
  background-position:calc(var(--x) * var(--s) * -1px) calc(var(--y) * var(--s) * -1px)}

/* phone-only sticky buy bar (hidden on desktop) */
.zip-buybar,.zip-buybar-spacer{display:none}

/* ---- tablets / narrow: collapse to a single stacked column ---- */
@media(max-width:880px){
  .zip-layout,.zip-layout--nohero{grid-template-columns:1fr;
    grid-template-areas:"hero" "panel" "prev";gap:18px}
  .zip-panel{position:static;background:transparent;border:none;box-shadow:none;padding:0}
  .zip-title{font-size:24px}
  .zip-panel .zip-sub{flex-flow:row wrap;align-items:center;gap:6px 14px}
  .zip-price-block{margin-top:0}
}

/* ---- phones: full-width actions + fixed bottom buy bar ---- */
@media(max-width:720px){
  .zip-buybar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;
    align-items:center;gap:12px;padding:10px 16px;
    background:rgba(13,15,20,.93);backdrop-filter:blur(10px);
    border-top:1px solid var(--line)}
  .zip-buybar-price{display:flex;flex-direction:column;line-height:1.15;flex:none}
  .zip-buybar-price b{font-size:18px}
  .zip-buybar-price small{font-size:11px;color:var(--muted)}
  .zip-buybar-cta{flex:1;min-width:0}
  .zip-buybar-cta form{margin:0}
  .zip-buybar-cta .btn{width:100%;justify-content:center}
  .zip-buybar-spacer{display:block;height:76px}
  /* the in-panel social buttons read better stacked on small screens */
  .zip-panel .zip-social{flex-wrap:nowrap}
}


/* ===== Notifications: nav bell + dropdown (v26) ===== */
.notif-trigger{position:relative;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--card-2);border:1px solid var(--line);color:var(--txt);cursor:pointer;font-size:15px}
.notif-trigger:hover{border-color:var(--accent);color:#fff}
.notif-badge{position:absolute;top:-3px;right:-3px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--err);color:#fff;font-size:10.5px;font-weight:800;line-height:17px;text-align:center;box-shadow:0 0 0 2px var(--bg)}
.notif-dropdown{width:320px;max-width:88vw;padding:6px}
.notif-dd-head{display:flex;justify-content:space-between;align-items:center;padding:8px 10px 9px;border-bottom:1px solid var(--line);font-weight:700;font-size:13px}
.notif-dd-head a{font-size:12px;font-weight:600}
.notif-dd-empty{padding:18px 12px;text-align:center;font-size:13px}
.notif-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;color:var(--txt);text-decoration:none}
.notif-row:hover{background:var(--card-2);text-decoration:none}
.notif-row.is-unread{background:rgba(108,140,255,.08)}
.notif-row-ic{flex:none;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;background:var(--card-2);color:var(--muted)}
.notif-row-txt{flex:1;font-size:12.7px;line-height:1.35;min-width:0}
.notif-row-txt b{font-weight:700}
.notif-row-amt{flex:none;color:var(--ok);font-weight:800;font-size:12.5px;font-variant-numeric:tabular-nums}
.notif-sale{background:rgba(55,211,153,.14);color:var(--ok)}
.notif-referral{background:rgba(139,108,255,.16);color:var(--accent-2)}
.notif-like{background:rgba(255,107,107,.14);color:var(--err)}
.dd-badge{display:inline-block;min-width:16px;padding:0 5px;border-radius:8px;background:var(--err);color:#fff;font-size:10.5px;font-weight:800;text-align:center;margin-left:4px}

/* ===== Notifications page ===== */
.notif-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.notif-item{display:flex;align-items:center;gap:13px;padding:13px 15px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius)}
.notif-item.is-unread{border-color:rgba(108,140,255,.45);background:linear-gradient(90deg,rgba(108,140,255,.07),transparent 60%)}
.notif-ic{flex:none;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;background:var(--card-2);color:var(--muted)}
.notif-body{flex:1;min-width:0}
.notif-msg{font-size:14px;line-height:1.4}
.notif-msg a{font-weight:600}
.notif-meta{font-size:12px;margin-top:2px}
.notif-amt{flex:none;color:var(--ok);font-weight:800;font-variant-numeric:tabular-nums}

/* ===== Creator dashboard ===== */
.dash-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:13px;margin:6px 0 24px}
.dash-kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.dash-kpi span{color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;font-weight:600}
.dash-kpi b{font-size:24px;font-weight:800;letter-spacing:-.5px}
.dash-kpi b small{font-size:13px;font-weight:700;color:var(--muted)}
.dash-kpi small{color:var(--muted);font-size:11.5px}
.dash-kpi-accent{border-color:rgba(108,140,255,.4)}.dash-kpi-accent b{color:var(--accent)}
.dash-table-wrap{overflow-x:auto;background:var(--card);border:1px solid var(--line);border-radius:var(--radius)}
.dash-table{width:100%;border-collapse:collapse;font-size:13.5px}
.dash-table th,.dash-table td{padding:11px 13px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap;vertical-align:middle;font-variant-numeric:tabular-nums}
.dash-table th{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.4px;background:var(--bg-2)}
.dash-table tbody tr:last-child td{border-bottom:none}
.dash-table tbody tr:hover{background:rgba(108,140,255,.04)}
.dash-table .dash-earn{color:var(--ok);font-weight:700}
.dash-zip{display:flex;align-items:center;gap:11px;min-width:230px;white-space:normal}
.dash-zip img{width:46px;height:46px;border-radius:9px;object-fit:cover;background:#000;flex:none}
.dash-zip-id a{font-weight:600}
.dash-hidden{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.dash-dim{opacity:.55}

/* ===== Zip description ===== */
.zip-desc{margin:2px 0 14px;color:var(--txt);opacity:.92;line-height:1.55;font-size:14.5px;white-space:pre-line;overflow-wrap:anywhere}