:root {
    --ink: #17202a;
    --muted: #667085;
    --line: #dde3ea;
    --side: #16213e;
    --accent: #0f766e;
    --bg: #f5f7fb;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.app-shell { min-height: 100vh; display: flex; }
.sidebar { width: 270px; background: var(--side); color: #fff; padding: 18px 14px; position: fixed; inset: 0 auto 0 0; z-index: 20; overflow-y: auto; }
.brand { font-weight: 800; font-size: 1.1rem; padding: 12px 12px 22px; letter-spacing: .2px; }
.sidebar .nav-link { color: #dbe5ff; border-radius: 8px; padding: 10px 12px; margin-bottom: 4px; display: flex; justify-content: space-between; align-items: center; }
.sidebar .nav-link:hover, .sidebar .nav-link.active { background: rgba(255,255,255,.12); color: #fff; }
.main { flex: 1; margin-left: 270px; min-width: 0; }
.topbar { height: 72px; background: #fff; border-bottom: 1px solid var(--line); display: flex; gap: 14px; align-items: center; padding: 12px 22px; position: sticky; top: 0; z-index: 10; }
.global-search { flex: 1; max-width: 760px; }
.user-chip { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.user-chip small { color: var(--muted); }
.content { padding: 24px; }
.page-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.metric { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 18px; min-height: 112px; }
.metric span { color: var(--muted); font-size: .9rem; }
.metric strong { display: block; font-size: 2rem; margin-top: 8px; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 18px; margin-bottom: 18px; }
.table td, .table th { vertical-align: middle; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; background: var(--accent); }
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: linear-gradient(135deg, #eef7f5 0%, #f7f8fb 55%, #eef1f8 100%); }
.login-card { width: min(440px, 100%); background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 28px; box-shadow: 0 20px 60px rgba(22,33,62,.12); }
.preview-frame { width: 100%; min-height: 70vh; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
@media (max-width: 991px) {
    .sidebar { transform: translateX(-100%); transition: transform .2s ease; }
    .sidebar.open { transform: translateX(0); }
    .main { margin-left: 0; }
    .topbar { flex-wrap: wrap; height: auto; }
    .global-search { order: 3; flex-basis: 100%; max-width: none; }
    .user-chip { margin-left: auto; }
}
@media (max-width: 575px) {
    .content { padding: 16px; }
    .page-title { align-items: stretch; flex-direction: column; }
    .user-chip span, .user-chip small { display: none; }
}