/* styles.css — Dark NeoGlass UI (RTL, improved readability) */

/* ===== Theme Variables ===== */
:root{
  --bg: #0b1020;
  --bg-grad-1: radial-gradient(1200px 600px at right -30%, rgba(40, 120, 255, .08), transparent 60%);
  --bg-grad-2: radial-gradient(900px 500px at -10% 10%, rgba(34, 197, 94, .08), transparent 60%);
  --txt: #ecf0f7;
  --muted:#aab3c3;

  /* Surfaces */
  --card-bg: rgba(18, 26, 46, 0.78);
  --card-border: rgba(120, 152, 255, .2);
  --card-shadow: 0 10px 30px rgba(0,0,0,.35);

  /* Controls */
  --ctrl-bg: rgba(14, 22, 41, 0.9);
  --ctrl-border:#374967;
  --ctrl-focus:#60a5fa;

  /* Buttons */
  --btn-bg:#111c34;
  --btn-border:#2a3b5c;
  --btn-hover:#16284b;

  /* Accents */
  --pri-1:#06b6d4;
  --pri-2:#22c55e;
  --warn:#f59e0b;
  --err:#ef4444;

  /* Pills/Badges */
  --pill-bg: rgba(12, 23, 46, .9);
  --pill-border: rgba(120, 152, 255, .22);

  /* Infos */
  --note-bg: rgba(22, 32, 58, .95);
  --note-border: rgba(100, 140, 220, .35);
  --note-text: #e8efff;

  --hr:#1e2a45;
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
html{scroll-behavior:smooth}
body{
  background:
    var(--bg),
    var(--bg-grad-1),
    var(--bg-grad-2),
    linear-gradient(180deg, #0a1022 0%, #0b1226 100%);
  color:var(--txt);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"IRANSansX","Shabnam","Vazirmatn",sans-serif;
  line-height:1.7;
  font-size:16px;
}

.wrap{ padding:16px; max-width:980px; margin:0 auto 64px; }

/* ===== Topbar ===== */
.topbar{
  position:sticky; top:10px; z-index:20;
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 14px;margin:6px 0 16px;
  background: linear-gradient(180deg, rgba(15,25,46,.92), rgba(10,17,33,.7));
  border:1px solid var(--card-border);
  border-radius:16px;
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(10px);
}
.brand{font-weight:800;letter-spacing:.2px; font-size:18px}
.balance{display:flex;align-items:center;gap:8px}
.unit{color:var(--muted);font-size:12px}

/* ===== Tabs ===== */
.tabs{
  position:relative;
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px;
  margin-bottom:12px;
}
.tab{
  position:relative;
  background: var(--btn-bg);
  border:1px solid var(--btn-border);
  color:var(--txt);
  padding:12px;
  border-radius:14px;
  cursor:pointer;
  transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
  text-align:center;
  user-select:none;
  font-weight:600;
}
.tab:hover{ transform: translateY(-1px); background: var(--btn-hover) }
.tab.active{
  background: linear-gradient(180deg, rgba(27,44,86,.95), rgba(18,33,70,.9));
  border-color: rgba(122, 162, 255, .5);
  box-shadow: 0 8px 24px rgba(26, 77, 206, .22);
}
.tab.active::after{
  content:"";
  position:absolute; inset:auto 18px -6px 18px; height:3px;
  background: linear-gradient(90deg, var(--pri-1), var(--pri-2));
  border-radius:999px; filter: blur(.4px);
}

/* ===== Views ===== */
.view{display:none}
.view.active{display:block}

/* ===== Cards ===== */
.card{
  background: var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:18px;
  padding:16px;
  margin:12px 0;
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(8px) saturate(110%);
  transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{ transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,0,0,.42) }
.center{text-align:center}
.muted{color:var(--muted)}
.card h2{ margin:0 0 12px; font-size:18px; font-weight:800; letter-spacing:.2px }

/* ===== Grid / Layout ===== */
.grid{display:grid; grid-template-columns:1fr; gap:12px}
.grid-2{grid-template-columns:1fr 1fr}
.grid-3{grid-template-columns:1fr 1fr 1fr}
@media(min-width:680px){ .grid{ grid-template-columns:1fr 1fr } }

.row{display:flex;gap:10px;flex-wrap:wrap; align-items:center}
.col{flex:1}
.sep{height:8px}
.stack{display:flex;flex-direction:column;gap:12px}

/* ===== Form Fields ===== */
.field{display:flex;flex-direction:column;gap:6px}
.field span{font-weight:600}
.field input,.field select{
  width:100%;
  padding:12px 13px;
  border-radius:14px;
  border:1px solid var(--ctrl-border);
  background: var(--ctrl-bg);
  color:var(--txt);
  outline:none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
  font-size:15px;
}
.field input::placeholder{ color:#8091ad }
.field input:focus,.field select:focus{
  border-color: var(--ctrl-focus);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, .28);
  background: rgba(16, 27, 49, .95);
}

/* ===== Buttons ===== */
.actions{display:flex;gap:10px;margin-top:8px;flex-wrap:wrap}
.btn{
  background: var(--btn-bg);
  color: var(--txt);
  border:1px solid var(--btn-border);
  border-radius:14px;
  padding:11px 14px;
  cursor:pointer;
  transition: transform .12s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease, opacity .2s ease;
  user-select:none;
  font-weight:700;
}
.btn:hover{ transform: translateY(-1px); background: var(--btn-hover) }
.btn:active{ transform: translateY(0) scale(.99) }
.btn:disabled{ opacity:.55; cursor:not-allowed }
.btn.ghost{
  background: rgba(15, 25, 46, .6);
  border-color: rgba(78, 110, 160, .4);
}
.btn.primary{
  background: linear-gradient(180deg, rgba(7, 92, 115, .98), rgba(7, 55, 96, .98));
  border-color: rgba(58, 143, 255, .6);
  box-shadow: 0 10px 28px rgba(10, 140, 210, .2);
}
.btn.primary:hover{
  background: linear-gradient(180deg, rgba(8, 118, 147, 1), rgba(9, 64, 116, 1));
}
.btn.warn{
  background: linear-gradient(180deg, rgba(124, 45, 18, .98), rgba(100, 34, 10, .98));
  border-color: rgba(245, 158, 11, .55);
}

/* Inline button */
.btn.inline{ display:inline-flex; align-items:center; gap:8px; margin:4px 4px 0 0 }

/* ===== Helpers ===== */
.hint{font-size:13.5px;line-height:1.85;margin-top:8px;color:var(--muted)}
.hr{height:1px;background:var(--hr);margin:12px 0}
code{
  background: rgba(10, 18, 34, .95);
  border:1px solid rgba(72, 96, 146, .5);
  border-radius:12px; padding:6px 8px; word-break:break-all;
  font-size:14px;
}
code.mono{ font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace }

/* ===== Toast ===== */
.toast{
  position:fixed;left:0;right:0;bottom:18px;margin:auto;width:max-content;max-width:92%;
  background: linear-gradient(180deg, rgba(16,26,48,.98), rgba(14,22,41,.96));
  color:#e5e7eb;border:1px solid rgba(92, 120, 180, .38);
  padding:10px 14px;border-radius:14px;
  box-shadow:0 14px 36px rgba(0,0,0,.45);z-index:9999
}

/* ===== Pills / Badges ===== */
.pill{
  display:inline-block;background: var(--pill-bg);border:1px solid var(--pill-border);
  color:#a7f3d0;padding:4px 10px;border-radius:999px;font-size:12px
}
.tag-active{color:#34d399}
.tag-inactive{color:#fca5a5}

/* ===== Proto rows ===== */
.proto-row{display:flex;gap:8px;align-items:center}
.proto-row small{opacity:.9}
.proto-row select{ min-width:140px }

/* ===== QR block ===== */
.qr{display:flex;align-items:center;gap:12px;margin-top:12px}
.qrbox{ background:#fff;border-radius:14px;padding:10px; display:inline-block; box-shadow: 0 12px 28px rgba(0,0,0,.25) }
img.qrimg{display:block;width:180px;height:180px;object-fit:contain;border-radius:8px}

/* ===== Wallet ===== */
.stat{display:flex;align-items:center;gap:6px}
.stat b{font-size:16px}

/* ===== Paybox ===== */
.paybox{ display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap }
.paybox code{ font-size:14px; padding:6px 10px }

/* ===== Links & rows ===== */
.rowwrap{display:flex;flex-wrap:wrap;gap:8px}
.linkrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.linkbox code.mono{word-break:break-all}

/* ===== Notes / Explain ===== */
.explain{
  background: var(--note-bg);
  border:1px solid var(--note-border);
  color: var(--note-text);
  border-radius:12px;
  padding:12px;
  line-height:1.9;
}

/* ===== Regen panel toggle (force closed by default) ===== */
.regen-box{ margin-top:8px; padding:0; background:transparent; border:0 }
.regen-box:not(.open){ display:none !important; } /* تضمین بسته بودن اولیه */

/* ===== Accessibility / Motion ===== */
@media (prefers-reduced-motion: reduce){
  .btn, .tab, .card{ transition:none }
}

/* ===== Small screens ===== */
@media (max-width: 380px){
  .brand{ font-size:16px }
  .tab{ padding:10px }
  img.qrimg{ width:160px; height:160px }
}