:root {
  --d-bg: #0f1117;
  --d-sidebar: #080b10;
  --d-card: #161b27;
  --d-border: rgba(255,255,255,0.07);
  --d-accent: #4a9eff;
  --d-accent2: #00d4aa;
  --d-accent3: #f59e0b;
  --d-danger: #ef4444;
  --d-text: #e2e8f0;
  --d-muted: #64748b;
  --d-font: "Outfit", sans-serif;
  --d-mono: "IBM Plex Mono", monospace;
  --sidebar-w: 240px;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; }
body { background:var(--d-bg); color:var(--d-text); font-family:var(--d-font); display:flex; min-height:100vh; }

/* SIDEBAR */
.d-sidebar { width:var(--sidebar-w); background:var(--d-sidebar); border-right:1px solid var(--d-border); display:flex; flex-direction:column; position:fixed; top:0; bottom:0; left:0; z-index:50; }
.d-logo { padding:24px 20px; border-bottom:1px solid var(--d-border); }
.d-logo-text { font-family:var(--d-mono); font-size:0.78rem; color:var(--d-accent); letter-spacing:0.2em; text-transform:uppercase; text-decoration:none; display:block; }
.d-logo-sub { font-size:0.68rem; color:var(--d-muted); margin-top:4px; }
.d-nav { flex:1; padding:16px 0; overflow-y:auto; }
.d-nav-group { margin-bottom:24px; }
.d-nav-group-label { font-family:var(--d-mono); font-size:0.6rem; color:var(--d-muted); letter-spacing:0.2em; text-transform:uppercase; padding:0 20px; margin-bottom:8px; }
.d-nav-link { display:flex; align-items:center; gap:10px; padding:10px 20px; color:var(--d-muted); text-decoration:none; font-size:0.85rem; transition:all 0.2s; border-left:2px solid transparent; }
.d-nav-link:hover { color:var(--d-text); background:rgba(255,255,255,0.03); }
.d-nav-link.active { color:var(--d-accent); border-left-color:var(--d-accent); background:rgba(74,158,255,0.06); }
.d-nav-icon { font-size:1rem; width:20px; text-align:center; }
.d-sidebar-footer { padding:16px 20px; border-top:1px solid var(--d-border); display:flex; flex-direction:column; gap:10px; }
.d-view-site { font-family:var(--d-mono); font-size:0.68rem; color:var(--d-accent2); text-decoration:none; letter-spacing:0.1em; }
.d-logout { font-family:var(--d-mono); font-size:0.68rem; color:var(--d-muted); text-decoration:none; }
.d-logout:hover { color:var(--d-danger); }

/* MAIN */
.d-main { margin-left:var(--sidebar-w); flex:1; display:flex; flex-direction:column; }
.d-topbar { background:var(--d-sidebar); border-bottom:1px solid var(--d-border); padding:0 32px; height:60px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:40; }
.d-page-title { font-size:0.9rem; font-weight:600; color:var(--d-text); }
.d-topbar-actions { display:flex; gap:12px; align-items:center; }
.d-content { padding:32px; flex:1; }

/* STAT CARDS */
.d-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:32px; }
.d-stat { background:var(--d-card); border:1px solid var(--d-border); border-radius:10px; padding:20px; }
.d-stat-num { font-family:var(--d-mono); font-size:1.8rem; font-weight:600; color:var(--d-accent); margin-bottom:4px; }
.d-stat-label { font-size:0.75rem; color:var(--d-muted); text-transform:uppercase; letter-spacing:0.1em; }
.d-stat.green .d-stat-num { color:var(--d-accent2); }
.d-stat.amber .d-stat-num { color:var(--d-accent3); }
.d-stat.red .d-stat-num { color:var(--d-danger); }

/* CARDS */
.d-card { background:var(--d-card); border:1px solid var(--d-border); border-radius:10px; overflow:hidden; margin-bottom:24px; }
.d-card-header { padding:18px 24px; border-bottom:1px solid var(--d-border); display:flex; align-items:center; justify-content:space-between; }
.d-card-title { font-size:0.85rem; font-weight:600; color:var(--d-text); }
.d-card-body { padding:24px; }

/* TABLE */
.d-table { width:100%; border-collapse:collapse; font-size:0.82rem; }
.d-table th { font-family:var(--d-mono); font-size:0.62rem; color:var(--d-muted); letter-spacing:0.15em; text-transform:uppercase; padding:10px 16px; text-align:left; border-bottom:1px solid var(--d-border); }
.d-table td { padding:12px 16px; border-bottom:1px solid var(--d-border); color:var(--d-text); vertical-align:top; }
.d-table tr:last-child td { border-bottom:none; }
.d-table tr:hover td { background:rgba(255,255,255,0.02); }
.d-badge { display:inline-flex; padding:3px 10px; border-radius:20px; font-family:var(--d-mono); font-size:0.62rem; letter-spacing:0.1em; }
.d-badge-blue { background:rgba(74,158,255,0.1); color:var(--d-accent); }
.d-badge-green { background:rgba(0,212,170,0.1); color:var(--d-accent2); }
.d-badge-amber { background:rgba(245,158,11,0.1); color:var(--d-accent3); }
.d-badge-gray { background:rgba(100,116,139,0.1); color:var(--d-muted); }

/* BUTTONS */
.d-btn { display:inline-flex; align-items:center; gap:6px; padding:8px 18px; border-radius:6px; font-size:0.78rem; font-weight:600; font-family:var(--d-font); cursor:pointer; border:none; text-decoration:none; transition:all 0.2s; }
.d-btn-primary { background:var(--d-accent); color:#000; }
.d-btn-primary:hover { background:#6ab4ff; }
.d-btn-secondary { background:transparent; color:var(--d-text); border:1px solid var(--d-border); }
.d-btn-secondary:hover { border-color:var(--d-accent); color:var(--d-accent); }
.d-btn-danger { background:transparent; color:var(--d-danger); border:1px solid rgba(239,68,68,0.3); }
.d-btn-danger:hover { background:rgba(239,68,68,0.1); }
.d-btn-sm { padding:5px 12px; font-size:0.72rem; }
.d-btn-icon { padding:7px; border-radius:6px; }

/* FORMS */
.d-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.d-form-group { display:flex; flex-direction:column; gap:8px; }
.d-form-group.full { grid-column:1/-1; }
.d-label { font-family:var(--d-mono); font-size:0.65rem; color:var(--d-muted); letter-spacing:0.15em; text-transform:uppercase; }
.d-input, .d-textarea, .d-select { background:var(--d-bg); border:1px solid var(--d-border); border-radius:6px; padding:10px 14px; color:var(--d-text); font-family:var(--d-font); font-size:0.85rem; outline:none; transition:border-color 0.2s; width:100%; }
.d-input:focus, .d-textarea:focus, .d-select:focus { border-color:var(--d-accent); }
.d-textarea { min-height:100px; resize:vertical; }
.d-select option { background:var(--d-bg); }

/* ALERTS */
.d-alert { padding:12px 16px; border-radius:6px; font-size:0.82rem; margin-bottom:20px; }
.d-alert-success { background:rgba(0,212,170,0.08); border:1px solid rgba(0,212,170,0.2); color:var(--d-accent2); }
.d-alert-error { background:rgba(239,68,68,0.08); border:1px solid rgba(239,68,68,0.2); color:var(--d-danger); }
.d-alert-info { background:rgba(74,158,255,0.08); border:1px solid rgba(74,158,255,0.2); color:var(--d-accent); }

/* MODAL */
.d-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.7); backdrop-filter:blur(4px); z-index:200; display:flex; align-items:center; justify-content:center; padding:20px; }
.d-modal { background:var(--d-card); border:1px solid var(--d-border); border-radius:12px; width:100%; max-width:600px; max-height:90vh; overflow-y:auto; }
.d-modal-header { padding:20px 24px; border-bottom:1px solid var(--d-border); display:flex; align-items:center; justify-content:space-between; }
.d-modal-title { font-size:0.9rem; font-weight:600; }
.d-modal-close { background:none; border:none; color:var(--d-muted); font-size:1.2rem; cursor:pointer; padding:4px; }
.d-modal-close:hover { color:var(--d-text); }
.d-modal-body { padding:24px; }
.d-modal-footer { padding:16px 24px; border-top:1px solid var(--d-border); display:flex; gap:12px; justify-content:flex-end; }

/* SECTION DIVIDER */
.d-divider { height:1px; background:var(--d-border); margin:24px 0; }

/* INLINE EDIT FIELDS */
.d-editable { display:flex; flex-direction:column; gap:16px; }
.d-edit-row { display:grid; grid-template-columns:180px 1fr; gap:16px; align-items:start; padding:16px 0; border-bottom:1px solid var(--d-border); }
.d-edit-row:last-child { border-bottom:none; }
.d-edit-key { font-family:var(--d-mono); font-size:0.7rem; color:var(--d-muted); padding-top:10px; }
.d-edit-key small { display:block; color:rgba(100,116,139,0.6); font-size:0.6rem; margin-top:2px; }

/* MESSAGE PREVIEW */
.d-msg-preview { font-size:0.82rem; color:var(--d-muted); max-width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.d-unread td { color:var(--d-text) !important; }
.d-unread td:first-child { font-weight:600; }
.d-read-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; }
.d-read-dot.unread { background:var(--d-accent); }
.d-read-dot.read { background:var(--d-muted); opacity:0.4; }

/* LOGIN PAGE */
.d-login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--d-bg); }
.d-login-box { width:100%; max-width:400px; background:var(--d-card); border:1px solid var(--d-border); border-radius:12px; padding:40px; }
.d-login-logo { font-family:var(--d-mono); font-size:0.8rem; color:var(--d-accent); letter-spacing:0.2em; text-transform:uppercase; margin-bottom:32px; }
.d-login-title { font-size:1.2rem; font-weight:600; color:var(--d-text); margin-bottom:8px; }
.d-login-sub { font-size:0.82rem; color:var(--d-muted); margin-bottom:32px; }

/* RESPONSIVE */
@media (max-width:900px) {
  :root { --sidebar-w: 200px; }
  .d-stats { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px) {
  .d-sidebar { transform:translateX(-100%); transition:transform 0.3s; }
  .d-sidebar.open { transform:translateX(0); }
  .d-main { margin-left:0; }
  .d-stats { grid-template-columns:1fr 1fr; }
  .d-content { padding:20px; }
  .d-form-grid { grid-template-columns:1fr; }
  .d-edit-row { grid-template-columns:1fr; }
}