/* ============================================================
   Азын хүрд — admin panel only.

   Deliberately unlike the player wheel: quiet, flat, thin-ruled.
   The player side keeps app.css; nothing here touches it.
   ============================================================ */
:root{
  --bg:#FBFBFD;
  --surface:#FFFFFF;
  --ink:#1D1D1F;
  --ink-2:#6E6E73;
  --ink-3:#98989D;
  --line:#E6E6EA;
  --line-2:#D6D6DB;
  --accent:#0071E3;
  --accent-soft:#EBF4FE;
  --danger:#C7362F;
  --danger-soft:#FDF0EF;
  --ok:#1B7F5A;
  --ok-soft:#EDF7F2;
  --warn:#8A6A17;
  --warn-soft:#FDF6E7;
  --r:12px;
  --r-sm:8px;
}

*{box-sizing:border-box}
[hidden]{display:none!important}

html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',
    'Helvetica Neue',Inter,system-ui,sans-serif;
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  letter-spacing:-0.011em;
}

/* ---------- layout ---------- */
.admin-wrap{max-width:860px;margin:0 auto;padding:36px 22px 90px}
.gate{max-width:340px;margin:16vh auto 0}
.head{display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;margin-bottom:26px}
h1{margin:0;font-size:26px;font-weight:600;letter-spacing:-0.021em}
h2{margin:0 0 14px;font-size:17px;font-weight:600;letter-spacing:-0.014em}
h3{margin:0;font-size:15px;font-weight:590;letter-spacing:-0.01em;
  display:flex;align-items:center;gap:9px;min-width:0}
.center-text{text-align:center}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.grid{display:grid;gap:18px}
.grid.two{grid-template-columns:1fr 1fr}
@media(max-width:600px){
  .admin-wrap{padding:26px 16px 70px}
  .grid.two{grid-template-columns:1fr}
}

/* ---------- surfaces ---------- */
.card{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:22px}
.item{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:15px 17px;margin-bottom:9px}
.item:hover{border-color:var(--line-2)}

/* ---------- tabs: a quiet segmented control ---------- */
.tabs{display:flex;gap:2px;padding:3px;margin-bottom:18px;
  background:#F0F0F3;border-radius:10px;overflow-x:auto}
.tab{flex:0 0 auto;width:auto;margin:0;padding:7px 15px;border:0;cursor:pointer;
  background:transparent;color:var(--ink-2);border-radius:7px;
  font:inherit;font-size:14px;font-weight:510;white-space:nowrap;
  display:flex;align-items:center;gap:7px;transition:background .15s,color .15s}
.tab:hover{color:var(--ink)}
.tab.on{background:var(--surface);color:var(--ink);font-weight:590;
  box-shadow:0 1px 2px rgba(0,0,0,.06)}

.panel{display:none}
.panel.on{display:block}

/* ---------- type ---------- */
label{display:block;margin:0 0 6px;font-size:13px;font-weight:510;color:var(--ink-2)}
.hint{margin:6px 0 0;font-size:12.5px;line-height:1.45;color:var(--ink-3)}
.meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px;
  font-size:13px;color:var(--ink-2)}
.meta b{color:var(--ink);font-weight:560}
.empty{padding:34px 0;text-align:center;font-size:14px;color:var(--ink-3)}
.foot{margin-top:22px;text-align:center;font-size:13px;color:var(--ink-3)}
.foot a{color:var(--accent);text-decoration:none}
.foot a:hover{text-decoration:underline}

/* ---------- fields ---------- */
input,select,textarea{
  width:100%;padding:9px 11px;font:inherit;font-size:14.5px;
  color:var(--ink);background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--r-sm);
  outline:none;transition:border-color .15s,box-shadow .15s}
input:hover,select:hover,textarea:hover{border-color:#BFBFC6}
input:focus,select:focus,textarea:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
input::placeholder,textarea::placeholder{color:var(--ink-3)}
input[type=color]{padding:3px;height:38px;cursor:pointer}
textarea{resize:vertical;min-height:76px;line-height:1.5}
select{appearance:none;cursor:pointer;padding-right:32px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236E6E73' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center}

.inline{display:flex;align-items:center;gap:9px;margin-top:11px;
  font-size:14px;font-weight:450;color:var(--ink)}
.inline input{width:16px;height:16px;margin:0;accent-color:var(--accent);cursor:pointer}
.linkonly.off{display:none}

/* ---------- buttons ---------- */
button{font:inherit;cursor:pointer}
.barbtn,form button[type=submit]{
  width:auto;margin:0;padding:8px 17px;font-size:14px;font-weight:510;
  color:#fff;background:var(--ink);border:1px solid var(--ink);
  border-radius:var(--r-sm);transition:opacity .15s}
.barbtn:hover,form button[type=submit]:hover{opacity:.85}
.barbtn:active,form button[type=submit]:active{opacity:.7}
.barbtn:disabled{opacity:.4;cursor:not-allowed}
.barbtn.sec,.acts .sec{color:var(--ink);background:var(--surface);
  border:1px solid var(--line-2)}
.barbtn.sec:hover,.acts .sec:hover{background:#F5F5F7;opacity:1}
.acts{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}
.acts button{width:auto;margin:0;padding:6px 13px;font-size:13.5px;font-weight:510;
  color:#fff;background:var(--ink);border:1px solid var(--ink);border-radius:7px}
.acts .danger{color:var(--danger);background:var(--surface);
  border:1px solid #EBC9C6}
.acts .danger:hover{background:var(--danger-soft)}
.linkbtn{background:none;border:0;padding:4px;font-size:14px;
  color:var(--ink-2);cursor:pointer}
.linkbtn:hover{color:var(--ink)}

/* gate submit spans the card */
#gateForm button[type=submit],#setForm button[type=submit]{width:auto}
#gateForm button[type=submit]{width:100%;margin-top:16px;padding:10px}

/* ---------- status pills ---------- */
.chance,.badge-n{display:inline-flex;align-items:center;
  padding:2px 9px;border-radius:5px;font-size:12px;font-weight:530;
  letter-spacing:0;white-space:nowrap}
.chance{background:#F0F0F3;color:var(--ink-2)}
.chance.auto{background:var(--accent-soft);color:var(--accent)}
.off{background:#F0F0F3;color:var(--ink-3)}
.sold{background:var(--warn-soft);color:var(--warn)}
.tryagain{background:#F0F0F3;color:var(--ink-2)}
.badge-n{background:var(--danger);color:#fff;margin-left:2px;
  font-size:11px;padding:1px 6px}
.tab.on .badge-n{background:var(--danger);color:#fff}

/* ---------- bits ---------- */
.sw{flex:0 0 auto;width:11px;height:11px;border-radius:3px;
  border:1px solid rgba(0,0,0,.08)}
.thumb{flex:0 0 auto;width:26px;height:26px;border-radius:6px;
  object-fit:cover;border:1px solid var(--line)}
.imgprev{flex:0 0 auto;width:38px;height:38px;border-radius:8px;
  object-fit:cover;border:1px solid var(--line)}
.val{display:inline-block;margin-top:9px;padding:6px 10px;
  background:#F5F5F7;border-radius:var(--r-sm);
  font-size:13.5px;font-weight:450;word-break:break-all}

.msg{min-height:18px;margin:0 0 4px;font-size:13.5px;font-weight:450;
  color:var(--ink-2)}
.msg.ok{color:var(--ok)}
.msg.err{color:var(--danger)}

.warn,.autobox{border-radius:var(--r-sm);padding:11px 13px;
  font-size:13px;line-height:1.5}
.warn{margin-top:16px;background:var(--warn-soft);color:var(--warn);
  border:1px solid #F0E2BE}
.autobox{background:#F5F5F7;color:var(--ink-2);border:1px solid var(--line)}

/* ---------- reward budget ---------- */
.budget{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:16px 18px;margin-bottom:16px;
  font-size:14px;font-weight:450}
.budget b{font-weight:590}
.budget .bar{display:flex;height:6px;margin:12px 0 9px;
  border-radius:3px;background:#F0F0F3;overflow:hidden}
.budget .bar i{display:block;height:100%}
.budget .bar .rw{background:var(--ink)}
.budget .bar .lo{background:var(--line-2)}
.budget small{display:block;font-size:12.5px;color:var(--ink-3)}
.budget.over{border-color:#EBC9C6;background:var(--danger-soft)}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}