:root {
    --navy-950: #071322;
    --navy-900: #0b1d32;
    --navy-850: #102740;
    --navy-800: #15314f;
    --ink-950: #142033;
    --ink-800: #26364d;
    --ink-700: #42526a;
    --ink-600: #5f6f84;
    --ink-500: #7f8da1;
    --line: #e4eaf1;
    --line-soft: #edf1f6;
    --surface: #ffffff;
    --surface-soft: #f7f9fc;
    --canvas: #f3f6fa;
    --primary: #1682f3;
    --primary-dark: #0868cf;
    --primary-soft: #eaf4ff;
    --cyan: #22c5c7;
    --success: #159b69;
    --success-soft: #e8f8f1;
    --warning: #c47a0a;
    --warning-soft: #fff6df;
    --danger: #d34652;
    --danger-soft: #fff0f1;
    --info: #2779d8;
    --info-soft: #eaf3ff;
    --shadow-sm: 0 1px 2px rgba(11, 29, 50, .04), 0 3px 10px rgba(11, 29, 50, .04);
    --shadow-md: 0 14px 36px rgba(17, 37, 63, .10);
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 18px;
    --sidebar-width: 264px;
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink-950);
    background: var(--canvas);
    font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body { min-height: 100vh; margin: 0; color: var(--ink-950); background: var(--canvas); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: var(--primary-dark); text-decoration: none; }
a:hover { color: var(--primary); }
img { max-width: 100%; }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 { letter-spacing: -.025em; }
.icon { display: inline-block; flex: 0 0 auto; vertical-align: middle; }
.muted { color: var(--ink-600); }
.text-danger { color: var(--danger) !important; }
.text-success { color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* Brand and authentication */
.brand-lockup { display: inline-flex; align-items: center; gap: 11px; color: #fff; min-width: 0; }
.brand-lockup:hover { color: #fff; }
.brand-lockup strong { display: block; font-size: 14px; letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-lockup small { display: block; margin-top: 1px; color: #8fa5bd; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.brand-lockup-large strong { font-size: 16px; }
.brand-mark { position: relative; display: grid; grid-template-columns: repeat(3, 6px); align-items: end; gap: 3px; width: 30px; height: 30px; padding: 6px; border-radius: 9px; color: #fff; background: linear-gradient(145deg, var(--primary), var(--cyan)); box-shadow: 0 7px 18px rgba(21, 130, 243, .26); }
.brand-mark span { display: block; border-radius: 3px; background: currentColor; opacity: .95; }
.brand-mark span:nth-child(1) { height: 7px; }.brand-mark span:nth-child(2) { height: 14px;}.brand-mark span:nth-child(3) { height: 10px; }
.guest-body { background: var(--navy-950); }
.guest-shell { display: grid; grid-template-columns: minmax(360px, 1.05fr) minmax(440px, .95fr); min-height: 100vh; }
.guest-brand { position: relative; display: flex; flex-direction: column; min-height: 100vh; padding: clamp(32px, 5vw, 72px); overflow: hidden; color: #fff; background: radial-gradient(circle at 80% 16%, rgba(34,197,199,.18), transparent 31%), radial-gradient(circle at 8% 85%, rgba(22,130,243,.2), transparent 32%), linear-gradient(145deg, #081626, #0d2944); }
.guest-brand::before { content: ""; position: absolute; inset: 0; opacity: .11; background-image: linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom, black, transparent 80%); }
.guest-brand > * { position: relative; z-index: 1; }
.guest-brand-copy { max-width: 640px; margin: auto 0; padding: 70px 0; }
.guest-kicker { display: inline-flex; padding: 6px 10px; border: 1px solid rgba(115,210,227,.3); border-radius: 99px; color: #9be6ed; background: rgba(21,114,151,.18); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.guest-brand-copy h1 { max-width: 680px; margin: 21px 0 18px; font-size: clamp(35px, 4.6vw, 62px); line-height: 1.04; }
.guest-brand-copy p { max-width: 570px; color: #b6c8d9; font-size: clamp(15px, 1.5vw, 18px); }
.guest-signal { display: flex; align-items: end; gap: 7px; height: 58px; }
.guest-signal i { display: block; width: 8px; border-radius: 9px; background: linear-gradient(to top, var(--primary), var(--cyan)); }
.guest-signal i:nth-child(1) { height: 19px; opacity: .5;}.guest-signal i:nth-child(2){height:34px;opacity:.7}.guest-signal i:nth-child(3){height:54px}
.guest-footnote { margin: 15px 0 0; color: #8098ae; font-size: 12px; }
.guest-content { display: grid; place-items: center; min-height: 100vh; padding: clamp(24px, 5vw, 72px); background: #f7f9fc; }
.guest-card { width: 100%; max-width: 450px; padding: clamp(28px, 4vw, 46px); border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: 0 26px 70px rgba(10, 28, 49, .12); }
.auth-heading { margin-bottom: 29px; }
.auth-heading h2 { margin: 4px 0 7px; font-size: 27px; }
.auth-heading p:last-child { color: var(--ink-600); }
.auth-help { display: flex; gap: 10px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line-soft); color: var(--ink-600); font-size: 12px; }
.auth-help p { margin: 0; }

/* App shell */
.app-body { overflow-x: hidden; }
.sidebar { position: fixed; z-index: 40; inset: 0 auto 0 0; display: flex; flex-direction: column; width: var(--sidebar-width); color: #d8e2ed; background: linear-gradient(180deg, var(--navy-950), var(--navy-900) 56%, #0a1a2d); box-shadow: 8px 0 30px rgba(6,18,33,.08); }
.sidebar-head { display: flex; align-items: center; justify-content: space-between; min-height: 76px; padding: 19px 20px; border-bottom: 1px solid rgba(255,255,255,.065); }
.sidebar-close { display: none !important; color: #b9cad9 !important; }
.sidebar-nav { flex: 1; padding: 14px 12px 24px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #29425d transparent; }
.nav-section + .nav-section { margin-top: 20px; }
.nav-label { margin: 0 10px 7px; color: #657f99; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.nav-link { position: relative; display: flex; align-items: center; gap: 11px; min-height: 43px; margin: 2px 0; padding: 10px 12px; border-radius: 9px; color: #9fb2c5; font-size: 13px; font-weight: 600; transition: color .18s ease, background .18s ease, transform .18s ease; }
.nav-link:hover { color: #fff; background: rgba(255,255,255,.055); }
.nav-link.is-active { color: #fff; background: linear-gradient(90deg, rgba(25,129,239,.24), rgba(25,129,239,.10)); box-shadow: inset 0 0 0 1px rgba(82,167,255,.12); }
.nav-link.is-active::before { content: ""; position: absolute; left: 0; width: 3px; height: 21px; border-radius: 0 4px 4px 0; background: #48a4ff; box-shadow: 0 0 12px rgba(65,160,255,.55); }
.sidebar-foot { padding: 14px; border-top: 1px solid rgba(255,255,255,.065); }
.security-note { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; padding: 10px; border: 1px solid rgba(52,201,176,.12); border-radius: 9px; color: #67d6bf; background: rgba(25,150,121,.08); }
.security-note span, .sidebar-user > span:last-child { min-width: 0; }
.security-note strong, .security-note small, .sidebar-user strong, .sidebar-user small { display: block; }
.security-note strong { font-size: 11px; }.security-note small { color: #7698a4; font-size: 10px; }
.sidebar-user { display: flex; align-items: center; gap: 10px; padding: 8px; }
.sidebar-user strong { overflow: hidden; color: #eaf0f6; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.sidebar-user small { color: #788fa5; font-size: 10px; }
.avatar { display: inline-grid; flex: 0 0 auto; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: #cce8ff; background: #183d60; font-size: 12px; font-weight: 800; }
.avatar-sm { width: 32px; height: 32px; border-radius: 9px; }
.avatar-group { display: flex; }.avatar-group .avatar { margin-left: -7px; border: 2px solid #fff; }.avatar-group .avatar:first-child { margin-left: 0; }
.app-shell { min-height: 100vh; margin-left: var(--sidebar-width); }
.topbar { position: sticky; z-index: 30; top: 0; display: flex; align-items: center; justify-content: space-between; height: 76px; padding: 0 30px; border-bottom: 1px solid rgba(217,225,235,.9); background: rgba(255,255,255,.92); backdrop-filter: blur(14px); }
.topbar-left, .topbar-actions { display: flex; align-items: center; gap: 12px; min-width: 0; }
.menu-toggle { display: none !important; }
.icon-button { position: relative; display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 10px; color: var(--ink-600); background: transparent; cursor: pointer; }
.icon-button:hover { color: var(--ink-950); background: var(--surface-soft); }
.global-search { display: flex; align-items: center; width: min(43vw, 520px); height: 42px; gap: 10px; padding: 0 12px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink-500); background: #f9fbfd; transition: border-color .18s, box-shadow .18s, background .18s; }
.global-search:focus-within { border-color: #a7d0fb; background: #fff; box-shadow: 0 0 0 4px rgba(22,130,243,.09); }
.global-search input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--ink-950); background: transparent; }
.global-search input::placeholder { color: #8e9bac; }
kbd { display: inline-grid; place-items: center; min-width: 23px; height: 23px; border: 1px solid #dce4ed; border-bottom-width: 2px; border-radius: 6px; color: #718094; background: #fff; font: 11px/1 ui-monospace, monospace; }
.today-label { color: var(--ink-600); font-size: 12px; white-space: nowrap; }
.notification-button { border: 1px solid var(--line); background: #fff; }
.notification-dot { position: absolute; top: -4px; right: -4px; display: grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; border: 2px solid #fff; border-radius: 99px; color: #fff; background: var(--danger); font-size: 9px; font-weight: 800; }
.profile-button { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 5px 8px 5px 6px; border: 1px solid transparent; border-radius: 11px; color: var(--ink-950); background: transparent; cursor: pointer; }
.profile-button:hover { border-color: var(--line); background: var(--surface-soft); }
.profile-copy { min-width: 0; text-align: left; }.profile-copy strong, .profile-copy small { display: block; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.profile-copy strong { font-size: 12px; }.profile-copy small { color: var(--ink-600); font-size: 10px; }
.dropdown { position: relative; }
.dropdown-menu { position: absolute; top: calc(100% + 9px); right: 0; display: none; min-width: 210px; padding: 7px; border: 1px solid var(--line); border-radius: 13px; background: #fff; box-shadow: var(--shadow-md); }
.dropdown.is-open .dropdown-menu { display: block; animation: dropdown-in .15s ease; }
@keyframes dropdown-in { from { opacity: 0; transform: translateY(-4px); } }
.dropdown-menu a, .dropdown-menu button { display: flex; align-items: center; width: 100%; gap: 9px; padding: 9px 10px; border: 0; border-radius: 8px; color: var(--ink-700); background: transparent; font-size: 12px; text-align: left; cursor: pointer; }
.dropdown-menu a:hover, .dropdown-menu button:hover { color: var(--ink-950); background: var(--surface-soft); }
.notification-menu { width: min(360px, calc(100vw - 30px)); padding: 0; overflow: hidden; }
.dropdown-header { display: flex; justify-content: space-between; padding: 14px 15px 10px; border-bottom: 1px solid var(--line-soft); }.dropdown-header span { color: var(--ink-500); font-size: 11px; }
.notification-item { border-bottom: 1px solid var(--line-soft) !important; border-radius: 0 !important; padding: 12px 14px !important; }.notification-item:last-child { border-bottom: 0 !important; }.notification-item span:last-child { min-width: 0; }.notification-item strong,.notification-item small { display: block; }.notification-item small { margin-top: 2px; overflow: hidden; color: var(--ink-600); text-overflow: ellipsis; white-space: nowrap; }
.notification-icon { display: grid; flex: 0 0 auto; place-items: center; width: 31px; height: 31px; border-radius: 9px; color: var(--primary); background: var(--primary-soft); }
.dropdown-empty { margin: 0; padding: 24px 14px; color: var(--ink-500); text-align: center; }
.notification-menu>form { margin: 0; }.notification-menu .notification-item { justify-content: flex-start; }
.dropdown-footer { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 7px; border-top: 1px solid var(--line-soft); }.dropdown-footer form { margin: 0; }.dropdown-footer a,.dropdown-footer button { width: auto; font-size: 11px; font-weight: 700; }
.profile-menu { min-width: 175px; }
.sidebar-backdrop { position: fixed; z-index: 35; inset: 0; display: none; background: rgba(5,17,31,.54); backdrop-filter: blur(2px); }
.main-content { width: 100%; max-width: 1640px; margin: 0 auto; padding: 28px 30px 56px; }

/* Headers, buttons, feedback */
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; margin-bottom: 23px; }
.page-header h1 { margin: 0; font-size: clamp(24px, 2.3vw, 31px); line-height: 1.18; }
.page-header p:not(.eyebrow) { max-width: 760px; margin: 7px 0 0; color: var(--ink-600); }
.eyebrow { margin: 0 0 5px; color: var(--primary-dark); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.page-actions, .panel-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; gap: 8px; padding: 9px 14px; border: 1px solid transparent; border-radius: 9px; font-size: 12px; font-weight: 700; line-height: 1.1; cursor: pointer; transition: transform .15s, box-shadow .15s, background .15s, border-color .15s; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { color: #fff; background: linear-gradient(135deg, var(--primary), #0870da); box-shadow: 0 7px 16px rgba(22,130,243,.18); }.btn-primary:hover { color:#fff; background: linear-gradient(135deg, #258cf5, var(--primary-dark)); }
.btn-secondary { color: var(--ink-800); border-color: var(--line); background: #fff; }.btn-secondary:hover { color: var(--ink-950); border-color: #cbd7e5; background: #fbfcfe; }
.btn-danger { color: var(--danger); border-color: #f0c8cc; background: #fff; }.btn-danger:hover { background: var(--danger-soft); }
.btn-ghost { color: var(--ink-700); background: transparent; }.btn-ghost:hover { color: var(--ink-950); background: var(--surface-soft); }
.btn-sm { min-height: 34px; padding: 7px 10px; font-size: 11px; }.btn-lg { min-height: 47px; }.btn-block { width: 100%; }
.alert { position: relative; display: flex; align-items: flex-start; gap: 11px; margin-bottom: 18px; padding: 13px 42px 13px 14px; border: 1px solid; border-radius: 11px; font-size: 12px; }
.alert strong { display: block; margin-bottom: 2px; }.alert p,.alert ul { margin: 0; }.alert-icon { display: grid; flex: 0 0 auto; place-items: center; width: 27px; height: 27px; border-radius: 8px; }
.alert-info { color: #18598e; border-color: #bedcf7; background: #eff7ff; }.alert-info .alert-icon{background:#dceeff}
.alert-success { color: #146949; border-color: #b8e4d2; background: #effaf5; }.alert-success .alert-icon{background:#d8f3e8}
.alert-warning { color: #81530b; border-color: #efdaa7; background: #fff9e9; }.alert-warning .alert-icon{background:#ffefc7}
.alert-danger { color: #91343d; border-color: #f2c5c9; background: #fff3f4; }.alert-danger .alert-icon{background:#ffe0e3}
.alert-close { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; color: inherit; }
.alert-list { padding-left: 18px; }

/* Panels, grids and metrics */
.panel { min-width: 0; margin-bottom: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.panel-header { display: flex; align-items: center; justify-content: space-between; min-height: 62px; gap: 18px; padding: 15px 18px; border-bottom: 1px solid var(--line-soft); }
.panel-header h2 { margin: 0; font-size: 15px; }.panel-header p { margin: 3px 0 0; color: var(--ink-600); font-size: 11px; }
.panel-body { min-width: 0; padding: 18px; }
.panel-flush .panel-body { padding: 0; }
.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }.grid-3 { grid-template-columns: repeat(3,minmax(0,1fr)); }.grid-4 { grid-template-columns: repeat(4,minmax(0,1fr)); }
.grid-main-side { grid-template-columns: minmax(0, 1.65fr) minmax(290px, .75fr); }
.kpi-grid { display: grid; grid-template-columns: repeat(5, minmax(160px, 1fr)); gap: 13px; margin-bottom: 18px; }
.kpi-card { display: block; min-width: 0; min-height: 132px; padding: 17px; border: 1px solid var(--line); border-radius: var(--radius); color: inherit; background: #fff; box-shadow: var(--shadow-sm); transition: transform .18s, box-shadow .18s, border-color .18s; }
a.kpi-card:hover { color: inherit; border-color: #c8dcf0; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(17,37,63,.08); }
.kpi-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.kpi-label { overflow: hidden; color: var(--ink-600); font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.kpi-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--primary); background: var(--primary-soft); }
.kpi-value { margin-top: 12px; overflow: hidden; font-size: clamp(21px, 1.9vw, 27px); font-weight: 750; letter-spacing: -.04em; text-overflow: ellipsis; white-space: nowrap; }
.kpi-foot { display: flex; align-items: center; gap: 7px; margin-top: 7px; color: var(--ink-500); font-size: 10px; }.metric-change { padding: 2px 5px; border-radius: 5px; font-weight: 750; }.change-positive{color:var(--success);background:var(--success-soft)}.change-negative{color:var(--danger);background:var(--danger-soft)}.change-warning{color:var(--warning);background:var(--warning-soft)}.change-neutral{color:var(--ink-600);background:var(--surface-soft)}
.stat-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); }.stat-row:last-child { border-bottom: 0; }.stat-row span { color: var(--ink-600); }.stat-row strong { font-size: 13px; }
.metric-stack { display: grid; gap: 11px; }.metric-line { display: grid; grid-template-columns: minmax(100px,1fr) 2fr auto; align-items: center; gap: 10px; font-size: 11px; }.metric-track { height: 7px; overflow: hidden; border-radius: 99px; background: #edf1f6; }.metric-fill { height: 100%; width: var(--value, 0); border-radius: inherit; background: linear-gradient(90deg, var(--primary), var(--cyan)); }.metric-line strong { min-width: 44px; text-align: right; }

/* Charts */
.chart-wrap { position: relative; min-height: 245px; }
.bar-chart { display: flex; align-items: end; height: 230px; gap: clamp(7px, 1.6vw, 18px); padding: 15px 6px 27px; border-bottom: 1px solid var(--line); background-image: repeating-linear-gradient(to top, transparent 0, transparent 48px, #edf1f5 49px); }
.bar-item { position: relative; display: flex; flex: 1; align-items: end; justify-content: center; height: 100%; min-width: 12px; }
.bar { position: relative; width: min(28px, 70%); height: var(--value, 20%); min-height: 3px; border-radius: 7px 7px 2px 2px; background: linear-gradient(to top, #1576db, #45a9ff); box-shadow: 0 7px 14px rgba(22,130,243,.15); transition: height .5s ease; }
.bar:hover::after { content: attr(data-label); position: absolute; z-index: 4; left: 50%; bottom: calc(100% + 8px); padding: 5px 7px; border-radius: 6px; color:#fff; background:var(--navy-900); font-size:9px; white-space:nowrap; transform:translateX(-50%); }
.bar-item > span { position: absolute; top: calc(100% + 7px); color: var(--ink-500); font-size: 9px; }
.bar.is-target { width: 3px; margin-left: 2px; background: #b9c7d6; box-shadow: none; }
.donut-layout { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 22px; min-height: 220px; }
.donut { --p: 65; position: relative; display: grid; place-items: center; width: 142px; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(var(--primary) calc(var(--p)*1%), #e8edf3 0); }.donut::before { content:""; position:absolute; width:72%; aspect-ratio:1; border-radius:50%; background:#fff; }.donut strong,.donut small{position:relative;z-index:1;display:block;text-align:center}.donut strong{font-size:25px}.donut small{color:var(--ink-500);font-size:10px}
.legend { display: grid; gap: 9px; }.legend-row { display: grid; grid-template-columns: 9px 1fr auto; align-items:center; gap:8px; color:var(--ink-600); font-size:11px; }.legend-dot { width:8px;height:8px;border-radius:50%;background:var(--legend-color,var(--primary)); }.legend-row strong{color:var(--ink-950)}
.funnel { display:grid;gap:9px;padding:6px 0; }.funnel-row { display:grid;grid-template-columns:95px 1fr 45px;align-items:center;gap:10px;font-size:11px;}.funnel-bar{height:26px;width:var(--value,100%);min-width:10px;border-radius:6px;background:linear-gradient(90deg,var(--navy-800),var(--primary));opacity:var(--opacity,1)}.funnel-row strong{text-align:right}
.health-list { display:grid;gap:10px;}.health-item{display:grid;grid-template-columns:9px 1fr auto;align-items:start;gap:10px;padding:11px;border:1px solid var(--line-soft);border-radius:9px;background:#fbfcfe}.health-dot{width:8px;height:8px;margin-top:5px;border-radius:50%;background:var(--ink-500)}.health-dot.good{background:var(--success)}.health-dot.warning{background:var(--warning)}.health-dot.critical{background:var(--danger)}.health-item strong,.health-item small{display:block}.health-item small{margin-top:2px;color:var(--ink-600)}

/* Tables, filters and data */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.toolbar-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filter-form { display: grid; grid-template-columns: minmax(220px,1.5fr) repeat(3,minmax(130px,.7fr)) auto; gap: 9px; width: 100%; }
.search-input { position:relative; }.search-input .icon { position:absolute;top:50%;left:11px;color:var(--ink-500);transform:translateY(-50%)}.search-input input{padding-left:37px}
.table-wrap { width: 100%; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; white-space: nowrap; }
.data-table th { padding: 10px 14px; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line); color: var(--ink-500); background: #f9fbfd; font-size: 9px; font-weight: 800; letter-spacing: .07em; text-align: left; text-transform: uppercase; }
.data-table td { padding: 13px 14px; border-bottom: 1px solid var(--line-soft); color: var(--ink-700); font-size: 12px; vertical-align: middle; }
.data-table tbody tr:last-child td { border-bottom: 0; }.data-table tbody tr:hover td { background: #fbfdff; }.data-table a:not(.btn){font-weight:700}.data-table .cell-title { display:block;color:var(--ink-950);font-weight:700;}.data-table .cell-subtitle{display:block;margin-top:2px;color:var(--ink-500);font-size:10px}.cell-actions{display:flex;justify-content:flex-end;gap:3px}.table-checkbox{width:15px;height:15px;accent-color:var(--primary)}
.pagination-wrap { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 17px;border-top:1px solid var(--line-soft);color:var(--ink-500);font-size:11px; }
.status-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 3px 8px; border-radius: 99px; font-size: 9px; font-weight: 800; letter-spacing: .025em; white-space: nowrap; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-success{color:#0f7953;background:var(--success-soft)}.status-warning{color:#9a620b;background:var(--warning-soft)}.status-danger{color:#b53e48;background:var(--danger-soft)}.status-info{color:#226cbf;background:var(--info-soft)}.status-neutral{color:#617085;background:#f0f3f7}
.amount-positive{color:var(--success);font-weight:750}.amount-negative{color:var(--danger);font-weight:750}.amount{color:var(--ink-950);font-weight:750;font-variant-numeric:tabular-nums}
.progress { height: 7px; overflow: hidden; border-radius: 99px; background: #e9eef4; }.progress > span { display:block;width:var(--value,0);height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--primary),var(--cyan)); }.progress.success > span{background:var(--success)}.progress.warning > span{background:var(--warning)}.progress.danger > span{background:var(--danger)}

/* Forms */
.form-stack { display: grid; gap: 18px; }
.form-grid { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 16px; }
.col-12{grid-column:span 12}.col-9{grid-column:span 9}.col-8{grid-column:span 8}.col-6{grid-column:span 6}.col-4{grid-column:span 4}.col-3{grid-column:span 3}.col-2{grid-column:span 2}
.field-group { min-width: 0; }.field-group > label,.label-row label { display:block;margin-bottom:6px;color:var(--ink-700);font-size:11px;font-weight:750}.field-hint{margin:5px 0 0;color:var(--ink-500);font-size:10px}.required{color:var(--danger)}
.label-row { display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}.label-row label{margin:0}.label-row a{font-size:10px;font-weight:700}
input[type="text"],input[type="email"],input[type="password"],input[type="search"],input[type="tel"],input[type="number"],input[type="date"],input[type="datetime-local"],select,textarea { width:100%;min-height:41px;padding:9px 11px;border:1px solid #d8e1eb;border-radius:9px;outline:0;color:var(--ink-950);background:#fff;transition:border-color .15s,box-shadow .15s;background .15s; }
textarea{min-height:94px;resize:vertical}select{padding-right:32px}.field-group input:focus,.field-group select:focus,.field-group textarea:focus,.filter-form input:focus,.filter-form select:focus{border-color:#8fc4fa;box-shadow:0 0 0 4px rgba(22,130,243,.08)}
input:disabled,select:disabled,textarea:disabled{color:var(--ink-500);background:#f2f5f8;cursor:not-allowed}.input-with-icon{position:relative}.input-with-icon > .icon{position:absolute;z-index:1;top:50%;left:11px;color:var(--ink-500);transform:translateY(-50%)}.input-with-icon input{padding-left:38px;padding-right:40px}.password-toggle{position:absolute;top:50%;right:6px;display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:7px;color:var(--ink-500);background:transparent;cursor:pointer;transform:translateY(-50%)}.password-toggle:hover{background:var(--surface-soft)}
.checkbox-row { display:flex;align-items:flex-start;gap:9px;color:var(--ink-700);font-size:11px;cursor:pointer}.checkbox-row input{width:16px;height:16px;margin:1px 0 0;accent-color:var(--primary)}
.permission-group{margin:0;padding:0 0 15px;border:0;border-bottom:1px solid var(--line-soft)}.permission-group:last-of-type{border-bottom:0}.permission-group legend{margin-bottom:9px;color:var(--ink-950);font-size:11px;font-weight:800}.check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 12px}.check-grid .checkbox-row{padding:8px;border:1px solid var(--line-soft);border-radius:8px;background:#fbfcfe}.check-grid .checkbox-row span,.check-grid .checkbox-row strong,.check-grid .checkbox-row small{display:block;min-width:0}.check-grid .checkbox-row strong{overflow-wrap:anywhere;font:10px/1.35 ui-monospace,SFMono-Regular,Consolas,monospace}.check-grid .checkbox-row small{margin-top:2px;color:var(--ink-500);font-size:9px}
.field-error{margin:5px 0 0;color:var(--danger);font-size:10px}.is-invalid{border-color:#e69aa1!important;background:#fffafb!important}
.form-section + .form-section { margin-top:25px;padding-top:24px;border-top:1px solid var(--line-soft)}.section-heading{margin-bottom:17px}.section-heading h3{margin:0;font-size:14px}.section-heading p{margin:4px 0 0;color:var(--ink-600);font-size:11px}
.form-actions { position:sticky;z-index:10;bottom:0;display:flex;align-items:center;justify-content:flex-end;gap:8px;margin:24px -18px -18px;padding:13px 18px;border-top:1px solid var(--line);border-radius:0 0 var(--radius) var(--radius);background:rgba(255,255,255,.94);backdrop-filter:blur(10px) }
.input-prefix{display:flex}.input-prefix > span{display:grid;place-items:center;padding:0 11px;border:1px solid #d8e1eb;border-right:0;border-radius:9px 0 0 9px;color:var(--ink-600);background:#f5f7fa}.input-prefix input{border-radius:0 9px 9px 0}
.file-drop{display:grid;place-items:center;min-height:150px;padding:22px;border:1.5px dashed #c7d4e2;border-radius:11px;color:var(--ink-600);background:#fafcfe;text-align:center;cursor:pointer}.file-drop:hover,.file-drop.is-dragging{border-color:var(--primary);background:var(--primary-soft)}.file-drop .empty-icon{margin-bottom:9px}.file-drop strong{display:block;color:var(--ink-800)}.file-drop small{display:block;margin-top:3px}.file-drop input{position:absolute;width:1px;height:1px;opacity:0}
.line-items{display:grid;gap:9px}.line-item{display:grid;grid-template-columns:36px minmax(220px,2fr) 90px 120px 130px 36px;align-items:end;gap:8px;padding:11px;border:1px solid var(--line-soft);border-radius:10px;background:#fbfcfe}.drag-handle{display:grid;place-items:center;height:40px;color:var(--ink-400);cursor:grab}.line-total{display:flex;align-items:center;justify-content:flex-end;height:41px;color:var(--ink-950);font-weight:750}.remove-line{width:36px;height:40px}.totals-box{width:min(100%,380px);margin-left:auto;padding:14px;border:1px solid var(--line);border-radius:10px;background:#fafcfe}.total-row{display:flex;justify-content:space-between;gap:16px;padding:6px 0;color:var(--ink-600);font-size:11px}.total-row strong{color:var(--ink-950);font-variant-numeric:tabular-nums}.total-row.grand-total{margin-top:7px;padding-top:12px;border-top:1px solid var(--line);color:var(--ink-950);font-size:14px}.total-row.grand-total strong{font-size:18px}

/* Detail pages */
.detail-hero { display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:20px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(135deg,#fff,#f8fbff);box-shadow:var(--shadow-sm);margin-bottom:18px}.detail-title{display:flex;align-items:flex-start;gap:13px}.detail-icon{display:grid;flex:0 0 auto;place-items:center;width:43px;height:43px;border-radius:12px;color:var(--primary);background:var(--primary-soft)}.detail-title h1{margin:0 0 5px;font-size:22px}.detail-title p{margin:0;color:var(--ink-600)}.detail-summary{display:flex;gap:25px;flex-wrap:wrap}.summary-item span,.summary-item strong{display:block;text-align:right}.summary-item span{color:var(--ink-500);font-size:9px;text-transform:uppercase;letter-spacing:.06em}.summary-item strong{margin-top:3px;font-size:14px}
.description-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;margin:0}.description-list > div{display:grid;grid-template-columns:minmax(110px,.75fr) 1.25fr;gap:10px;padding:10px 0;border-bottom:1px solid var(--line-soft)}.description-list dt{color:var(--ink-500);font-size:11px}.description-list dd{margin:0;color:var(--ink-800);font-size:11px;font-weight:650}
.tabs{display:flex;gap:4px;margin-bottom:16px;padding:4px;border:1px solid var(--line);border-radius:10px;background:#f6f8fb;overflow-x:auto}.tab-button{min-height:34px;padding:7px 12px;border:0;border-radius:7px;color:var(--ink-600);background:transparent;font-size:11px;font-weight:700;white-space:nowrap;cursor:pointer}.tab-button.is-active{color:var(--primary-dark);background:#fff;box-shadow:var(--shadow-sm)}.tab-panel[hidden]{display:none!important}
.timeline{position:relative;display:grid;gap:0;margin-left:7px}.timeline::before{content:"";position:absolute;top:10px;bottom:10px;left:6px;width:1px;background:var(--line)}.timeline-item{position:relative;display:grid;grid-template-columns:14px 1fr;gap:13px;padding:0 0 18px}.timeline-dot{position:relative;z-index:1;width:13px;height:13px;margin-top:4px;border:3px solid #fff;border-radius:50%;background:var(--primary);box-shadow:0 0 0 1px #b9d9f7}.timeline-content{padding:0 0 0 1px}.timeline-content strong{display:block;font-size:11px}.timeline-content p{margin:3px 0;color:var(--ink-600);font-size:11px}.timeline-content time{color:var(--ink-500);font-size:9px}
.contact-card{display:flex;align-items:flex-start;gap:12px;padding:13px;border:1px solid var(--line-soft);border-radius:10px}.contact-card strong,.contact-card span{display:block}.contact-card span{margin-top:2px;color:var(--ink-600);font-size:10px}.contact-actions{display:flex;gap:5px;margin-left:auto}
.quick-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.quick-action{display:flex;align-items:center;gap:9px;padding:11px;border:1px solid var(--line-soft);border-radius:9px;color:var(--ink-700);font-size:11px;font-weight:700}.quick-action:hover{color:var(--primary-dark);border-color:#c5def5;background:var(--primary-soft)}
.activity-feed{display:grid;gap:9px}.activity-row{display:flex;align-items:flex-start;gap:10px;padding:10px;border-radius:9px;background:#f8fafc}.activity-row .activity-icon{display:grid;flex:0 0 auto;place-items:center;width:29px;height:29px;border-radius:8px;color:var(--primary);background:var(--primary-soft)}.activity-row strong,.activity-row small{display:block}.activity-row small{margin-top:2px;color:var(--ink-500)}
.empty-state { display:grid;place-items:center;min-height:210px;padding:30px;color:var(--ink-600);text-align:center}.empty-icon{display:grid;place-items:center;width:52px;height:52px;margin-bottom:12px;border-radius:15px;color:var(--primary);background:var(--primary-soft)}.empty-state h3{margin:0 0 6px;color:var(--ink-950);font-size:14px}.empty-state p{max-width:380px;margin:0 0 15px;font-size:11px}
.callout{display:flex;align-items:flex-start;gap:11px;padding:13px;border:1px solid #cce0f5;border-radius:10px;color:#365d80;background:#f2f8fe}.callout.warning{border-color:#ead49c;color:#76510f;background:#fff9e9}.callout.danger{border-color:#f0c2c7;color:#8c353e;background:#fff3f4}.callout strong,.callout small{display:block}.callout small{margin-top:3px;color:inherit;opacity:.8}
.score-ring{--p:75;display:grid;place-items:center;width:78px;aspect-ratio:1;border-radius:50%;background:conic-gradient(var(--primary) calc(var(--p)*1%),#e9eef4 0);position:relative}.score-ring::before{content:"";position:absolute;width:66%;aspect-ratio:1;border-radius:50%;background:#fff}.score-ring strong{position:relative;font-size:17px}
.schedule-list{display:grid;gap:9px}.schedule-item{display:grid;grid-template-columns:55px 1fr auto;align-items:center;gap:12px;padding:11px;border:1px solid var(--line-soft);border-radius:9px}.schedule-time{padding-right:10px;border-right:1px solid var(--line);text-align:center}.schedule-time strong,.schedule-time small{display:block}.schedule-time strong{font-size:12px}.schedule-time small{color:var(--ink-500);font-size:9px}.schedule-copy strong,.schedule-copy small{display:block}.schedule-copy small{margin-top:2px;color:var(--ink-500)}
.checklist{display:grid;gap:7px}.check-item{display:flex;align-items:flex-start;gap:9px;padding:10px;border:1px solid var(--line-soft);border-radius:8px;cursor:pointer}.check-item input{margin-top:2px;accent-color:var(--success)}.check-item span{font-size:11px}.check-item small{display:block;margin-top:2px;color:var(--ink-500)}

/* Reports, settings, misc */
.report-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.report-card{display:flex;align-items:flex-start;gap:12px;min-height:116px;padding:16px;border:1px solid var(--line);border-radius:11px;color:inherit;background:#fff;box-shadow:var(--shadow-sm)}.report-card:hover{color:inherit;border-color:#bfd9f1;transform:translateY(-1px)}.report-card .report-icon{display:grid;flex:0 0 auto;place-items:center;width:39px;height:39px;border-radius:11px;color:var(--primary);background:var(--primary-soft)}.report-card strong{display:block}.report-card p{margin:4px 0 8px;color:var(--ink-600);font-size:10px}.report-card small{color:var(--primary-dark);font-weight:700}
.settings-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:18px}.settings-nav{position:sticky;top:95px;height:max-content;padding:6px;border:1px solid var(--line);border-radius:11px;background:#fff}.settings-nav button{display:flex;align-items:center;width:100%;gap:9px;padding:10px;border:0;border-radius:8px;color:var(--ink-600);background:transparent;font-size:11px;font-weight:700;text-align:left;cursor:pointer}.settings-nav button.is-active{color:var(--primary-dark);background:var(--primary-soft)}
.audit-change{display:grid;grid-template-columns:1fr 1fr;gap:9px}.code-block{max-height:240px;padding:12px;overflow:auto;border-radius:9px;color:#cde1f2;background:var(--navy-950);font:10px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre-wrap}
.search-groups{display:grid;gap:18px}.search-result{display:flex;align-items:flex-start;gap:12px;padding:13px;border-bottom:1px solid var(--line-soft);color:inherit}.search-result:last-child{border-bottom:0}.search-result:hover{color:inherit;background:#fbfdff}.search-result-icon{display:grid;flex:0 0 auto;place-items:center;width:36px;height:36px;border-radius:10px;color:var(--primary);background:var(--primary-soft)}.search-result strong,.search-result small{display:block}.search-result small{margin-top:3px;color:var(--ink-500)}.search-result-meta{margin-left:auto;text-align:right}
.steps{display:flex;align-items:center;margin-bottom:22px;overflow-x:auto}.step{display:flex;align-items:center;color:var(--ink-500);font-size:10px;font-weight:700;white-space:nowrap}.step::after{content:"";width:42px;height:1px;margin:0 8px;background:var(--line)}.step:last-child::after{display:none}.step-index{display:grid;place-items:center;width:24px;height:24px;margin-right:6px;border:1px solid var(--line);border-radius:50%;background:#fff}.step.is-active{color:var(--primary-dark)}.step.is-active .step-index,.step.is-done .step-index{color:#fff;border-color:var(--primary);background:var(--primary)}
.priority-high{color:var(--danger)}.priority-medium{color:var(--warning)}.priority-low{color:var(--success)}

/* Responsive */
@media (max-width: 1240px) {
    .kpi-grid{grid-template-columns:repeat(3,minmax(160px,1fr))}.grid-main-side{grid-template-columns:minmax(0,1.4fr) minmax(270px,.8fr)}.report-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 980px) {
    .sidebar{transform:translateX(-102%);transition:transform .22s ease}.sidebar.is-open{transform:translateX(0)}.sidebar-close,.menu-toggle{display:inline-grid!important}.sidebar-backdrop.is-visible{display:block}.app-shell{margin-left:0}.topbar{padding:0 20px}.main-content{padding:24px 20px 48px}.grid-main-side{grid-template-columns:1fr}.grid-4{grid-template-columns:repeat(2,1fr)}.guest-shell{grid-template-columns:1fr}.guest-brand{display:none}.guest-content{padding:24px}.line-item{grid-template-columns:30px minmax(180px,2fr) 78px 105px 115px 32px}
}
@media (max-width: 720px) {
    .topbar{height:66px;padding:0 14px}.main-content{padding:20px 14px 42px}.global-search{width:min(58vw,380px)}.global-search kbd,.today-label,.profile-copy,.profile-button>.icon{display:none}.profile-button{padding:4px}.page-header{align-items:flex-start;flex-direction:column}.page-actions{width:100%;justify-content:flex-start}.page-actions .btn{flex:1}.kpi-grid,.grid-2,.grid-3,.grid-4,.report-grid{grid-template-columns:1fr 1fr}.kpi-card{min-height:120px}.filter-form{grid-template-columns:1fr 1fr}.filter-form>*:first-child{grid-column:1/-1}.filter-form .btn{width:100%}.panel-header{align-items:flex-start;flex-direction:column}.panel-actions{width:100%;justify-content:flex-start}.form-grid{grid-template-columns:1fr}.form-grid>[class*="col-"]{grid-column:span 1}.description-list{grid-template-columns:1fr}.detail-hero{flex-direction:column}.detail-summary{width:100%}.summary-item span,.summary-item strong{text-align:left}.settings-layout{grid-template-columns:1fr}.settings-nav{position:static;display:flex;overflow-x:auto}.settings-nav button{width:auto;white-space:nowrap}.line-item{grid-template-columns:28px 1fr 30px}.line-item>.field-group{grid-column:2}.line-item>.field-group:nth-of-type(2),.line-item>.field-group:nth-of-type(3){grid-column:auto}.line-total{grid-column:2}.remove-line{grid-column:3;grid-row:1}.donut-layout{grid-template-columns:1fr;justify-items:center}.donut-layout .legend{width:100%}
}
@media (max-width: 480px) {
    .global-search{width:calc(100vw - 150px)}.global-search input::placeholder{color:transparent}.kpi-grid,.grid-2,.grid-3,.grid-4,.report-grid,.check-grid{grid-template-columns:1fr}.guest-card{padding:25px 20px}.toolbar{align-items:stretch;flex-direction:column}.toolbar-group{width:100%}.toolbar-group .btn{flex:1}.filter-form{grid-template-columns:1fr}.filter-form>*{grid-column:1!important}.quick-actions{grid-template-columns:1fr}.schedule-item{grid-template-columns:50px 1fr}.schedule-item>:last-child{grid-column:2}.audit-change{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important} }
@media print { .sidebar,.topbar,.page-actions,.toolbar,.form-actions,.alert-close{display:none!important}.app-shell{margin:0}.main-content{max-width:none;padding:0}.panel,.detail-hero{box-shadow:none;break-inside:avoid}.app-body{background:#fff} }