/* ═══════════════════════════════════════════════════════════════════
DSecure — پوستهٔ بصری «سینمایی»
طراحی: تیرهٔ عمیق، شیشهای، با تأکید بر خوانایی در نور کم مرکز کنترل
═══════════════════════════════════════════════════════════════════ */
:root{
--bg-0:#05070d; --bg-1:#0a0f1a; --bg-2:#0e1524; --bg-3:#131c2e;
--line:#1e2a42; --line-2:#27354f;
--txt:#e6edf7; --txt-2:#9fb0c9; --txt-3:#7b8ca6; --txt-dim:#6b7d99;
--cy:#22d3ee; --cy-2:#0891b2; --cy-glow:rgba(34,211,238,.35);
--vi:#818cf8; --gr:#34d399; --am:#fbbf24; --rd:#f87171; --rd-2:#dc2626;
--ok:#22c55e; --warn:#f59e0b; --crit:#ef4444; --info:#38bdf8;
--glass:rgba(14,21,36,.72); --glass-2:rgba(19,28,46,.55);
--blur:14px;
--r-s:8px; --r-m:12px; --r-l:18px;
--top:58px; --side:212px; --feed:320px;
--font:"Vazirmatn","Segoe UI",Tahoma,system-ui,sans-serif;
--mono:"Cascadia Mono","Consolas",monospace;
--shadow:0 18px 48px rgba(0,0,0,.55);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
margin:0; font-family:var(--font); background:var(--bg-0); color:var(--txt);
font-size:14px; line-height:1.8; overflow:hidden;
text-rendering:optimizeLegibility;
}
::selection{background:var(--cy-glow); color:#fff}
::-webkit-scrollbar{width:9px; height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#1c2942; border-radius:9px; border:2px solid transparent;
background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#2b3d5e; background-clip:content-box}
.hidden{display:none !important}
a{color:inherit; text-decoration:none; cursor:pointer}
button,input,select,textarea{font-family:inherit; font-size:inherit; color:inherit}
b,strong{font-weight:700}
.mono{font-family:var(--mono); direction:ltr; unicode-bidi:isolate; font-size:.9em}
.num{font-family:var(--mono); direction:ltr; unicode-bidi:isolate}
/* ─────────────────── پسزمینه ─────────────────── */
.bg-stage{position:fixed; inset:0; z-index:0; overflow:hidden; background:
radial-gradient(1200px 700px at 80% -10%, #10233b 0%, transparent 60%),
radial-gradient(900px 600px at 10% 110%, #0d1f2e 0%, transparent 60%),
linear-gradient(180deg,#05070d,#070b14 60%,#05070d)}
.bg-grid{position:absolute; inset:-2px; opacity:.16;
background-image:linear-gradient(rgba(34,211,238,.22) 1px,transparent 1px),
linear-gradient(90deg,rgba(34,211,238,.22) 1px,transparent 1px);
background-size:52px 52px;
mask-image:radial-gradient(circle at 50% 30%,#000 0%,transparent 78%);
animation:gridDrift 60s linear infinite}
@keyframes gridDrift{to{background-position:52px 52px,52px 52px}}
.bg-aurora{position:absolute; border-radius:50%; filter:blur(90px); opacity:.30;
mix-blend-mode:screen; animation:float 26s ease-in-out infinite}
.a1{width:640px; height:640px; background:#0e7490; top:-180px; right:-120px}
.a2{width:520px; height:520px; background:#4338ca; bottom:-160px; left:-100px;
animation-delay:-9s}
.a3{width:420px; height:420px; background:#0f766e; top:40%; left:35%; opacity:.18;
animation-delay:-16s}
@keyframes float{
0%,100%{transform:translate3d(0,0,0) scale(1)}
33%{transform:translate3d(40px,-30px,0) scale(1.08)}
66%{transform:translate3d(-30px,26px,0) scale(.95)}}
.bg-scan{position:absolute; inset:0; pointer-events:none; opacity:.5;
background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px)}
.bg-vignette{position:absolute; inset:0; pointer-events:none;
box-shadow:inset 0 0 220px 60px rgba(0,0,0,.75)}
.glass{background:var(--glass); backdrop-filter:blur(var(--blur)) saturate(140%);
-webkit-backdrop-filter:blur(var(--blur)) saturate(140%);
border:1px solid var(--line)}
/* ─────────────────── ورود ─────────────────── */
.login-stage{position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:20px}
.login-card{width:min(420px,94vw); border-radius:var(--r-l); padding:34px 32px 26px;
box-shadow:var(--shadow), 0 0 0 1px rgba(34,211,238,.10), 0 0 70px rgba(34,211,238,.06);
animation:riseIn .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes riseIn{from{opacity:0; transform:translateY(22px) scale(.985)}}
.login-brand{display:flex; align-items:center; gap:14px; margin-bottom:26px}
.brand-name{font-size:26px; font-weight:300; letter-spacing:2px; line-height:1.2}
.brand-name span{font-weight:800; color:var(--cy)}
.brand-sub{font-size:11.5px; color:var(--txt-dim); letter-spacing:.2px}
.mark{filter:drop-shadow(0 0 10px var(--cy-glow))}
.field{display:block; margin-bottom:14px}
.field>span{display:block; font-size:12px; color:var(--txt-2); margin-bottom:6px}
input[type=text],input[type=password],input[type=number],input[type=date],input[type=time],
input[type=search],input:not([type]),select,textarea{
padding:10px 13px; background:rgba(5,9,17,.72); border:1px solid var(--line-2);
border-radius:var(--r-s); color:var(--txt); outline:none; transition:.18s;
font-size:13px; line-height:1.9}
textarea{resize:vertical; min-height:46px}
select{cursor:pointer; appearance:none; padding-left:32px;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:left 12px center}
select:hover{background-image:url("data:image/svg+xml;utf8,")}
select option{background:#0e1524; color:var(--txt)}
input:focus,select:focus,textarea:focus{
border-color:var(--cy); box-shadow:0 0 0 3px rgba(34,211,238,.14)}
input::placeholder,textarea::placeholder{color:#5b6b85}
.field input,.field select,.field textarea{width:100%}
textarea{width:100%}
.panel>input,.panel>select,.modal-body>input,.modal-body>select{width:100%}
.view-head input,.view-head select{width:auto; min-width:170px; max-width:280px}
.view-head input[type=search],.view-head input:not([type]){min-width:230px}
.field.row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.field input[type=checkbox]{width:17px; height:17px; flex:0 0 17px; accent-color:var(--cy);
cursor:pointer; margin:0}
.field.check{display:flex; gap:10px; align-items:flex-start; line-height:1.7}
.field.check>span{margin:0}
.form-error{background:rgba(220,38,38,.13); border:1px solid rgba(248,113,113,.45);
color:#fecaca; padding:9px 12px; border-radius:var(--r-s); font-size:12.5px; margin-bottom:12px}
.login-foot{margin-top:18px; text-align:center; font-size:11.5px; color:var(--txt-dim)}
.dot-live{display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--gr);
box-shadow:0 0 8px var(--gr); margin-left:6px; animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.35}}
/* ─────────────────── دکمهها ─────────────────── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px;
padding:9px 16px; border-radius:var(--r-s); border:1px solid var(--line-2);
background:rgba(30,42,66,.5); cursor:pointer; transition:.16s; font-size:13px;
white-space:nowrap}
.btn:hover{border-color:var(--cy); background:rgba(34,211,238,.10); transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.45; cursor:not-allowed; transform:none}
.btn-primary{background:linear-gradient(135deg,#0e7490,#0891b2); border-color:#22d3ee;
color:#f0fdff; font-weight:600; box-shadow:0 8px 24px rgba(8,145,178,.28)}
.btn-primary:hover{background:linear-gradient(135deg,#0891b2,#22d3ee)}
.btn-lg{width:100%; padding:13px; font-size:15px; margin-top:8px}
.btn-danger{border-color:rgba(248,113,113,.5); background:rgba(220,38,38,.14); color:#fecaca}
.btn-danger:hover{background:rgba(220,38,38,.28); border-color:var(--rd)}
.btn-ghost{background:transparent}
.btn-sm{padding:5px 10px; font-size:12px}
.icon-btn{width:34px; height:34px; display:grid; place-items:center; border-radius:9px;
border:1px solid transparent; background:transparent; cursor:pointer; color:var(--txt-2);
transition:.16s; font-size:15px}
.icon-btn:hover{background:rgba(34,211,238,.12); color:var(--cy); border-color:var(--line-2)}
.icon-btn.on{color:var(--cy); background:rgba(34,211,238,.12)}
/* ─────────────────── پوسته ─────────────────── */
.app{position:relative; z-index:1; height:100vh; display:grid;
grid-template-columns:var(--side) 1fr var(--feed);
grid-template-rows:var(--top) 1fr;
grid-template-areas:"top top top" "side main feed"; gap:10px; padding:10px}
.app.no-feed{grid-template-columns:var(--side) 1fr; grid-template-areas:"top top" "side main"}
.topbar{grid-area:top; display:flex; align-items:center; gap:16px; padding:0 14px;
border-radius:var(--r-m)}
.tb-brand{display:flex; align-items:center; gap:10px; color:var(--cy)}
.tb-title{font-size:17px; font-weight:300; letter-spacing:1px; color:var(--txt)}
.tb-title span{font-weight:800; color:var(--cy)}
.tb-title i{font-style:normal; font-size:11px; color:var(--txt-dim); margin-right:10px;
padding-right:10px; border-right:1px solid var(--line-2)}
.tb-status{flex:1; display:flex; gap:8px; align-items:center; overflow:hidden}
.stat-pill{display:flex; align-items:center; gap:7px; padding:5px 11px; border-radius:20px;
background:rgba(19,28,46,.75); border:1px solid var(--line); font-size:11.5px;
color:var(--txt-2); white-space:nowrap; flex:0 0 auto}
@media (max-width:1560px){.stat-pill:nth-child(n+5){display:none}}
@media (max-width:1280px){.stat-pill:nth-child(n+4){display:none}}
.stat-pill b{color:var(--txt); font-family:var(--mono); direction:ltr}
.stat-pill .led{width:7px; height:7px; border-radius:50%; background:var(--gr);
box-shadow:0 0 7px currentColor; color:var(--gr)}
.stat-pill.warn .led{background:var(--am); color:var(--am)}
.stat-pill.crit{border-color:rgba(239,68,68,.5); background:rgba(220,38,38,.14)}
.stat-pill.crit .led{background:var(--crit); color:var(--crit); animation:pulse 1.1s infinite}
.tb-right{display:flex; align-items:center; gap:8px}
.tb-clock{text-align:center; line-height:1.35; padding-left:8px}
.tb-clock b{display:block; font-family:var(--mono); font-size:15px; color:var(--cy);
letter-spacing:1px; text-shadow:0 0 12px var(--cy-glow)}
.tb-clock i{font-style:normal; font-size:10.5px; color:var(--txt-dim)}
.tb-user{position:relative; display:flex; align-items:center; gap:9px; padding:4px 8px;
border-radius:10px; cursor:pointer; border:1px solid transparent}
.tb-user:hover{background:rgba(34,211,238,.08); border-color:var(--line-2)}
.avatar{width:32px; height:32px; border-radius:9px; display:grid; place-items:center;
background:linear-gradient(135deg,#0e7490,#4338ca); font-weight:700; font-size:13px;
color:#fff; box-shadow:0 0 14px rgba(34,211,238,.25)}
.tb-user-meta{line-height:1.3}
.tb-user-meta b{display:block; font-size:12.5px}
.tb-user-meta i{font-style:normal; font-size:10.5px; color:var(--txt-dim)}
.menu{position:absolute; top:46px; left:0; min-width:190px; border-radius:var(--r-m);
padding:6px; display:none; flex-direction:column; box-shadow:var(--shadow); z-index:40}
.menu.open{display:flex}
.menu button{text-align:right; padding:9px 12px; border:0; background:transparent;
border-radius:8px; cursor:pointer; font-size:13px; color:var(--txt-2)}
.menu button:hover{background:rgba(34,211,238,.12); color:var(--txt)}
.menu button.danger:hover{background:rgba(220,38,38,.22); color:#fecaca}
.menu hr{border:0; border-top:1px solid var(--line); margin:5px 8px}
/* ─────────────────── ناوبری ─────────────────── */
.sidebar{grid-area:side; border-radius:var(--r-m); padding:10px 8px; display:flex;
flex-direction:column; gap:3px; overflow-y:auto}
.nav-item{display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:10px;
color:var(--txt-2); font-size:13.5px; transition:.16s; position:relative;
border:1px solid transparent}
.nav-item i{font-style:normal; width:20px; display:grid; place-items:center; opacity:.8;
transition:.18s}
.nav-item:hover i,.nav-item.active i{opacity:1; transform:scale(1.06)}
.ico{display:block; stroke-linecap:round; stroke-linejoin:round}
.icon-btn .ico{margin:0}
.btn .ico{margin-left:2px}
.nav-item:hover{background:rgba(34,211,238,.08); color:var(--txt)}
.nav-item.active{background:linear-gradient(90deg,rgba(34,211,238,.16),rgba(34,211,238,.03));
color:#fff; border-color:rgba(34,211,238,.28)}
.nav-item.active::before{content:""; position:absolute; right:-8px; top:22%; bottom:22%;
width:3px; border-radius:3px; background:var(--cy); box-shadow:0 0 12px var(--cy)}
.nav-item .badge{margin-right:auto; min-width:20px; height:19px; padding:0 6px; border-radius:10px;
background:var(--rd-2); color:#fff; font-size:11px; display:none; place-items:center;
font-family:var(--mono)}
.nav-item .badge.show{display:grid; animation:pulse 1.6s infinite}
.nav-spacer{flex:1}
.nav-foot{padding:8px 10px; border-top:1px solid var(--line); font-size:11px; color:var(--txt-dim)}
.ws-state{display:flex; align-items:center; gap:7px; margin-bottom:6px}
.ws-state .dot{width:8px; height:8px; border-radius:50%; background:var(--am);
box-shadow:0 0 8px currentColor; color:var(--am)}
.ws-state.on .dot{background:var(--gr); color:var(--gr)}
.ws-state.off .dot{background:var(--rd); color:var(--rd)}
.engine-chip{font-family:var(--mono); font-size:10px; color:var(--txt-dim); direction:ltr;
text-align:left; word-break:break-all}
/* ─────────────────── محتوا ─────────────────── */
.content{grid-area:main; overflow-y:auto; overflow-x:hidden; padding:2px 4px 20px;
scroll-behavior:smooth}
.view-head{display:flex; align-items:center; gap:14px; margin:6px 4px 16px; flex-wrap:wrap}
.view-head h1{font-size:20px; font-weight:700; margin:0; letter-spacing:-.2px}
.view-head .sub{font-size:12px; color:var(--txt-dim)}
.view-head .spacer{flex:1}
.panel{border-radius:var(--r-m); padding:16px; background:var(--glass-2);
border:1px solid var(--line); backdrop-filter:blur(10px); margin-bottom:14px}
.panel-head{display:flex; align-items:center; gap:10px; margin-bottom:12px}
.panel-head h2{font-size:14.5px; margin:0; font-weight:700}
.panel-head .spacer{flex:1}
.panel-head .hint{font-size:11.5px; color:var(--txt-dim)}
.grid{display:grid; gap:12px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)} .g5{grid-template-columns:repeat(5,1fr)}
@media (max-width:1500px){.g5{grid-template-columns:repeat(3,1fr)}}
@media (max-width:1200px){.g4,.g3{grid-template-columns:repeat(2,1fr)}}
/* ─────────────────── کارت آمار ─────────────────── */
.kpi{position:relative; border-radius:var(--r-m); padding:14px 16px; overflow:hidden;
background:linear-gradient(140deg,rgba(19,28,46,.85),rgba(10,15,26,.6));
border:1px solid var(--line); transition:.2s}
.kpi:hover{border-color:rgba(34,211,238,.35); transform:translateY(-2px)}
.kpi .k-label{font-size:11.5px; color:var(--txt-dim); display:flex; align-items:center; gap:6px}
.kpi .k-val{font-family:var(--mono); font-size:30px; font-weight:700; line-height:1.25;
color:var(--txt); direction:ltr; text-align:right}
.kpi .k-sub{font-size:11px; color:var(--txt-2)}
.kpi .k-spark{position:absolute; inset:auto 0 0 0; height:34px; opacity:.55}
.kpi.cy .k-val{color:var(--cy); text-shadow:0 0 20px var(--cy-glow)}
.kpi.gr .k-val{color:var(--gr)} .kpi.am .k-val{color:var(--am)}
.kpi.rd .k-val{color:var(--rd); text-shadow:0 0 20px rgba(248,113,113,.3)}
.kpi.vi .k-val{color:var(--vi)}
/* ─────────────────── جدول ─────────────────── */
.table{width:100%; border-collapse:collapse; font-size:12.5px}
.table th{text-align:right; padding:9px 10px; color:var(--txt-dim); font-weight:600;
font-size:11.5px; border-bottom:1px solid var(--line); position:sticky; top:0;
background:rgba(10,15,26,.96); backdrop-filter:blur(6px); z-index:2}
.table td{padding:9px 10px; border-bottom:1px solid rgba(30,42,66,.5); vertical-align:middle}
.table tbody tr{transition:.14s}
.table tbody tr:hover{background:rgba(34,211,238,.06)}
.table tbody tr.clickable{cursor:pointer}
.table .empty{text-align:center; color:var(--txt-dim); padding:34px 10px}
.tbl-wrap{max-height:min(62vh,760px); overflow:auto; border-radius:var(--r-s)}
/* ─────────────────── چیپ و برچسب ─────────────────── */
.chip{display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:20px;
font-size:11px; border:1px solid var(--line-2); background:rgba(19,28,46,.7);
color:var(--txt-2); white-space:nowrap}
.chip.deny{border-color:rgba(239,68,68,.55); background:rgba(220,38,38,.16); color:#fecaca}
.chip.watch{border-color:rgba(245,158,11,.55); background:rgba(245,158,11,.14); color:#fde68a}
.chip.allow{border-color:rgba(34,197,94,.5); background:rgba(34,197,94,.13); color:#bbf7d0}
.chip.cy{border-color:rgba(34,211,238,.5); background:rgba(34,211,238,.12); color:#a5f3fc}
.chip.vi{border-color:rgba(129,140,248,.5); background:rgba(129,140,248,.12); color:#c7d2fe}
.chip-btn{padding:4px 11px; border-radius:16px; border:1px solid var(--line-2);
background:transparent; color:var(--txt-2); cursor:pointer; font-size:11.5px; transition:.15s}
.chip-btn:hover{border-color:var(--cy); color:var(--cy)}
.chip-btn.active{background:rgba(34,211,238,.16); border-color:var(--cy); color:#a5f3fc}
.sev{display:inline-block; padding:2px 9px; border-radius:6px; font-size:11px; font-weight:600}
.sev-critical{background:rgba(239,68,68,.2); color:#fca5a5; border:1px solid rgba(239,68,68,.45)}
.sev-high{background:rgba(245,158,11,.18); color:#fcd34d; border:1px solid rgba(245,158,11,.4)}
.sev-medium{background:rgba(56,189,248,.16); color:#7dd3fc; border:1px solid rgba(56,189,248,.4)}
.sev-info{background:rgba(148,163,184,.16); color:#cbd5e1; border:1px solid var(--line-2)}
.state-dot{width:8px; height:8px; border-radius:50%; display:inline-block;
box-shadow:0 0 8px currentColor}
.st-STREAMING{background:var(--gr); color:var(--gr)}
.st-DEGRADED,.st-RECONNECTING,.st-CONNECTING,.st-PROBING{background:var(--am); color:var(--am)}
.st-QUARANTINED,.st-DISABLED{background:var(--rd); color:var(--rd)}
.st-REGISTERED{background:var(--txt-dim); color:var(--txt-dim)}
/* ─────────────────── دیوار زنده ─────────────────── */
.wall{display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}
.wall.cols-1{grid-template-columns:1fr}
.wall.cols-2{grid-template-columns:repeat(2,1fr)}
.wall.cols-3{grid-template-columns:repeat(3,1fr)}
.tile{position:relative; border-radius:var(--r-m); overflow:hidden; border:1px solid var(--line);
background:#04070e; aspect-ratio:16/9; transition:aspect-ratio .3s, border-color .2s,
box-shadow .2s}
.tile:hover{border-color:rgba(34,211,238,.45); box-shadow:0 0 0 1px rgba(34,211,238,.2),
0 12px 32px rgba(0,0,0,.5)}
.tile.crit{border-color:rgba(239,68,68,.6); animation:critFlash 1.2s ease-in-out 3}
@keyframes critFlash{50%{box-shadow:0 0 0 2px rgba(239,68,68,.7),0 0 40px rgba(239,68,68,.35)}}
/* contain نه cover: در دیوار نظارتی، بریده شدن قاب یعنی ممکن است همان چیزی که
دنبالش هستید بیرون کادر بماند. نسبت کاشی از خودِ تصویر خوانده میشود. */
.tile img.stream{width:100%; height:100%; object-fit:contain; display:block;
opacity:.96; background:#04070e}
.tile canvas.ovl{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
.tile-head{position:absolute; top:0; right:0; left:0; padding:8px 10px; display:flex;
align-items:center; gap:8px; font-size:11.5px;
background:linear-gradient(180deg,rgba(4,7,14,.92),transparent)}
.tile-head b{font-weight:600}
.tile-head .spacer{flex:1}
.tile-foot{position:absolute; bottom:0; right:0; left:0; padding:7px 10px; display:flex;
gap:8px; align-items:center; font-size:10.5px; color:var(--txt-2);
background:linear-gradient(0deg,rgba(4,7,14,.92),transparent)}
.tile-corner{position:absolute; width:16px; height:16px; border:2px solid rgba(34,211,238,.6)}
.tc-tl{top:6px; left:6px; border-right:0; border-bottom:0}
.tc-tr{top:6px; right:6px; border-left:0; border-bottom:0}
.tc-bl{bottom:6px; left:6px; border-right:0; border-top:0}
.tc-br{bottom:6px; right:6px; border-left:0; border-top:0}
.tile-scan{position:absolute; inset:0; pointer-events:none; overflow:hidden}
.tile-scan::after{content:""; position:absolute; left:0; right:0; height:90px;
background:linear-gradient(180deg,transparent,rgba(34,211,238,.10),transparent);
animation:scanY 4.5s linear infinite}
@keyframes scanY{from{top:-90px}to{top:100%}}
.tile-off{position:absolute; inset:0; display:grid; place-items:center; color:var(--txt-dim);
font-size:12px; background:repeating-linear-gradient(45deg,#080d16 0 12px,#0a1019 12px 24px)}
/* ─────────────────── جریان زنده ─────────────────── */
.feed{grid-area:feed; border-radius:var(--r-m); display:flex; flex-direction:column;
overflow:hidden}
.feed-head{padding:11px 13px; border-bottom:1px solid var(--line); display:flex;
align-items:center; gap:8px; flex-wrap:wrap}
.feed-head b{font-size:13px}
.feed-tools{display:flex; gap:5px; margin-right:auto}
.feed-list{flex:1; overflow-y:auto; padding:8px; display:flex; flex-direction:column; gap:7px}
.ev{border-radius:10px; padding:9px 11px; border:1px solid var(--line);
background:rgba(10,15,26,.65); font-size:12px; animation:evIn .35s cubic-bezier(.2,.8,.2,1)}
@keyframes evIn{from{opacity:0; transform:translateX(-14px)}}
.ev .ev-top{display:flex; align-items:center; gap:7px; margin-bottom:3px}
.ev .ev-time{margin-right:auto; font-family:var(--mono); font-size:10px; color:var(--txt-dim)}
.ev .ev-body{color:var(--txt-2); font-size:11.5px; line-height:1.65}
.ev.alert{border-color:rgba(245,158,11,.5); background:rgba(245,158,11,.07)}
.ev.critical{border-color:rgba(239,68,68,.6); background:rgba(220,38,38,.10);
box-shadow:0 0 20px rgba(239,68,68,.14)}
.ev.match{border-color:rgba(34,197,94,.4); background:rgba(34,197,94,.06)}
.ev img{width:38px; height:38px; border-radius:7px; object-fit:cover; border:1px solid var(--line-2)}
/* ─────────────────── هشدار ─────────────────── */
.alert-card{display:grid; grid-template-columns:74px 1fr auto; gap:12px; padding:12px;
border-radius:var(--r-m); border:1px solid var(--line); background:rgba(10,15,26,.6);
transition:.18s; align-items:center}
.alert-card:hover{border-color:rgba(34,211,238,.4); transform:translateX(-3px)}
.alert-card.critical{border-right:3px solid var(--crit)}
.alert-card.high{border-right:3px solid var(--warn)}
.alert-card.medium{border-right:3px solid var(--info)}
.alert-card img,.alert-thumb{width:74px; height:74px; border-radius:10px; object-fit:cover;
border:1px solid var(--line-2); background:#080d16; display:block}
.alert-thumb.ph{display:grid; place-items:center; color:#243247; font-size:26px}
.alert-card .ac-title{font-weight:700; font-size:13.5px; margin-bottom:3px}
.alert-card .ac-body{font-size:11.5px; color:var(--txt-2)}
.alert-card .ac-meta{display:flex; gap:7px; margin-top:6px; flex-wrap:wrap}
.alert-actions{display:flex; flex-direction:column; gap:5px}
/* ─────────────────── هویت ─────────────────── */
.id-card{border-radius:var(--r-m); border:1px solid var(--line); overflow:hidden;
background:rgba(10,15,26,.6); transition:.2s; cursor:pointer}
.id-card:hover{transform:translateY(-3px); border-color:rgba(34,211,238,.45);
box-shadow:0 14px 34px rgba(0,0,0,.45)}
.id-card .id-photo{aspect-ratio:1; background:#080d16; position:relative; overflow:hidden}
.id-card .id-photo img{width:100%; height:100%; object-fit:cover}
.id-card .id-photo .ph{position:absolute; inset:0; display:grid; place-items:center;
font-size:34px; color:#243247}
.id-card .id-body{padding:10px 12px}
.id-card .id-name{font-weight:700; font-size:13px; margin-bottom:2px}
.id-card .id-meta{font-size:11px; color:var(--txt-dim)}
.id-card .id-flags{display:flex; gap:5px; margin-top:7px; flex-wrap:wrap}
.id-card.deny{border-color:rgba(239,68,68,.5)}
.id-card.deny .id-photo::after{content:"غیرمجاز"; position:absolute; top:8px; right:8px;
background:rgba(220,38,38,.92); color:#fff; font-size:10px; padding:2px 8px;
border-radius:6px; box-shadow:0 0 14px rgba(239,68,68,.5)}
.face-strip{display:flex; gap:8px; flex-wrap:wrap}
.face-thumb{position:relative; width:88px}
.face-thumb img{width:88px; height:88px; object-fit:cover; border-radius:9px;
border:1px solid var(--line-2)}
.face-thumb .q{position:absolute; bottom:4px; right:4px; background:rgba(4,7,14,.85);
font-family:var(--mono); font-size:9.5px; padding:1px 5px; border-radius:5px}
.thumb-sm{width:44px; height:44px; object-fit:cover; border-radius:7px;
border:1px solid var(--line-2); background:#080d16; display:block}
.thumb-md{width:46px; height:46px; object-fit:cover; border-radius:9px;
border:1px solid var(--line-2); background:#080d16; display:block}
.evidence-shot{width:100%; max-width:280px; aspect-ratio:1; object-fit:cover; border-radius:12px;
border:1px solid var(--line-2); background:#080d16; display:block; margin:0 auto}
.face-thumb .x{position:absolute; top:4px; left:4px; width:20px; height:20px; border-radius:6px;
background:rgba(220,38,38,.85); color:#fff; border:0; cursor:pointer; font-size:11px;
display:grid; place-items:center; opacity:0; transition:.15s}
.face-thumb:hover .x{opacity:1}
/* ─────────────────── پذیرش هویت ─────────────────── */
.enroll-grid{display:grid; grid-template-columns:minmax(320px,420px) 1fr; gap:14px}
@media (max-width:1100px){.enroll-grid{grid-template-columns:1fr}}
.cam-stage{position:relative; border-radius:var(--r-m); overflow:hidden; background:#04070e;
border:1px solid var(--line); aspect-ratio:4/3;
transition:aspect-ratio .3s}
.cam-stage video{width:100%; height:100%; object-fit:cover; transform:scaleX(-1)}
.cam-stage canvas{position:absolute; inset:0; width:100%; height:100%}
.face-guide{position:absolute; inset:0; pointer-events:none}
.face-guide .oval{position:absolute; top:12%; bottom:12%; left:22%; right:22%;
border:2px dashed rgba(34,211,238,.55); border-radius:50%}
.face-guide.ok .oval{border-color:var(--gr); border-style:solid;
box-shadow:0 0 30px rgba(52,211,153,.25)}
.quality-bar{height:7px; border-radius:6px; background:rgba(30,42,66,.7); overflow:hidden;
margin-top:6px}
.quality-bar span{display:block; height:100%; border-radius:6px; transition:.25s;
background:linear-gradient(90deg,var(--rd),var(--am),var(--gr))}
.shot-strip{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.shot{position:relative; width:72px; height:72px; border-radius:9px; overflow:hidden;
border:1px solid var(--line-2)}
.shot img{width:100%; height:100%; object-fit:cover}
.shot.done{border-color:var(--gr)}
.shot .badge2{position:absolute; bottom:2px; right:3px; font-size:9px; font-family:var(--mono);
background:rgba(4,7,14,.8); padding:0 4px; border-radius:4px}
.steps{display:flex; gap:6px; margin-bottom:14px}
.step{flex:1; padding:7px 10px; border-radius:9px; border:1px solid var(--line);
font-size:11.5px; color:var(--txt-dim); text-align:center; background:rgba(10,15,26,.5)}
.step.active{border-color:var(--cy); color:var(--cy); background:rgba(34,211,238,.10)}
.step.done{border-color:rgba(52,211,153,.5); color:var(--gr)}
/* ─────────────────── دراپزون ─────────────────── */
.drop{border:2px dashed var(--line-2); border-radius:var(--r-m); padding:26px; text-align:center;
color:var(--txt-dim); transition:.18s; cursor:pointer; background:rgba(10,15,26,.4)}
.drop:hover,.drop.over{border-color:var(--cy); color:var(--cy); background:rgba(34,211,238,.07)}
/* ─────────────────── مودال ─────────────────── */
.modal-host{position:fixed; inset:0; z-index:60; background:rgba(3,6,12,.72);
backdrop-filter:blur(6px); display:grid; place-items:center; padding:22px;
animation:fadeIn .2s}
@keyframes fadeIn{from{opacity:0}}
.modal{width:min(760px,96vw); max-height:90vh; overflow:auto; border-radius:var(--r-l);
background:var(--glass); border:1px solid var(--line-2); box-shadow:var(--shadow);
animation:riseIn .3s cubic-bezier(.2,.8,.2,1)}
.modal.wide{width:min(1080px,96vw)}
.modal-head{display:flex; align-items:center; gap:10px; padding:14px 18px;
border-bottom:1px solid var(--line); position:sticky; top:0; background:rgba(10,15,26,.96);
backdrop-filter:blur(10px); z-index:3}
.modal-head h3{margin:0; font-size:15px}
.modal-head .spacer{flex:1}
.modal-body{padding:18px}
.modal-body>.split>div>.panel:last-child{margin-bottom:0}
.modal-body .panel:last-child{margin-bottom:0}
.modal-foot{display:flex; gap:8px; justify-content:flex-start; padding:14px 18px;
border-top:1px solid var(--line); position:sticky; bottom:0; background:rgba(10,15,26,.96)}
/* ─────────────────── نانبار ─────────────────── */
.toast-host{position:fixed; bottom:18px; left:calc(var(--feed) + 26px); z-index:80;
display:flex; flex-direction:column; gap:9px; pointer-events:none}
.toast-host>*{pointer-events:auto}
@media (max-width:1400px){.toast-host{left:18px}}
.toast{padding:11px 15px; border-radius:11px; background:var(--glass); border:1px solid var(--line-2);
box-shadow:var(--shadow); font-size:12.5px; min-width:250px; max-width:400px;
animation:toastIn .3s cubic-bezier(.2,.8,.2,1); backdrop-filter:blur(12px)}
@keyframes toastIn{from{opacity:0; transform:translateY(16px)}}
.toast.ok{border-color:rgba(52,211,153,.5)} .toast.err{border-color:rgba(248,113,113,.55)}
.toast.warn{border-color:rgba(245,158,11,.5)}
.toast b{display:block; margin-bottom:2px}
/* ─────────────────── پویانمایی ─────────────────── */
@media (prefers-reduced-motion: no-preference){
.content>*{animation:viewIn .34s cubic-bezier(.2,.8,.2,1) both}
.content>*:nth-child(2){animation-delay:.04s}
.content>*:nth-child(3){animation-delay:.08s}
.content>*:nth-child(4){animation-delay:.12s}
.content>*:nth-child(n+5){animation-delay:.16s}
.grid>*{animation:cardIn .38s cubic-bezier(.2,.8,.2,1) both}
.grid>*:nth-child(2){animation-delay:.05s}
.grid>*:nth-child(3){animation-delay:.1s}
.grid>*:nth-child(4){animation-delay:.15s}
.grid>*:nth-child(5){animation-delay:.2s}
.wall .tile{animation:tileIn .45s cubic-bezier(.2,.8,.2,1) both}
.table tbody tr{animation:rowIn .3s ease both}
}
@keyframes viewIn{from{opacity:0; transform:translateY(10px)}}
@keyframes cardIn{from{opacity:0; transform:translateY(14px) scale(.985)}}
@keyframes tileIn{from{opacity:0; transform:scale(.96)}}
@keyframes rowIn{from{opacity:0}}
.kpi{position:relative; overflow:hidden}
.kpi::after{content:""; position:absolute; inset:0; pointer-events:none;
background:linear-gradient(115deg,transparent 40%,rgba(34,211,238,.10) 50%,transparent 60%);
transform:translateX(-120%); transition:transform .7s}
.kpi:hover::after{transform:translateX(120%)}
.btn,.chip-btn,.nav-item,.id-card,.tile,.alert-card{will-change:transform}
.btn:active{transform:translateY(1px) scale(.99)}
.spinner-lg{width:26px; height:26px; border:2.5px solid rgba(34,211,238,.2);
border-top-color:var(--cy); border-radius:50%; animation:spin .8s linear infinite}
.progress-track{height:4px; border-radius:4px; background:rgba(30,42,66,.8); overflow:hidden}
.progress-track span{display:block; height:100%; background:linear-gradient(90deg,var(--cy-2),var(--cy));
transition:width .4s cubic-bezier(.2,.8,.2,1)}
/* ─────────────────── ریز ─────────────────── */
.meter{display:flex; align-items:center; gap:8px}
.meter .bar{flex:1; height:6px; border-radius:6px; background:rgba(30,42,66,.8); overflow:hidden}
.meter .bar span{display:block; height:100%; background:linear-gradient(90deg,var(--cy-2),var(--cy))}
.meter b{font-family:var(--mono); font-size:11px; min-width:42px; text-align:left}
.kv{display:grid; grid-template-columns:minmax(96px,auto) 1fr; gap:7px 14px; font-size:12.5px;
align-items:baseline; margin:0}
.kv dt{color:var(--txt-dim); white-space:nowrap}
.kv dd{margin:0; text-align:right; unicode-bidi:plaintext; font-variant-numeric:tabular-nums;
word-break:break-word}
.kv dd.mono,.kv dd .mono{font-family:var(--mono)}
.sec-note{font-size:11.5px; color:var(--txt-dim); border-right:2px solid var(--line-2);
padding-right:9px; margin:8px 0}
/* بخش جمعشونده */
.fold{border:1px solid var(--line); border-radius:var(--r-m); background:var(--glass-2);
margin-bottom:12px; overflow:hidden}
.fold>summary{cursor:pointer; padding:11px 15px; font-weight:700; font-size:13.5px;
list-style:none; display:flex; align-items:center; gap:9px; user-select:none;
transition:.15s}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::before{content:"›"; color:var(--cy); font-size:17px; line-height:1;
transform:rotate(180deg); transition:.2s; display:inline-block}
.fold[open]>summary::before{transform:rotate(270deg)}
.fold>summary:hover{background:rgba(34,211,238,.06)}
.fold>summary i{font-style:normal; margin-right:auto; font-size:11px; color:var(--txt-dim);
font-weight:400}
.fold-body{padding:0 15px 14px}
.fold-body>.panel{margin-bottom:0; border:0; padding:0; background:transparent}
/* گروهبندی ناوبری */
.nav-group{font-size:10px; color:var(--txt-dim); padding:11px 12px 4px; letter-spacing:.5px}
.nav-group:first-child{padding-top:2px}
/* جمع کردن پنل جریان زنده */
.app.feed-off{grid-template-columns:var(--side) 1fr 40px}
.app.feed-off .feed .feed-list,.app.feed-off .feed .feed-tools{display:none}
.app.feed-off .feed{align-items:center}
.app.feed-off .feed-head{flex-direction:column; height:100%; padding:10px 4px; gap:12px}
.app.feed-off .feed-head b{writing-mode:vertical-rl; font-size:11px; color:var(--txt-dim)}
.feed-toggle{background:transparent; border:1px solid var(--line-2); color:var(--txt-2);
border-radius:7px; width:26px; height:26px; cursor:pointer; font-size:12px; line-height:1}
.feed-toggle:hover{border-color:var(--cy); color:var(--cy)}
.tag-input{display:flex; gap:6px; flex-wrap:wrap; padding:7px; border:1px solid var(--line-2);
border-radius:var(--r-s); background:rgba(5,9,17,.7); min-height:42px}
.tag-input input{flex:1; min-width:110px; border:0; background:transparent; outline:none}
.skeleton{background:linear-gradient(90deg,#0e1524,#16203400,#0e1524); background-size:200% 100%;
animation:shim 1.4s infinite; border-radius:8px; height:14px}
@keyframes shim{to{background-position:-200% 0}}
.spinner{width:16px; height:16px; border:2px solid rgba(34,211,238,.25); border-top-color:var(--cy);
border-radius:50%; animation:spin .7s linear infinite; display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.split{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:1050px){.split{grid-template-columns:1fr}}
.right{text-align:left}
.dim{color:var(--txt-dim)}
.warn-band{border:1px solid rgba(245,158,11,.45); background:rgba(245,158,11,.09);
border-radius:var(--r-s); padding:9px 12px; font-size:12px; color:#fde68a; margin-bottom:12px}
.ok-band{border:1px solid rgba(52,211,153,.45); background:rgba(52,211,153,.08);
border-radius:var(--r-s); padding:9px 12px; font-size:12px; color:#a7f3d0; margin-bottom:12px}
.err-band{border:1px solid rgba(248,113,113,.5); background:rgba(220,38,38,.1);
border-radius:var(--r-s); padding:9px 12px; font-size:12px; color:#fecaca; margin-bottom:12px}
@media (max-width:1400px){
.app{grid-template-columns:var(--side) 1fr; grid-template-areas:"top top" "side main"}
.feed{display:none}
}
@media (max-width:820px){
.app{grid-template-columns:1fr; grid-template-areas:"top" "main"; padding:6px}
.sidebar{position:fixed; top:70px; right:6px; bottom:6px; width:190px; z-index:50;
transform:translateX(110%); transition:.25s}
.sidebar.open{transform:none}
}
/* ═════════════ نماهای مستندات ═════════════ */
.hero{position:relative; border-radius:var(--r-l); overflow:hidden; padding:38px 34px;
background:linear-gradient(150deg,#0b1a2b 0%,#0e2a38 55%,#122036 100%);
border:1px solid var(--line-2)}
.hero-grid{position:absolute; inset:0; opacity:.14;
background-image:linear-gradient(rgba(34,211,238,.35) 1px,transparent 1px),
linear-gradient(90deg,rgba(34,211,238,.35) 1px,transparent 1px);
background-size:44px 44px;
mask-image:radial-gradient(circle at 70% 30%,#000,transparent 72%)}
.hero-in{position:relative}
.hero-badge{display:inline-block; font-size:11.5px; color:#a5f3fc; letter-spacing:.4px;
border:1px solid rgba(34,211,238,.4); border-radius:20px; padding:4px 14px;
margin-bottom:16px; background:rgba(34,211,238,.08)}
.hero h1{font-size:42px; margin:0 0 12px; letter-spacing:2px; font-weight:300;
background:linear-gradient(90deg,#e6edf7,#22d3ee); -webkit-background-clip:text;
background-clip:text; color:transparent}
.hero-lead{max-width:720px; font-size:14px; line-height:2.2; color:#b9c9de; margin:0 0 20px}
.hero-tags{display:flex; gap:8px; flex-wrap:wrap}
.hero-tags span{font-size:11px; padding:5px 13px; border-radius:20px;
border:1px solid var(--line-2); background:rgba(10,15,26,.55); color:var(--txt-2)}
.feature{transition:.2s}
.feature:hover{border-color:rgba(34,211,238,.4); transform:translateY(-3px)}
.feature-ic{width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
background:rgba(34,211,238,.10); border:1px solid rgba(34,211,238,.25);
color:var(--cy); margin-bottom:11px}
.flow{display:flex; align-items:stretch; gap:6px; flex-wrap:wrap}
.flow-step{flex:1 1 130px; min-width:130px; border:1px solid var(--line);
border-radius:var(--r-m); padding:12px 10px; text-align:center;
background:rgba(10,15,26,.55); transition:.2s}
.flow-step:hover{border-color:rgba(34,211,238,.45); background:rgba(34,211,238,.06)}
.flow-ic{width:34px; height:34px; margin:0 auto 8px; border-radius:10px; display:grid;
place-items:center; background:rgba(34,211,238,.10); color:var(--cy)}
.flow-step b{display:block; font-size:12.5px; margin-bottom:3px}
.flow-step i{font-style:normal; font-size:10.5px; color:var(--txt-dim); line-height:1.7}
.flow-arrow{display:grid; place-items:center; color:var(--cy); font-size:20px; opacity:.5;
padding:0 2px}
.doc-sec p{color:var(--txt-2)}
.doc-steps{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:9px;
margin-top:12px}
.doc-step{display:flex; gap:10px; align-items:flex-start; padding:10px 12px;
border:1px solid var(--line); border-radius:10px; background:rgba(10,15,26,.5)}
.doc-step .n{width:22px; height:22px; flex:0 0 22px; border-radius:7px; display:grid;
place-items:center; background:rgba(34,211,238,.12); color:var(--cy);
font-family:var(--mono); font-size:11px}
.doc-step b{display:block; font-size:12.5px; margin-bottom:2px}
.doc-step i{font-style:normal; font-size:11px; color:var(--txt-dim); line-height:1.7}
@media print{
.sidebar,.topbar,.feed,.toast-host,.view-head .btn{display:none !important}
.app{grid-template-columns:1fr; grid-template-areas:"main"; padding:0}
body{background:#fff; color:#111}
.panel,.fold{border-color:#ccc; background:#fff}
}
/* ═════════════ کارگاه ارتقای تصویر ═════════════ */
.enh-stage{position:relative; border-radius:var(--r-m); overflow:hidden;
background:#04070e; border:1px solid var(--line-2); aspect-ratio:1;
max-width:420px; margin:0 auto}
.enh-stage img{width:100%; height:100%; object-fit:cover; display:block}
.enh-stage .after{position:absolute; inset:0; clip-path:inset(0 0 0 var(--split,100%))}
.enh-stage.busy .before{filter:brightness(.75) saturate(.7)}
/* خط اسکن حین پردازش */
.enh-scan{position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s}
.enh-stage.busy .enh-scan{opacity:1}
.enh-scan::before{content:""; position:absolute; left:0; right:0; height:34%;
background:linear-gradient(180deg,transparent,rgba(34,211,238,.30),transparent);
animation:enhScan 1.5s cubic-bezier(.4,0,.6,1) infinite}
.enh-scan::after{content:""; position:absolute; inset:0;
background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(34,211,238,.05) 3px 4px)}
@keyframes enhScan{0%{top:-34%}100%{top:100%}}
.enh-stage.busy::after{content:""; position:absolute; inset:0; border:2px solid transparent;
border-radius:var(--r-m);
background:linear-gradient(120deg,rgba(34,211,238,.6),transparent 40%,transparent 60%,
rgba(129,140,248,.6)) border-box;
-webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor; mask-composite:exclude;
animation:enhGlow 1.8s linear infinite}
@keyframes enhGlow{to{filter:hue-rotate(60deg)}}
/* دکمهٔ اصلی کارگاه — اقدام دومرحلهای، پس باید از بقیه متمایز باشد */
.hero-btn{display:flex; align-items:center; gap:12px; width:100%; padding:14px 18px;
text-align:right; border-radius:var(--r-m); font-size:13.5px;
background:linear-gradient(100deg,var(--cy) 0%,#6366f1 100%); color:#04070e;
border:none; box-shadow:0 6px 26px rgba(34,211,238,.24); transition:.2s}
.hero-btn:hover:not(:disabled){transform:translateY(-1px);
box-shadow:0 10px 34px rgba(34,211,238,.34)}
.hero-btn:disabled{opacity:.4; box-shadow:none; transform:none}
.hero-btn b{display:block; font-size:14px; font-weight:700; margin-bottom:2px}
.hero-btn small{display:block; font-size:11.5px; opacity:.82; font-weight:400;
line-height:1.7}
.hero-btn svg{flex:0 0 auto; opacity:.9}
/* مرحلهٔ دوم: پاکسازی کیفیت — موج نرم بهجای چرخش */
.enh-stage.enh-polish .enh-scan::before{
background:linear-gradient(180deg,transparent,rgba(52,211,153,.32),transparent);
animation-duration:.9s}
.enh-stage.enh-polish .after{filter:blur(3px) saturate(.85); animation:enhSharp 1.1s
ease-out infinite alternate}
@keyframes enhSharp{to{filter:blur(0) saturate(1)}}
/* حالت روبهروسازی سهبعدی: تصویر مبدأ حول محور عمودی میچرخد، دقیقاً همان
کاری که مدل با هندسهٔ چهره میکند — و شبکهٔ مش روی آن دیده میشود. */
.enh-stage.enh-3d{perspective:900px}
.enh-stage.enh-3d .before{animation:enhTurn 2.6s cubic-bezier(.45,0,.35,1) infinite;
transform-style:preserve-3d}
@keyframes enhTurn{
0%{transform:rotateY(-32deg) scale(.94); filter:brightness(.7) saturate(.6)}
50%{transform:rotateY(0deg) scale(1); filter:brightness(1) saturate(1)}
100%{transform:rotateY(-32deg) scale(.94); filter:brightness(.7) saturate(.6)}}
.enh-stage.enh-3d .enh-scan::before{
background:linear-gradient(180deg,transparent,rgba(129,140,248,.34),transparent);
animation-duration:1.1s}
.enh-stage.enh-3d .enh-scan::after{
background:repeating-linear-gradient(0deg,transparent 0 7px,rgba(129,140,248,.10) 7px 8px),
repeating-linear-gradient(90deg,transparent 0 7px,rgba(129,140,248,.10) 7px 8px);
animation:enhMesh 2.6s ease-in-out infinite}
@keyframes enhMesh{0%,100%{opacity:.35; transform:scaleX(.86)}50%{opacity:.9; transform:scaleX(1)}}
/* محور تقارن — همان صفحهای که نیمهٔ پنهان از رویش بازسازی میشود */
.enh-stage.enh-3d::before{content:""; position:absolute; top:6%; bottom:6%; left:50%;
width:1px; background:linear-gradient(180deg,transparent,rgba(34,211,238,.75),transparent);
box-shadow:0 0 10px var(--cy-glow); animation:pulse 1.3s ease-in-out infinite; z-index:3}
/* دستهٔ مقایسه پیش/پس */
.enh-handle{position:absolute; top:0; bottom:0; width:2px; background:var(--cy);
left:var(--split,100%); box-shadow:0 0 12px var(--cy-glow); cursor:ew-resize;
transition:opacity .3s}
.enh-handle::after{content:"⇄"; position:absolute; top:50%; left:50%;
transform:translate(-50%,-50%); width:30px; height:30px; border-radius:50%;
background:var(--cy); color:#04070e; display:grid; place-items:center;
font-size:13px; box-shadow:0 0 18px var(--cy-glow)}
.enh-reveal{animation:reveal 1.1s cubic-bezier(.4,0,.2,1) forwards}
@keyframes reveal{from{--split:100%}to{--split:0%}}
@property --split{syntax:''; inherits:true; initial-value:100%}
.enh-badge{position:absolute; top:10px; right:10px; font-size:10.5px; padding:3px 10px;
border-radius:20px; background:rgba(4,7,14,.85); border:1px solid var(--line-2);
color:var(--txt-2); backdrop-filter:blur(6px)}
.enh-badge.gen{border-color:rgba(129,140,248,.6); color:#c7d2fe}
.enh-steps{display:flex; gap:6px; justify-content:center; margin-top:12px; flex-wrap:wrap}
.enh-steps .st{font-size:11px; padding:4px 11px; border-radius:20px;
border:1px solid var(--line); color:var(--txt-dim); transition:.3s}
.enh-steps .st.on{border-color:var(--cy); color:var(--cy); background:rgba(34,211,238,.08)}
.enh-steps .st.done{border-color:rgba(52,211,153,.5); color:var(--gr)}
.gen-warn{border:1px solid rgba(129,140,248,.5); background:rgba(129,140,248,.09);
color:#c7d2fe; border-radius:var(--r-s); padding:10px 13px; font-size:11.5px;
line-height:1.9; margin-top:12px}
/* ═════════════ دوربینهای لبه ═════════════ */
.cam-grid{display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.relay-bar{display:flex; align-items:center; gap:12px; padding:12px 16px; margin:0 0 16px;
border-radius:var(--r-m); border:1px solid var(--line-2); background:var(--srf-2)}
.relay-bar.on{border-color:rgba(52,211,153,.35); background:linear-gradient(90deg,
rgba(52,211,153,.07),transparent 55%)}
.relay-bar.off{border-color:rgba(245,158,11,.30); background:linear-gradient(90deg,
rgba(245,158,11,.06),transparent 55%)}
.relay-bar .dot{width:9px; height:9px; border-radius:50%; flex:0 0 auto}
.relay-bar .dot.ok{background:var(--gr); box-shadow:0 0 10px var(--gr);
animation:pulse 2s ease-in-out infinite}
.relay-bar .dot.bad{background:var(--am); box-shadow:0 0 10px var(--am)}
.relay-bar .grow{flex:1; min-width:0}
.relay-bar b{display:block; font-size:13px}
.relay-bar small{display:block; font-size:11.5px; color:var(--txt-dim);
unicode-bidi:plaintext; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.relay-nums{display:flex; gap:18px; font-size:11.5px; color:var(--txt-dim)}
.relay-nums b{display:inline; font-size:14px; color:var(--txt); margin-left:4px}
.relay-nums .live b{color:var(--cy)}
.edge-card{background:var(--srf); border:1px solid var(--line-2); border-radius:var(--r-m);
overflow:hidden; display:flex; flex-direction:column; animation:cardIn .4s both}
.edge-card.dim-card{opacity:.62}
.edge-shot{position:relative; aspect-ratio:4/3; background:#04070e; overflow:hidden}
.edge-shot img{width:100%; height:100%; object-fit:contain; display:block;
background:#04070e}
.edge-shot.no-signal{display:grid; place-items:center}
.no-sig{display:grid; gap:8px; place-items:center; color:var(--txt-dim); font-size:12px;
text-align:center; padding:16px}
.no-sig svg{opacity:.30}
.edge-badges{position:absolute; top:8px; left:8px; display:flex; gap:5px; flex-wrap:wrap}
.edge-badges .chip{font-size:10.5px; padding:2px 8px}
.edge-badges .chip.ok{background:rgba(52,211,153,.16); color:var(--gr);
border-color:rgba(52,211,153,.35)}
.edge-badges .chip.off{background:rgba(148,163,184,.14); color:var(--txt-dim)}
.edge-badges .chip.live{background:rgba(34,211,238,.16); color:var(--cy);
border-color:rgba(34,211,238,.35); animation:pulse 2s ease-in-out infinite}
.edge-body{padding:14px 16px 16px; display:flex; flex-direction:column; gap:10px; flex:1}
.edge-body h3{margin:0; font-size:14px}
.edge-body .sub{font-size:11px; color:var(--txt-dim); font-family:var(--mono);
unicode-bidi:plaintext}
.edge-kv{display:grid; grid-template-columns:1fr 1fr; gap:5px 14px; font-size:11.5px;
padding:10px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.edge-kv>div{display:flex; justify-content:space-between; gap:8px; min-width:0}
.edge-kv span{color:var(--txt-dim)}
.edge-kv b{font-weight:600; unicode-bidi:plaintext; overflow:hidden;
text-overflow:ellipsis; white-space:nowrap}
.edge-kv .good b{color:var(--gr)}
.edge-kv .warn b{color:var(--am)}
.edge-kv .bad b{color:var(--rd)}
.edge-act{display:flex; gap:6px; flex-wrap:wrap; margin-top:auto}
.edge-act .btn{flex:1; min-width:118px; justify-content:center; font-size:12px}
.qr-box{display:inline-block; padding:14px; border-radius:var(--r-m);
background:#fff; line-height:0}
.qr-box svg{display:block; width:min(272px,62vw); height:min(272px,62vw);
image-rendering:pixelated; shape-rendering:crispEdges}
.qr-link{width:100%; font-family:var(--mono); font-size:11.5px; text-align:center;
unicode-bidi:plaintext; direction:ltr}
.steps-list{margin:10px 0 0; padding-inline-start:20px; font-size:12.5px; line-height:2.1;
color:var(--txt-2)}
.steps-list li{margin-bottom:7px}
.steps-list code{font-family:var(--mono); background:var(--srf-2); padding:1px 6px;
border-radius:5px; font-size:11.5px; unicode-bidi:plaintext}
/* ═════════════ کلید اصلی سامانه ═════════════ */
.arm-switch{display:flex; align-items:center; gap:8px; padding:6px 14px 6px 10px;
border-radius:999px; border:1px solid var(--line-2); background:var(--srf-2);
color:var(--txt); font:inherit; font-size:12px; cursor:pointer; transition:.2s}
.arm-switch:hover{border-color:var(--cy)}
.arm-dot{width:8px; height:8px; border-radius:50%; background:var(--txt-dim); flex:0 0 auto}
.arm-switch.on{border-color:rgba(52,211,153,.45);
background:linear-gradient(90deg,rgba(52,211,153,.14),rgba(52,211,153,.05))}
.arm-switch.on .arm-dot{background:var(--gr); box-shadow:0 0 10px var(--gr);
animation:pulse 2s ease-in-out infinite}
.arm-switch.on .arm-label{color:var(--gr); font-weight:600}
.arm-switch.off{border-color:rgba(245,158,11,.45);
background:linear-gradient(90deg,rgba(245,158,11,.14),rgba(245,158,11,.05))}
.arm-switch.off .arm-dot{background:var(--am); box-shadow:0 0 10px var(--am)}
.arm-switch.off .arm-label{color:var(--am); font-weight:600}
/* نوار هشدار سراسری در حالت آمادهباش — نباید فراموش شود که سامانه نمیبیند */
body.standby #app::before{content:"سامانه در حالت آمادهباش است — هیچ تصویری خوانده یا ذخیره نمیشود";
position:fixed; inset:auto 0 0 0; z-index:60; text-align:center; font-size:11.5px;
padding:5px 12px; color:#0b0f14; background:linear-gradient(90deg,#f59e0b,#fbbf24);
letter-spacing:.2px; pointer-events:none}
body.standby .main{padding-bottom:34px}
/* ═════════════ هویتهای تکراری ═════════════ */
.dup-list{display:flex; flex-direction:column; gap:10px; margin-top:14px;
max-height:min(60vh,520px); overflow-y:auto}
.dup-row{display:grid; grid-template-columns:1fr auto 1fr auto; gap:14px;
align-items:center; padding:12px 14px; border-radius:var(--r-m);
background:var(--srf-2); border:1px solid var(--line-2)}
.dup-side{display:flex; align-items:center; gap:10px; min-width:0}
.dup-side b{font-size:13px; overflow:hidden; text-overflow:ellipsis;
white-space:nowrap}
.dup-side small{font-size:11px; color:var(--txt-dim); flex:0 0 auto}
.dup-face{width:56px; height:56px; border-radius:10px; object-fit:cover;
flex:0 0 auto; border:1px solid var(--line-2)}
.dup-mid{text-align:center; min-width:110px}
.dup-mid b{display:block; font-size:14px; color:var(--cy)}
.dup-mid small{display:block; font-size:10.5px; color:var(--txt-dim); line-height:1.7}
.dup-act{display:flex; flex-direction:column; gap:6px; min-width:180px}
.dup-keep{font-size:11.5px; padding:6px 8px}
.btn-warn{border-color:rgba(245,158,11,.5); background:rgba(245,158,11,.12);
color:#fcd34d}
.btn-warn .badge2{margin-inline-start:6px; background:var(--am); color:#0b0f14}
@media (max-width:860px){
.dup-row{grid-template-columns:1fr; gap:10px}
.dup-act{min-width:0}
}
/* ═════════════ صحنهٔ جستوجوی زیستسنجی ═════════════ */
.sx{border:1px solid var(--line-2); border-radius:var(--r-m); overflow:hidden;
background:linear-gradient(160deg,#0a1018,#0b0f14); margin-bottom:14px}
.sx-stage{display:grid; grid-template-columns:1.25fr .75fr; gap:0;
min-height:300px}
@media (max-width:820px){.sx-stage{grid-template-columns:1fr}}
/* ── سمت تصویر ── */
.sx-left{position:relative; overflow:hidden; background:#04070e;
display:grid; place-items:center; min-height:300px}
.sx-probe{max-width:100%; max-height:420px; display:block; object-fit:contain}
.sx-grid{position:absolute; inset:0; width:100%; height:100%; opacity:.16;
background:repeating-linear-gradient(0deg,transparent 0 22px,var(--cy) 22px 23px),
repeating-linear-gradient(90deg,transparent 0 22px,var(--cy) 22px 23px);
mix-blend-mode:screen; pointer-events:none}
/* کادر روی چهرهٔ پیداشده */
.sx-box{position:absolute; display:none; border:2px solid var(--cy);
box-shadow:0 0 0 9999px rgba(4,7,14,.45), 0 0 22px var(--cy-glow);
border-radius:3px; transition:all .45s cubic-bezier(.2,.9,.3,1)}
.sx-box.lock{animation:sxLock .5s ease-out}
@keyframes sxLock{from{transform:scale(1.6); opacity:0}}
.sx-box::before,.sx-box::after{content:""; position:absolute; inset:-7px;
border:1px solid var(--cy); opacity:.5; border-radius:5px}
.sx-box::after{animation:sxPulse 1.6s ease-out infinite}
@keyframes sxPulse{to{inset:-18px; opacity:0}}
/* پرتو اسکن — فقط حین جستوجو */
.sx-beam{position:absolute; inset:0; opacity:0; transition:opacity .3s;
pointer-events:none}
.sx.sx-run .sx-beam{opacity:1}
.sx-beam::before{content:""; position:absolute; left:0; right:0; height:26%;
background:linear-gradient(180deg,transparent,rgba(34,211,238,.30),transparent);
animation:sxScan 1.5s cubic-bezier(.4,0,.6,1) infinite}
@keyframes sxScan{0%{top:-26%}100%{top:100%}}
/* ── سمت نتیجه ── */
.sx-right{padding:16px; display:flex; flex-direction:column; gap:12px;
border-inline-start:1px solid var(--line-2); background:var(--srf)}
.sx-reel-wrap{position:relative; width:100%; aspect-ratio:1; max-height:190px;
border-radius:var(--r-m); overflow:hidden; background:#04070e;
border:1px solid var(--line-2); margin:0 auto}
.sx-reel{position:absolute; inset:0; transition:none}
.sx-reel img{width:100%; height:100%; object-fit:cover; display:block}
.sx.sx-run .sx-reel img{filter:brightness(.75) saturate(.6)}
.sx-reticle{position:absolute; inset:0; pointer-events:none;
background:
linear-gradient(var(--cy),var(--cy)) 50% 0/1px 14px no-repeat,
linear-gradient(var(--cy),var(--cy)) 50% 100%/1px 14px no-repeat,
linear-gradient(var(--cy),var(--cy)) 0 50%/14px 1px no-repeat,
linear-gradient(var(--cy),var(--cy)) 100% 50%/14px 1px no-repeat;
opacity:.55}
.sx.sx-done .sx-reticle{opacity:0; transition:opacity .4s}
/* ریزش بردار */
.sx-vec{display:grid; grid-template-columns:repeat(16,1fr); gap:2px}
.sx-vec i{display:block; aspect-ratio:1; border-radius:2px;
animation:sxCell .5s both; animation-delay:var(--d)}
@keyframes sxCell{from{opacity:0; transform:scale(.2)}}
/* حکم نهایی */
.sx-verdict{min-height:56px; display:flex; flex-direction:column; gap:2px;
justify-content:center; padding:10px 12px; border-radius:var(--r-m);
border:1px solid var(--line-2); background:var(--srf-2)}
.sx-verdict b{font-size:14.5px}
.sx-verdict small{font-size:11.5px; color:var(--txt-dim); line-height:1.8}
.sx-verdict .sx-score{font-family:var(--mono); font-size:18px; margin-top:2px}
.sx-verdict.hit{animation:sxHit .55s ease-out}
.sx-verdict.hit.ok{border-color:rgba(52,211,153,.5); background:rgba(52,211,153,.10)}
.sx-verdict.hit.ok .sx-score{color:var(--gr)}
.sx-verdict.hit.watch{border-color:rgba(245,158,11,.5); background:rgba(245,158,11,.10)}
.sx-verdict.hit.watch .sx-score{color:var(--am)}
.sx-verdict.hit.deny{border-color:rgba(239,68,68,.6); background:rgba(239,68,68,.12);
animation:sxHit .55s ease-out, critFlash 1.1s ease-in-out 3}
.sx-verdict.hit.deny .sx-score{color:var(--rd)}
.sx-verdict.miss{border-color:var(--line-2)}
@keyframes sxHit{from{opacity:0; transform:translateY(10px)}}
/* گامها */
.sx-steps{display:flex; flex-wrap:wrap; gap:6px; padding:10px 14px;
border-top:1px solid var(--line-2); background:var(--srf-2)}
.sx-st{font-size:11px; padding:3px 10px; border-radius:999px;
border:1px solid var(--line-2); color:var(--txt-dim); transition:.25s}
.sx-st.on{border-color:var(--cy); color:var(--cy); background:rgba(34,211,238,.10)}
.sx-st.done{border-color:rgba(52,211,153,.4); color:var(--gr)}