/* GET-CID Admin Panel — shared.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --blue:#0078d4;--blue-d:#005a9e;--blue-dd:#003a6e;--blue-l:#deecf9;--blue-ll:#f0f6ff;
  --sidebar:#0f1923;--sidebar2:#162030;--topbar:#0078d4;
  --bg:#f3f4f6;--card:#ffffff;--border:#e5e7eb;
  --t1:#111827;--t2:#6b7280;--t3:#9ca3af;
  --green:#16a34a;--green-l:#dcfce7;--red:#dc2626;--red-l:#fee2e2;
  --amber:#d97706;--amber-l:#fef3c7;--purple:#7c3aed;--purple-l:#ede9fe;
  --r:6px;--r2:10px;
  --sh:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.05);
  --sh2:0 4px 16px rgba(0,0,0,.12);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--t1);min-height:100vh;display:flex;flex-direction:column;font-size:14px}

/* TOAST */
#toast-wrap{position:fixed;top:18px;right:18px;z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{background:#1f2937;color:#fff;padding:12px 18px;border-radius:var(--r);font-size:13px;box-shadow:var(--sh2);pointer-events:auto;animation:toastIn .25s ease;display:flex;align-items:center;gap:8px;min-width:260px;max-width:380px}
.toast.ok{border-left:3px solid var(--green)}.toast.err{border-left:3px solid var(--red)}.toast.info{border-left:3px solid var(--blue)}
@keyframes toastIn{from{transform:translateX(40px);opacity:0}to{transform:translateX(0);opacity:1}}

/* APP SHELL */
#app{display:flex;flex-direction:column;height:100vh}
.topbar{background:var(--blue);height:50px;display:flex;align-items:center;padding:0 18px;gap:14px;flex-shrink:0;z-index:200;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.tb-brand{display:flex;align-items:center;gap:10px;color:#fff}
.tb-brand span{font-size:16px;font-weight:800;letter-spacing:2.5px}
.tb-div{width:1px;height:22px;background:rgba(255,255,255,.28)}
.tb-title{color:rgba(255,255,255,.88);font-size:13.5px;flex:1;font-weight:500}
.tb-user{display:flex;align-items:center;gap:9px;color:#fff;position:relative}
.tb-avatar{width:34px;height:34px;background:rgba(255,255,255,.22);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;cursor:pointer;transition:background .15s;user-select:none}
.tb-avatar:hover{background:rgba(255,255,255,.32)}
.tb-name{font-size:13px;font-weight:500}
.tb-role{font-size:10px;background:rgba(255,255,255,.2);padding:2px 7px;border-radius:10px;margin-left:2px}

.app-body{display:flex;flex:1;overflow:hidden}
.sidebar{width:230px;background:var(--sidebar);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto}
.sb-sec{padding:8px 0}
.sb-sec-title{padding:8px 18px 5px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.35)}
.nitem{display:flex;align-items:center;gap:10px;padding:10px 18px;cursor:pointer;color:rgba(255,255,255,.7);font-size:13.5px;transition:all .15s;border-left:3px solid transparent;user-select:none}
.nitem:hover{background:rgba(255,255,255,.07);color:#fff}
.nitem.active{background:rgba(0,120,212,.3);color:#fff;border-left-color:var(--blue);font-weight:600}
.nitem svg{flex-shrink:0;opacity:.75}
.nitem.active svg{opacity:1}
.sb-bottom{margin-top:auto;border-top:1px solid rgba(255,255,255,.08);padding:10px 0}
.sb-bottom .nitem{color:rgba(255,255,255,.45);font-size:13px}

.main{flex:1;overflow-y:auto;padding:26px 28px;background:var(--bg)}
@keyframes fadeUp{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.page-content{animation:fadeUp .22s ease}
.ph{margin-bottom:22px}
.ph h2{font-size:19px;font-weight:700;color:var(--t1)}
.ph p{font-size:13px;color:var(--t2);margin-top:3px}

/* cards */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r2);padding:22px;margin-bottom:16px;box-shadow:var(--sh)}
.card-title{font-size:13.5px;font-weight:700;margin-bottom:16px;color:var(--t1);display:flex;align-items:center;gap:8px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--blue);flex-shrink:0}
.dot.g{background:var(--green)}.dot.r{background:var(--red)}.dot.a{background:var(--amber)}

/* stats */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
.scard{background:var(--card);border:1px solid var(--border);border-radius:var(--r2);padding:18px 20px;border-top:3px solid var(--blue);box-shadow:var(--sh)}
.scard .sl{font-size:11px;color:var(--t2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;font-weight:600}
.scard .sv{font-size:24px;font-weight:800;color:var(--t1);line-height:1}
.scard .ss{font-size:11.5px;color:var(--t3);margin-top:5px}

/* inputs */
.ms-ta{width:100%;padding:10px 13px;border:1.5px solid #d1d5db;border-radius:var(--r);font-size:13px;font-family:'JetBrains Mono',monospace;resize:vertical;min-height:110px;outline:none;transition:border-color .18s;background:#f9fafb;color:var(--t1)}
.ms-ta:focus{border-color:var(--blue);box-shadow:0 0 0 2.5px rgba(0,120,212,.14);background:#fff}
.ms-in{width:100%;padding:9px 13px;border:1.5px solid #d1d5db;border-radius:var(--r);font-size:13px;font-family:inherit;outline:none;transition:all .18s;background:#f9fafb;color:var(--t1)}
.ms-in:focus{border-color:var(--blue);box-shadow:0 0 0 2.5px rgba(0,120,212,.14);background:#fff}
select.ms-in{cursor:pointer;width:auto}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--r);font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;border:1.5px solid transparent;transition:all .15s;white-space:nowrap}
.btn-blue{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn-blue:hover{background:var(--blue-d)}
.btn-blue:disabled{opacity:.5;cursor:not-allowed}
.btn-out{background:#fff;color:var(--blue);border-color:var(--blue)}
.btn-out:hover{background:var(--blue-l)}
.btn-red{background:var(--red);color:#fff;border-color:var(--red)}
.btn-red:hover{background:#b91c1c}
.btn-sm{padding:5px 12px;font-size:12px}
.btn-green{background:var(--green);color:#fff;border-color:var(--green)}
.btn-green:hover{background:#15803d}

.toolbar{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}

/* result box */
.rbox{background:#0d1117;border:1px solid #30363d;border-radius:var(--r);padding:14px 16px;font-family:'JetBrains Mono',monospace;font-size:12.5px;color:#c9d1d9;min-height:72px;white-space:pre-wrap;word-break:break-all;max-height:420px;overflow-y:auto;line-height:1.65}
.rbox .ok{color:#56d364}.rbox .er{color:#ff7b72}.rbox .wn{color:#d29922}.rbox .in{color:#79c0ff}

/* table */
.ms-tbl{width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed}
.ms-tbl th{background:#f9fafb;text-align:left;padding:10px 14px;font-weight:600;font-size:11.5px;color:var(--t2);text-transform:uppercase;letter-spacing:.05em;border-bottom:1.5px solid var(--border)}
.ms-tbl td{padding:10px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
.ms-tbl tr:hover td{background:#fafafa}
.ms-tbl tr:last-child td{border-bottom:none}

/* badges */
.badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;gap:4px}
.bg-green{background:var(--green-l);color:var(--green)}
.bg-red{background:var(--red-l);color:var(--red)}
.bg-amber{background:var(--amber-l);color:var(--amber)}
.bg-blue{background:var(--blue-l);color:var(--blue-d)}
.bg-purple{background:var(--purple-l);color:var(--purple)}
.bg-gray{background:#f3f4f6;color:var(--t2)}

/* alert */
.alert{padding:12px 16px;border-radius:var(--r);font-size:13px;margin-bottom:16px;display:flex;align-items:flex-start;gap:10px}
.a-info{background:var(--blue-ll);color:var(--blue-d);border:1px solid #bfdbfe}
.a-warn{background:var(--amber-l);color:#92400e;border:1px solid #fcd34d}
.a-ok{background:var(--green-l);color:#166534;border:1px solid #86efac}
.a-err{background:var(--red-l);color:var(--red);border:1px solid #fca5a5}

/* spinner */
.spin{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:rot .7s linear infinite;vertical-align:middle}
@keyframes rot{to{transform:rotate(360deg)}}
.spin-dark{border-color:rgba(0,0,0,.15);border-top-color:var(--blue)}

/* cid result */
.cid-result{padding:20px 22px;background:linear-gradient(135deg,#eff6ff 0%,#dbeafe 100%);border:2px solid #3b82f6;border-radius:var(--r2);margin-top:18px;display:none;box-shadow:0 4px 20px rgba(59,130,246,.15)}
.cid-full-row{display:flex;align-items:stretch;gap:0;background:#eef2f7;border:1.5px solid #c7d4e8;border-radius:8px;overflow:hidden;margin-bottom:16px}
.cid-full-val{flex:1;font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:600;color:#1e293b;letter-spacing:1.2px;word-break:break-all;text-align:center;padding:11px 14px;background:transparent}
.cid-copy-btn{flex-shrink:0;padding:11px 22px;background:#4a5568;border:none;border-left:1.5px solid #c7d4e8;font-size:13px;font-weight:700;color:#fff;cursor:pointer;transition:background .15s}
.cid-copy-btn:hover{background:#2d3748}
.cid-groups{display:flex;gap:7px;justify-content:center;margin-bottom:16px}
.cid-group-col{display:flex;flex-direction:column;align-items:center;flex:1;min-width:0}
.cid-group-label{font-size:12px;font-weight:800;color:#2563eb;margin-bottom:5px;letter-spacing:.1em;text-align:center}
.cid-group-box{width:100%;background:#fff;border:1.5px solid #bfdbfe;border-radius:6px;padding:9px 4px;font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:600;color:#1e3a8a;text-align:center}
.cid-info-line{font-size:12.5px;color:#1d4ed8;text-align:center;padding:10px 8px 2px;border-top:1.5px solid #bfdbfe}
.cid-info-line b{color:#1e3a8a}

/* info rows */
.irow{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--border);font-size:13px}
.irow:last-child{border-bottom:none}
.irow .il{color:var(--t2);font-weight:500}
.irow .iv{font-weight:700;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--t1)}

/* grids */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}

/* modal */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1000;align-items:center;justify-content:center}
.modal-overlay.show{display:flex}
.modal{background:#fff;border-radius:var(--r2);box-shadow:0 24px 60px rgba(0,0,0,.35);width:460px;max-width:95vw;animation:cardIn .3s ease;overflow:hidden}
.modal-header{padding:18px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:#f9fafb}
.modal-header h3{font-size:15px;font-weight:700}
.modal-close{background:none;border:none;cursor:pointer;color:var(--t2);padding:4px;border-radius:4px;display:flex;transition:all .15s}
.modal-close:hover{background:var(--border);color:var(--t1)}
.modal-body{padding:22px 24px}
.modal-footer{padding:14px 24px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px;background:#f9fafb}
@keyframes cardIn{from{transform:translateY(28px) scale(.96);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}

/* scrollbar */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:#9ca3af}

/* progress */
.prog-info{font-size:12px;color:var(--t2);margin-top:8px;display:flex;align-items:center;gap:8px}
.prog-bar{flex:1;height:4px;background:#e5e7eb;border-radius:2px;overflow:hidden;max-width:200px}
.prog-fill{height:100%;background:var(--blue);border-radius:2px;transition:width .3s}

/* filter tabs */
.filter-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.filter-tabs{display:flex;background:#f1f5f9;border-radius:8px;padding:3px;gap:2px}
.ftab{padding:6px 16px;border:none;background:transparent;border-radius:6px;font-size:12.5px;font-weight:600;color:#64748b;cursor:pointer;transition:all .15s;white-space:nowrap}
.ftab.active{background:#fff;color:#2563eb;box-shadow:0 1px 4px rgba(0,0,0,.1)}
.ftab:hover:not(.active){color:#1e293b;background:rgba(255,255,255,.6)}
.btn-copy-group{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;background:#2563eb;border:none;border-radius:7px;font-size:12.5px;font-weight:700;color:#fff;cursor:pointer;transition:background .15s;box-shadow:0 2px 6px rgba(37,99,235,.25);margin-left:auto}
.btn-copy-group:hover{background:#1d4ed8}

/* account stats */
.acct-stat-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px;padding-bottom:16px;border-bottom:1.5px solid var(--border)}
.acct-stat{flex:1;min-width:130px;background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:10px;padding:14px 16px;text-align:center}
.acct-stat-label{font-size:11px;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.acct-stat-val{font-size:22px;font-weight:800;color:var(--t1)}
.acct-section{margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}
.acct-section-title{font-size:11.5px;font-weight:800;color:var(--t2);text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.acct-section-title::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--blue);display:inline-block}

/* login form reused in shell */
.fgroup{margin-bottom:16px}
.flabel{display:block;font-size:11.5px;font-weight:700;color:var(--t2);margin-bottom:6px;text-transform:uppercase;letter-spacing:.05em}
.iwrap{position:relative;display:flex;align-items:center}
.iicon{position:absolute;left:11px;color:var(--t3);pointer-events:none;display:flex}
.finput{width:100%;padding:9px 36px 9px 36px;border:1.5px solid #d1d5db;border-radius:var(--r);font-size:14px;font-family:inherit;transition:all .18s;outline:none;color:var(--t1);background:#f9fafb}
.finput:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,120,212,.14);background:#fff}
.eye-btn{position:absolute;right:9px;background:none;border:none;cursor:pointer;color:var(--t3);padding:4px;display:flex;align-items:center;transition:color .15s}
.eye-btn:hover{color:var(--blue)}
.lerror{background:var(--red-l);color:var(--red);border:1px solid #fca5a5;border-radius:var(--r);padding:10px 14px;font-size:13px;margin-bottom:14px;display:none;align-items:center;gap:8px}

/* hamburger mobile */
.hamburger{display:none;background:none;border:none;color:#fff;cursor:pointer;padding:4px}
@media(max-width:768px){
  .stats-row,.g2,.g3{grid-template-columns:1fr 1fr}
  .sidebar{position:fixed;left:-230px;top:50px;height:calc(100vh - 50px);z-index:300;transition:left .25s}
  .sidebar.open{left:0}
  .hamburger{display:flex}
}

/* ═══════════════════════════════════════
   DARK MODE  — [data-dark="1"] on <html>
   ═══════════════════════════════════════ */
[data-dark="1"] {
  --bg: #0f1117;
  --card: #1a1d27;
  --border: #2d3148;
  --t1: #e8eaf0;
  --t2: #9aa0b8;
  --t3: #5a607a;
  --blue-ll: #0d1a2e;
  --blue-l: #0d1e3a;
  --green-l: #0a2218;
  --red-l: #2a0e0e;
  --amber-l: #221a06;
  --purple-l: #1a0e2e;
  --sh: 0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
  --sh2: 0 4px 16px rgba(0,0,0,.5);
}
[data-dark="1"] body { background: var(--bg); color: var(--t1); }
[data-dark="1"] .topbar { background: #0d1520; }
[data-dark="1"] .sidebar { background: #090d14; }
[data-dark="1"] .sb-sec-title { color: rgba(255,255,255,.25); }
[data-dark="1"] .nitem { color: rgba(255,255,255,.55); }
[data-dark="1"] .nitem:hover { background: rgba(255,255,255,.05); color: #fff; }
[data-dark="1"] .nitem.active { background: rgba(0,120,212,.25); }
[data-dark="1"] .card { background: var(--card); border-color: var(--border); }
[data-dark="1"] .scard { background: var(--card); border-color: var(--border); }
[data-dark="1"] .scard .sv { color: var(--t1); }
[data-dark="1"] .ms-tbl th { background: #12151f; color: var(--t2); border-color: var(--border); }
[data-dark="1"] .ms-tbl td { border-color: var(--border); }
[data-dark="1"] .ms-tbl tr:hover td { background: #1e2133; }
[data-dark="1"] .ms-ta,
[data-dark="1"] .ms-in,
[data-dark="1"] .finput { background: #12151f; border-color: var(--border); color: var(--t1); }
[data-dark="1"] .ms-ta:focus,
[data-dark="1"] .ms-in:focus,
[data-dark="1"] .finput:focus { background: #1a1d2e; border-color: var(--blue); }
[data-dark="1"] .modal { background: #1a1d27; }
[data-dark="1"] .modal-header { background: #12151f; border-color: var(--border); }
[data-dark="1"] .modal-footer { background: #12151f; border-color: var(--border); }
[data-dark="1"] .filter-tabs { background: #12151f; }
[data-dark="1"] .ftab.active { background: #1e2133; color: #60a5fa; }
[data-dark="1"] .lc-body { background: #1a1d27; }
[data-dark="1"] .login-card { background: #1a1d27; }
[data-dark="1"] .lc-footer { background: #12151f; border-color: var(--border); }
[data-dark="1"] .btn-out { background: transparent; color: #60a5fa; border-color: #3b82f6; }
[data-dark="1"] .btn-out:hover { background: #0d1e3a; }
[data-dark="1"] select.ms-in option { background: #1a1d27; }
[data-dark="1"] .cid-result { background: linear-gradient(135deg,#0d1a2e,#0d1e3a); border-color: #3b82f6; }
[data-dark="1"] .cid-full-row { background: #12151f; border-color: #2d3148; }
[data-dark="1"] .cid-full-val { color: #c9d1d9; }
[data-dark="1"] .cid-group-box { background: #12151f; border-color: #2d3148; color: #93c5fd; }
[data-dark="1"] .acct-stat { background: #12151f; border-color: var(--border); }
[data-dark="1"] .ph h2 { color: var(--t1); }
[data-dark="1"] .card-title { color: var(--t1); }
[data-dark="1"] .irow { border-color: var(--border); }
[data-dark="1"] .irow .iv { color: var(--t1); }
[data-dark="1"] ::-webkit-scrollbar-thumb { background: #2d3148; }
[data-dark="1"] ::-webkit-scrollbar-thumb:hover { background: #3d4168; }


/* ═══════════════════════════════════════
   CID SPLIT LAYOUT — left form, right result
   Both equal height, result always visible
   ═══════════════════════════════════════ */
.cid-workspace-split {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: stretch;
}
.cid-workspace-split .cid-form-card {
  margin-bottom: 0;
  height: 100%;
  box-sizing: border-box;
}

/* Result panel — ALWAYS fully visible, same height as form */
#cid-res.cid-result-panel {
  display: flex !important;
  flex-direction: column;
  margin-top: 0 !important;
  height: 100%;
  box-sizing: border-box;
  position: static !important;
}

/* All inner elements always visible — never hide anything */
#cid-res .cid-full-row,
#cid-res .cid-groups,
#cid-res .cid-info-line,
#cid-res #cid-summary-box {
  display: flex !important;
}
#cid-res .cid-groups { display: flex !important; }
#cid-res .cid-info-line { display: block !important; }
#cid-res #cid-summary-box { display: block !important; }

/* RESPONSIVE */
@media(max-width:960px) {
  .cid-workspace-split {
    grid-template-columns: 1fr !important;
    align-items: start;
  }
  .cid-workspace-split .cid-form-card,
  #cid-res.cid-result-panel {
    height: auto !important;
  }
}

/* ═══════════════════════════════════════
   CID FORM CARD — match blue border of result box
   ═══════════════════════════════════════ */
.cid-workspace-split .cid-form-card {
  background: linear-gradient(135deg,#eff6ff 0%,#dbeafe 100%) !important;
  border: 2px solid #3b82f6 !important;
  box-shadow: 0 4px 20px rgba(59,130,246,.15) !important;
  border-radius: var(--r2) !important;
}

/* Dark mode form card */
[data-dark="1"] .cid-workspace-split .cid-form-card {
  background: linear-gradient(135deg,#0d1a2e,#0d1e3a) !important;
  border-color: #3b82f6 !important;
}

/* Equal height — use min-height based on content, not fixed height */
.cid-workspace-split {
  align-items: start !important;
}
.cid-workspace-split .cid-form-card {
  height: auto !important;
}
#cid-res.cid-result-panel {
  height: auto !important;
  min-height: 100% !important;
}