/* ===== Sahipix — "Black Gold" theme (Claude design consult + Kapil's yellow-black choice, 2026-10-03) ===== */
:root{
  --gold:#FFC83D; --gold-soft:#FFD34D; --gold-deep:#E5A800; --gold-dark:#B8860B;
  --black:#0A0A0A; --ink:#161616; --mut:#6f6a58;
  --bg:#FAF8F2; --card:#ffffff; --line:#E9E4D2; --radius:18px;
  --shadow:0 8px 24px rgba(10,10,10,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  background:
    radial-gradient(900px 400px at 10% -5%, #ffc83d2e 0%, transparent 60%),
    radial-gradient(800px 380px at 95% 0%, #ffc83d24 0%, transparent 55%),
    var(--bg);
  color:var(--ink); min-height:100vh; font-size:16px; line-height:1.6;
}
h1,h2,.logo{font-family:'Poppins','Inter',sans-serif}

/* ---------- hero (premium black, gold only on accents) ---------- */
.hero{
  background:linear-gradient(125deg,#050505,#101010 60%,#1C1C1C);
  color:#fff; padding:34px 18px 64px; position:relative; overflow:hidden;
  border-bottom:3px solid var(--gold);
}
.hero::after{
  content:""; position:absolute; inset:auto -10% -55% -10%; height:70%;
  background:radial-gradient(closest-side,#ffc83d2b,transparent 70%);
}
.hero-inner{max-width:880px;margin:0 auto;position:relative;z-index:1}
.logo{font-weight:800;font-size:26px;letter-spacing:.3px;color:#fff}
.logo span{color:var(--gold)}
.hero h1{font-size:clamp(26px,5.4vw,42px);line-height:1.15;margin:16px 0 8px;font-weight:800}
.hero h1 em{font-style:normal;color:var(--gold)}
.sub{opacity:.92;font-size:clamp(14px,2.6vw,17px);margin:0 0 16px;color:#EDEAE0}
.trust{
  display:inline-block;background:#ffc83d14;border:1px solid var(--gold);
  padding:9px 14px;border-radius:999px;font-size:13.5px;color:#FFE08A;backdrop-filter:blur(4px);
}

/* ---------- layout ---------- */
.wrap{max-width:880px;margin:-38px auto 40px;padding:0 14px;position:relative;z-index:2}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:20px;margin-bottom:18px;
}
.hidden{display:none!important}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:10px;margin-bottom:14px}
.tab{
  flex:1;padding:13px;border-radius:999px;border:1px solid var(--line);cursor:pointer;
  background:#fff;font-weight:700;font-size:15px;color:var(--mut);transition:.18s;
}
.tab.active{
  background:var(--black);color:var(--gold);border-color:var(--black);
  box-shadow:0 6px 16px rgba(10,10,10,.28);
}

/* ---------- form bits ---------- */
.lbl{display:block;font-weight:600;margin:14px 0 8px;font-size:14.5px}
.lbl:first-child{margin-top:2px}
select,input[type=number],input[type=text]{
  width:100%;padding:12px 13px;border:1.5px solid var(--line);border-radius:12px;
  font-size:15px;background:#FFFDF6;color:var(--ink);outline:none;transition:.15s;
}
select:focus,input:focus{border-color:var(--gold-deep);box-shadow:0 0 0 3px rgba(255,200,61,.35)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.grid2{grid-template-columns:1fr 1fr}}
.hint{color:var(--mut);font-size:12.5px;margin:9px 2px 0}

.drop{
  border:2px dashed var(--gold-deep);border-radius:16px;padding:28px 14px;text-align:center;
  background:#FFFDF6;cursor:pointer;transition:.15s;color:var(--mut);
}
.drop:hover,.drop:focus{border-color:var(--gold-deep);background:#FFF3C9;outline:none}
.drop.drag{border-color:var(--gold-deep);background:#FFF3C9}
.drop-big{font-size:34px;margin-bottom:6px}

.canvas-box{
  background:
    repeating-conic-gradient(#F3EDD8 0% 25%, #FFFDF6 0% 50%) 0 0/22px 22px;
  border:1px solid var(--line);border-radius:14px;display:flex;justify-content:center;padding:10px;
}
#stage{max-width:100%;height:auto;border-radius:10px;touch-action:none;cursor:grab;background:#fff}
#stage:active{cursor:grabbing}

.row{display:flex;align-items:center;gap:12px;margin:14px 0 4px;font-size:14px}
.row input[type=range]{flex:1;accent-color:var(--gold-deep)}
.check{display:flex;gap:9px;align-items:flex-start;margin:14px 0 4px;font-size:14px;cursor:pointer}
.check input{margin-top:3px;accent-color:var(--gold-deep)}

.cta{
  display:block;width:100%;text-align:center;margin-top:18px;padding:15px;border:1.5px solid var(--black);border-radius:14px;
  background:linear-gradient(180deg,var(--gold-soft),var(--gold));color:#111;font-weight:700;font-size:16.5px;
  cursor:pointer;box-shadow:0 6px 0 var(--gold-dark);transition:.15s;text-decoration:none;
  font-family:'Poppins',sans-serif;min-height:52px;
}
.cta:hover{transform:translateY(-1px)}
.cta:active{transform:translateY(4px);box-shadow:0 2px 0 var(--gold-dark)}
.ghost{
  display:block;width:100%;margin-top:10px;padding:12px;border-radius:12px;background:#fff;
  border:1.5px solid var(--black);font-weight:600;cursor:pointer;color:var(--ink);
}

.result{text-align:center}
.ok-badge{
  display:inline-block;background:var(--gold);color:#111;font-weight:700;
  padding:7px 14px;border-radius:999px;margin-bottom:12px;border:1px solid var(--black);
}
#outImg{max-width:260px;width:70%;border-radius:12px;border:1px solid var(--line);box-shadow:var(--shadow)}
.stats{display:flex;gap:10px;justify-content:center;margin:16px 0 4px;flex-wrap:wrap}
.stats>div{background:#FFF6DB;border:1px solid var(--line);border-radius:12px;padding:10px 16px;min-width:104px}
.stats span{display:block;font-size:11.5px;color:var(--mut);text-transform:uppercase;letter-spacing:.6px}
.stats b{font-size:17px}

/* ---------- how / table ---------- */
.how h2{font-size:19px;margin:6px 0 10px}
.how h3{font-size:15.5px;margin:16px 0 6px;font-family:'Poppins',sans-serif}
.how h3:first-of-type{margin-top:10px}
.how p{font-size:14.5px;line-height:1.7;margin:0 0 6px}
.how ol{margin:0 0 18px;padding-left:20px;line-height:1.75;font-size:14.5px}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
table{border-collapse:collapse;width:100%;font-size:13.5px;min-width:480px}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line)}
th{background:var(--black);color:var(--gold);font-family:'Poppins',sans-serif}
tr:last-child td{border-bottom:none}

footer{text-align:center;color:var(--mut);font-size:13px;padding:8px 0 26px}