*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#F1F5F9;--sidebar:#FFFFFF;--card:#FFFFFF;--card2:#F8FAFC;--border:#E2E8F0;
  --text:#1E293B;--muted:#64748B;--accent:#2563EB;--solar:#F59E0B;--pln:#3B82F6;
  --green:#10B981;--red:#EF4444;--orange:#F97316;--purple:#8B5CF6;--cyan:#06B6D4;--indigo:#6366F1;
}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);display:flex;flex-direction:column;height:100vh;overflow:hidden;font-size:13px}

/* Header */
.hdr{height:52px;background:var(--sidebar);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 1.25rem;gap:0.75rem;flex-shrink:0;z-index:100}
.logo{display:flex;align-items:center;gap:0.5rem;text-decoration:none;color:inherit}
.logo-icon{width:32px;height:32px;background:#CC0000;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1rem}
.logo-name{font-size:0.9375rem;font-weight:800;color:var(--text)}
.logo-name span{color:var(--solar)}
.breadcrumb{font-size:0.75rem;color:var(--muted);display:flex;align-items:center;gap:0.375rem}
.breadcrumb a{color:var(--muted);text-decoration:none}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb .sep2{color:var(--border)}
.breadcrumb .cur{color:var(--text);font-weight:600}
.sep{width:1px;height:24px;background:var(--border)}
.hdr-center{display:flex;align-items:center;gap:0.75rem;margin-left:auto;margin-right:auto}
.live-badge{display:flex;align-items:center;gap:0.375rem;background:rgba(16,185,129,0.1);border:1px solid rgba(16,185,129,0.3);padding:0.25rem 0.625rem;border-radius:100px;font-size:0.6875rem;color:#047857}
.pulse{width:6px;height:6px;background:var(--green);border-radius:50%;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}
.hdr-date{font-size:0.75rem;color:var(--muted)}
.hdr-right{display:flex;align-items:center;gap:0.75rem}
.hdr-time{font-size:0.875rem;font-weight:600;font-family:'JetBrains Mono',monospace;color:var(--text)}
.icon-btn{background:none;border:1px solid var(--border);color:var(--muted);width:32px;height:32px;border-radius:7px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.15s;position:relative;font-size:0.8125rem}
.icon-btn:hover{border-color:var(--accent);color:var(--accent)}
.nb{position:absolute;top:-4px;right:-4px;background:var(--red);color:#fff;width:14px;height:14px;border-radius:50%;font-size:0.5625rem;display:flex;align-items:center;justify-content:center;font-weight:700}
.avatar{width:30px;height:30px;background:linear-gradient(135deg,var(--accent),var(--purple));border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:0.6875rem;font-weight:700;color:#fff;cursor:pointer}