*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0d1117;
  --bg2:#161b22;
  --bg3:#21262d;
  --bg4:#30363d;
  --accent:#2f81f7;
  --accent-h:#388bfd;
  --border:#30363d;
  --text:#e6edf3;
  --text2:#8b949e;
  --text3:#6e7681;
  --green:#3fb950;
  --red:#f85149;
  --yellow:#d29922;
  --font:-apple-system,BlinkMacSystemFont,'Segoe UI','Noto Sans',Helvetica,Arial,sans-serif;
}
html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;line-height:1.5}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-h)}
input,select,textarea,button{font-family:var(--font)}

/* ── NAVBAR ── */
.navbar{position:fixed;top:0;left:0;right:0;height:56px;background:var(--bg2);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:0;z-index:1000;padding:0 24px}
.navbar-brand{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700;color:var(--text);margin-right:32px;text-decoration:none;letter-spacing:.02em}
.navbar-brand .logo-icon{width:28px;height:28px;background:var(--accent);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.navbar-nav{display:flex;align-items:center;gap:4px;flex:1}
.nav-link{display:flex;align-items:center;gap:7px;padding:6px 14px;border-radius:6px;color:var(--text2);font-size:13px;font-weight:500;transition:background .15s,color .15s;position:relative;letter-spacing:.01em}
.nav-link:hover{background:var(--bg3);color:var(--text)}
.nav-link.active{color:var(--text);background:var(--bg3)}
.nav-link.active::after{content:'';position:absolute;bottom:0;left:14px;right:14px;height:2px;background:var(--accent);border-radius:2px}
.nav-link svg{opacity:.7;flex-shrink:0}
.nav-link.active svg{opacity:1}
.navbar-end{display:flex;align-items:center;gap:12px;margin-left:auto}
.badge-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.navbar-time{color:var(--text3);font-size:12px;font-variant-numeric:tabular-nums}
.brand-label,.nav-label{display:inline}
@media(max-width:1366px){.navbar{padding:0 14px}.navbar-brand{margin-right:16px}.brand-label,.nav-label{display:none}.nav-link{padding:8px 10px;gap:0;min-width:36px;justify-content:center}.nav-link.active::after{left:8px;right:8px}.navbar-end{gap:8px}}
@media(max-width:900px){.navbar-time{display:none}}
.navbar-bell{position:relative;cursor:pointer;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:6px;transition:background .15s}
.navbar-bell:hover{background:var(--bg3)}
.navbar-bell-count{position:absolute;top:4px;right:4px;min-width:14px;height:14px;background:var(--red);border-radius:7px;font-size:9px;font-weight:700;color:#fff;display:flex;align-items:center;justify-content:center;padding:0 3px;display:none}
.navbar-bell-count.visible{display:flex}
.nav-badge{display:none;min-width:16px;height:16px;background:var(--red);border-radius:8px;font-size:9px;font-weight:700;color:#fff;align-items:center;justify-content:center;padding:0 4px}
.nav-badge.visible{display:flex}
.navbar-mute{background:none;border:none;color:var(--text3);cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:background .15s,color .15s}
.navbar-mute:hover{background:var(--bg3);color:var(--text)}

/* ── PAGE ── */
.page{padding-top:56px;min-height:100vh;display:flex;flex-direction:column}
.page-header{padding:20px 28px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;flex-shrink:0}
.page-header h1{font-size:18px;font-weight:600;color:var(--text)}
.subtitle{font-size:12px;color:var(--text2);margin-top:2px}
.page-body{flex:1;overflow:auto;padding:24px 28px}
.header-actions{display:flex;align-items:center;gap:12px;margin-left:auto}

/* ── SEARCH ── */
.search-wrap{position:relative;display:flex;align-items:center}
.search-wrap svg{position:absolute;left:9px;color:var(--text3);pointer-events:none}
.search-input{background:var(--bg3);border:1px solid var(--border);border-radius:7px;color:var(--text);font-size:13px;padding:6px 12px 6px 28px;outline:none;width:260px;transition:border-color .15s}
.search-input:focus{border-color:var(--accent)}

/* ── TABLE ── */
.cl-table{width:100%;border-collapse:collapse;font-size:13px}
.cl-table thead th{
  text-align:left;padding:8px 12px;font-size:11px;font-weight:700;
  color:var(--text3);text-transform:uppercase;letter-spacing:.05em;
  border-bottom:1px solid var(--border);white-space:nowrap;
  background:var(--bg2);position:sticky;top:0;z-index:2;
}
.cl-table tbody tr{border-bottom:1px solid var(--border);transition:background .12s;cursor:pointer}
.cl-table tbody tr:hover{background:var(--bg2)}
.cl-table tbody td{padding:9px 12px;color:var(--text);vertical-align:middle}
.cl-table tbody td.na{color:var(--text3);font-style:italic}
.cl-verified-yes{display:inline-flex;align-items:center;gap:4px;color:var(--green);font-size:11px;font-weight:600}
.cl-verified-no{color:var(--text3);font-size:11px}
.cl-uid{font-size:11px;color:var(--text3);font-variant-numeric:tabular-nums}
.cl-ts{font-size:11px;color:var(--text3);white-space:nowrap}
.cl-action-btn{
  background:var(--bg3);border:1px solid var(--border);border-radius:5px;
  color:var(--text2);font-size:11px;padding:3px 9px;cursor:pointer;
  transition:color .12s,border-color .12s;white-space:nowrap;
}
.cl-action-btn:hover{color:var(--accent);border-color:var(--accent)}
.cl-empty{padding:48px 0;text-align:center;color:var(--text3);font-size:14px}

/* ── DRAWER ── */
.cl-overlay{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);
  z-index:300;opacity:0;transition:opacity .22s;
}
.cl-overlay.open{display:block;opacity:1}
.cl-drawer{
  position:fixed;top:0;right:0;bottom:0;width:440px;
  background:var(--bg2);border-left:1px solid var(--border);
  display:flex;flex-direction:column;z-index:400;
  transform:translateX(100%);transition:transform .22s ease;
  box-shadow:-6px 0 32px rgba(0,0,0,.4);
}
.cl-drawer.open{transform:translateX(0)}
.cl-drawer-head{
  padding:14px 16px;border-bottom:1px solid var(--border);flex-shrink:0;
  display:flex;align-items:center;justify-content:space-between;
}
.cl-drawer-title{
  font-size:11px;font-weight:700;color:var(--text2);
  text-transform:uppercase;letter-spacing:.06em;
  display:flex;align-items:center;gap:7px;
}
.cl-drawer-close{
  background:none;border:none;color:var(--text3);cursor:pointer;
  font-size:18px;padding:0 2px;line-height:1;transition:color .15s;
}
.cl-drawer-close:hover{color:var(--text)}
.cl-drawer-body{flex:1;overflow-y:auto;padding:16px}
.cld-section{margin-bottom:20px}
.cld-section-title{
  font-size:10px;font-weight:700;color:var(--text3);
  text-transform:uppercase;letter-spacing:.07em;margin-bottom:10px;
}
.cld-editable-hint{font-size:9px;color:var(--accent);font-weight:400;text-transform:none;letter-spacing:0;margin-left:4px}
.cld-row{
  display:flex;gap:8px;align-items:baseline;
  padding:5px 0;border-bottom:1px solid var(--border);
}
.cld-label{font-size:11px;color:var(--text3);font-weight:600;min-width:90px;flex-shrink:0}
.cld-value{font-size:12px;color:var(--text);word-break:break-all}
.cld-edit-row{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.cld-input{
  background:var(--bg3);border:1px solid var(--border);border-radius:5px;
  color:var(--text);font-size:13px;font-family:var(--font);
  padding:7px 10px;outline:none;width:100%;transition:border-color .15s;
}
.cld-input:focus{border-color:var(--accent)}
.cld-textarea{resize:vertical;min-height:90px;line-height:1.45}
.cl-save-hint{font-size:11px;color:var(--text3);min-width:70px;text-align:right}
.cl-save-hint.cl-saved{color:var(--green)}
.cl-save-hint.cl-err{color:var(--red)}
.cld-footer{margin-top:8px;padding-top:14px;border-top:1px solid var(--border)}
.cld-chat-link{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--accent);color:#fff;border-radius:7px;
  padding:7px 16px;font-size:13px;font-weight:600;text-decoration:none;
  transition:opacity .15s;
}
.cld-chat-link:hover{opacity:.85;color:#fff}

@media(max-width:600px){
  .cl-drawer{width:100%}
  .search-input{width:180px}
  .page-body{padding:16px 12px}
  .page-header{padding:14px 12px 12px}
}