/* ===========================================================================
   LuVPN portal — professional design system (RTL, dark)
   Brand: Fanpino indigo → purple
   ========================================================================= */

/* ----- Fonts (self-hosted; CDNs may be blocked) ----- */
@font-face { font-family: Vazirmatn; src: url('/static/fonts/Vazirmatn-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Vazirmatn; src: url('/static/fonts/Vazirmatn-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: Vazirmatn; src: url('/static/fonts/Vazirmatn-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: Vazirmatn; src: url('/static/fonts/Vazirmatn-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }

/* ----- Design tokens ----- */
:root {
  --bg:        #0b1220;
  --surface:   #131c2e;
  --surface-2: #0d1626;
  --elevated:  #18233a;
  --fg:        #eaf1fb;
  --fg-soft:   #c2cfe0;
  --muted:     #8595ad;
  --line:      #243149;
  --line-soft: #1b2740;

  --brand:     #6366f1;
  --brand-2:   #8b5cf6;
  --brand-ink: #c7c9ff;
  --grad:      linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  --grad-soft: linear-gradient(135deg, rgba(99,102,241,.16), rgba(139,92,246,.16));

  --ok:    #34d399;
  --ok-bg: rgba(52,211,153,.12);
  --err:   #f87171;
  --err-bg:rgba(248,113,113,.12);

  --radius:   16px;
  --radius-sm:10px;
  --shadow:   0 10px 30px -12px rgba(0,0,0,.55);
  --shadow-sm:0 4px 14px -6px rgba(0,0,0,.5);
  --ring:     0 0 0 3px rgba(99,102,241,.35);
  --t:        .18s cubic-bezier(.4,0,.2,1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: Vazirmatn, Tahoma, system-ui, sans-serif;
  color: var(--fg);
  line-height: 1.75;
  background:
    radial-gradient(1100px 600px at 85% -10%, rgba(99,102,241,.14), transparent 60%),
    radial-gradient(900px 500px at 0% 0%, rgba(139,92,246,.10), transparent 55%),
    var(--bg);
  min-height: 100vh;
  display: flex; flex-direction: column;
}
::selection { background: rgba(139,92,246,.35); }

.container { width: min(960px, 92%); margin-inline: auto; }
main.container { flex: 1; padding-bottom: 28px; }

/* ----- Header ----- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  background: rgba(13,20,34,.72);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.topbar .container { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.08rem; color: var(--fg); text-decoration: none; }
.brand .logo {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--grad); box-shadow: 0 6px 16px -6px rgba(99,102,241,.7); font-size: 1.05rem;
}
.brand small { display: block; font-weight: 500; font-size: .68rem; color: var(--muted); margin-top: -3px; }
nav { display: flex; gap: 6px; }
nav a { color: var(--fg-soft); padding: 7px 13px; border-radius: 9px; text-decoration: none; font-size: .92rem; transition: background var(--t), color var(--t); }
nav a:hover { color: #fff; background: rgba(255,255,255,.06); text-decoration: none; }

/* ----- Cards ----- */
.card {
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  margin: 20px 0;
  box-shadow: var(--shadow);
}
.card.narrow { max-width: 440px; margin-inline: auto; }
.card h1 { margin-top: 0; }

h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -.01em; margin: 0 0 .4em; }
h2 { font-size: 1.18rem; font-weight: 600; margin: 0 0 .5em; }
.muted { color: var(--muted); }
a { color: var(--brand-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ----- Hero ----- */
.hero { text-align: center; padding: 38px 24px 26px; }
.hero .eyebrow { display: inline-block; font-size: .8rem; color: var(--brand-ink); background: var(--grad-soft); border: 1px solid rgba(99,102,241,.3); padding: 5px 14px; border-radius: 999px; margin-bottom: 16px; }
.hero h1 { font-size: clamp(1.6rem, 4vw, 2.3rem); }
.hero h1 .grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero p { color: var(--fg-soft); max-width: 560px; margin-inline: auto; }
.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.trust span { font-size: .85rem; color: var(--fg-soft); background: rgba(255,255,255,.04); border: 1px solid var(--line-soft); padding: 7px 14px; border-radius: 999px; }

/* ----- Forms ----- */
.form { display: flex; flex-direction: column; gap: 16px; max-width: 440px; }
.form.wide { max-width: none; }
.form label { display: flex; flex-direction: column; gap: 7px; font-size: .92rem; font-weight: 500; color: var(--fg-soft); }
input[type=text], input[type=password], input[type=number], input[type=date], input[type=email], input:not([type]), select, textarea {
  background: var(--surface-2); border: 1px solid var(--line); color: var(--fg);
  padding: 12px 13px; border-radius: var(--radius-sm); font-size: 1rem; font-family: inherit; width: 100%;
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
}
input::placeholder { color: #5f6e87; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); background: #0c1424; }
select { appearance: none; }

/* ----- Buttons ----- */
button, .btn {
  font-family: inherit; font-size: 1rem; font-weight: 600; cursor: pointer;
  border: 0; border-radius: var(--radius-sm); padding: 12px 20px; color: #fff; background: var(--grad);
  box-shadow: 0 8px 20px -8px rgba(99,102,241,.7);
  transition: transform var(--t), box-shadow var(--t), filter var(--t);
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
button:hover, .btn:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -8px rgba(99,102,241,.8); text-decoration: none; }
button:active, .btn:active { transform: translateY(0); }
button:focus-visible, .btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn.secondary, button.secondary { background: var(--elevated); color: var(--fg); box-shadow: none; border: 1px solid var(--line); }
.btn.secondary:hover { background: #1f2c47; }

/* link-style buttons (table actions) */
button.link, a.link { background: none; box-shadow: none; color: var(--brand-ink); padding: 4px 6px; font-size: .9rem; font-weight: 500; border-radius: 7px; }
button.link:hover, a.link:hover { transform: none; background: rgba(255,255,255,.06); text-decoration: none; }
button.link.danger { color: var(--err); }
button.link.danger:hover { background: var(--err-bg); }

/* ----- Badges ----- */
.badge { display: inline-flex; align-items: center; gap: 5px; background: var(--grad-soft); color: var(--brand-ink); border: 1px solid rgba(99,102,241,.3); padding: 3px 11px; border-radius: 999px; font-size: .82rem; font-weight: 500; }
.badge.ok { background: var(--ok-bg); color: var(--ok); border-color: rgba(52,211,153,.3); }
.badge.off { background: var(--err-bg); color: var(--err); border-color: rgba(248,113,113,.3); }

/* ----- Alerts ----- */
.alert { padding: 13px 16px; border-radius: var(--radius-sm); margin: 16px 0; font-size: .94rem; border: 1px solid; display: flex; gap: 10px; align-items: flex-start; }
.alert::before { font-size: 1.05rem; line-height: 1.5; }
.alert.error { background: var(--err-bg); border-color: rgba(248,113,113,.35); color: #ffc4c4; }
.alert.error::before { content: "⚠"; }
.alert.info { background: rgba(96,165,250,.1); border-color: rgba(96,165,250,.35); color: #cfe3ff; }
.alert.info::before { content: "ℹ"; }
.alert.success { background: var(--ok-bg); border-color: rgba(52,211,153,.35); color: #b8f5dd; }
.alert.success::before { content: "✓"; }

/* ----- Tables ----- */
.table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: .92rem; }
.table th { text-align: right; padding: 11px 12px; color: var(--muted); font-weight: 500; font-size: .82rem; border-bottom: 1px solid var(--line); }
.table td { text-align: right; padding: 12px; border-bottom: 1px solid var(--line-soft); }
.table tbody tr { transition: background var(--t); }
.table tbody tr:hover { background: rgba(255,255,255,.025); }
.table select, .table input { padding: 8px 10px; font-size: .9rem; }

/* ----- Plan cards ----- */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-top: 14px; }
.plan { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 20px; transition: border-color var(--t), transform var(--t); }
.plan:hover { border-color: rgba(99,102,241,.5); transform: translateY(-2px); }
.plan .ico { width: 40px; height: 40px; border-radius: 11px; background: var(--grad-soft); display: grid; place-items: center; font-size: 1.2rem; margin-bottom: 12px; }
.plan h3 { margin: 0 0 12px; font-size: 1.05rem; }
.plan ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.plan li { display: flex; justify-content: space-between; font-size: .9rem; color: var(--fg-soft); border-bottom: 1px dashed var(--line-soft); padding-bottom: 7px; }
.plan li b { color: var(--fg); font-weight: 600; }

/* ----- Subscription / copy box ----- */
.sub-box { display: flex; gap: 10px; align-items: center; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 8px 8px 14px; margin: 14px 0; }
.sub-box code { direction: ltr; white-space: nowrap; overflow: auto; flex: 1; font-size: .88rem; color: var(--brand-ink); }
.sub-box button { padding: 9px 16px; font-size: .9rem; white-space: nowrap; }

/* ----- Usage gauge (customer status page) ----- */
.gauge { width: 190px; height: 190px; border-radius: 50%; margin: 22px auto 8px; position: relative;
  display: grid; place-items: center;
  background: conic-gradient(var(--brand) calc(var(--p) * 1%), var(--surface-2) 0); }
.gauge.danger { background: conic-gradient(var(--err) calc(var(--p) * 1%), var(--surface-2) 0); }
.gauge::before { content: ""; position: absolute; inset: 16px; border-radius: 50%;
  background: linear-gradient(180deg, var(--surface), var(--surface-2)); }
.gauge-inner { position: relative; text-align: center; line-height: 1.35; }
.gauge-inner b { display: block; font-size: 2rem; font-weight: 700; }
.gauge-inner span { color: var(--fg-soft); font-size: .85rem; }
.gauge-inner small { display: block; color: var(--brand-ink); font-size: .8rem; margin-top: 2px; }

/* ----- QR ----- */
.qr { text-align: center; margin: 18px 0; }
.qr img { background: #fff; padding: 12px; border-radius: 14px; box-shadow: var(--shadow-sm); }

/* ----- Connection guide (steps) ----- */
.steps { display: grid; gap: 12px; margin-top: 10px; list-style: none; padding: 0; }
.steps li { display: flex; gap: 14px; align-items: flex-start; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 14px 16px; }
.steps .n { flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--grad); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .9rem; }
.steps strong { color: var(--fg); }
.guide { color: var(--fg-soft); }
.guide strong { color: var(--fg); }

/* ----- Stats ----- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: 6px 0 4px; }
.stat { position: relative; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 18px 20px; overflow: hidden; }
.stat::before { content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 3px; background: var(--grad); }
.stat b { display: block; font-size: 1.7rem; font-weight: 700; color: var(--fg); line-height: 1.2; }
.stat span { color: var(--muted); font-size: .82rem; }

/* ----- Admin nav ----- */
.adminnav { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 14px 0 4px; border-bottom: 1px solid var(--line-soft); padding-bottom: 14px; }
.adminnav a { color: var(--fg-soft); text-decoration: none; font-size: .92rem; padding: 7px 13px; border-radius: 9px; transition: background var(--t), color var(--t); }
.adminnav a:hover { color: #fff; background: rgba(255,255,255,.06); text-decoration: none; }
.adminnav a.active { color: #fff; background: var(--grad-soft); border: 1px solid rgba(99,102,241,.3); }
.adminnav .spacer { margin-inline-start: auto; }

/* ----- Misc layout ----- */
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.inline-form { display: flex; gap: 8px; align-items: center; margin: 0; }
.inline-form input { width: auto; min-width: 220px; }
.check { flex-direction: row !important; align-items: center; gap: 9px; font-weight: 400 !important; }
.check input { width: auto; }
.actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.actions form { display: inline; margin: 0; }
.pager { margin-top: 16px; display: flex; gap: 14px; align-items: center; font-size: .9rem; }

/* ----- Footer ----- */
footer { border-top: 1px solid var(--line-soft); padding: 22px 0; text-align: center; color: var(--muted); font-size: .88rem; }
footer .container { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
footer a { color: var(--fg-soft); }

/* ----- Toast (copy feedback) ----- */
.toast { position: fixed; inset-block-end: 24px; inset-inline: 0; margin-inline: auto; width: max-content; max-width: 90%; background: var(--elevated); color: var(--fg); border: 1px solid var(--line); padding: 11px 20px; border-radius: 999px; box-shadow: var(--shadow); opacity: 0; transform: translateY(12px); transition: opacity .25s, transform .25s; pointer-events: none; z-index: 60; font-size: .9rem; }
.toast.show { opacity: 1; transform: translateY(0); }

/* ----- Print (save guide as PDF) ----- */
@media print {
  body { background: #fff; color: #111; display: block; }
  .topbar, footer, .toast, .no-print, .adminnav { display: none !important; }
  .container { width: 100%; }
  .card { background: #fff; border: 1px solid #ccc; box-shadow: none; break-inside: avoid; margin: 10px 0; color: #111; }
  h1, h2, .card h1, strong, .steps strong, .guide strong { color: #111; }
  .muted, .table td.muted, .table th { color: #444; }
  a { color: #111; text-decoration: none; }
  .alert { border-color: #bbb; color: #222; background: #f4f4f4; }
  .steps .n { background: #555; }
  .table td, .table th { border-color: #ccc; }
}

/* ----- Responsive ----- */
@media (max-width: 640px) {
  .card { padding: 20px; }
  .topbar .container { flex-direction: column; gap: 10px; }
  .inline-form input { min-width: 0; flex: 1; }
  .row-between { flex-direction: column; align-items: stretch; }
  .table { font-size: .85rem; }
  .table th, .table td { padding: 9px 7px; }
}