/* RECKON — token desain bersama (hitam elegan + pink) */
:root{
  --bg:#09090B; --bg2:#0D0C10; --panel:#111014; --panel2:#16151A; --panel3:#1C1B21;
  --line:#1F1E24; --line2:#2B2A31; --line3:#3A3842;
  --ink:#F6F3F7; --ink2:#E4E0E8; --mut:#9C98A6; --mut2:#6E6A78; --mut3:#4A4752;
  --pink:#FF4F9A; --pink2:#FF79B3; --pink3:#FFC2DC; --pinkInk:#16040C; --pinkSoft:rgba(255,79,154,.12); --pinkLine:rgba(255,79,154,.32);
  --ok:#43D99B; --okSoft:rgba(67,217,155,.11); --warn:#FFB547; --warnSoft:rgba(255,181,71,.12); --bad:#FF6B6B; --badSoft:rgba(255,107,107,.1);
  --f:'Instrument Sans',system-ui,-apple-system,sans-serif; --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --r:12px; --r2:16px; --r3:22px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 var(--f);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
img{max-width:100%}
::selection{background:var(--pink);color:var(--pinkInk)}
.mono{font-family:var(--mono)}
.mut{color:var(--mut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* logo: lambang kecil + wordmark huruf besar berjarak */
.logo{display:inline-flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.18em;font-size:14px}
.logo img{width:24px;height:24px;display:block}

/* tombol */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 18px;border-radius:11px;border:1px solid var(--line2);background:var(--panel);font-weight:600;font-size:14px;white-space:nowrap;transition:background .15s,border-color .15s,transform .15s}
.btn:hover{border-color:var(--line3);background:var(--panel2)}
.btn.pink{background:var(--pink);border-color:var(--pink);color:var(--pinkInk)}
.btn.pink:hover{background:#ff66a8}
.btn.ghost{background:transparent}
.btn.sm{height:34px;padding:0 12px;font-size:13px;border-radius:9px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn svg{width:16px;height:16px}

.chip{display:inline-flex;align-items:center;gap:7px;font:500 11.5px var(--mono);padding:5px 9px;border-radius:999px;border:1px solid var(--line2);color:var(--mut);white-space:nowrap}
.dot{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none}
.dot.live{box-shadow:0 0 0 0 rgba(67,217,155,.5);animation:ping 1.8s infinite}
.dot.pink{background:var(--pink)}
.dot.idle{background:var(--mut2)}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(67,217,155,.45)}70%{box-shadow:0 0 0 7px rgba(67,217,155,0)}100%{box-shadow:0 0 0 0 rgba(67,217,155,0)}}

.verdict{display:inline-flex;align-items:center;gap:6px;font:700 10.5px var(--mono);letter-spacing:.08em;padding:4px 8px;border-radius:6px;text-transform:uppercase;white-space:nowrap}
.verdict.approved{background:var(--okSoft);color:var(--ok)}
.verdict.revise{background:var(--warnSoft);color:var(--warn)}
.verdict.rejected{background:var(--badSoft);color:var(--bad)}

.bar{height:7px;border-radius:99px;background:var(--line2);overflow:hidden}
.bar>i{display:block;height:100%;border-radius:99px;background:var(--pink);transition:width .6s}

.av{width:40px;height:40px;border-radius:11px;background:var(--panel3);display:grid;place-items:center;font:700 13px var(--mono);color:var(--pink2);overflow:hidden;flex:none}
.av img{width:100%;height:100%;object-fit:cover}

.ico{width:18px;height:18px;display:block}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:var(--panel3);border:1px solid var(--line3);padding:10px 16px;border-radius:10px;font-size:13.5px;opacity:0;transition:.25s;z-index:100;pointer-events:none}
.toast.on{opacity:1;transform:translateX(-50%)}

/* tombol X bergaya kepala robot RECKON, pink */
.xbtn{display:inline-grid;place-items:center;width:40px;height:40px;border:0!important;background:none!important;color:var(--pink);border-radius:10px;transition:filter .2s,transform .2s}
.xbtn .ico-x{width:30px;height:30px;filter:drop-shadow(0 0 6px rgba(255,79,154,.45))}
.xbtn:hover{transform:translateY(-1px)}
.xbtn:hover .ico-x{filter:drop-shadow(0 0 10px rgba(255,79,154,.85))}
.ico-x{width:20px;height:20px}
.ca .ico-x{width:18px;height:18px}
a.xbtn,.nav .sq.xbtn,.side .soc a.xbtn,.foot .off a.xbtn{color:var(--pink);border:0}