/* رونی‌ساز — ظاهر پنل */

:root{
  --ink-950:#070D1C;
  --ink-900:#0A1226;
  --ink-800:#101B33;
  --ink-700:#1B2A4A;

  --glass:rgba(255,255,255,.055);
  --glass-2:rgba(255,255,255,.10);
  --line:rgba(255,255,255,.13);
  --line-soft:rgba(255,255,255,.07);

  --gold:#C9A227;
  --gold-lite:#E8CC6A;
  --gold-deep:#8C6E13;

  --text:#EDF1F8;
  --text-dim:#A3B3CE;
  --text-mute:#6E81A4;

  --ok:#41BE8C;
  --warn:#E3A83E;
  --bad:#E2685C;

  --r-lg:22px;
  --r-md:14px;
  --r-sm:10px;

  --shadow:0 26px 60px -24px rgba(0,0,0,.85), 0 4px 14px -6px rgba(0,0,0,.55);
  --font:'Vazirmatn', ui-sans-serif, system-ui, 'Segoe UI', Tahoma, sans-serif;
}

*{box-sizing:border-box}

html,body{margin:0;padding:0}

body{
  direction:rtl;
  font-family:var(--font);
  font-size:14px;
  color:var(--text);
  background:var(--ink-950);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

.ground{
  position:fixed;inset:0;z-index:0;
  background:
    radial-gradient(900px 620px at 88% -8%,  rgba(201,162,39,.20), transparent 62%),
    radial-gradient(760px 560px at 6% 4%,    rgba(56,102,190,.24), transparent 60%),
    radial-gradient(1000px 700px at 50% 112%, rgba(27,42,74,.85), transparent 66%),
    linear-gradient(170deg, #12203E 0%, #0A1226 42%, #070D1C 100%);
  background-color:#0A1226;
}
.ground::after{
  content:"";position:absolute;inset:0;opacity:.45;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(900px 620px at 60% 0%, #000 10%, transparent 75%);
  mask-image:radial-gradient(900px 620px at 60% 0%, #000 10%, transparent 75%);
}

.wrap{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding-inline:18px;padding-bottom:64px}

/* ───────── top bar ───────── */

.topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:14px;
  margin-inline:-18px;padding:14px 22px;
  background:rgba(10,18,38,.62);
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  border-bottom:1px solid var(--line-soft);
}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.brand-mark{width:40px;height:40px;flex:none;filter:drop-shadow(0 6px 14px rgba(201,162,39,.28))}
.brand-name{font-weight:800;font-size:19px;letter-spacing:-.2px;line-height:1}
.brand-sub{font-size:11.5px;color:var(--text-mute);margin-top:4px;line-height:1}
.spacer{flex:1}

.who{
  display:flex;align-items:center;gap:9px;
  padding:7px 8px 7px 14px;border-radius:999px;
  background:var(--glass);border:1px solid var(--line);
  font-size:13px;color:var(--text-dim);
}
.who a{color:var(--text-mute);text-decoration:none;font-size:12px}
.who a:hover{color:var(--text)}
.avatar{
  width:27px;height:27px;border-radius:50%;flex:none;
  display:grid;place-items:center;font-size:12px;font-weight:700;color:#3A2E05;
  background:linear-gradient(145deg,var(--gold-lite),var(--gold));
}

/* ───────── head ───────── */

.head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:18px;padding:34px 0 22px}
.head h1{margin:0;font-size:clamp(26px,4.4vw,36px);font-weight:800;letter-spacing:-.6px}
.head p{margin:9px 0 0;color:var(--text-dim);font-size:14.5px;max-width:52ch;line-height:1.75}

.queue-pill{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 15px;border-radius:999px;
  background:var(--glass);border:1px solid var(--line);
  font-size:12.5px;color:var(--text-dim);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--ok);animation:pulse 2.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(65,190,140,.6)}70%{box-shadow:0 0 0 9px rgba(65,190,140,0)}100%{box-shadow:0 0 0 0 rgba(65,190,140,0)}}
.pulse.idle{background:var(--text-mute);animation:none}

/* ───────── cards ───────── */

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:20px}

.card{
  position:relative;border-radius:var(--r-lg);padding:22px;
  background:linear-gradient(160deg, rgba(255,255,255,.085), rgba(255,255,255,.028) 46%, rgba(255,255,255,.012));
  border:1px solid var(--line);
  backdrop-filter:blur(26px) saturate(150%);
  -webkit-backdrop-filter:blur(26px) saturate(150%);
  box-shadow:var(--shadow);
  overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s;
}
.card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(150deg, rgba(255,255,255,.4), rgba(255,255,255,0) 38%, rgba(201,162,39,.24));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
.card:hover{transform:translateY(-3px)}

.card.busy::after{
  content:"";position:absolute;inset:-40% -10% auto;height:180%;
  background:linear-gradient(90deg,transparent,rgba(201,162,39,.09),transparent);
  animation:sweep 2.6s linear infinite;pointer-events:none;
}
@keyframes sweep{from{transform:translateX(110%)}to{transform:translateX(-110%)}}

.card-top{display:flex;align-items:flex-start;gap:13px;margin-bottom:18px}
.shop-mark{
  width:46px;height:46px;flex:none;border-radius:13px;
  display:grid;place-items:center;font-weight:800;font-size:17px;
  background:linear-gradient(150deg, rgba(255,255,255,.16), rgba(255,255,255,.04));
  border:1px solid var(--line);color:var(--gold-lite);overflow:hidden;
}
.shop-mark img{width:100%;height:100%;object-fit:contain;padding:5px}
.shop-name{font-size:17px;font-weight:700;letter-spacing:-.2px}
.shop-url{font-size:12px;color:var(--text-mute);margin-top:4px;direction:ltr;text-align:right}

.chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:600;border:1px solid transparent;white-space:nowrap}
.chip.live{background:rgba(65,190,140,.13);color:var(--ok);border-color:rgba(65,190,140,.28)}
.chip.run{background:rgba(201,162,39,.14);color:var(--gold-lite);border-color:rgba(201,162,39,.3)}
.chip.wait{background:rgba(255,255,255,.06);color:var(--text-dim);border-color:var(--line)}
.chip.warn{background:rgba(227,168,62,.14);color:var(--warn);border-color:rgba(227,168,62,.32)}
.chip.bad{background:rgba(226,104,92,.14);color:var(--bad);border-color:rgba(226,104,92,.32)}
.chip.idle{background:rgba(110,129,164,.14);color:var(--text-dim);border-color:var(--line)}

.stats{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;
  background:var(--line-soft);border:1px solid var(--line-soft);
  border-radius:var(--r-md);overflow:hidden;margin-bottom:16px;
}
.stat{padding:13px 10px;background:rgba(10,18,38,.34);text-align:center}
.stat b{display:block;font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.4px}
.stat span{display:block;font-size:11px;color:var(--text-mute);margin-top:4px}
.stat.hot b{color:var(--gold-lite)}

.msg{
  font-size:12.5px;line-height:1.8;padding:11px 13px;border-radius:var(--r-md);
  margin-bottom:14px;border:1px solid var(--line-soft);background:rgba(255,255,255,.035);color:var(--text-dim);
}
.msg.warn{background:rgba(227,168,62,.1);border-color:rgba(227,168,62,.3);color:#F0C97C}
.msg.bad{background:rgba(226,104,92,.1);border-color:rgba(226,104,92,.3);color:#F0A199}
.msg.ok{background:rgba(65,190,140,.09);border-color:rgba(65,190,140,.26);color:#8FDCBC}
.msg ul{margin:7px 0 0;padding-right:17px}
.msg li{margin-bottom:3px}

.prog{margin-bottom:16px}
.prog-head{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:8px}
.prog-head b{font-weight:600}
.prog-head span{color:var(--text-mute);font-variant-numeric:tabular-nums}
.bar{height:7px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.bar i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold),var(--gold-lite));
  box-shadow:0 0 16px rgba(201,162,39,.5);transition:width .6s cubic-bezier(.3,.9,.4,1)}
.steps{display:flex;gap:6px;margin-top:10px;font-size:10.5px;color:var(--text-mute)}
.steps span{flex:1;text-align:center;padding:4px 2px;border-radius:6px;background:rgba(255,255,255,.04)}
.steps span.on{background:rgba(201,162,39,.16);color:var(--gold-lite);font-weight:600}
.steps span.done{background:rgba(65,190,140,.13);color:var(--ok)}

.row{display:flex;gap:9px;flex-wrap:wrap}
.acts{display:flex;flex-direction:column;gap:9px}

.btn{
  flex:1;appearance:none;border:0;cursor:pointer;
  font-family:inherit;font-size:13.5px;font-weight:600;
  padding:12px 14px;border-radius:var(--r-md);
  transition:transform .15s, filter .2s, background .2s;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  text-decoration:none;
}
.btn:active{transform:scale(.975)}
.btn:focus-visible{outline:2px solid var(--gold-lite);outline-offset:2px}
.btn.gold{color:#2B2204;background:linear-gradient(145deg,var(--gold-lite),var(--gold));
  box-shadow:0 10px 24px -10px rgba(201,162,39,.75), inset 0 1px 0 rgba(255,255,255,.45)}
.btn.gold:hover{filter:brightness(1.07)}
.btn.ghost{color:var(--text-dim);background:var(--glass);border:1px solid var(--line)}
.btn.ghost:hover{background:var(--glass-2);color:var(--text)}
.btn.danger{color:#F0A199;background:rgba(226,104,92,.12);border:1px solid rgba(226,104,92,.3)}
.btn.danger:hover{background:rgba(226,104,92,.2)}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.btn.slim{flex:none;padding:12px 16px}

.card.add{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:13px;min-height:260px;text-align:center;border-style:dashed;cursor:pointer;
  background:linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
}
.card.add:hover{border-color:rgba(201,162,39,.45)}
.add-plus{width:54px;height:54px;border-radius:17px;display:grid;place-items:center;
  font-size:26px;font-weight:300;color:var(--gold-lite);
  background:rgba(201,162,39,.12);border:1px solid rgba(201,162,39,.3)}
.card.add h3{margin:0;font-size:16px;font-weight:700}
.card.add p{margin:0;font-size:12.5px;color:var(--text-mute);max-width:26ch;line-height:1.7}

/* ───────── sheet ───────── */

.overlay{position:fixed;inset:0;z-index:60;background:rgba(4,8,18,.66);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);display:flex;justify-content:flex-start}
.overlay[hidden]{display:none!important}

.sheet{
  width:min(580px,100%);height:100%;overflow-y:auto;padding:0 24px 40px;
  background:linear-gradient(200deg, rgba(27,42,74,.95), rgba(10,18,38,.98));
  border-left:1px solid var(--line);
  box-shadow:34px 0 80px -30px rgba(0,0,0,.9);
  animation:slide .34s cubic-bezier(.2,.85,.3,1);
}
@keyframes slide{from{transform:translateX(100%)}to{transform:translateX(0)}}

.sheet.wide{width:min(820px,100%)}

.sheet-head{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;
  padding:20px 0 16px;margin-bottom:6px;
  background:linear-gradient(180deg, rgba(14,24,48,.99) 72%, transparent)}
.sheet-head h2{margin:0;font-size:19px;font-weight:700;flex:1;letter-spacing:-.3px}
.x{width:34px;height:34px;border-radius:10px;flex:none;background:var(--glass);
  border:1px solid var(--line);color:var(--text-dim);cursor:pointer;font-size:17px;line-height:1;font-family:inherit}
.x:hover{background:var(--glass-2);color:var(--text)}

.sec{margin-bottom:26px}
.sec-title{font-size:11px;font-weight:700;letter-spacing:1.4px;color:var(--gold);
  text-transform:uppercase;margin-bottom:13px;display:flex;align-items:center;gap:10px}
.sec-title::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}

.field{margin-bottom:14px}
.field label{display:block;font-size:12.5px;color:var(--text-dim);margin-bottom:7px;font-weight:500}
.hint{font-size:11.5px;color:var(--text-mute);margin-top:6px;line-height:1.7}

input[type=text],input[type=password],input[type=url],textarea,select{
  width:100%;font-family:inherit;font-size:13.5px;color:var(--text);
  padding:11px 13px;border-radius:var(--r-sm);
  background:rgba(7,13,28,.55);border:1px solid var(--line);
  transition:border-color .2s, background .2s;
}
input:focus,textarea:focus,select:focus{outline:0;border-color:rgba(201,162,39,.55);background:rgba(7,13,28,.78)}
input::placeholder,textarea::placeholder{color:var(--text-mute)}
textarea{resize:vertical;min-height:70px;line-height:1.8}
.ltr{direction:ltr;text-align:left}
select option{background:#101B33;color:var(--text)}

input[type=file]{width:100%;font-family:inherit;font-size:12.5px;color:var(--text-dim)}
input[type=file]::file-selector-button{
  font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;
  margin-left:10px;padding:8px 14px;border-radius:var(--r-sm);
  color:var(--text-dim);background:var(--glass);border:1px solid var(--line);
}

.opts{display:flex;flex-direction:column;gap:9px}
.opt{display:block;cursor:pointer;padding:13px 15px;border-radius:var(--r-md);
  background:rgba(255,255,255,.035);border:1px solid var(--line-soft);
  transition:border-color .2s, background .2s}
.opt:hover{background:rgba(255,255,255,.06)}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt-head{display:flex;align-items:center;gap:10px}
.dot{width:16px;height:16px;flex:none;border-radius:50%;border:2px solid var(--text-mute);
  display:grid;place-items:center;transition:border-color .2s}
.dot::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold-lite);transform:scale(0);transition:transform .2s}
.opt-name{font-size:13.5px;font-weight:600}
.opt-sample{font-size:12px;color:var(--text-mute);line-height:1.85;margin-top:9px;padding-top:9px;
  border-top:1px dashed var(--line-soft)}
.opt input:checked ~ .opt-head .dot{border-color:var(--gold)}
.opt input:checked ~ .opt-head .dot::after{transform:scale(1)}
.opt:has(input:checked){background:rgba(201,162,39,.09);border-color:rgba(201,162,39,.42)}
.opt:has(input:checked) .opt-sample{color:var(--text-dim)}

.logo-box{position:relative;aspect-ratio:1/1;max-width:190px;border-radius:var(--r-md);
  background:linear-gradient(135deg, rgba(255,255,255,.1), rgba(255,255,255,.03)),
  repeating-conic-gradient(rgba(255,255,255,.04) 0 25%, transparent 0 50%) 0 0/22px 22px;
  border:1px solid var(--line)}
.corner{position:absolute;width:38%;height:26%;border-radius:8px;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px dashed var(--line);
  display:grid;place-items:center;font-size:10px;color:var(--text-mute);transition:.2s}
.corner:hover{background:rgba(255,255,255,.1)}
.corner.on{background:linear-gradient(145deg,rgba(201,162,39,.35),rgba(201,162,39,.18));
  border:1px solid var(--gold);color:var(--gold-lite);font-weight:700}
.corner.tr{top:7%;right:7%}.corner.tl{top:7%;left:7%}
.corner.br{bottom:7%;right:7%}.corner.bl{bottom:7%;left:7%}

.sw-row{display:flex;align-items:center;gap:13px;padding:13px 15px;border-radius:var(--r-md);
  background:rgba(255,255,255,.035);border:1px solid var(--line-soft);margin-bottom:9px}
.sw-row .t{flex:1}
.sw-row .t b{display:block;font-size:13.5px;font-weight:600}
.sw-row .t span{display:block;font-size:11.5px;color:var(--text-mute);margin-top:4px;line-height:1.6}
.sw{width:46px;height:26px;flex:none;border-radius:99px;cursor:pointer;
  background:rgba(255,255,255,.1);border:1px solid var(--line);position:relative;transition:background .25s}
.sw::after{content:"";position:absolute;top:2px;right:2px;width:20px;height:20px;border-radius:50%;
  background:var(--text-mute);transition:transform .25s, background .25s}
.sw.on{background:rgba(201,162,39,.3);border-color:rgba(201,162,39,.5)}
.sw.on::after{transform:translateX(-20px);background:linear-gradient(145deg,var(--gold-lite),var(--gold))}

.rng{display:flex;align-items:center;gap:13px}
input[type=range]{flex:1;appearance:none;-webkit-appearance:none;height:5px;border-radius:99px;background:rgba(255,255,255,.12)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;border-radius:50%;
  background:linear-gradient(145deg,var(--gold-lite),var(--gold));box-shadow:0 2px 8px rgba(0,0,0,.5);cursor:pointer}
input[type=range]::-moz-range-thumb{width:17px;height:17px;border:0;border-radius:50%;background:var(--gold);cursor:pointer}
.rng b{font-size:13px;font-variant-numeric:tabular-nums;min-width:62px;text-align:left}

.test-line{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.test-line .btn{flex:none}
.test-msg{font-size:12px;color:var(--text-mute);flex:1;min-width:140px;line-height:1.6}
.test-msg.ok{color:var(--ok)}
.test-msg.bad{color:var(--bad)}

.sheet-foot{position:sticky;bottom:0;display:flex;gap:10px;padding:16px 0;
  background:linear-gradient(0deg, rgba(10,18,38,.99) 68%, transparent)}

pre.log{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  direction:ltr;text-align:left;unicode-bidi:plaintext;
  font-size:12px;line-height:1.75;color:var(--text-dim);
  background:rgba(7,13,28,.7);border:1px solid var(--line-soft);
  border-radius:var(--r-md);padding:15px;overflow-x:auto;white-space:pre-wrap;
  max-height:none;margin:0;
}

/* ───────── toast ───────── */

.toast{position:fixed;z-index:80;bottom:22px;left:50%;
  transform:translateX(-50%) translateY(150%);
  padding:13px 20px;border-radius:99px;background:rgba(16,27,51,.96);
  border:1px solid var(--line);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:var(--shadow);font-size:13.5px;transition:transform .4s cubic-bezier(.2,.9,.3,1)}
.toast.up{transform:translateX(-50%) translateY(0)}
.toast.bad{border-color:rgba(226,104,92,.5);color:#F0A199}

/* ───────── login ───────── */

.login-wrap{position:relative;z-index:1;min-height:100vh;display:grid;place-items:center;padding:20px}
.login-card{width:min(400px,100%);border-radius:var(--r-lg);padding:34px 30px;
  background:linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.025));
  border:1px solid var(--line);backdrop-filter:blur(26px) saturate(150%);
  -webkit-backdrop-filter:blur(26px) saturate(150%);box-shadow:var(--shadow)}
.login-card .brand{justify-content:center;margin-bottom:6px}
.login-card h1{margin:18px 0 4px;font-size:21px;font-weight:700;text-align:center}
.login-card p.sub{margin:0 0 26px;font-size:12.5px;color:var(--text-mute);text-align:center}
.login-err{background:rgba(226,104,92,.12);border:1px solid rgba(226,104,92,.32);
  color:#F0A199;font-size:12.5px;padding:10px 13px;border-radius:var(--r-sm);margin-bottom:16px;text-align:center}

.empty{grid-column:1/-1;text-align:center;color:var(--text-mute);font-size:13.5px;padding:40px 0;line-height:2}

@media (max-width:560px){
  .head{padding:26px 0 18px}
  .sheet{padding-inline:18px}
  .brand-sub{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}