:root {
    --bg-base:       #080b0f;
    --bg-panel:      #0d1117;
    --bg-card:       #101520;
    --bg-hover:      #141a24;
    --border:        #1e2a38;
    --border-glow:   #ff2d78;
    --accent-pink:   #ff2d78;
    --accent-cyan:   #00e5ff;
    --accent-green:  #00ff88;
    --accent-yellow: #ffd600;
    --accent-orange: #ff6b00;
    --accent-red:    #ff1f44;
    --text-primary:  #f8fafd;
    --text-secondary:#b3c6dd;
    --text-muted:    #7b92ab;
    --text-mono:     'JetBrains Mono', monospace;
    --font-ui:       'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display:  'Space Grotesk', sans-serif;
    --live-pulse:    #00ff88;
    --glow-pink:     0 0 12px #ff2d7866, 0 0 24px #ff2d7833;
    --glow-cyan:     0 0 12px #00e5ff66, 0 0 24px #00e5ff33;
    --glow-green:    0 0 8px #00ff8855;
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  html { font-size: 13px; }

  body {
    background: var(--bg-base);
    color: var(--text-primary);
    font-family: var(--font-ui);
    min-height: 100vh;
    overflow-x: hidden;
    background-image:
      radial-gradient(ellipse 80% 40% at 50% -10%, #ff2d7808 0%, transparent 60%),
      repeating-linear-gradient(0deg, transparent, transparent 39px, #1e2a3808 40px),
      repeating-linear-gradient(90deg, transparent, transparent 39px, #1e2a3808 40px);
  }

  /* ── TOPBAR ── */
  .topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: 44px;
    background: #090d12;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
  }

  .topbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .brand-logo {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 3px;
    color: var(--text-primary);
    text-transform: uppercase;
  }

  .brand-logo span { color: var(--accent-pink); }

  .brand-badge {
    font-family: var(--text-mono);
    font-size: 9px;
    padding: 2px 6px;
    background: #ff2d7822;
    border: 1px solid #ff2d7855;
    color: var(--accent-pink);
    letter-spacing: 1px;
  }

  /* scrolling ticker */
  .ticker-wrap {
    flex: 1;
    overflow: hidden;
    margin: 0 24px;
    position: relative;
  }
  .ticker-wrap::before, .ticker-wrap::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 40px;
    z-index: 2;
  }
  .ticker-wrap::before { left: 0; background: linear-gradient(to right, #090d12, transparent); }
  .ticker-wrap::after  { right: 0; background: linear-gradient(to left, #090d12, transparent); }

  .ticker {
    display: flex;
    gap: 32px;
    white-space: nowrap;
    animation: ticker-scroll 40s linear infinite;
    font-family: var(--text-mono);
    font-size: 11px;
  }

  .ticker-item { display: flex; align-items: center; gap: 6px; }
  .ticker-item .t-label { color: var(--text-secondary); }
  .ticker-item .t-val { color: var(--text-primary); font-weight: 600; }
  .ticker-item .t-up   { color: var(--accent-green); }
  .ticker-item .t-down { color: var(--accent-red); }

  @keyframes ticker-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }

  .topbar-right {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
  }

  .topbar-clock {
    font-family: var(--text-mono);
    font-size: 13px;
    color: var(--accent-cyan);
    letter-spacing: 1px;
  }

  .live-badge {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--text-mono);
    font-size: 10px;
    color: var(--accent-green);
    padding: 3px 9px;
    background: #00ff8814;
    border: 1px solid #00ff8833;
    letter-spacing: 1px;
  }

  .live-dot {
    width: 6px; height: 6px;
    background: var(--accent-green);
    border-radius: 50%;
    animation: pulse-live 1.4s ease-in-out infinite;
    box-shadow: var(--glow-green);
  }

  @keyframes pulse-live {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .4; transform: scale(.7); }
  }

  .btn-topbar {
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 5px 14px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all .2s;
  }
  .btn-topbar:hover { border-color: var(--accent-pink); color: var(--accent-pink); box-shadow: var(--glow-pink); }
  .btn-topbar.primary {
    background: #ff2d7822;
    border-color: var(--accent-pink);
    color: var(--accent-pink);
  }

  /* ── LAYOUT ── */
  .layout {
    display: flex;
    height: calc(100vh - 70px);
  }

  /* ── SIDEBAR ── */
  .sidebar {
    width: 220px;
    flex-shrink: 0;
    background: #090d12;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }

  .sidebar-section-label {
    font-family: var(--text-mono);
    font-size: 9px;
    letter-spacing: 2px;
    color: var(--text-muted);
    padding: 18px 16px 6px;
    text-transform: uppercase;
  }

  .nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .5px;
    color: var(--text-secondary);
    cursor: pointer;
    border-left: 2px solid transparent;
    transition: all .15s;
    position: relative;
  }

  .nav-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-left-color: var(--accent-pink);
  }

  .nav-item.active {
    background: #ff2d7810;
    color: var(--accent-pink);
    border-left-color: var(--accent-pink);
  }

  .nav-item .nav-icon {
    width: 16px;
    text-align: center;
    font-size: 14px;
    opacity: .8;
  }

  .nav-badge {
    margin-left: auto;
    font-family: var(--text-mono);
    font-size: 9px;
    padding: 2px 5px;
    min-width: 20px;
    text-align: center;
    line-height: 1.4;
  }
  .nav-badge.pink  { background: #ff2d7822; border: 1px solid #ff2d7844; color: var(--accent-pink); }
  .nav-badge.cyan  { background: #00e5ff18; border: 1px solid #00e5ff33; color: var(--accent-cyan); }
  .nav-badge.green { background: #00ff8818; border: 1px solid #00ff8833; color: var(--accent-green); }
  .nav-badge.yellow{ background: #ffd60018; border: 1px solid #ffd60033; color: var(--accent-yellow); }

  .sidebar-divider {
    height: 1px;
    background: var(--border);
    margin: 10px 0;
  }

  .sidebar-user {
    margin-top: auto;
    padding: 14px 16px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .user-avatar {
    width: 32px; height: 32px;
    background: #ff2d7822;
    border: 1px solid #ff2d7855;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    color: var(--accent-pink);
    flex-shrink: 0;
  }

  .user-info { overflow: hidden; }
  .user-name  { font-size: 12px; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .user-role  { font-family: var(--text-mono); font-size: 9px; color: var(--accent-pink); letter-spacing: 1px; }

  /* ── MAIN CONTENT ── */
  .main {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  /* ── PAGE HEADER ── */
  .page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
  }

  .page-title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--text-primary);
    text-transform: uppercase;
  }

  .page-title span { color: var(--accent-pink); }

  .page-breadcrumb {
    font-family: var(--text-mono);
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 1px;
    margin-top: 4px;
  }

  .header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
  }

  .btn {
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 7px 16px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all .2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .btn:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); box-shadow: var(--glow-cyan); }
  .btn-primary { background: #ff2d7822; border-color: var(--accent-pink); color: var(--accent-pink); }
  .btn-primary:hover { background: #ff2d7833; box-shadow: var(--glow-pink); }
  .btn-success { background: #00ff8814; border-color: var(--accent-green); color: var(--accent-green); }
  .btn-success:hover { background: #00ff8822; box-shadow: var(--glow-green); }

  /* ── STAT ROW ── */
  .stat-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }

  .stat-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    padding: 14px 16px;
    position: relative;
    overflow: hidden;
    transition: border-color .2s;
  }
  .stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
  }
  .stat-card.c-pink::before  { background: linear-gradient(90deg, transparent, var(--accent-pink), transparent); }
  .stat-card.c-cyan::before  { background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent); }
  .stat-card.c-green::before { background: linear-gradient(90deg, transparent, var(--accent-green), transparent); }
  .stat-card.c-yellow::before{ background: linear-gradient(90deg, transparent, var(--accent-yellow), transparent); }
  .stat-card:hover { border-color: #2a3a50; }

  .stat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }
  .stat-label {
    font-family: var(--text-mono);
    font-size: 9px;
    letter-spacing: 2px;
    color: var(--text-muted);
    text-transform: uppercase;
  }
  .stat-live {
    font-family: var(--text-mono);
    font-size: 9px;
    padding: 1px 6px;
    letter-spacing: 1px;
  }
  .stat-live.live { color: var(--accent-green); background: #00ff8810; border: 1px solid #00ff8830; }
  .stat-live.stale { color: var(--text-muted); background: transparent; border: 1px solid var(--border); }

  .stat-value {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 6px;
  }
  .stat-value.c-pink   { color: var(--accent-pink); }
  .stat-value.c-cyan   { color: var(--accent-cyan); }
  .stat-value.c-green  { color: var(--accent-green); }
  .stat-value.c-yellow { color: var(--accent-yellow); }

  .stat-sub {
    font-family: var(--text-mono);
    font-size: 10px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .stat-change { font-size: 10px; }
  .stat-change.up   { color: var(--accent-green); }
  .stat-change.down { color: var(--accent-red); }

  /* ── PANEL GRID ── */
  .panel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 10px;
  }

  .panel-grid.col-3-1 { grid-template-columns: 3fr 1fr; }
  .panel-grid.col-2-2 { grid-template-columns: 1fr 1fr; }
  .panel-grid.col-2-1 { grid-template-columns: 2fr 1fr; }

  /* ── PANEL ── */
  .panel {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    gap: 8px;
  }

  .panel-title-wrap { display: flex; align-items: center; gap: 8px; }

  .panel-title-icon {
    font-size: 12px;
    opacity: .7;
  }

  .panel-title {
    font-family: var(--text-mono);
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--text-primary);
  }

  .panel-count {
    font-family: var(--text-mono);
    font-size: 9px;
    padding: 1px 6px;
    background: #ffffff08;
    border: 1px solid var(--border);
    color: var(--text-muted);
  }

  .panel-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
  }

  .status-dot-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--text-mono);
    font-size: 9px;
    letter-spacing: 1px;
  }
  .status-dot-wrap.live  { color: var(--accent-green); }
  .status-dot-wrap.stale { color: var(--text-muted); }

  .sdot {
    width: 5px; height: 5px;
    border-radius: 50%;
  }
  .sdot.live  { background: var(--accent-green); box-shadow: var(--glow-green); animation: pulse-live 1.4s ease-in-out infinite; }
  .sdot.stale { background: var(--text-muted); }

  .panel-body { padding: 12px 14px; overflow-y: auto; flex: 1; }
  .panel-body.no-pad { padding: 0; }

  /* ── ORDER TABLE ── */
  .data-table { width: 100%; border-collapse: collapse; }

  .data-table thead tr {
    border-bottom: 1px solid var(--border);
  }
  .data-table thead th {
    font-family: var(--text-mono);
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 8px 12px;
    text-align: left;
    font-weight: 400;
  }

  .data-table tbody tr {
    border-bottom: 1px solid #1a2332;
    transition: background .15s;
    cursor: pointer;
  }
  .data-table tbody tr:hover { background: var(--bg-hover); }

  .data-table tbody td {
    padding: 9px 12px;
    font-size: 12px;
    color: var(--text-primary);
    vertical-align: middle;
  }

  .data-table tbody td.mono {
    font-family: var(--text-mono);
    font-size: 11px;
    color: var(--text-secondary);
  }

  .order-id {
    font-family: var(--text-mono);
    font-size: 11px;
    color: var(--accent-cyan);
  }

  /* ── STATUS PILLS ── */
  .pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--text-mono);
    font-size: 9px;
    letter-spacing: 1px;
    padding: 3px 8px;
    text-transform: uppercase;
  }
  .pill-dot { width: 4px; height: 4px; border-radius: 50%; }

  .pill.new      { color: var(--accent-cyan);   background: #00e5ff12; border: 1px solid #00e5ff30; }
  .pill.packing  { color: var(--accent-yellow);  background: #ffd60012; border: 1px solid #ffd60030; }
  .pill.posting  { color: var(--accent-pink);    background: #ff2d7812; border: 1px solid #ff2d7830; }
  .pill.done     { color: var(--accent-green);   background: #00ff8812; border: 1px solid #00ff8830; }
  .pill.critical { color: var(--accent-red);     background: #ff1f4412; border: 1px solid #ff1f4430; }

  .pill.new      .pill-dot { background: var(--accent-cyan); }
  .pill.packing  .pill-dot { background: var(--accent-yellow); }
  .pill.posting  .pill-dot { background: var(--accent-pink); }
  .pill.done     .pill-dot { background: var(--accent-green); }
  .pill.critical .pill-dot { background: var(--accent-red); animation: pulse-live 1s infinite; }

  /* ── ROLE CHIPS ── */
  .role-chip {
    display: inline-block;
    font-family: var(--text-mono);
    font-size: 9px;
    padding: 2px 7px;
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  .role-chip.superadmin { background: #ff2d7818; border: 1px solid #ff2d7840; color: var(--accent-pink); }
  .role-chip.manager    { background: #00e5ff14; border: 1px solid #00e5ff35; color: var(--accent-cyan); }
  .role-chip.packer     { background: #ffd60014; border: 1px solid #ffd60035; color: var(--accent-yellow); }
  .role-chip.poster     { background: #00ff8814; border: 1px solid #00ff8835; color: var(--accent-green); }

  /* ── WORKFLOW TRACKER ── */
  .workflow-steps {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 14px;
  }

  .wf-step {
    flex: 1;
    text-align: center;
    position: relative;
  }

  .wf-step-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    z-index: 1;
  }

  .wf-node {
    width: 36px; height: 36px;
    border: 2px solid var(--border);
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    transition: all .2s;
    position: relative;
  }

  .wf-step.done   .wf-node { border-color: var(--accent-green); color: var(--accent-green); box-shadow: var(--glow-green); background: #00ff8810; }
  .wf-step.active .wf-node { border-color: var(--accent-pink);  color: var(--accent-pink);  box-shadow: var(--glow-pink);  background: #ff2d7810; animation: node-pulse 2s ease-in-out infinite; }
  .wf-step.pending .wf-node { border-color: var(--text-muted); color: var(--text-muted); }

  @keyframes node-pulse {
    0%, 100% { box-shadow: var(--glow-pink); }
    50%       { box-shadow: 0 0 20px #ff2d7888, 0 0 40px #ff2d7844; }
  }

  .wf-label {
    font-family: var(--text-mono);
    font-size: 9px;
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  .wf-step.done    .wf-label { color: var(--accent-green); }
  .wf-step.active  .wf-label { color: var(--accent-pink); }
  .wf-step.pending .wf-label { color: var(--text-muted); }

  .wf-sublabel {
    font-size: 10px;
    color: var(--text-secondary);
    font-weight: 600;
  }

  .wf-connector {
    flex: 0 0 40px;
    height: 2px;
    position: relative;
    top: -18px;
  }
  .wf-connector.done    { background: linear-gradient(90deg, var(--accent-green), var(--accent-green)); }
  .wf-connector.active  { background: linear-gradient(90deg, var(--accent-green), var(--accent-pink)); }
  .wf-connector.pending { background: var(--border); }

  /* ── ACTIVITY FEED ── */
  .activity-item {
    display: flex;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid #1a2332;
    align-items: flex-start;
  }
  .activity-item:last-child { border-bottom: none; }

  .activity-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 5px;
  }

  .activity-body { flex: 1; min-width: 0; }
  .activity-text {
    font-size: 12px;
    color: var(--text-primary);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .activity-text .highlight { font-weight: 700; }
  .activity-text .highlight.pink   { color: var(--accent-pink); }
  .activity-text .highlight.cyan   { color: var(--accent-cyan); }
  .activity-text .highlight.green  { color: var(--accent-green); }
  .activity-text .highlight.yellow { color: var(--accent-yellow); }

  .activity-meta {
    font-family: var(--text-mono);
    font-size: 9px;
    color: var(--text-muted);
    margin-top: 2px;
    letter-spacing: .5px;
  }

  /* ── MINI CHART (CSS bars) ── */
  .mini-bars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 40px;
    padding: 0 2px;
  }
  .mini-bar {
    flex: 1;
    background: #ff2d7833;
    border-top: 1px solid var(--accent-pink);
    transition: all .3s;
  }
  .mini-bar:hover { background: #ff2d7866; }
  .mini-bar.cyan   { background: #00e5ff22; border-top-color: var(--accent-cyan); }
  .mini-bar.green  { background: #00ff8822; border-top-color: var(--accent-green); }

  /* ── INVENTORY ROWS ── */
  .inv-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #1a2332;
  }
  .inv-row:last-child { border-bottom: none; }

  .inv-name {
    flex: 1;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
  }
  .inv-sku {
    font-family: var(--text-mono);
    font-size: 9px;
    color: var(--text-muted);
    letter-spacing: 1px;
    margin-top: 1px;
  }

  .inv-bar-wrap {
    flex: 1.5;
    height: 4px;
    background: var(--border);
    position: relative;
    overflow: hidden;
  }
  .inv-bar-fill {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    transition: width .4s;
  }
  .inv-bar-fill.ok     { background: var(--accent-green); }
  .inv-bar-fill.warn   { background: var(--accent-yellow); }
  .inv-bar-fill.danger { background: var(--accent-red); }

  .inv-qty {
    font-family: var(--text-mono);
    font-size: 11px;
    min-width: 45px;
    text-align: right;
  }
  .inv-qty.ok     { color: var(--accent-green); }
  .inv-qty.warn   { color: var(--accent-yellow); }
  .inv-qty.danger { color: var(--accent-red); }

  /* ── EMPLOYEE CARDS ── */
  .emp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .emp-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color .2s;
    cursor: pointer;
  }
  .emp-card:hover { border-color: #2a3a50; }

  .emp-card-top {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .emp-avatar {
    width: 28px; height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
  }
  .emp-avatar.mgr    { background: #00e5ff14; border: 1px solid #00e5ff33; color: var(--accent-cyan); }
  .emp-avatar.packer { background: #ffd60014; border: 1px solid #ffd60033; color: var(--accent-yellow); }
  .emp-avatar.poster { background: #00ff8814; border: 1px solid #00ff8833; color: var(--accent-green); }

  .emp-info { flex: 1; min-width: 0; }
  .emp-name { font-size: 12px; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .emp-stat-row {
    display: flex;
    gap: 12px;
  }
  .emp-stat { text-align: center; }
  .emp-stat-val {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--accent-cyan);
  }
  .emp-stat-lbl {
    font-family: var(--text-mono);
    font-size: 8px;
    color: var(--text-muted);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 1px;
  }

  /* ── FINANCE PANEL ── */
  .finance-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 0;
    border-bottom: 1px solid #1a2332;
  }
  .finance-row:last-child { border-bottom: none; }

  .finance-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
  }

  .finance-val {
    font-family: var(--text-mono);
    font-size: 13px;
    font-weight: 600;
  }
  .finance-val.income   { color: var(--accent-green); }
  .finance-val.expense  { color: var(--accent-red); }
  .finance-val.neutral  { color: var(--text-primary); }
  .finance-val.profit   { color: var(--accent-cyan); }

  /* ── SECURITY PANEL ── */
  .security-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid #1a2332;
  }
  .security-item:last-child { border-bottom: none; }

  .sec-icon {
    width: 28px; height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
  }
  .sec-icon.ok     { background: #00ff8810; border: 1px solid #00ff8825; }
  .sec-icon.warn   { background: #ffd60010; border: 1px solid #ffd60025; }
  .sec-icon.danger { background: #ff1f4410; border: 1px solid #ff1f4425; }

  .sec-label { font-size: 12px; font-weight: 600; color: var(--text-primary); flex: 1; }
  .sec-status {
    font-family: var(--text-mono);
    font-size: 9px;
    padding: 2px 7px;
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  .sec-status.ok     { color: var(--accent-green); background: #00ff8812; border: 1px solid #00ff8828; }
  .sec-status.warn   { color: var(--accent-yellow); background: #ffd60012; border: 1px solid #ffd60028; }
  .sec-status.danger { color: var(--accent-red);    background: #ff1f4412; border: 1px solid #ff1f4428; }

  /* ── SEARCH BAR ── */
  .search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    padding: 7px 12px;
    flex: 1;
    max-width: 320px;
    transition: border-color .2s;
  }
  .search-bar:focus-within { border-color: var(--accent-pink); box-shadow: var(--glow-pink); }
  .search-bar input {
    background: transparent;
    border: none;
    outline: none;
    font-family: var(--text-mono);
    font-size: 11px;
    color: var(--text-primary);
    width: 100%;
  }
  .search-bar input::placeholder { color: var(--text-muted); }
  .search-icon { font-size: 12px; color: var(--text-muted); flex-shrink: 0; }

  /* ── FILTER CHIPS ── */
  .filter-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
  .fchip {
    font-family: var(--text-mono);
    font-size: 9px;
    padding: 3px 10px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: all .15s;
  }
  .fchip:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); }
  .fchip.active { border-color: var(--accent-pink); color: var(--accent-pink); background: #ff2d7812; }

  /* ── SCROLLBAR ── */
  ::-webkit-scrollbar { width: 4px; height: 4px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: #1e2a38; }
  ::-webkit-scrollbar-thumb:hover { background: #2a3a50; }

  /* ── BOTTOM STATUSBAR ── */
  .statusbar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 26px;
    background: #060a0e;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 20px;
    z-index: 100;
  }

  .statusbar-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--text-mono);
    font-size: 9px;
    color: var(--text-muted);
    letter-spacing: 1px;
  }
  .statusbar-item .si-val { color: var(--text-secondary); }
  .statusbar-item .si-val.ok    { color: var(--accent-green); }
  .statusbar-item .si-val.warn  { color: var(--accent-yellow); }
  .statusbar-item .si-val.err   { color: var(--accent-red); }

  .statusbar-right { margin-left: auto; }

  /* ── MODAL OVERLAY (design only) ── */
  .modal-overlay {
    display: none; /* shown via JS in real impl */
    position: fixed;
    inset: 0;
    background: #000000aa;
    backdrop-filter: blur(4px);
    z-index: 200;
    align-items: center;
    justify-content: center;
  }

  .modal {
    background: var(--bg-panel);
    border: 1px solid var(--accent-pink);
    box-shadow: var(--glow-pink);
    width: 480px;
    max-width: 90vw;
    padding: 0;
    overflow: hidden;
  }

  .modal-head {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .modal-title {
    font-family: var(--text-mono);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--accent-pink);
  }

  .modal-close {
    font-size: 16px;
    color: var(--text-muted);
    cursor: pointer;
    background: none;
    border: none;
    line-height: 1;
    transition: color .15s;
  }
  .modal-close:hover { color: var(--accent-pink); }

  .modal-body { padding: 18px; display: flex; flex-direction: column; gap: 14px; }

  .form-group { display: flex; flex-direction: column; gap: 6px; }
  .form-label {
    font-family: var(--text-mono);
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .form-input {
    background: var(--bg-card);
    border: 1px solid var(--border);
    padding: 8px 12px;
    font-family: var(--font-ui);
    font-size: 12px;
    color: var(--text-primary);
    outline: none;
    transition: border-color .2s;
    width: 100%;
  }
  .form-input:focus { border-color: var(--accent-pink); box-shadow: 0 0 0 1px #ff2d7822; }
  .form-input::placeholder { color: var(--text-muted); }

  .form-select {
    background: var(--bg-card);
    border: 1px solid var(--border);
    padding: 8px 12px;
    font-family: var(--font-ui);
    font-size: 12px;
    color: var(--text-primary);
    outline: none;
    width: 100%;
    appearance: none;
    cursor: pointer;
    transition: border-color .2s;
  }
  .form-select:focus { border-color: var(--accent-cyan); }

  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

  .modal-foot {
    padding: 12px 18px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
  }

  /* ── LOGIN PAGE (alternate screen) ── */
  .login-page {
    display: none;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 32px;
    background: var(--bg-base);
    background-image:
      radial-gradient(ellipse 60% 50% at 50% 0%, #ff2d7810 0%, transparent 70%),
      radial-gradient(ellipse 40% 40% at 100% 100%, #00e5ff08 0%, transparent 60%);
  }

  .login-box {
    width: 360px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    overflow: hidden;
    position: relative;
  }
  .login-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-pink), var(--accent-cyan));
  }

  .login-head {
    padding: 28px 28px 20px;
    text-align: center;
    border-bottom: 1px solid var(--border);
  }
  .login-logo {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 4px;
    color: var(--text-primary);
    text-transform: uppercase;
  }
  .login-logo span { color: var(--accent-pink); }
  .login-tagline {
    font-family: var(--text-mono);
    font-size: 9px;
    letter-spacing: 3px;
    color: var(--text-muted);
    margin-top: 6px;
    text-transform: uppercase;
  }

  .login-body {
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .btn-login {
    width: 100%;
    padding: 11px;
    background: linear-gradient(135deg, #ff2d78, #c41050);
    border: none;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fff;
    cursor: pointer;
    transition: all .2s;
    box-shadow: 0 4px 20px #ff2d7844;
  }
  .btn-login:hover { box-shadow: 0 4px 30px #ff2d7877; transform: translateY(-1px); }

  .login-footer {
    padding: 12px 28px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--border);
  }
  .login-footer-text {
    font-family: var(--text-mono);
    font-size: 9px;
    color: var(--text-muted);
    letter-spacing: 1px;
  }

  /* ── TABS ── */
  .tab-bar {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
  }
  .tab {
    font-family: var(--text-mono);
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 9px 16px;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all .15s;
  }
  .tab:hover { color: var(--text-primary); }
  .tab.active { color: var(--accent-pink); border-bottom-color: var(--accent-pink); }

  /* ── ANIMATED GLOW LINE ── */
  .glow-line {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--accent-pink) 20%, var(--accent-cyan) 50%, var(--accent-pink) 80%, transparent 100%);
    background-size: 200% 100%;
    animation: glow-sweep 4s linear infinite;
    opacity: .6;
  }
  @keyframes glow-sweep {
    0%   { background-position: -100% 0; }
    100% { background-position: 200% 0; }
  }

  /* ── PROGRESS RING (pure CSS) ── */
  .ring-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px;
  }
  .ring-val {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--accent-cyan);
    line-height: 1;
  }
  .ring-lbl {
    font-family: var(--text-mono);
    font-size: 8px;
    letter-spacing: 2px;
    color: var(--text-muted);
    text-transform: uppercase;
    text-align: center;
  }

  /* ── RESPONSIVE HELPERS ── */
  .span-2 { grid-column: span 2; }
  .span-3 { grid-column: span 3; }
  .span-4 { grid-column: span 4; }

  /* spacer */
  .mb-10 { margin-bottom: 10px; }
  .mt-auto { margin-top: auto; }

  /* ── CORNER MARKS ── */
  .corner-marks {
    position: absolute;
    inset: -1px;
    pointer-events: none;
  }
  .corner-mark {
    position: absolute;
    width: 8px; height: 8px;
    border-color: var(--accent-pink);
    border-style: solid;
    opacity: .7;
  }
  .corner-mark.tl { top: 0; left: 0;  border-width: 1px 0 0 1px; }
  .corner-mark.tr { top: 0; right: 0; border-width: 1px 1px 0 0; }
  .corner-mark.bl { bottom: 0; left: 0;  border-width: 0 0 1px 1px; }
  .corner-mark.br { bottom: 0; right: 0; border-width: 0 1px 1px 0; }