/* SAVORO — dark & gold */
:root{
  --bg:#0a0710; --bg2:#141019; --panel:#16121d; --line:rgba(214,41,118,.20);
  --gold:#e1306c; --gold2:#962fbf; --ink:#f7f2f5; --mut:#a89aa5; --dim:#6d6070;
  --igA:#feda75; --igB:#fa7e1e; --igC:#d62976; --igD:#962fbf; --igE:#4f5bd5;
  --iggrad:linear-gradient(100deg,#feda75,#fa7e1e 25%,#d62976 55%,#962fbf 80%,#4f5bd5);
  --danger:#ff5d5d; --r:16px;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:Inter,-apple-system,sans-serif;line-height:1.5;min-height:100vh}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(900px 520px at 70% -10%,rgba(214,41,118,.14),transparent 60%),
             radial-gradient(700px 500px at 0% 100%,rgba(79,91,213,.10),transparent 55%)}
main{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:0 22px}

/* topbar */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 0}
.logo{font-family:Sora,sans-serif;font-weight:800;font-size:24px;letter-spacing:.14em}
.logo span{background:var(--iggrad);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo.small{font-size:19px}
.top-actions{display:flex;gap:9px;align-items:center}
.lang-btn,.mini-btn{background:transparent;border:1px solid var(--line);color:var(--ink);
  font:600 13px Inter;padding:8px 14px;border-radius:999px;cursor:pointer;transition:.18s}
.lang-btn:hover,.mini-btn:hover{border-color:var(--gold);color:var(--gold)}
.mini-btn.danger:hover{border-color:var(--danger);color:var(--danger)}

/* hero */
.hero{text-align:center;padding:72px 0 46px}
.hero h1{font-family:Sora,sans-serif;font-weight:800;font-size:clamp(38px,6.4vw,68px);line-height:1.04;letter-spacing:-.02em;max-width:17ch;margin:0 auto}
.hero h1 em{font-style:normal;background:var(--iggrad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{color:var(--mut);font-size:18.5px;max-width:56ch;margin:22px auto 0}
.hero-ctas{display:flex;gap:14px;justify-content:center;margin-top:34px;flex-wrap:wrap}
.btn{display:inline-block;text-decoration:none;font:700 16px Sora;padding:15px 30px;border-radius:999px;transition:.18s}
.btn.gold{background:var(--iggrad);color:#fff;box-shadow:0 12px 40px rgba(214,41,118,.35)}
.btn.gold:hover{transform:translateY(-2px);box-shadow:0 18px 52px rgba(214,41,118,.5)}
.btn.ghost{border:1px solid var(--line);color:var(--ink)}
.btn.ghost:hover{border-color:var(--gold);color:var(--gold)}
.privacy-line{margin-top:26px;color:var(--dim);font-size:14px}

/* steps */
.steps{padding:54px 0}
.steps h2{font-family:Sora;font-weight:700;font-size:clamp(24px,3.4vw,34px);text-align:center;margin-bottom:34px}
.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.step{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:26px 24px}
.step .n{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--iggrad);color:#fff;font:800 16px Sora;margin-bottom:14px}
.step h3{font-family:Sora;font-size:17.5px;margin-bottom:8px}
.step p{color:var(--mut);font-size:14.5px}

/* importer */
.importer{padding:20px 0 60px}
.dropzone{border:2px dashed rgba(214,41,118,.45);border-radius:22px;background:rgba(214,41,118,.05);
  text-align:center;padding:60px 24px;cursor:pointer;transition:.2s;outline:none}
.dropzone:hover,.dropzone.drag,.dropzone:focus-visible{border-color:var(--gold);background:rgba(214,41,118,.09)}
.dz-icon{font-size:44px;margin-bottom:10px}
.dz-main{font:700 20px Sora}
.dz-sub{color:var(--mut);margin-top:6px;font-size:14.5px}
.import-status{margin-top:16px;text-align:center;color:var(--gold);font-size:15px}
.import-status.err{color:var(--danger)}

/* brand row / ads */
.brandrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;padding:12px 0 46px}
.sam-card{display:flex;gap:16px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.sam-card img{width:74px;height:74px;border-radius:50%;object-fit:cover;border:2px solid transparent;background:var(--iggrad) border-box;box-shadow:0 0 0 2px #16121d inset}
.sam-by{color:var(--dim);font-size:12.5px;text-transform:uppercase;letter-spacing:.1em}
.sam-name{font:700 18px Sora}
.sam-card a{color:var(--gold);text-decoration:none;font-size:14px}
.ad-card{display:block;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px;text-decoration:none;color:var(--ink);transition:.18s}
.ad-card:hover{border-color:var(--gold);transform:translateY(-2px)}
.ad-kicker{color:var(--gold);font:800 12.5px Sora;letter-spacing:.16em}
.ad-text{color:var(--mut);font-size:14px;margin:8px 0 10px}
.ad-link{color:var(--ink);font:600 13.5px Inter}

/* footer */
.foot{border-top:1px solid var(--line);padding:26px 0 40px;text-align:center;color:var(--mut);font-size:14px}
.foot-small{color:var(--dim);font-size:12.5px;margin-top:6px}

/* ============ board ============ */
.board-bar{position:sticky;top:0;background:rgba(11,10,7,.92);backdrop-filter:blur(10px);z-index:20;border-bottom:1px solid var(--line)}
.search{flex:1;max-width:520px;background:var(--bg2);border:1px solid var(--line);border-radius:999px;
  color:var(--ink);font:500 15px Inter;padding:11px 20px;outline:none;transition:.18s}
.search:focus{border-color:var(--gold)}
.board-meta{color:var(--dim);font-size:13.5px;padding:14px 2px 6px}
#rows{padding-bottom:30px}
.cat-row{margin:18px 0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.cat-head{display:flex;align-items:center;gap:12px;padding:14px 18px;cursor:pointer;user-select:none}
.cat-head:hover{background:rgba(214,41,118,.06)}
.cat-title{font:700 16.5px Sora}
.cat-count{color:var(--dim);font-size:13px}
.cat-actions{margin-left:auto;display:flex;gap:6px}
.cat-actions button{background:none;border:none;color:var(--dim);cursor:pointer;font-size:14px;padding:4px 7px;border-radius:8px}
.cat-actions button:hover{color:var(--gold);background:rgba(214,41,118,.10)}
.cat-body{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:12px;padding:0 16px 16px;min-height:20px}
.cat-row.collapsed .cat-body{display:none}
.cat-row.dragover{border-color:var(--gold);box-shadow:0 0 0 2px rgba(214,41,118,.35) inset}
.chev{color:var(--dim);font-size:12px;transition:.15s}
.cat-row.collapsed .chev{transform:rotate(-90deg)}

/* card */
.card{background:var(--bg2);border:1px solid rgba(255,255,255,.06);border-radius:13px;padding:13px 14px;
  cursor:grab;transition:.15s;position:relative}
.card:hover{border-color:var(--line);transform:translateY(-1px)}
.card.dragging{opacity:.45}
.card .x{position:absolute;top:8px;right:8px;background:none;border:none;color:var(--dim);cursor:pointer;
  font-size:15px;line-height:1;padding:4px 6px;border-radius:8px}
.card .x:hover{color:var(--danger);background:rgba(255,93,93,.1)}
.card .author{color:var(--gold);font:600 13px Inter;text-decoration:none}
.card .txt{font-size:13.5px;color:var(--ink);margin:7px 0 9px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.card .tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:9px}
.card .tag{font-size:11px;color:var(--mut);background:rgba(255,255,255,.05);border-radius:999px;padding:2.5px 8px}
.card .cfoot{display:flex;align-items:center;justify-content:space-between}
.card .open{color:var(--ink);font:600 12.5px Inter;text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:5px 12px}
.card .open:hover{border-color:var(--gold);color:var(--gold)}
.card .mover{background:none;border:none;color:var(--dim);font-size:12.5px;cursor:pointer;padding:4px}
.card .mover:hover{color:var(--gold)}
.card .album{font-size:10.5px;color:var(--dim)}

/* board footer ads */
.board-foot{display:flex;gap:22px;justify-content:center;flex-wrap:wrap}
.foot-ad{color:var(--mut);text-decoration:none;font-size:13.5px}
.foot-ad:hover{color:var(--gold)}

/* toast */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:#201c12;border:1px solid var(--gold);
  color:var(--ink);padding:12px 22px;border-radius:999px;font-size:14.5px;z-index:80;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.toast button{background:none;border:none;color:var(--gold);font:700 14px Inter;cursor:pointer;margin-left:12px}

@media (max-width:640px){
  .topbar{flex-wrap:wrap}
  .search{order:3;max-width:none;width:100%}
  .hero{padding-top:46px}
}
.logo{display:flex;align-items:center}
.logo .mark{flex:none;margin-right:9px}

/* auth modal */
.modal{position:fixed;inset:0;background:rgba(5,3,8,.72);backdrop-filter:blur(6px);display:grid;place-items:center;z-index:60;padding:20px}
.modal[hidden]{display:none!important}
.modal-card{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:30px 28px;width:100%;max-width:400px}
.modal-card h3{font-family:Sora;font-size:22px;margin-bottom:6px}
.modal-sub{color:var(--mut);font-size:14px;margin-bottom:18px}
.modal-card input{width:100%;background:var(--bg2);border:1px solid var(--line);border-radius:12px;color:var(--ink);
  font:500 15px Inter;padding:13px 16px;margin-bottom:10px;outline:none}
.modal-card input:focus{border-color:var(--gold)}
.auth-err{color:var(--danger);font-size:13px;min-height:18px;margin-bottom:6px}
.modal-btns{display:flex;gap:10px}
.modal-btns .btn{flex:1;padding:13px 10px;font-size:15px;text-align:center;cursor:pointer;border:none}
.modal-btns .btn.ghost{border:1px solid var(--line);background:none;color:var(--ink)}
.gbtn{width:100%;margin-top:12px;background:none;border:1px solid rgba(255,255,255,.1);color:var(--dim);
  font:600 14px Inter;padding:12px;border-radius:12px;cursor:not-allowed}