/* ============================================================
   Design tokens — derived from the Lixy Store mark
   mark ink   #1A1E22  (hue 210, near-black)  -> neutral ramp
   mark paper #EDEFEF                          -> --tx
   mark dot   #4E8379  (hue 169, muted teal)   -> --brand / accents
   Palette is intentionally low-saturation to match the mark's
   restraint. Every text/surface pair below clears WCAG AA 4.5:1.
   ============================================================ */
:root{
/* neutral surfaces, hue 210 from the mark's ink */
--bg:#0D0F11;--sbg:#14171A;--card:#1B1F23;--raised:#24292E;
--brd:#2D3339;--brd2:#3D454C;--fld:#5E6A73;
/* text — --mu bumped 8B9B9C→9AA8A9 for AA on small 12px text over --sbg */
--tx:#ECEFEF;--tx2:#BDC6C7;--mu:#9AA8A9;
/* brand, hue 169 from the mark's dot */
--brand:#4E8379;--cr:#54AB9B;--accent:#7EC6B7;--c:#54AB9B;
/* semantic, desaturated to sit beside the brand teal */
--g:#57B894;--r:#DE7A75;--y:#D2A14B;--p:#9A8FC7;
/* solid button fills + their foregrounds */
--b1:#54AB9B;--b1f:#0D0F11;--b2:#2F7A62;--b2f:#EAF6F1;
--b3:#8E3B38;--b3f:#FDEEED;--b4:#24292E;--b4f:#C6CFD0;
--b5:#4A4270;--b5f:#EAE6F7;--b6:#D2A14B;--b6f:#1A1E22;
--b7:#2C6D61;--b7f:#E8F5F1;--b8:#805024;--b8f:#FAEFE0;
/* geometry — the mark is built from round caps, so radii stay soft */
--r1:8px;--r2:10px;--r3:14px;--rp:999px;
/* the mark's own tracking, reused for all label/eyebrow text */
--track:.18em;
--ease:cubic-bezier(.2,.6,.2,1);
/* Motion scale. --spring overshoots slightly; --out-expo decelerates
   hard then settles. Both are used by the JS Web Animations calls so
   CSS and JS motion feel like one system. */
--spring:cubic-bezier(.34,1.56,.64,1);
--out-expo:cubic-bezier(.16,1,.3,1);
--in-out:cubic-bezier(.65,0,.35,1);
--t-fast:.16s;--t-med:.28s;--t-slow:.44s;
/* Elevation, one consistent ramp instead of ad-hoc inline shadows. */
--el1:0 1px 2px rgba(0,0,0,.28);
--el2:0 6px 18px -6px rgba(0,0,0,.45);
--el3:0 24px 60px -20px rgba(0,0,0,.7);
--glow:0 0 0 1px rgba(84,171,155,.28),0 8px 32px -8px rgba(84,171,155,.32);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--tx);font-family:'Inter',system-ui,-apple-system,sans-serif;min-height:100vh;padding:20px;overflow-x:hidden;font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}

/* Radial wash echoing the mark's off-centre dot: one soft teal bloom,
   top-right, same relative position as the dot on the X. */
body::before{content:'';position:fixed;top:-20vh;right:-10vw;width:70vw;height:70vw;max-width:900px;max-height:900px;background:radial-gradient(circle,rgba(78,131,121,.10),transparent 62%);pointer-events:none;z-index:0;contain:strict;will-change:opacity}
body>*{position:relative;z-index:1}

/* ---------- form controls ---------- */
label{display:block;font-size:10px;color:var(--mu);font-weight:600;margin-bottom:5px;text-transform:uppercase;letter-spacing:var(--track)}
/* Checkbox rows are sentences, not field eyebrows — opt out of the
   uppercase label treatment so they stay readable. */
label.chk{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--tx2);font-weight:500;text-transform:none;letter-spacing:normal;margin-bottom:0;cursor:pointer}
label.chk:hover{color:var(--tx)}
label.chk input{width:auto;flex-shrink:0}
/* Section eyebrow — same treatment as a label, but for content that is
   not a form control (tables, groups). Was previously a bare <label>. */
.eyebrow{font-size:10px;color:var(--mu);font-weight:600;margin-bottom:6px;text-transform:uppercase;letter-spacing:var(--track)}
/* One size for the dense secondary action rows, replacing a scatter of
   inline font-size/padding overrides that ranged 8px-11px. */
.btn-sm{font-size:10px;padding:5px 10px}
.btn-md{font-size:11px;padding:7px 13px}
.btn-xs{font-size:9px;padding:3px 7px;letter-spacing:.02em}
input,textarea,select{background:var(--sbg);border:1px solid var(--brd2);color:var(--tx);padding:10px 12px;border-radius:var(--r1);width:100%;font-size:13px;font-family:inherit;outline:0;transition:border-color .18s var(--ease),box-shadow .18s var(--ease),background-color .18s var(--ease)}
input::placeholder,textarea::placeholder{color:var(--mu);opacity:.8}
input:hover,textarea:hover,select:hover{border-color:var(--fld)}
input:focus,textarea:focus,select:focus{border-color:var(--cr);background:var(--bg);box-shadow:0 0 0 3px rgba(84,171,155,.22)}
input:disabled,textarea:disabled,select:disabled{opacity:.55;cursor:not-allowed}
select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--mu) 50%),linear-gradient(135deg,var(--mu) 50%,transparent 50%);background-position:calc(100% - 17px) center,calc(100% - 12px) center;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:32px}
textarea{resize:vertical;font-family:'SF Mono',ui-monospace,Consolas,monospace;font-size:12px;line-height:1.65}
input[type=checkbox]{accent-color:var(--cr);width:auto}

/* Focus ring for keyboard users on every interactive element. */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button:focus-visible,.tb:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- buttons ---------- */
button{border:0;border-radius:var(--r1);cursor:pointer;font-weight:600;font-size:13px;padding:9px 16px;transition:background-color .16s var(--ease),transform .12s var(--ease),opacity .16s var(--ease);font-family:inherit;letter-spacing:.01em;line-height:1.2}
button:active{transform:translateY(1px)}
button:disabled{cursor:not-allowed;opacity:.45;transform:none}
.btn1{background:var(--b1);color:var(--b1f);font-weight:700}.btn1:hover:not(:disabled){background:#62B2A3}
.btn2{background:var(--b2);color:var(--b2f)}.btn2:hover:not(:disabled){background:#296B56}
.btn3{background:var(--b3);color:var(--b3f)}.btn3:hover:not(:disabled){background:#7F3532}
.btn4{background:var(--b4);color:var(--b4f)}.btn4:hover:not(:disabled){background:#2D3339}
.btn5{background:var(--b5);color:var(--b5f)}.btn5:hover:not(:disabled){background:#423A63}
.btn6{background:var(--b6);color:var(--b6f);font-weight:700}.btn6:hover:not(:disabled){background:#CE983B}
.btn7{background:var(--b7);color:var(--b7f);font-weight:700}.btn7:hover:not(:disabled){background:#265E54}
/* btn8 — the "Nonklaim" export, previously an inline #92400e with
   unreadable dark text. Same amber family, contrast-corrected. */
.btn8{background:var(--b8);color:var(--b8f);font-weight:700}.btn8:hover:not(:disabled){background:#6F4520}

/* ---------- layout ---------- */
.flex{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.card{background:var(--card);border:1px solid var(--brd);border-radius:var(--r3);padding:20px;margin-bottom:12px;transition:border-color .2s var(--ease)}
.card:hover{border-color:var(--brd2)}
hr{border:0;border-top:1px solid var(--brd);margin:14px 0}

/* ---------- status chips ---------- */
.tag{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:var(--rp);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:var(--track)}
/* The leading dot mirrors the mark's teal dot. */
.tag::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0}
.tag-off{background:rgba(222,122,117,.12);color:var(--r);border:1px solid rgba(222,122,117,.28)}
.tag-on{background:rgba(87,184,148,.12);color:var(--g);border:1px solid rgba(87,184,148,.28)}
.tag-on::before{animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;font-size:12px}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--brd)}
th{color:var(--mu);font-weight:700;font-size:9px;text-transform:uppercase;letter-spacing:var(--track);background:var(--sbg);position:sticky;top:0;z-index:1}
td{color:var(--tx2)}
tr:last-child td{border-bottom:0}
tr:hover td{background:rgba(84,171,155,.05);color:var(--tx)}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:4px;margin-bottom:16px;border-bottom:1px solid var(--brd);padding-bottom:10px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;scroll-padding:12px;-webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{display:none}
.tb{padding:8px 14px;border-radius:var(--r1);font-size:12px;font-weight:600;cursor:pointer;color:var(--mu);background:0;border:1px solid transparent;transition:color .16s var(--ease),background-color .16s var(--ease),border-color .16s var(--ease);white-space:nowrap;scroll-snap-align:start}
.tabs-sep{width:1px;align-self:stretch;margin:2px 6px;background:var(--brd);flex-shrink:0;opacity:.6}
.tb:hover{color:var(--tx2);background:var(--sbg)}
.tb.sel{color:var(--cr);background:rgba(84,171,155,.12);border-color:rgba(84,171,155,.35);font-weight:700}
.pane{display:none}
/* Animasi masuk pane ada di ui.css (paneIn). Di sini hanya
   visibilitas — dua deklarasi `animation` pada selector yang sama
   membuat yang di app.css selalu mati tertimpa. */
.pane.sel{display:block}

/* Segmented control. `.tb` was previously reused for these mode
   switches, which read as a second row of page tabs. A distinct
   segmented style makes the difference legible. */
.seg{display:inline-flex;background:var(--sbg);border:1px solid var(--brd);border-radius:var(--r1);padding:2px;gap:2px}
.seg-b{background:0;color:var(--mu);font-size:11px;font-weight:600;padding:5px 12px;border-radius:6px;white-space:nowrap}
.seg-b:hover{color:var(--tx2);background:var(--raised)}
.seg-b.sel{background:var(--raised);color:var(--cr);font-weight:700}

/* ---------- log terminals ---------- */
.logs{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:14px}
.term{height:200px;background:var(--sbg);border:1px solid var(--brd);border-radius:var(--r1);padding:11px;overflow-y:auto;font-family:'SF Mono',ui-monospace,Consolas,monospace;font-size:11px;line-height:1.55;white-space:pre-wrap;color:var(--mu);scrollbar-width:thin}
.term::-webkit-scrollbar{width:5px}
.term::-webkit-scrollbar-thumb{background:var(--brd2);border-radius:3px}
.mu{color:var(--mu);font-size:11px;margin-top:2px}

/* ---------- callouts ---------- */
.tip{background:rgba(84,171,155,.06);border:1px solid rgba(84,171,155,.2);border-radius:var(--r1);padding:12px 14px;margin-bottom:10px;border-left:3px solid var(--cr)}
.tip-y{background:rgba(210,161,75,.06);border-color:rgba(210,161,75,.2);border-left-color:var(--y)}
.tip-p{background:rgba(154,143,199,.06);border-color:rgba(154,143,199,.2);border-left-color:var(--p)}

/* ---------- auth ---------- */
/* Shell fills the viewport minus body padding so the card centres on
   both axes. body itself is not a flex container, so margin:auto on
   the card alone only ever centred it horizontally. */
.auth-shell{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 40px)}
@supports(min-height:100dvh){.auth-shell{min-height:calc(100dvh - 40px)}}
.login-wrap{width:100%;max-width:390px;background:var(--card);border:1px solid var(--brd);border-radius:18px;padding:34px 28px 26px;box-shadow:0 24px 60px -20px rgba(0,0,0,.7)}
.login-wrap h2{font-size:15px;font-weight:700;color:var(--tx);text-align:center;margin-bottom:24px;letter-spacing:var(--track);text-transform:uppercase}
.login-wrap h2 .dot{color:var(--brand)}
.login-wrap input{margin-bottom:9px}
.login-wrap .lnk{color:var(--cr);text-decoration:none;font-weight:600}
.login-wrap .lnk:hover{color:var(--accent);text-decoration:underline}

/* ---------- shell ---------- */
.app{width:100%;max-width:1140px;margin:0 auto}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;padding:13px 18px;border:1px solid var(--brd);border-radius:var(--r3);background:var(--card);flex-wrap:wrap}
.topbar .logo{display:flex;align-items:center;gap:11px;font-size:14px;font-weight:700;color:var(--tx)}
.topbar .logo svg{width:30px;height:30px;flex-shrink:0}
/* Wordmark keeps the mark's wide tracking; the dot is the only colour. */
.topbar .logo .wm{letter-spacing:var(--track);text-transform:uppercase;white-space:nowrap}
.topbar .logo .wm i{font-style:normal;color:var(--brand)}
.brand-icon{transition:transform .5s var(--ease)}
.topbar .logo:hover .brand-icon{transform:rotate(-8deg)}
.clock{font-size:11px;color:var(--cr);font-weight:700;font-family:'SF Mono',ui-monospace,Consolas,monospace;background:rgba(84,171,155,.1);padding:4px 9px;border-radius:var(--r1);letter-spacing:.02em}
.frm{display:flex;flex-direction:column;gap:8px}
.frm-row{display:flex;gap:10px}
.frm-row>*{flex:1}

/* ---------- token cards ---------- */
.tk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:12px;margin-top:10px}
.tk-card{background:var(--sbg);border:1px solid var(--brd);border-radius:var(--r2);overflow:hidden;transition:border-color .2s var(--ease)}
.tk-card:hover{border-color:var(--brd2)}
.tk-head{display:flex;justify-content:space-between;align-items:center;padding:11px 14px;background:var(--raised);border-bottom:1px solid var(--brd)}
.tk-head b{font-size:12px;color:var(--cr);letter-spacing:.02em}
.tk-head .tk-badge{font-size:9px;padding:3px 9px;border-radius:var(--rp);font-weight:700;letter-spacing:.06em}
.tk-badge-run{background:rgba(210,161,75,.14);color:var(--y)}
.tk-badge-done{background:rgba(87,184,148,.14);color:var(--g)}
.tk-badge-err{background:rgba(222,122,117,.14);color:var(--r)}
.tk-body{padding:6px 0;max-height:260px;overflow-y:auto;scrollbar-width:thin}
.tk-body::-webkit-scrollbar{width:4px}
.tk-body::-webkit-scrollbar-thumb{background:var(--brd2);border-radius:2px}
.tk-row{display:flex;align-items:center;padding:6px 14px;gap:8px;font-size:11px;border-bottom:1px solid var(--brd);transition:background .18s var(--ease)}
.tk-row:last-child{border-bottom:0}
.tk-row:hover{background:rgba(84,171,155,.05)}
.tk-num{color:var(--mu);width:22px;text-align:center;flex-shrink:0;font-weight:600;font-size:10px}
.tk-va{color:var(--cr);font-family:'SF Mono',ui-monospace,Consolas,monospace;font-size:10px;cursor:pointer;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-va:hover{color:var(--accent)}
.tk-token{color:var(--g);font-family:'SF Mono',ui-monospace,Consolas,monospace;font-size:10px;cursor:pointer;flex:1.5;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.tk-token:hover{color:var(--accent)}
.tk-sts{font-size:9px;font-weight:700;flex-shrink:0;width:48px;text-align:right;letter-spacing:.04em}
.tk-sts-done{color:var(--g)}
.tk-sts-wait{color:var(--y)}
.tk-sts-fail{color:var(--r)}
.tk-sts-idpel{color:var(--mu)}
.tk-foot{display:flex;gap:14px;padding:9px 14px;border-top:1px solid var(--brd);font-size:10px;color:var(--mu);background:var(--bg)}
.tk-foot span{white-space:nowrap}
.tk-foot b{color:var(--tx2);font-weight:700}
.tk-foot .ft-g{color:var(--g)}
.tk-foot .ft-r{color:var(--r)}


.req{color:var(--r);font-weight:700}
.field-err{font-size:11px;color:var(--r);margin-top:4px;display:none}
.field-err.show{display:block}
input.invalid,select.invalid,textarea.invalid{border-color:var(--r)!important;box-shadow:0 0 0 3px rgba(222,122,117,.18)!important}
.wiz{background:var(--sbg);border:1px dashed var(--brd2);border-radius:var(--r2);padding:14px;margin-bottom:14px}
.wiz-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.wiz-h b{font-size:12px;color:var(--tx)}
.wiz-steps{display:flex;gap:8px;flex-wrap:wrap}
.wiz-step{display:inline-flex;align-items:center;gap:7px;font-size:11px;color:var(--mu);background:var(--raised);border:1px solid var(--brd);border-radius:var(--rp);padding:5px 10px}
.wiz-step i{width:18px;height:18px;display:grid;place-items:center;background:var(--brand);color:var(--tx);border-radius:50%;font-style:normal;font-size:10px;font-weight:800;flex-shrink:0}
.poll-bar{height:4px;background:var(--sbg);border-radius:var(--rp);overflow:hidden;border:1px solid var(--brd)}
.poll-fill{height:100%;width:0;background:linear-gradient(90deg,var(--cr),var(--accent));transition:width .4s var(--ease);border-radius:var(--rp)}
.logs-bar{margin-top:14px}
/* semantic aliases */
.btn-primary{background:var(--b1);color:var(--b1f)}.btn-danger{background:var(--b3);color:var(--b3f)}.btn-subtle{background:var(--b4);color:var(--b4f)}

/* ---------- responsive ---------- */
@media(max-width:700px){
body{padding:12px;padding-bottom:max(12px,env(safe-area-inset-bottom))}
.auth-shell{min-height:calc(100vh - 24px)}
@supports(min-height:100dvh){.auth-shell{min-height:calc(100dvh - 24px)}}
.g2,.g3{grid-template-columns:1fr}
.logs{grid-template-columns:1fr}
.frm-row{flex-direction:column}
.card{padding:16px;border-radius:var(--r2)}
.topbar{padding:12px 14px;gap:10px}
.topbar .flex{width:100%;justify-content:flex-end}
.tk-grid{grid-template-columns:1fr}
.tabs{margin:0 -12px 16px;padding:0 12px 10px;mask-image:linear-gradient(to right,transparent 0,black 12px,black calc(100% - 12px),transparent 100%);-webkit-mask-image:linear-gradient(to right,transparent 0,black 12px,black calc(100% - 12px),transparent 100%)}
.tb{min-height:38px}
table{font-size:11px}
th,td{padding:8px 10px}
div[style*="overflow-x:auto"]{-webkit-overflow-scrolling:touch;scrollbar-width:thin}
div[style*="overflow-x:auto"]::-webkit-scrollbar{height:5px}
div[style*="overflow-x:auto"]::-webkit-scrollbar-thumb{background:var(--brd2);border-radius:3px}
input,textarea,select{font-size:16px}
input::placeholder,textarea::placeholder{font-size:13px}
button:not(.btn-xs):not(.btn-sm){min-height:42px}
.btn-sm{min-height:32px}
.flex{row-gap:8px}
}
@media(max-width:380px){
body{padding:10px}
.card{padding:14px}
.topbar{padding:10px 12px}
.lp-nav{padding:10px 12px}
}

/* Respect users who ask for less motion.
   Pemicunya .calm pada <html>, dipasang static/js/motion.js — BUKAN
   media query langsung. Alasannya: Windows menyalakan
   prefers-reduced-motion juga saat "Show animations" dimatikan demi
   performa, dan di mesin seperti itu seluruh halaman tampil mati tanpa
   cara apa pun untuk menyalakannya. motion.js memakai preferensi
   sistem sebagai nilai awal lalu membiarkan user menimpanya.
   Fallback tanpa JS ada di <noscript> index.html. */
/* calm: matikan animasi berulang saja. Transition hover (card lift,
   button bg, nav stuck) dibiarkan supaya tidak snap/jank. */
html.calm *,html.calm *::before,html.calm *::after{animation-duration:.01ms!important;animation-iteration-count:1!important}
html.calm .lp-hero.hero-anim [data-reveal],html.calm [data-reveal]{transition:none!important}