/* Ardega Controller — tema gelap, aksen merah + emas (mengikuti contoh user 21/09) */
:root{
  --bg:#0b0b0c; --bg-2:#111113; --panel:#151517; --panel-2:#1b1b1e; --line:#26262a; --line-2:#333338;
  --text:#ebe9e4; --text-2:#b9b6b0; --muted:#7f7f86; --red:#c73a2f; --red-2:#e0483b; --red-dim:#5a1f1a;
  --gold:#d9a93e; --gold-dim:#3b2f14; --green:#22b56b; --blue:#4b7bec; --yellow:#e6c04a;
  --mono:"IBM Plex Mono","JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:"Inter","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --r:6px; --gutter:16px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:14px;line-height:1.45}
a{color:inherit;text-decoration:none}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:
  radial-gradient(1200px 500px at 50% -10%, rgba(199,58,47,.18), transparent 60%),
  radial-gradient(900px 400px at 100% 100%, rgba(217,169,62,.08), transparent 60%);}
.mono{font-family:var(--mono)}
.lbl{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.lbl.gold{color:var(--gold)}
.hint{font-size:12px;color:var(--muted)}

/* ── topbar ── */
.top{position:sticky;top:0;z-index:20;background:rgba(11,11,12,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top .row{display:flex;align-items:center;gap:14px;padding:0 var(--gutter);height:52px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-weight:700;letter-spacing:.22em;font-size:14px}
.brand .logo{width:34px;height:34px;border-radius:50%;box-shadow:0 0 12px rgba(224,72,59,.45)}
.auth .brand .logo{width:72px;height:72px;box-shadow:0 0 28px rgba(224,72,59,.5)}
.devsel{display:flex;align-items:center;gap:10px;padding:6px 12px;border-left:1px solid var(--line);border-right:1px solid var(--line);height:52px;position:relative}
.devsel .idx{font-family:var(--mono);font-size:11px;color:var(--muted);border:1px solid var(--line-2);padding:4px 6px;border-radius:4px}
.devsel .name{font-weight:600;font-size:13px;line-height:1.1}
.devsel .sub{font-size:11px;color:var(--muted)}
.devsel select{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}
.spacer{flex:1}
.badge{font-family:var(--mono);font-size:11px;letter-spacing:.14em;padding:7px 12px;border:1px solid;border-radius:4px;display:inline-flex;gap:8px;align-items:center}
.badge .dot{width:8px;height:8px;border-radius:50%;background:currentColor}
.badge.run{color:var(--green);border-color:rgba(34,181,107,.5)}
.badge.stale{color:var(--gold);border-color:rgba(217,169,62,.6)}
.badge.off{color:var(--muted);border-color:var(--line-2)}
.btn{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:8px 14px;border:1px solid var(--line-2);
  background:var(--panel);color:var(--text);border-radius:4px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.btn:hover{border-color:var(--text-2)}
.btn.red{color:var(--red-2);border-color:rgba(224,72,59,.6);background:rgba(199,58,47,.08)}
.btn.red:hover{background:rgba(199,58,47,.18)}
.btn.green{color:var(--green);border-color:rgba(34,181,107,.5);background:rgba(34,181,107,.08)}
.btn.gold{color:var(--gold);border-color:rgba(217,169,62,.6)}
.btn.solid{background:var(--red);border-color:var(--red);color:#fff}
.btn:disabled{opacity:.5;cursor:default}
.avatar{width:32px;height:32px;border-radius:4px;background:linear-gradient(135deg,#3a2a12,#6b4b1c);display:grid;place-items:center;font-family:var(--mono);font-weight:700;color:var(--gold)}
.tabs{display:flex;justify-content:center;gap:2px;border-bottom:1px solid var(--line);background:rgba(11,11,12,.6)}
.tabs a{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;padding:14px 22px;color:var(--text-2);border-bottom:2px solid transparent}
.tabs a.on{color:var(--gold);border-bottom-color:var(--gold);background:rgba(217,169,62,.06)}
.tabs a:hover{color:var(--text)}

/* ── layout ── */
.wrap{max-width:1280px;margin:0 auto;padding:0 var(--gutter) 60px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.panel+.panel{margin-top:14px}
.head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.head h1{font-size:18px;margin:0;font-weight:600}
.head h2{font-size:15px;margin:0;font-weight:600;text-align:center;width:100%}
.head .sub{text-align:center;color:var(--muted);font-size:12px;margin-top:2px}
.seg{display:flex;gap:2px}
.seg a,.seg button{font-family:var(--mono);font-size:11px;letter-spacing:.14em;padding:6px 10px;color:var(--text-2);border:1px solid transparent;border-radius:4px;background:none;cursor:pointer}
.seg a.on,.seg button.on{color:var(--gold);border-color:rgba(217,169,62,.5);background:rgba(217,169,62,.08)}
.lap{display:flex;gap:10px;align-items:center;justify-content:center;padding:10px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);flex-wrap:wrap}
.lap b{color:var(--gold);font-weight:500}
.lap .sep{color:var(--line-2)}

/* stat tiles */
.tiles{display:grid;grid-template-columns:repeat(4,1fr)}
.tile{padding:18px 20px;border-right:1px solid var(--line)}
.tile:last-child{border-right:0}
.tile .v{font-family:var(--mono);font-size:30px;font-weight:700;margin:6px 0 2px;letter-spacing:-.02em}
.tile .s{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.05em}
.chart{padding:10px 14px 4px}
.chart svg{width:100%;height:220px;display:block}
.bars{padding:10px 18px 16px}
.bar{display:grid;grid-template-columns:36px 1fr 80px 100px;align-items:center;gap:12px;padding:6px 0;font-family:var(--mono);font-size:12px}
.bar .track{height:8px;background:var(--bg-2);border-radius:2px;overflow:hidden}
.bar .fill{height:100%;background:var(--red);border-radius:2px}
.bar .n{text-align:right;font-weight:700;font-size:14px}
.bar .c{color:var(--muted);font-size:11px;text-align:right}
.troops{padding:8px 18px 14px;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.troop{border:1px solid var(--line);border-radius:4px;padding:10px 12px;background:var(--bg-2);font-size:12px}
.troop .st{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.troop .g{font-family:var(--mono);font-size:18px;font-weight:700}
/* 22/09: kartu pasukan — warna per status, hitung mundur besar, pasukan berhenti mencolok */
.troop .st .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;margin-right:6px;vertical-align:middle}
.troop .st.ok{color:var(--green)} .troop .st.go{color:#5aa9ff} .troop .st.back{color:var(--gold)} .troop .st.stop{color:var(--red)} .troop .st.rally{color:#c58cff}
.troop.stop{border-color:var(--red);background:color-mix(in srgb,var(--red) 8%,var(--bg-2))}
.troop .track{height:7px;background:var(--line);border-radius:3px;margin-top:8px;overflow:hidden}
.troop .fill{height:100%;background:var(--gold)} .troop .fill.ok{background:var(--green)} .troop .fill.go{background:#5aa9ff}
.troop .eta{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-top:8px;padding-top:8px;border-top:1px dashed var(--line)}
.troop .eta .lbl{font-size:11px} .troop .eta b{font-size:17px;font-weight:700}
.troop .eta.stop b{font-size:12px;color:var(--red);text-align:right}

/* settings */
.grid2{display:grid;grid-template-columns:1fr 1fr}
.grid2>.col{padding:16px 18px;border-right:1px solid var(--line)}
.grid2>.col:last-child{border-right:0}
.sect-title{text-align:center;font-weight:600;font-size:16px;margin:4px 0 2px}
.sect-sub{text-align:center;color:var(--muted);font-size:12px;margin-bottom:14px}
.rowf{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.rowf:last-child{border-bottom:0}
.rowf .k{font-weight:600;font-size:13px}
.rowf .d{font-size:11px;color:var(--muted);margin-top:2px}
.rowf.dim .k{color:var(--muted)}
.toggle{position:relative;width:38px;height:22px;flex:none}
.toggle input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.toggle span{position:absolute;inset:0;background:#2b2b30;border-radius:11px;transition:.15s}
.toggle span::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#8d8d94;transition:.15s}
.toggle input:checked+span{background:var(--green)}
.toggle input:checked+span::after{left:19px;background:#fff}
.num{font-family:var(--mono);background:var(--bg-2);border:1px solid var(--line-2);color:var(--text);padding:7px 10px;border-radius:4px;width:110px;text-align:right}
.txt{font-family:var(--sans);background:var(--bg-2);border:1px solid var(--line-2);color:var(--text);padding:8px 10px;border-radius:4px;width:100%}
select.txt{appearance:auto}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0 14px}
.lvl{position:relative;border:1px solid var(--line-2);border-radius:4px;padding:12px 8px 10px;text-align:center;background:linear-gradient(180deg,#2a1210,#1c0d0c);cursor:pointer}
.lvl input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.lvl .gem{width:26px;height:26px;margin:0 auto 6px;background:var(--red-2);clip-path:polygon(50% 0,100% 35%,80% 100%,20% 100%,0 35%);opacity:.6}
.lvl b{display:block;font-size:14px}
.lvl small{color:var(--text-2);font-size:11px}
.lvl:has(input:checked){border-color:var(--red-2);background:linear-gradient(180deg,#3a1613,#241010);box-shadow:inset 0 0 0 1px rgba(224,72,59,.35)}
.lvl:has(input:checked) .gem{opacity:1}
.lvl:has(input:checked)::after{content:"✓";position:absolute;right:8px;top:6px;color:var(--red-2);font-size:12px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{position:relative;border:1px solid var(--line-2);border-radius:4px;padding:7px 12px;font-size:12px;cursor:pointer;display:inline-flex;gap:8px;align-items:center;background:var(--bg-2)}
.chip input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.chip:has(input:checked){border-color:var(--text-2);background:var(--panel-2);color:var(--text)}
.chip.blue:has(input:checked){border-color:var(--blue)} .chip.red:has(input:checked){border-color:var(--red-2)} .chip.yellow:has(input:checked){border-color:var(--yellow)}
.chip .sw{width:10px;height:10px;border-radius:50%}
.slider{display:flex;align-items:center;gap:12px}
.slider input[type=range]{flex:1;accent-color:var(--red-2)}
.slider .val{font-family:var(--mono);font-size:18px;font-weight:700;min-width:80px;text-align:right}
.slider .val small{font-size:11px;color:var(--muted);font-weight:400}
.note{padding:12px 18px;color:var(--muted);font-size:12px;border-top:1px solid var(--line)}
.savebar{position:sticky;bottom:0;background:rgba(11,11,12,.92);border-top:1px solid var(--line);padding:12px var(--gutter);display:flex;justify-content:flex-end;gap:10px;backdrop-filter:blur(8px)}
.ok{color:var(--green)} .bad{color:var(--red-2)}
.danger{border:1px solid rgba(199,58,47,.5);background:rgba(199,58,47,.06);border-radius:var(--r);padding:14px 18px;display:flex;gap:16px;align-items:center;margin-top:14px}

/* tables & log */
table{width:100%;border-collapse:collapse;font-size:13px}
th{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.log{font-family:var(--mono);font-size:11.5px;background:var(--bg-2);padding:12px 14px;border-radius:4px;max-height:360px;overflow:auto;white-space:pre-wrap;color:var(--text-2)}
.form-inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.code{font-family:var(--mono);font-size:26px;letter-spacing:.3em;color:var(--gold);padding:10px 14px;border:1px dashed rgba(217,169,62,.5);border-radius:4px;display:inline-block}

/* login */
.auth{min-height:100vh;display:grid;place-items:center;padding:24px var(--gutter)}
.auth .box{width:100%;max-width:400px}
.auth .box .panel{padding:26px 24px}
.auth h1{font-family:var(--mono);letter-spacing:.2em;font-size:16px;margin:0 0 18px;text-align:center}
.auth label{display:block;margin:12px 0 6px}
.auth .btn{width:100%;justify-content:center;padding:11px}
.auth .alt{text-align:center;margin-top:14px;color:var(--muted);font-size:12px}
.auth .alt a{color:var(--gold)}

/* mobile */
@media (max-width:820px){
  .tiles{grid-template-columns:1fr 1fr}
  .tile:nth-child(2){border-right:0}
  .tile{border-bottom:1px solid var(--line)}
  .grid2{grid-template-columns:1fr}
  .grid2>.col{border-right:0;border-bottom:1px solid var(--line)}
  .top .row{height:auto;flex-wrap:wrap;padding:8px var(--gutter);gap:8px}
  .devsel{border:0;padding:0;height:auto;order:2;width:100%}
  .spacer{display:none}
  .tabs a{padding:12px 14px;font-size:11px}
  .bar{grid-template-columns:30px 1fr 70px}
  .bar .c{display:none}
  .head{flex-wrap:wrap}
}

/* strip multi-akun (user 21/09: satu jendela, klik ganti akun) */
.devstrip{display:flex;gap:6px;padding:8px var(--gutter);overflow-x:auto;background:var(--bg-2);border-bottom:1px solid var(--line)}
.devstrip a{flex:none;display:inline-flex;align-items:center;gap:8px;font-size:12px;padding:6px 12px;border:1px solid var(--line-2);border-radius:20px;color:var(--text-2);background:var(--panel)}
.devstrip a.on{border-color:var(--gold);color:var(--text)}
.devstrip .dot{width:8px;height:8px;border-radius:50%;background:var(--muted)}
.devstrip .dot.run{background:var(--green)} .devstrip .dot.stale{background:var(--gold)}
.events{padding:6px 18px 14px}
.ev{display:grid;grid-template-columns:70px 1fr;gap:12px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13px}
.ev:last-child{border-bottom:0}
.ev .t{font-family:var(--mono);font-size:11px;color:var(--muted);padding-top:2px}
.cards4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:8px 0 14px}
@media (max-width:820px){.cards4{grid-template-columns:repeat(2,1fr)}}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;padding:16px 18px}
.plan{border:1px solid var(--line-2);border-radius:6px;padding:16px;background:var(--bg-2)}
.plan .p{font-family:var(--mono);font-size:26px;font-weight:700;margin:6px 0}
.plan.best{border-color:var(--red-2);background:linear-gradient(180deg,#2a1210,#1c0d0c)}


/* 21/09 (user): spinner angka bawaan browser jelek -> stepper − / + bergaya slot */
input.num[type=number]{-moz-appearance:textfield;appearance:textfield}
input.num[type=number]::-webkit-outer-spin-button,input.num[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stepper{display:inline-flex;align-items:stretch;border:1px solid var(--line-2);border-radius:4px;overflow:hidden;background:var(--bg-2)}
.stepper input.num{border:0;border-radius:0;width:84px;text-align:center;background:transparent}
.stepper button{font-family:var(--mono);font-size:15px;line-height:1;width:34px;border:0;background:var(--bg-3,#1f1f23);color:var(--text);cursor:pointer;border-left:1px solid var(--line-2);border-right:1px solid var(--line-2)}
.stepper button:first-child{border-left:0}.stepper button:last-child{border-right:0}
.stepper button:hover{background:var(--line-2);color:var(--gold)}
.stepper button:active{background:var(--gold);color:#000}

/* ── 22/09: tata letak rapi desktop + ponsel (user: "banyak yang tidak simetris") ── */
.lorows{display:flex;flex-direction:column;gap:6px;margin:4px 0 10px}
.lorow{display:grid;grid-template-columns:70px 1fr 110px;gap:8px;align-items:center}
/* 22/09: baris join = March N · warna · slot · kapten (satu baris di desktop, kapten turun di layar kecil) */
.lorow.join{grid-template-columns:70px 1fr 110px 190px}
@media (max-width:760px){ .lorow.join{grid-template-columns:70px 1fr 110px} .lorow.join input[name^="join_cap"]{grid-column:1/-1;width:100%} }
.lorow>.lbl{margin:0}
.seg4{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.seg4 .chip{justify-content:center;padding:7px 4px;font-size:12px}
select.slot{width:110px;padding:7px 8px}
.pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:8px 0}
.pair label{display:flex;flex-direction:column;gap:4px}
.pair .lbl{margin:0}
.trainblock{border-bottom:1px solid var(--line);padding:4px 0 8px}
.trainblock:last-child{border-bottom:0}
.tiers{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:4px 0 6px}
.tiers .lvl{padding:8px 4px 6px;background:var(--bg-2)}
.tiers .lvl img{width:52px;height:52px;object-fit:contain;display:block;margin:0 auto 4px;filter:saturate(.35) brightness(.7)}
.tiers .lvl:has(input:checked) img{filter:none}
.tiers .lvl:has(input:checked){border-color:var(--gold);box-shadow:inset 0 0 0 1px rgba(217,169,62,.5);background:linear-gradient(180deg,#2a2010,#1c160c)}
.lvl.mat img{filter:saturate(.3) brightness(.6)}
.lvl.mat:has(input:checked) img{filter:none}
.lvl.mat:has(input:checked){border-color:var(--gold);box-shadow:inset 0 0 0 1px rgba(217,169,62,.5);background:linear-gradient(180deg,#2a2010,#1c160c)}
.rowf{flex-wrap:wrap}
.rowf>div:first-child{flex:1 1 200px;min-width:0}
.rowf>.stepper,.rowf>select,.rowf>input.txt,.rowf>.form-inline{margin-left:auto}
.tabs{overflow-x:auto;justify-content:flex-start;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{white-space:nowrap;flex:none}
@media (min-width:821px){.tabs{justify-content:center}}
@media (max-width:600px){
  :root{--gutter:12px}
  .top .row{display:grid;grid-template-columns:1fr auto;gap:8px 10px;padding:8px var(--gutter)}
  .top .row .brand{grid-column:1}
  .top .row .brand .logo{width:28px;height:28px}
  .top .row>.badge{display:none}
  .top .row>#actbtn,.top .row>#closebtn,.top .row>.avatar{grid-row:1;grid-column:2;justify-self:end}
  .top .row>#closebtn{margin-right:0}
  .top .row>.avatar{display:none}
  .devsel{grid-column:1 / -1;width:100%;border:0;padding:4px 0 0;height:auto}
  .devsel .name{font-size:14px}
  .tabs a{padding:11px 12px;font-size:11px;letter-spacing:.12em}
  .devstrip{padding:6px var(--gutter)}
  .head{padding:14px 12px}
  .head h2{font-size:15px}
  .grid2>.col{padding:12px}
  .lorow{grid-template-columns:1fr;gap:6px;padding:6px 0;border-bottom:1px solid var(--line)}
  .lorow:last-child{border-bottom:0}
  .lorow>.lbl{display:flex;justify-content:space-between;align-items:center}
  .lorow select.slot{width:100%}
  .seg4 .chip{padding:8px 2px;font-size:12px}
  .seg4 .chip .sw{width:8px;height:8px}
  .tiers{gap:4px}
  .tiers .lvl img{width:44px;height:44px}
  .tiers .lvl b{font-size:12px}
  .cards4{grid-template-columns:repeat(2,1fr);gap:6px}
  .lvl{padding:10px 6px 8px}
  .stepper input.num{width:64px}
  .stepper button{width:30px}
  .rowf{gap:8px 12px}
  .rowf .d{font-size:11px}
  .chips{gap:5px}
  .chip{padding:7px 9px;font-size:12px}
  .tile .v{font-size:24px}
  .events{padding:6px 12px 12px}
  .ev{grid-template-columns:56px 1fr;gap:8px}
  .lap{font-size:10px;gap:6px;padding:8px}
  .troops{padding:8px 12px 12px;grid-template-columns:1fr}
  .savebar{position:sticky;bottom:0;background:rgba(11,11,12,.95);padding:10px var(--gutter);margin:0 calc(-1 * var(--gutter));border-top:1px solid var(--line)}
  table{font-size:12px}
  .code{font-size:14px;word-break:break-all}
}
.pair .stepper{width:max-content}

/* ── 22/09: Overview hero ── */
.hero{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:18px 18px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.hero-title{font-size:22px;font-weight:600;line-height:1.2}
.hero-title .hint{font-size:12px;font-weight:400;margin-left:6px}
.hero-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.tile .lbl{display:flex;align-items:center;gap:6px}
.tico{height:18px;width:18px;object-fit:contain}
@media (max-width:600px){.hero{padding:14px 12px}.hero-title{font-size:19px}.hero .seg{width:100%;justify-content:space-between}}

.presults{position:absolute;left:0;right:0;top:100%;z-index:5;background:var(--panel);border:1px solid var(--line-2);border-radius:6px;margin-top:4px;overflow:hidden}
.presults:empty{display:none}
.prow{display:grid;grid-template-columns:32px 1fr auto;gap:10px;align-items:center;width:100%;padding:8px 10px;background:none;border:0;border-bottom:1px solid var(--line);color:var(--text);cursor:pointer;text-align:left;font:inherit}
.prow:last-child{border-bottom:0}.prow:hover{background:var(--bg-2)}
.prow img,.pav{width:32px;height:32px;border-radius:50%;background:var(--bg-2)}
.prow b{display:block;font-size:13px}.prow small{color:var(--muted);font-size:11px}