/* SageVortex — vault green & bullion gold */
:root{
  --vault:#0D2621; --vault-2:#12322B; --vault-3:#183D34; --line:#2B5145; --line-soft:#21453B;
  --ivory:#F2ECDD; --muted:#A7B7AE; --faint:#7E948A;
  --gold:#D4AF5A; --gold-hi:#F1DC9C; --gold-lo:#9C7A34; --gold-ink:#2B1F05;
  --green:#86D5AE; --red:#E8846F; --amber:#F0C46A;
  --serif:"Bodoni Moda",Didot,"Times New Roman",serif;
  --sans:"Manrope",system-ui,sans-serif;
  --r-lg:18px; --r:12px; --r-sm:8px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);background:var(--vault);color:var(--ivory);line-height:1.6;font-size:16px;
  background-image:radial-gradient(1200px 600px at 85% -10%,rgba(212,175,90,.10),transparent 60%);background-repeat:no-repeat}
a{color:var(--gold-hi)}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.num,.stat b{font-variant-numeric:tabular-nums lining-nums}

/* header */
header.top{border-bottom:1px solid var(--line-soft);position:sticky;top:0;z-index:5;background:rgba(13,38,33,.88);backdrop-filter:blur(8px)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ivory);font-family:var(--serif);font-size:22px;font-weight:600;letter-spacing:.2px}
.logo i{width:22px;height:14px;display:inline-block;clip-path:polygon(18% 0,82% 0,100% 100%,0 100%);background:linear-gradient(160deg,var(--gold-hi),var(--gold) 45%,var(--gold-lo))}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:13px 24px;font:600 15px/1 var(--sans);cursor:pointer;text-decoration:none;transition:filter .15s,background .15s}
.btn-gold{background:linear-gradient(180deg,var(--gold-hi),var(--gold) 55%,#C39C45);color:var(--gold-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 1px 0 rgba(0,0,0,.25)}
.btn-gold:hover{filter:brightness(1.06)}
.btn-ghost{background:transparent;color:var(--ivory);border:1px solid var(--line)}
.btn-ghost:hover{background:var(--vault-2)}
.btn-red{background:transparent;color:var(--red);border:1px solid rgba(232,132,111,.45)}
.btn-red:hover{background:rgba(232,132,111,.08)}
.btn-sm{padding:8px 14px;font-size:13px}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:center;padding:72px 0 56px}
.hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(40px,6.4vw,72px);line-height:1.04;letter-spacing:-.5px;margin:0 0 22px;font-optical-sizing:auto}
.hero p.lead{color:var(--muted);font-size:18px;max-width:30em;margin:0 0 30px}
.hero .cta{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.hero .cta small{color:var(--faint);font-size:14px}
.badge{display:inline-block;color:var(--gold);font-size:14px;font-weight:600;margin-bottom:18px}

/* the ingot */
.ingot-stage{display:flex;justify-content:center;padding:20px 0}
.ingot-stage>div{width:100%;display:flex;flex-direction:column;align-items:center}
.ingot{position:relative;width:min(100%,400px);aspect-ratio:1.9/1;filter:drop-shadow(0 30px 40px rgba(0,0,0,.45))}
.ingot .face{position:absolute;inset:0;clip-path:polygon(9% 0,91% 0,100% 100%,0 100%);
  background:linear-gradient(172deg,#FBEFC4 0%,var(--gold-hi) 18%,var(--gold) 52%,#B38B3E 80%,#8E6C2C 100%)}
.ingot .top{position:absolute;left:13%;right:13%;top:11%;bottom:20%;clip-path:polygon(4% 0,96% 0,100% 100%,0 100%);
  background:linear-gradient(180deg,#F7E6B0,#E2C576 60%,#D2B062);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  box-shadow:inset 0 0 0 1px rgba(120,90,30,.25)}
.ingot .top .brand{font-family:var(--serif);font-size:clamp(20px,3.6vw,30px);font-weight:600;color:#7A5A1C;text-shadow:0 1px 0 rgba(255,244,210,.8),0 -1px 0 rgba(90,64,18,.35);letter-spacing:.5px}
.ingot .top .fine{font-size:clamp(11px,1.6vw,13px);font-weight:700;color:#8A6A26;text-shadow:0 1px 0 rgba(255,244,210,.7);letter-spacing:2px}
.ingot .top .serial{font-size:clamp(10px,1.4vw,12px);color:#946F2A;letter-spacing:1px}
.ingot .sheen{position:absolute;inset:0;clip-path:polygon(9% 0,91% 0,100% 100%,0 100%);overflow:hidden}
.ingot .sheen::after{content:"";position:absolute;top:-20%;bottom:-20%;width:28%;left:-40%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);animation:sheen 1.8s .4s ease-out 1 both}
@keyframes sheen{to{left:120%}}
.ingot-caption{margin-top:18px;text-align:center;color:var(--faint);font-size:13px}

/* sections */
section{padding:56px 0;border-top:1px solid var(--line-soft)}
h2{font-family:var(--serif);font-weight:500;font-size:clamp(28px,4vw,40px);line-height:1.15;margin:0 0 10px;letter-spacing:-.2px}
.sub{color:var(--muted);margin:0 0 32px;max-width:36em}

.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;counter-reset:s}
.step{padding:6px 28px 6px 0;margin-right:28px;border-right:1px solid var(--line-soft)}
.step:last-child{border-right:0;margin-right:0}
.step .n{font-family:var(--serif);font-size:44px;line-height:1;color:var(--gold)}
.step h3{margin:14px 0 6px;font-size:18px}
.step p{margin:0;color:var(--muted);font-size:15px}

/* assay sheet */
.assay{border:1px solid var(--line);border-radius:var(--r-lg);background:linear-gradient(180deg,var(--vault-2),rgba(18,50,43,.4));overflow:hidden}
.assay-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:18px 24px;border-bottom:1px solid var(--line)}
.assay-head b{font-family:var(--serif);font-size:20px;font-weight:500}
.assay-head span{color:var(--faint);font-size:13px}
.assay-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.assay-item{display:flex;gap:16px;padding:20px 24px;border-bottom:1px solid var(--line-soft)}
.assay-item:nth-child(odd){border-right:1px solid var(--line-soft)}
.assay-item:nth-last-child(-n+2){border-bottom:0}
.assay-item i.ti{font-size:22px;color:var(--gold);margin-top:2px}
.assay-item h3{margin:0 0 3px;font-size:16px}
.assay-item p{margin:0;color:var(--muted);font-size:14px}

/* form */
.connect{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:start}
.connect aside p{color:var(--muted)}
form.main{background:var(--vault-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px}
label.f{display:block;margin:20px 0 8px;font-size:14px;color:var(--ivory);font-weight:600}
form.main label.f:first-child{margin-top:0}
input[type=text],input[type=password],input[type=number],input[type=search],select{width:100%;padding:13px 14px;border-radius:var(--r);border:1px solid var(--line);background:var(--vault);color:var(--ivory);font:15px var(--sans)}
input::placeholder{color:var(--faint)}
input:focus,select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,175,90,.18)}
.hint{font-size:13px;color:var(--faint);margin-top:6px}

.presets{display:grid;gap:8px}
.preset{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;background:var(--vault);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;cursor:pointer;transition:border-color .15s}
.preset:hover{border-color:#3C6A5B}
.preset input{margin-top:6px;accent-color:var(--gold)}
.preset:has(input:checked){border-color:var(--gold);background:linear-gradient(180deg,rgba(212,175,90,.08),rgba(212,175,90,.02))}
.preset b{display:block;font-size:15px}
.preset small{color:var(--muted);font-size:13px}
.meter{display:flex;gap:3px;margin-top:8px}
.meter i{width:20px;height:4px;border-radius:2px;background:var(--line)}
.meter i.on{background:var(--gold)}
.meter.l4 i.on,.meter.l5 i.on{background:var(--red)}
.chips{display:none;flex-wrap:wrap;gap:6px;margin-top:10px}
.preset:has(input:checked) .chips{display:flex}
.chips span{font-size:12px;color:var(--gold-hi);border:1px solid rgba(212,175,90,.35);border-radius:999px;padding:2px 10px}

.seg{display:flex;gap:6px;background:var(--vault);border:1px solid var(--line);border-radius:999px;padding:4px}
.seg label{flex:1;text-align:center;border-radius:999px;padding:9px;cursor:pointer;font-size:14px;color:var(--muted)}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label:has(input:checked){background:var(--vault-3);color:var(--gold-hi);box-shadow:inset 0 0 0 1px rgba(212,175,90,.4)}
.seg label:has(input:focus-visible){outline:2px solid var(--gold-hi)}
.agree{display:flex;gap:10px;align-items:flex-start;margin:20px 0;font-size:14px;color:var(--muted)}
.agree input{margin-top:4px;accent-color:var(--gold)}
.warn{border-left:3px solid var(--amber);background:rgba(240,196,106,.07);color:#EBD9AE;border-radius:0 var(--r) var(--r) 0;padding:14px 16px;font-size:14px}

/* status / admin */
.card{background:var(--vault-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px}
.acct-num{font-family:var(--serif);font-size:34px;font-weight:500;line-height:1.1}
.stats{display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));margin:22px 0;background:var(--line-soft);border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden}
.stat{background:var(--vault-2);padding:16px 18px}
.stat span{display:block;color:var(--faint);font-size:13px;margin-bottom:4px}
.stat{min-width:0}
.stat b{font-family:var(--serif);font-size:28px;font-weight:500;line-height:1.1;white-space:nowrap}
.stat small{color:var(--faint);font-size:12px;margin-left:4px}
.pill{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:5px 12px;font-size:13px;font-weight:600;white-space:nowrap}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.pill.on{background:rgba(134,213,174,.12);color:var(--green)}
.pill.off{background:rgba(232,132,111,.12);color:var(--red)}
.pill.muted{background:var(--vault-3);color:var(--muted)}
.pos{color:var(--green)} .neg{color:var(--red)}
.err{color:var(--red);font-size:14px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.meta{color:var(--muted);font-size:14px}
.meta b{color:var(--ivory);font-weight:600}
details{margin-top:20px;border-top:1px solid var(--line-soft);padding-top:16px}
summary{cursor:pointer;color:var(--gold-hi);font-weight:600}

table{width:100%;border-collapse:collapse;font-size:14px}
td,th{padding:12px 10px;border-bottom:1px solid var(--line-soft);text-align:left;vertical-align:top}
th{color:var(--faint);font-weight:600;font-size:13px}
td small{color:var(--faint)}
.scroll{overflow-x:auto}
form.inline{display:inline}
footer{border-top:1px solid var(--line-soft);padding:28px 0;color:var(--faint);font-size:13px;margin-top:56px}

/* live status */
.stat em{display:block;font-style:normal;color:var(--faint);font-size:12px;margin-top:4px;min-height:1em}
.live{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--faint)}
.live i{width:8px;height:8px;border-radius:50%;background:var(--faint)}
.live.on{color:var(--green)}
.live.on i{background:var(--green);box-shadow:0 0 0 0 rgba(134,213,174,.6);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(134,213,174,0)}100%{box-shadow:0 0 0 0 rgba(134,213,174,0)}}
.pill.warnpill{background:rgba(240,196,106,.12);color:var(--amber)}
.banner{margin-top:18px;border-left:3px solid var(--amber);background:rgba(240,196,106,.07);color:#EBD9AE;border-radius:0 var(--r) var(--r) 0;padding:14px 16px;font-size:14px}
.stopbox{margin-top:18px;border:1px solid var(--line);border-radius:var(--r);padding:18px;display:grid;gap:10px;background:var(--vault)}
.stopbox[hidden]{display:none}
.stopopt{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;border:1px solid var(--line-soft);border-radius:var(--r);padding:12px 14px;cursor:pointer}
.stopopt:has(input:checked){border-color:var(--gold);background:rgba(212,175,90,.05)}
.stopopt input{margin-top:5px;accent-color:var(--gold)}
.stopopt small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
td.actions{min-width:250px}
td.actions form,td.actions a{margin:2px 2px 2px 0}
@media (prefers-reduced-motion:reduce){.live.on i{animation:none}}

/* panel ternak */
.addbtn{width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:none;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold) 55%,#C39C45);color:var(--gold-ink);text-decoration:none;font-size:18px}
.dash-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:6px}
.hero-num{font-family:var(--serif);font-size:clamp(40px,8vw,64px);font-weight:500;line-height:1.05;letter-spacing:-.5px}
.acct-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.acct{display:block;text-decoration:none;color:var(--ivory);background:var(--vault-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;transition:border-color .15s}
.acct:hover{border-color:rgba(212,175,90,.55)}
.acct-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.acct-top b{display:block;font-size:16px}
.acct-top small{color:var(--faint);font-size:13px}
.acct-eq{font-family:var(--serif);font-size:30px;font-weight:500;margin:16px 0 12px;line-height:1.1}
.acct-eq small{font-family:var(--sans);font-size:12px;color:var(--faint)}
.acct-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:12px 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.acct-row span{display:block;color:var(--faint);font-size:12px}
.acct-row b{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.acct-sub{font-family:var(--sans);font-size:13px;color:var(--muted);margin-top:4px}
.since{font-size:11px;color:var(--faint);font-weight:400}
.acct-foot{color:var(--muted);font-size:13px;margin-top:10px}
.acct .err{font-size:12px;margin-top:6px}
.acct-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:200px;border-style:dashed;color:var(--muted)}
.acct-add i{font-size:26px;color:var(--gold)}
.empty{text-align:center;padding:48px 24px}
.empty .sub{margin-left:auto;margin-right:auto}
form.main details,form.main summary{margin:0}

/* admin preset pages */
.adminnav{display:flex;gap:4px}
.adminnav a{color:var(--muted);text-decoration:none;font-size:14px;font-weight:600;padding:7px 14px;border-radius:999px;white-space:nowrap;line-height:1.2}
.adminnav a.on{color:var(--gold-hi);background:var(--vault-3)}
.flash{border-left:3px solid var(--green);background:rgba(134,213,174,.08);color:#CDEFDC;border-radius:0 var(--r) var(--r) 0;padding:12px 16px;font-size:14px;margin-bottom:16px}
.setlist{display:grid;gap:12px}
.note-card{font-size:13px;color:var(--muted);margin-bottom:16px;padding:14px 18px}
.toolbar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.toolbar input[type=search]{flex:1;min-width:200px}
.chk{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--muted);cursor:pointer}
.chk input{accent-color:var(--gold)}
.card.grp{padding:0;margin:0 0 12px;overflow:hidden;border-top:1px solid var(--line)}
.grp summary{padding:16px 20px;font-family:var(--serif);font-size:18px;font-weight:500;color:var(--ivory)}
.inrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,260px);gap:14px;padding:12px 20px;border-top:1px solid var(--line-soft);align-items:center}
.inrow.changed{background:rgba(212,175,90,.06);box-shadow:inset 3px 0 0 var(--gold)}
.inlabel{font-size:14px}
.inname{font-size:12px;color:var(--faint);margin-top:2px;word-break:break-all}
.inctl input,.inctl select{padding:10px 12px;font-size:14px}
.inctl input:disabled{opacity:.55}
.tag{display:inline-block;font-size:11px;font-weight:700;color:var(--gold-ink);background:var(--gold);border-radius:6px;padding:1px 7px;vertical-align:1px}
.savebar{position:sticky;bottom:0;z-index:3;display:flex;gap:14px;justify-content:flex-end;align-items:center;flex-wrap:wrap;background:var(--vault);border-top:1px solid var(--line);padding:14px 0;margin-top:8px;box-shadow:0 -12px 24px rgba(13,38,33,.9)}
code{font-size:13px;background:var(--vault-3);padding:1px 6px;border-radius:5px}

@media (max-width:820px){
  header.top .wrap{height:58px;gap:12px}
  .logo{font-size:19px}
  .adminnav a{font-size:13px;padding:6px 10px}
  .live #liveText{display:none}
  .acct-grid{grid-template-columns:1fr}
  .savebar{justify-content:space-between}
  .savebar .chk{flex:1 1 100%}
  .savebar .btn{flex:1 1 0}
  .grp summary{padding:14px 16px}
  .card.acctable{padding:6px 18px}
  .acctable table,.acctable tbody,.acctable tr,.acctable td{display:block;width:100%}
  .acctable tr:first-child{display:none}
  .acctable tr{padding:14px 0;border-bottom:1px solid var(--line-soft)}
  .acctable tr:last-child{border-bottom:0}
  .acctable td{display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px;border:0;padding:5px 0}
  .acctable td::before{content:attr(data-label);color:var(--faint);font-size:13px}
  .acctable td.actions{display:flex;flex-wrap:wrap;gap:6px;min-width:0;padding-top:10px}
  .acctable td.actions::before{display:none}
  .acctable td[colspan]{display:block}
  .inrow{padding:12px 16px}
  .toolbar{gap:10px}
  .hero{grid-template-columns:1fr;gap:12px;padding:44px 0 36px}
  .hero .ingot-stage{order:-1}
  .ingot{width:min(100%,320px)}
  .steps{grid-template-columns:1fr;gap:22px}
  .step{border-right:0;margin-right:0;padding:0 0 22px;border-bottom:1px solid var(--line-soft)}
  .step:last-child{border-bottom:0;padding-bottom:0}
  .assay-grid{grid-template-columns:1fr}
  .assay-item:nth-child(odd){border-right:0}
  .assay-item:nth-last-child(2){border-bottom:1px solid var(--line-soft)}
  .connect{grid-template-columns:1fr;gap:20px}
  form.main{padding:20px}
  .inrow{grid-template-columns:1fr}
  .card{padding:20px}
  .stat{padding:14px}
  .stat b{font-size:20px}
}
@media (prefers-reduced-motion:reduce){.ingot .sheen::after{animation:none;display:none}}

/* panel hosting */
.flash.pending{display:flex;align-items:center;gap:10px;border-left-color:var(--amber);background:rgba(240,196,106,.07);color:#EBD9AE}
.spin{width:14px;height:14px;border-radius:50%;border:2px solid rgba(240,196,106,.35);border-top-color:var(--amber);animation:spin 1s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
.acct-wait{border-style:dashed;opacity:.85}
.login-wrap{max-width:420px;padding-top:12vh}
.login-title{font-family:var(--serif);font-weight:500;font-size:40px;text-align:center;margin:14px 0 4px}
.login-ingot{display:flex;justify-content:center}
.login-ingot i{width:64px;height:38px;clip-path:polygon(16% 0,84% 0,100% 100%,0 100%);background:linear-gradient(160deg,var(--gold-hi),var(--gold) 45%,var(--gold-lo))}
@media (prefers-reduced-motion:reduce){.spin{animation:none}}

.setlink{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:20px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r);text-decoration:none;color:var(--ivory);background:var(--vault)}
.setlink:hover{border-color:rgba(212,175,90,.55)}
.setlink small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.setlink i{color:var(--gold);font-size:20px}

.sec-title{font-family:var(--serif);font-weight:500;font-size:22px;margin:26px 0 6px}
.setup b{display:block;font-size:16px}