:root{
  --bg:#0f1420; --bg2:#161d2b; --card:#1b2333; --line:#273044;
  --txt:#e8edf7; --muted:#94a3b8;
  --up:#22c55e; --down:#ef4444; --pending:#f59e0b; --paused:#64748b;
  --accent:#3b82f6; --accent2:#2563eb; --radius:14px;
}
[data-theme="light"]{
  --bg:#f1f5f9; --bg2:#ffffff; --card:#ffffff; --line:#e2e8f0;
  --txt:#0f172a; --muted:#64748b;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--txt); direction:rtl;
  font-family:Vazirmatn,"Segoe UI",Tahoma,system-ui,sans-serif;
  font-size:14px; line-height:1.7; -webkit-tap-highlight-color:transparent;
}
a{color:var(--accent); text-decoration:none}
button,input,select,textarea{font-family:inherit; font-size:14px}
.hidden{display:none !important}

/* ---------- layout ---------- */
header.topbar{
  position:sticky; top:0; z-index:50; background:var(--bg2);
  border-bottom:1px solid var(--line); padding:10px 16px;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.brand{display:flex; align-items:center; gap:8px; font-weight:700; font-size:16px}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--up);box-shadow:0 0 10px var(--up)}
.spacer{flex:1}
main{max-width:1240px; margin:0 auto; padding:16px}

/* ---------- buttons ---------- */
.btn{
  background:var(--card); color:var(--txt); border:1px solid var(--line);
  padding:8px 14px; border-radius:10px; cursor:pointer; transition:.15s;
  display:inline-flex; align-items:center; gap:6px;
}
.btn:hover{border-color:var(--accent); transform:translateY(-1px)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#fff}
.btn.primary:hover{background:var(--accent2)}
.btn.danger{border-color:#7f1d1d; color:#fca5a5}
.btn.danger:hover{background:#7f1d1d33}
.btn.sm{padding:5px 10px; font-size:12px; border-radius:8px}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none}

/* ---------- stats ---------- */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:16px}
.stat{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px}
.stat .v{font-size:24px; font-weight:700; line-height:1.2}
.stat .l{color:var(--muted); font-size:12px}
.stat.up .v{color:var(--up)} .stat.down .v{color:var(--down)} .stat.warn .v{color:var(--pending)}

/* ---------- monitor card ---------- */
.toolbar{display:flex; gap:8px; align-items:center; margin-bottom:12px; flex-wrap:wrap}
.toolbar input[type=search]{
  background:var(--card); border:1px solid var(--line); color:var(--txt);
  padding:8px 12px; border-radius:10px; min-width:200px; flex:1;
}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:12px}
.mon{
  background:var(--card); border:1px solid var(--line); border-left:4px solid var(--paused);
  border-radius:var(--radius); padding:14px; cursor:pointer; transition:.15s;
}
.mon:hover{transform:translateY(-2px); border-color:var(--accent)}
.mon.s1{border-left-color:var(--up)} .mon.s0{border-left-color:var(--down)}
.mon.s2{border-left-color:var(--pending)} .mon.s3{border-left-color:var(--paused)}
.mon .head{display:flex; align-items:center; gap:8px}
.mon .name{font-weight:700; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mon .url{color:var(--muted); font-size:12px; direction:ltr; text-align:right;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-bottom:8px}
.badge{padding:2px 9px; border-radius:20px; font-size:11px; font-weight:700; white-space:nowrap}
.badge.s1{background:#22c55e22; color:var(--up)}
.badge.s0{background:#ef444422; color:var(--down)}
.badge.s2{background:#f59e0b22; color:var(--pending)}
.badge.s3{background:#64748b22; color:var(--paused)}
.badge.gray{background:var(--line); color:var(--muted)}
.badge.ssl-ok{background:#22c55e22; color:var(--up)}
.badge.ssl-warn{background:#f59e0b22; color:var(--pending)}
.badge.ssl-bad{background:#ef444422; color:var(--down)}

.beats{display:flex; gap:2px; align-items:flex-end; height:28px; margin:8px 0; direction:ltr}
.beat{flex:1; min-width:3px; border-radius:2px; background:var(--line); height:60%}
.beat.s1{background:var(--up); height:100%}
.beat.s0{background:var(--down); height:100%}
.beat.s2{background:var(--pending); height:80%}
.mon .meta{display:flex; justify-content:space-between; color:var(--muted); font-size:12px}
.mon .meta b{color:var(--txt)}

/* ---------- modal ---------- */
.overlay{
  position:fixed; inset:0; background:#000a; backdrop-filter:blur(3px);
  display:flex; align-items:flex-start; justify-content:center; z-index:100;
  padding:20px; overflow-y:auto;
}
.modal{
  background:var(--bg2); border:1px solid var(--line); border-radius:16px;
  width:100%; max-width:720px; padding:20px; margin:auto;
}
.modal h3{margin:0 0 14px}
.form{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.form .full{grid-column:1/-1}
label{display:block; color:var(--muted); font-size:12px; margin-bottom:4px}
input[type=text],input[type=number],input[type=password],select,textarea{
  width:100%; background:var(--card); border:1px solid var(--line); color:var(--txt);
  padding:9px 12px; border-radius:10px; outline:none;
}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
textarea{resize:vertical; min-height:70px; direction:ltr; text-align:left}
.checks{display:flex; flex-wrap:wrap; gap:14px; grid-column:1/-1}
.checks label{display:flex; align-items:center; gap:6px; color:var(--txt); font-size:13px; margin:0; cursor:pointer}
.modal-actions{display:flex; gap:8px; justify-content:flex-start; margin-top:16px}
.err{background:#ef444422; border:1px solid #ef4444; color:#fca5a5; padding:8px 12px; border-radius:10px; margin-bottom:10px}

/* ---------- detail ---------- */
.detail-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin:12px 0}
.kv{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px}
.kv .l{color:var(--muted); font-size:11px}
.kv .v{font-weight:700}
table{width:100%; border-collapse:collapse; font-size:13px}
th,td{padding:8px; border-bottom:1px solid var(--line); text-align:right}
th{color:var(--muted); font-weight:600}
.chart{width:100%; height:150px; background:var(--card); border:1px solid var(--line); border-radius:10px}

/* ---------- login ---------- */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px}
.login{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:28px; width:100%; max-width:380px}
.login h2{margin:0 0 4px; text-align:center}
.login p{margin:0 0 20px; text-align:center; color:var(--muted); font-size:13px}
.login input{margin-bottom:12px}

#toast{position:fixed; bottom:20px; left:20px; z-index:200; display:flex; flex-direction:column; gap:8px}
.toast{background:var(--card); border:1px solid var(--line); border-right:4px solid var(--accent);
  padding:10px 16px; border-radius:10px; animation:slide .25s ease}
.toast.ok{border-right-color:var(--up)} .toast.bad{border-right-color:var(--down)}
@keyframes slide{from{opacity:0; transform:translateY(10px)}to{opacity:1}}

@media(max-width:600px){
  .form{grid-template-columns:1fr}
  main{padding:12px}
  .grid{grid-template-columns:1fr}
}