:root{
  --bg:#FBF9F5;
  --soft:#EFEAE2;
  --ink:#1A1A1A;
  --muted:rgba(26,26,26,0.55);
  --line:#EDE8E0;
  --accent:#C66B4F;
  --accent-ink:#A9533A;
  --danger:#B3261E;
  --wa:#25D366;
  --serif:"Instrument Serif",Georgia,serif;
  --sans:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;padding:env(safe-area-inset-top,0) 0 env(safe-area-inset-bottom,0)}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;line-height:1.12;letter-spacing:-0.02em}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:6px}
.wrap{max-width:860px;margin:0 auto;padding:0 20px}
.muted{color:var(--muted)}

/* top bar */
.top{border-bottom:1px solid var(--line)}
.top .row{display:flex;justify-content:space-between;align-items:center;height:64px}
.logo{font:400 20px var(--serif);letter-spacing:.18em;text-transform:uppercase;text-decoration:none}
.link{background:none;border:0;font:inherit;color:var(--muted);cursor:pointer;text-decoration:underline;text-underline-offset:4px;padding:6px}

/* buttons */
.btn{display:inline-block;font:600 15px/1 var(--sans);background:var(--ink);color:var(--bg);padding:15px 24px;border-radius:999px;border:0;cursor:pointer;text-decoration:none;text-align:center;transition:opacity .15s}
.btn:hover{opacity:.9}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn.small{padding:10px 16px;font-size:14px}
.btn.danger{background:transparent;color:var(--danger);border:1.5px solid var(--danger)}
.btn.wa{background:var(--wa);color:#073b1b;border:0}

/* fields */
.field{display:block;margin:0 0 18px}
.field>span{display:block;font:600 11px var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.field small{display:block;color:var(--muted);font-size:13px;margin-top:6px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=tel],textarea{width:100%;font:500 15px var(--sans);padding:14px 16px;border:1px solid var(--line);border-radius:0;background:var(--bg);color:var(--ink);outline:none;transition:border-color .15s}
textarea{min-height:100px;resize:vertical;line-height:1.6}
input:focus,textarea:focus{border-color:var(--accent)}
.err{color:var(--danger);font-size:14px;min-height:22px;margin:8px 0}
.card{background:var(--bg);border:1px solid var(--line);border-radius:0;padding:24px;margin:0 0 20px}
.pill{display:inline-block;padding:4px 12px;font:600 12px var(--sans);background:var(--soft);border:1px solid var(--line);color:var(--ink)}
.pill.accent{background:var(--accent);border-color:var(--accent);color:#fff}

/* auth */
.auth{max-width:420px;margin:0 auto;padding:56px 20px}
.auth h1{font-size:34px;margin-bottom:8px;letter-spacing:-0.03em}
.auth form{margin-top:32px}
.auth .btn{width:100%;margin-top:8px}
.auth .alt{margin-top:24px;text-align:center;color:var(--muted)}

/* dashboard */
.main{padding:32px 0 80px}
.linkcard{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.linkcard code{font:600 14px ui-monospace,Menlo,monospace;word-break:break-all;color:var(--ink)}
.btnrow{display:flex;gap:10px;flex-wrap:wrap}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.steps li{display:flex;gap:12px;align-items:flex-start}
.steps .tick{flex:none;width:24px;height:24px;border:1.5px solid var(--line);display:grid;place-items:center;font:700 12px var(--sans);margin-top:2px;color:var(--muted)}
.steps li.done .tick{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.steps li.done span.t{text-decoration:line-through;color:var(--muted)}
.steps span.t{font-size:15px;line-height:1.5}

/* tabs */
.tabs{display:flex;gap:32px;border-bottom:1px solid var(--line);margin:32px 0 28px;overflow-x:auto}
.tab{background:none;border:0;font:700 11px var(--sans);letter-spacing:.18em;text-transform:uppercase;padding:0 0 14px;cursor:pointer;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;transition:color .15s}
.tab[aria-selected=true]{color:var(--ink);border-bottom-color:var(--accent)}

/* product list */
.plist{display:grid;gap:0}
.prod{display:grid;grid-template-columns:80px 1fr;gap:18px;align-items:center;padding:20px 0;border-bottom:1px solid var(--line)}
.prod .th{width:80px;height:80px;background:var(--soft);overflow:hidden;display:grid;place-items:center;font:400 26px var(--serif);color:var(--muted)}
.prod .th img{width:100%;height:100%;object-fit:cover}
.prod .nm{font:500 14px var(--sans);line-height:1.3;text-transform:uppercase;letter-spacing:.06em;color:var(--ink)}
.prod .pr{margin-top:4px;font:400 13px ui-monospace,monospace;color:var(--muted);letter-spacing:.02em}
.prod .acts{display:flex;gap:18px;margin-top:10px}
.prod .acts button{background:none;border:0;font:700 10.5px var(--sans);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;color:var(--muted);padding:0}
.prod .acts button:hover{color:var(--accent)}
.prod .acts button.danger{color:var(--muted)}
.prod .acts button.danger:hover{color:var(--danger)}

.toprow{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.toprow h2{font:400 30px var(--serif);letter-spacing:-0.02em}
.toprow .count{font:500 12px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-bottom:6px}

/* dialog */
dialog{border:0;padding:0;max-width:560px;width:calc(100% - 24px);background:var(--bg);color:var(--ink);max-height:92vh;overflow:auto}
dialog::backdrop{background:rgba(26,26,26,.55)}
.dlg{padding:0}
.dlg .hd{display:flex;justify-content:space-between;align-items:center;padding:24px 28px;border-bottom:1px solid var(--line)}
.dlg h2{font:400 24px var(--serif);letter-spacing:-0.02em}
.dlg .bd{padding:24px 28px}
.dlg .ft{padding:20px 28px;border-top:1px solid var(--line);display:flex;gap:12px;justify-content:flex-end}
.dlg .close{background:none;border:0;font:400 20px var(--sans);cursor:pointer;color:var(--muted);line-height:1;padding:4px}
.dlg .close:hover{color:var(--ink)}

/* images in dialog */
.thumbs{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}
.thumb{position:relative;width:80px;height:80px;overflow:hidden;background:var(--soft);border:1px solid var(--line)}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb button{position:absolute;right:2px;top:2px;width:22px;height:22px;border:0;background:var(--bg);color:var(--ink);cursor:pointer;line-height:1;font-size:14px}

/* plans */
.plan{border:1px solid var(--line);padding:20px;margin-bottom:12px}
.plan.current{border-color:var(--accent)}
.plan h3{font:400 22px var(--serif);letter-spacing:-0.01em}
.plan .price{margin-top:4px;font:500 14px var(--sans);color:var(--ink)}
.plan ul{margin:10px 0 0;padding-left:20px;color:var(--muted);font-size:15px}

.bankbox{background:var(--soft);padding:16px 18px;margin:14px 0;line-height:2}
.bankbox div{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.bankbox span{color:var(--muted)}

/* toast */
#toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0));transform:translate(-50%,40px);background:var(--ink);color:var(--bg);padding:12px 22px;font:600 13px var(--sans);opacity:0;transition:.25s;pointer-events:none;z-index:99;max-width:90vw;text-align:center}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* admin table */
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:14px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle;font-weight:500}
th{font:700 11px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.hide{display:none!important}