/* کنسول اپلیکاتو — زبان طراحی برند: بنفش شب، شیشه، فونت نوتو + وزیرمتن برای ارقام */
@font-face { font-family: "AppDigits"; src: url("/assets/fonts/Vazirmatn-digits.woff2") format("woff2"); font-weight: 400 800; unicode-range: U+0660-066C, U+06F0-06F9; }
@font-face { font-family: "Noto Sans Arabic"; src: url("/assets/fonts/NotoSansArabic-fa.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("/assets/fonts/Outfit-latin.woff2") format("woff2"); font-weight: 400 800; unicode-range: U+0020-007E, U+00A9, U+2013-2014, U+2022; }

:root {
  --violet: #5B21B6; --violet-2: #7C3AED; --lilac: #C4B5FD; --lilac-soft: #DDD6FE;
  --stage: #0F0824; --night: #1E1240; --ink: #F5F3FF; --muted: #B4A8D8; --line: rgba(255,255,255,.10);
  --glass: rgba(30, 18, 64, .62); --glass-2: rgba(255,255,255,.05);
  --ok: #4ADE80; --warn: #FBBF24; --bad: #F87171; --info: #93C5FD;
  --r: 18px; --font: "AppDigits", "Outfit", "Noto Sans Arabic", Tahoma, sans-serif;
}
* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0; min-height: 100vh; color: var(--ink); font: 15px/1.85 var(--font);
  background: radial-gradient(1100px 700px at 85% -10%, rgba(109,40,217,.45), transparent 60%),
              radial-gradient(900px 600px at -10% 110%, rgba(76,29,149,.5), transparent 60%), var(--stage);
  background-attachment: fixed;
}
a { color: var(--lilac); text-decoration: none; } a:hover { text-decoration: underline; }
h1 { font-size: 24px; margin: 0 0 6px; } h2 { font-size: 18px; margin: 0 0 12px; } h3 { font-size: 15px; margin: 0 0 8px; color: var(--lilac-soft); }
.muted { color: var(--muted); } .small { font-size: 13px; } .lat { font-family: "Outfit", monospace; direction: ltr; unicode-bidi: isolate; }
code, .mono { font-family: "Outfit", ui-monospace, monospace; direction: ltr; unicode-bidi: isolate; }

/* نوار بالا */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 20px; padding: 10px 22px;
  background: rgba(15, 8, 36, .72); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 700; }
.brand img { height: 30px; } .brand span { padding: 2px 10px; border-radius: 999px; background: var(--glass-2); font-size: 13px; color: var(--lilac-soft); }
.nav { display: flex; gap: 4px; flex: 1; overflow-x: auto; }
.nav a { color: var(--muted); padding: 7px 14px; border-radius: 999px; white-space: nowrap; }
.nav a:hover { color: var(--ink); background: var(--glass-2); text-decoration: none; }
.nav a.on { color: var(--night); background: var(--lilac); font-weight: 700; }
.who { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.who .role { font-size: 12px; color: var(--muted); }
.who form { margin: 0; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 26px 20px 60px; }
.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }

/* کارت‌ها */
.card { background: var(--glass); border-radius: var(--r); padding: 20px; margin-bottom: 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 18px 40px rgba(4,1,14,.35); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.grid { display: grid; gap: 16px; } .g2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .g4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 900px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } .top { flex-wrap: wrap; } }
.stat { background: var(--glass); border-radius: var(--r); padding: 16px 18px; box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
.stat b { display: block; font-size: 30px; line-height: 1.3; } .stat b small { font-size: 14px; font-weight: 600; } .stat span { color: var(--muted); font-size: 13px; }
.stat--ok b { color: var(--ok); } .stat--warn b { color: var(--warn); } .stat--bad b { color: var(--bad); }

/* جدول */
table { width: 100%; border-collapse: collapse; }
th { text-align: right; font-weight: 600; color: var(--muted); font-size: 13px; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: 0; } tbody tr:hover { background: rgba(255,255,255,.03); }
.tbl-wrap { overflow-x: auto; }

/* فرم */
label { display: block; font-size: 13px; color: var(--lilac-soft); margin-bottom: 12px; }
input, select, textarea { display: block; width: 100%; margin-top: 5px; font: inherit; color: var(--ink); background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16); border-radius: 12px; padding: 10px 12px; }
textarea { min-height: 84px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--lilac); box-shadow: 0 0 0 3px rgba(196,181,253,.25); }
select option { background: var(--night); }
input[type=checkbox] { display: inline-block; width: auto; margin: 0 0 0 8px; vertical-align: middle; accent-color: var(--violet-2); }
input[type=color] { padding: 2px; height: 42px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; } .row > * { flex: 1 1 160px; }
.checks label { display: flex; align-items: center; color: var(--ink); font-size: 14px; margin-bottom: 6px; }
.hint { font-size: 12px; color: var(--muted); }

/* دکمه */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: 700 14px/1.4 var(--font); padding: 10px 18px;
  border-radius: 999px; border: 1px solid transparent; cursor: pointer; color: var(--ink); background: var(--glass-2); text-decoration: none !important; }
.btn:hover { background: rgba(255,255,255,.1); }
.btn--primary { background: var(--lilac); color: var(--night); } .btn--primary:hover { background: #D8CCFE; }
.btn--danger { background: rgba(248,113,113,.15); color: #FECACA; border-color: rgba(248,113,113,.35); }
.btn--ghost { background: transparent; border-color: var(--line); }
.btn--sm { padding: 5px 12px; font-size: 13px; } .btn--block { width: 100%; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .actions form { margin: 0; }

/* نشانه‌ها */
.chip { display: inline-block; padding: 1px 10px; border-radius: 999px; font-size: 12px; background: var(--glass-2); color: var(--lilac-soft); white-space: nowrap; }
.chip--new { background: rgba(147,197,253,.15); color: #BFDBFE; } .chip--contacted, .chip--demo { background: rgba(196,181,253,.16); }
.chip--proposal { background: rgba(251,191,36,.15); color: #FDE68A; } .chip--won, .chip--active { background: rgba(74,222,128,.15); color: #BBF7D0; }
.chip--lost, .chip--suspended, .chip--closed, .chip--failed { background: rgba(248,113,113,.15); color: #FECACA; }
.chip--queued, .chip--running { background: rgba(251,191,36,.15); color: #FDE68A; } .chip--done { background: rgba(74,222,128,.15); color: #BBF7D0; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-left: 6px; background: var(--muted); vertical-align: middle; }
.dot--online { background: var(--ok); box-shadow: 0 0 0 4px rgba(74,222,128,.15); } .dot--late { background: var(--warn); }
.dot--offline { background: var(--bad); } .dot--never, .dot--closed { background: #6B6390; } .dot--revoked { background: #3F3A5A; }

.flash { padding: 10px 16px; border-radius: 14px; margin-bottom: 16px; font-weight: 600; }
.flash--ok { background: rgba(74,222,128,.14); color: #BBF7D0; } .flash--warn { background: rgba(251,191,36,.14); color: #FDE68A; }
.flash--err { background: rgba(248,113,113,.16); color: #FECACA; }
.secret { background: rgba(74,222,128,.08); border: 1px dashed rgba(74,222,128,.5); border-radius: 14px; padding: 14px 16px; }
.secret code, .bigcode { font: 800 26px/1.4 "Outfit", monospace; letter-spacing: .12em; color: #fff; }
.pack { white-space: pre-wrap; unicode-bidi: plaintext; text-align: start; background: rgba(0,0,0,.25); border-radius: 12px; padding: 14px; font-size: 14px; line-height: 2; }

/* صفحهٔ ورود */
.auth { width: min(420px, 100%); margin: 8vh auto 0; background: var(--glass); border-radius: 28px; padding: 30px 26px; text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 30px 60px rgba(4,1,14,.5); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.auth form { text-align: right; margin-top: 16px; } .auth__logo { height: 40px; margin-bottom: 12px; }
.steps { text-align: right; padding-right: 20px; color: var(--lilac-soft); font-size: 14px; }
.qr { display: grid; place-items: center; margin: 14px auto; background: #fff; border-radius: 16px; padding: 12px; width: 220px; height: 220px; }
.qr svg, .qr img { width: 196px; height: 196px; }
.key { display: block; font-size: 15px; margin-top: 6px; color: #fff; word-break: break-all; }
.otp { font: 800 28px/1.3 "Outfit", monospace; letter-spacing: .3em; text-align: center; }

/* لیست سرنخ و یادداشت */
.notes { list-style: none; padding: 0; margin: 0; } .notes li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.notes li:last-child { border-bottom: 0; } .notes .meta { font-size: 12px; color: var(--muted); }
.filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.filters a { padding: 4px 12px; border-radius: 999px; background: var(--glass-2); color: var(--muted); font-size: 13px; }
.filters a.on { background: var(--lilac); color: var(--night); font-weight: 700; text-decoration: none; }
.overdue { color: var(--warn); font-weight: 700; }
.kv { display: grid; grid-template-columns: 140px 1fr; gap: 6px 14px; } .kv dt { color: var(--muted); font-size: 13px; } .kv dd { margin: 0; }

/* ===== دیوار نظارت ===== */
body.wall { background: #07030F; overflow: hidden; }
.wall-top { display: flex; align-items: center; gap: 24px; padding: 18px 28px; }
.wall-top img { height: 34px; } .wall-clock { margin-right: auto; font: 700 28px/1 "Outfit", monospace; color: var(--lilac-soft); }
.wall-state { display: flex; align-items: center; gap: 12px; font-size: 22px; font-weight: 800; padding: 8px 18px; border-radius: 999px; }
.wall-state--ok { background: rgba(74,222,128,.12); color: var(--ok); } .wall-state--warn { background: rgba(251,191,36,.14); color: var(--warn); }
.wall-state--bad { background: rgba(248,113,113,.18); color: var(--bad); animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 10px rgba(248,113,113,.0), 0 0 40px rgba(248,113,113,.45); } }
.wall-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; padding: 0 28px; }
.wall-stats .stat b { font-size: 38px; }
.wall-main { display: grid; grid-template-columns: 1fr 380px; gap: 18px; padding: 18px 28px; height: calc(100vh - 230px); }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; align-content: start; overflow: auto; }
.tile { border-radius: 16px; padding: 14px 16px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.tile b { display: block; font-size: 17px; } .tile .sub { font-size: 13px; color: var(--muted); }
.tile--ok { border-color: rgba(74,222,128,.35); } .tile--warn { border-color: rgba(251,191,36,.6); background: rgba(251,191,36,.06); }
.tile--bad { border-color: rgba(248,113,113,.8); background: rgba(248,113,113,.10); animation: blink 1.4s infinite; }
.tile--closed { opacity: .55; }
@keyframes blink { 50% { background: rgba(248,113,113,.22); } }
.feed { background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; overflow: auto; }
.feed .ev { padding: 10px 0; border-bottom: 1px solid var(--line); } .feed .ev:last-child { border: 0; }
.feed .ev--bad b { color: var(--bad); } .feed .ev--warn b { color: var(--warn); }
.feed .ack { font-size: 12px; color: var(--muted); }
.sound-btn { position: fixed; left: 20px; bottom: 20px; }