:root{
  --bg:#f5f6fa; --card:#fff; --txt:#1e1e2d; --muted:#7a7c8c;
  --line:#e3e5ee; --pri:#7c3aed; --pri-d:#6d28d9;
  --err-bg:#fef2f2; --err-tx:#991b1b; --err-bd:#ef4444;
  --ok:#10b981;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--txt);
  font-family:"Segoe UI","Heebo",Tahoma,sans-serif;font-size:16px;direction:rtl}
a{color:var(--pri);text-decoration:none}
.muted{color:var(--muted)}

/* ── header ── */
.hdr{
  position:sticky;top:0;z-index:5;background:#1e1e2d;color:#fff;
  padding:12px 16px;display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:8px;box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.hdr-name{font-weight:600;font-size:15px}
.hdr-actions{display:flex;gap:14px;align-items:center}
.hdr .lnk{color:#cfd0e0;font-size:14px;padding:6px 4px;border-bottom:2px solid transparent}
.hdr .lnk.on{color:#fff;border-bottom-color:var(--pri)}
.hdr .lnk.muted{color:#8b8d9d}
.hdr .lnk.muted:hover{color:#fff}

/* ── layout ── */
.wrap{max-width:760px;margin:0 auto;padding:14px 14px 90px}

/* ── cards / list ── */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:14px 16px;margin-bottom:10px;box-shadow:0 1px 2px rgba(0,0,0,.03)
}
.card.err{background:var(--err-bg);color:var(--err-tx);border-color:var(--err-bd);font-weight:500}
.card.small{font-size:13px;padding:8px 14px;margin-bottom:8px}
.card-link{display:block;color:inherit;text-decoration:none}
.card-link .card{cursor:pointer;transition:transform .08s,box-shadow .08s,border-color .15s}
.card-link:hover .card{border-color:var(--pri);box-shadow:0 4px 14px rgba(124,58,237,.12)}
.card-link:active .card{transform:scale(.997)}
.card.admin-banner{background:#fff8e1;color:#7c4a03;border-color:#fcd34d;font-size:14px;text-align:center}
.card.warn{background:#fff8e1;color:#7c4a03;border-color:#f59e0b;font-size:14px;line-height:1.5}
.card.warn b{color:#92400e}
.card.warn .warn-list{list-style:none;padding:8px 0 4px;margin:6px 0;border-top:1px dashed #f59e0b;border-bottom:1px dashed #f59e0b}
.card.warn .warn-list li{padding:4px 0;font-size:14px}
.card.ok{background:#ecfdf5;color:#065f46;border-color:#10b981;font-weight:500}

/* settings page */
.checkbox-line{display:flex !important;align-items:center;gap:8px;margin:14px 0 6px;font-size:14px;color:var(--txt)}
.checkbox-line input[type=checkbox]{width:auto !important;margin:0}
.sql-auth{padding:8px 12px;background:#f5f6fa;border-radius:10px;margin-top:4px}
.sql-auth input:disabled{background:#e9ebf3;color:#9395a5;cursor:not-allowed}
.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-top:8px}
.theme-card{display:flex;align-items:center;gap:10px;padding:10px 12px;border:2px solid var(--line);
  border-radius:10px;cursor:pointer;background:#fff;transition:border-color .15s,transform .08s}
.theme-card:hover{border-color:#bcc0d6}
.theme-card.on{border-color:var(--pri);background:#fafaff}
.theme-card input[type=radio]{margin:0}
.theme-swatch{display:inline-block;width:24px;height:24px;border-radius:50%;border:2px solid rgba(0,0,0,.08);flex-shrink:0}
.theme-name{font-size:14px;font-weight:500}
code{background:#eef0fa;padding:2px 6px;border-radius:4px;font-size:13px;direction:ltr;display:inline-block}
.hint{display:block;font-size:12px;margin-top:4px}
.hint.err-text{color:#991b1b}
.lnk.small{font-size:13px;margin-right:8px;font-weight:normal}
.row1{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px;gap:8px}
.when{font-size:15px}
.when b{font-size:16px}
.status{font-size:13px;background:#eef0fa;color:#3b3f6b;padding:3px 10px;border-radius:999px;white-space:nowrap}
.who{font-size:16px;font-weight:600;margin-bottom:2px}
.meta{font-size:13px;color:var(--muted);margin-bottom:2px}
.note{font-size:14px;color:#3a3c4d;margin-top:6px;border-top:1px dashed var(--line);padding-top:6px;white-space:pre-wrap}

/* ── filter + tabs ── */
.filter{display:flex;gap:6px;margin-bottom:10px}
.filter input{flex:1;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font-size:15px;font-family:inherit;direction:rtl;background:#fff}
.tabs{display:flex;gap:4px;margin-bottom:10px;border-bottom:1px solid var(--line)}
.tab{padding:9px 14px;font-size:14px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.tab.on{color:var(--pri);border-bottom-color:var(--pri);font-weight:600}
.count{margin-bottom:8px;font-size:13px}
.status-counts{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 10px}
.status-counts .chip{display:inline-flex;align-items:center;gap:6px;
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:5px 11px;font-size:13px;color:#3a3c4d;
  text-decoration:none;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s,box-shadow .15s}
.status-counts .chip:hover{border-color:var(--pri);
  box-shadow:0 2px 6px rgba(124,58,237,.12)}
.status-counts .chip b{background:var(--pri);color:#fff;border-radius:999px;
  padding:1px 8px;font-size:12px;font-weight:700;min-width:22px;text-align:center;
  transition:background .15s,color .15s}
.status-counts .chip.on{background:var(--pri);color:#fff;border-color:var(--pri);
  font-weight:600;box-shadow:0 2px 8px rgba(124,58,237,.25)}
.status-counts .chip.on b{background:#fff;color:var(--pri)}

/* ── buttons ── */
.btn{
  display:inline-block;padding:10px 16px;border-radius:10px;border:1px solid var(--line);
  background:#fff;color:var(--txt);font-size:15px;font-family:inherit;cursor:pointer;
  text-align:center;font-weight:500;line-height:1.2
}
.btn:hover{background:#f0f1f8}
.btn.primary{background:var(--pri);color:#fff;border-color:var(--pri)}
.btn.primary:hover{background:var(--pri-d);border-color:var(--pri-d)}
.btn.btn-clear{background:#fef2f2;color:#991b1b;border-color:#ef4444;font-weight:600;
  padding:10px 14px;white-space:nowrap}
.btn.btn-clear:hover{background:#ef4444;color:#fff;border-color:#dc2626}

/* ── floating add ── */
.fab{
  position:fixed;left:18px;bottom:18px;width:60px;height:60px;border-radius:50%;
  background:var(--pri);color:#fff;font-size:34px;font-weight:300;line-height:60px;text-align:center;
  box-shadow:0 6px 20px rgba(124,58,237,.4);z-index:10
}
.fab:hover{background:var(--pri-d)}

/* ── login ── */
.login-box{
  background:#fff;border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,.08);
  padding:36px 28px;max-width:380px;margin:50px auto;
}
.login-box h1{font-size:22px;text-align:center;margin-bottom:6px}
.login-box .sub{text-align:center;color:var(--muted);font-size:13px;margin-bottom:24px}
.login-box label{display:block;font-size:13px;color:var(--muted);margin:10px 0 4px}
.login-box input{
  width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;
  font-size:15px;font-family:inherit;direction:rtl;margin-bottom:6px;background:#fff
}
.login-box input:focus{outline:none;border-color:var(--pri);box-shadow:0 0 0 3px rgba(124,58,237,.12)}
.login-box .btn{width:100%;margin-top:12px;padding:12px}

/* ── form ── */
.form{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;margin-bottom:14px}
.form h2{font-size:18px;margin-bottom:14px}
.form label{display:block;font-size:13px;color:var(--muted);margin:10px 0 4px}
.form input,.form select,.form textarea{
  width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;
  font-size:15px;font-family:inherit;direction:rtl;background:#fff
}
.form input:focus,.form select:focus,.form textarea:focus{
  outline:none;border-color:var(--pri);box-shadow:0 0 0 3px rgba(124,58,237,.12)
}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.actions{margin-top:18px;display:flex;gap:8px}
.actions .btn{flex:1}

/* ── child combo ── */
.combo{position:relative}
.combo .picked{padding:9px 12px;background:#f0f1f8;border-radius:10px;margin-top:6px;font-size:14px}
.combo .picked:not(.muted){background:#eef9f1;color:#055a30;font-weight:500}
.picked.locked{padding:11px 14px;background:#eef9f1;border:1px solid #a7d4b5;
  border-radius:10px;color:#055a30;font-weight:600;font-size:15px;
  display:flex;justify-content:space-between;align-items:center;gap:10px}
.picked.locked .lock-hint{font-size:12px;color:#6b7a72;font-weight:normal}
.drop{
  position:absolute;left:0;right:0;top:46px;background:#fff;border:1px solid var(--line);
  border-radius:10px;max-height:240px;overflow-y:auto;display:none;z-index:20;
  box-shadow:0 6px 20px rgba(0,0,0,.12)
}
.drop-item{display:block;padding:10px 12px;cursor:pointer;border-bottom:1px solid var(--line);font-size:14px;color:inherit;text-decoration:none}
.drop-item:last-child{border-bottom:none}
.drop-item:hover{background:#f5f6fa}
.combo-list{flex:1;position:relative;min-width:0}
.combo-list input{width:100%}
.combo-list .drop{top:42px}

/* ── tiny screen tweaks ── */
@media (max-width:480px){
  .hdr{padding:10px 12px}
  .wrap{padding:10px 10px 90px}
  .when b{font-size:15px}
  .who{font-size:15px}
}