:root {
      --bg: #070b12;
      --panel: #0e141d;
      --ink: #f4f7fb;
      --muted: #8f9bad;
      --line: #253140;
      --blue: #3488e8;
      --green: #25c47a;
      --amber: #f2b705;
      --red: #ef476f;
      --teal: #35a7e8;
      --nav: #090d14;
      --nav-soft: rgba(239, 47, 143, .12);
      --chip: #121a25;
      --brand-pink: #ef2f8f;
      --brand-orange: #ef2f8f;
      --shadow: none;
    }

    body { background: #070b12 !important; color: var(--ink); }
    body::before, body::after, .shell::before { display: none !important; }
    aside {
      background: #090d14 !important;
      border-right: 1px solid #1b2531 !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
    }
    .brand { border-bottom-color: #1b2531 !important; }
    .brand-mark { background: #ef2f8f !important; box-shadow: none !important; }
    .nav-btn {
      color: #9ca8b8 !important;
      border: 1px solid transparent !important;
      border-radius: 6px !important;
      box-shadow: none !important;
    }
    .nav-btn:hover { background: #111923 !important; color: #f4f7fb !important; }
    .nav-btn.active {
      background: rgba(239, 47, 143, .12) !important;
      border-color: rgba(239, 47, 143, .24) !important;
      color: #ff5eaa !important;
      box-shadow: inset 3px 0 0 #ef2f8f !important;
    }
    .nav-btn.active::after { display: none !important; }

    main { background: #070b12 !important; }
    .topbar {
      background: rgba(7, 11, 18, .97) !important;
      border-bottom: 1px solid #1b2531 !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
    }
    .toolbar { border-color: #1b2531 !important; }
    .control, input, select, textarea {
      background: #0b1119 !important;
      border-color: #293646 !important;
      color: #f4f7fb !important;
      box-shadow: none !important;
    }
    .control:focus, input:focus, select:focus, textarea:focus {
      border-color: #ef2f8f !important;
      outline: none !important;
      box-shadow: 0 0 0 3px rgba(239, 47, 143, .12) !important;
    }

    main .panel, main .card, main .kpi, main .modal,
    .dashboard-command-card, .auth-panel, .loop-filter-drawer {
      background: #0e141d !important;
      border: 1px solid #253140 !important;
      border-radius: 8px !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
    }
    main .panel::before, main .card::before, main .kpi::before,
    main .kpi::after, main .modal::before, .dashboard-command-card::after {
      display: none !important;
    }
    .panel-header, .modal-head, .modal-actions { border-color: #253140 !important; }
    .panel-title, .modal-title { color: #f4f7fb !important; }
    .panel-note, .modal-note { color: #8f9bad !important; }
    .kpi { min-height: 104px !important; padding: 14px !important; }
    .kpi-icon { box-shadow: none !important; }
    .kpi .metric { color: #f4f7fb !important; letter-spacing: 0 !important; }
    .dashboard-command-card { min-height: 86px !important; }

    .action-btn, .icon-btn, .sync-btn, .pending-payable-btn,
    .finance-tab, .parent-period-nav, .parent-period-actions button {
      background: #121a25 !important;
      border-color: #2a3747 !important;
      color: #d7dee8 !important;
      border-radius: 6px !important;
      box-shadow: none !important;
    }
    .action-btn:hover, .icon-btn:hover { border-color: #526176 !important; color: #fff !important; }
    .action-btn.approved, .action-btn.primary, .sync-btn, .primary, .auth-submit {
      background: #ef2f8f !important;
      border-color: #ef2f8f !important;
      color: #fff !important;
      box-shadow: none !important;
    }
    .finance-tabs { background: #090d14 !important; border-color: #1b2531 !important; }
    .finance-tab { background: transparent !important; border: 0 !important; border-bottom: 2px solid transparent !important; }
    .finance-tab.active {
      background: rgba(239, 47, 143, .08) !important;
      border-bottom-color: #ef2f8f !important;
      color: #ff5eaa !important;
    }

    .table-scroll { border-color: #253140 !important; border-radius: 8px !important; }
    table { background: #0b1119 !important; }
    thead tr { background: #121a25 !important; }
    th { color: #aab5c5 !important; border-color: #253140 !important; }
    td { color: #dce3ec !important; border-color: #1d2835 !important; }
    tbody tr:hover { background: #111923 !important; }

    .modal-backdrop { background: rgba(0, 0, 0, .72) !important; backdrop-filter: blur(3px); }
    .modal { max-width: min(720px, calc(100vw - 32px)) !important; }
    .loop-entry-modal { max-width: min(640px, calc(100vw - 32px)) !important; }
    .loop-filter-backdrop { background: rgba(0, 0, 0, .66) !important; }
    .loop-filter-drawer { background: #0e141d !important; border-left-color: #253140 !important; }
    .auth-gate { background: rgba(7, 11, 18, .96) !important; }
    .auth-logo { background: #ef2f8f !important; box-shadow: none !important; }

    @media (max-width: 760px) {
      main .panel, main .card, main .kpi, main .modal, .dashboard-command-card { border-radius: 7px !important; }
      .modal, .loop-entry-modal { max-width: calc(100vw - 20px) !important; }
      .kpi { min-height: 94px !important; }
    }

    /* Fusion parent visual system v2 */
    :root {
      --bg:#080d12; --panel:#10171e; --ink:#f4f6f8; --muted:#9ba5ae;
      --line:#26313b; --nav:#070b0f; --nav-soft:rgba(240,43,120,.08);
      --brand-pink:#f02b78; --brand-orange:#f02b78; --chip:#121b23;
    }
    body { font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif !important; background:#080d12 !important; }
    aside { width:240px !important; padding:0 10px 12px !important; background:#070b0f !important; }
    .brand { min-height:88px !important; padding:0 24px !important; }
    .brand-mark { background:transparent !important; border:1px solid #f02b78 !important; color:#ff4389 !important; border-radius:7px !important; }
    .nav-btn { min-height:54px !important; padding:0 18px !important; border:0 !important; border-left:2px solid transparent !important; border-radius:0 !important; font-size:14px !important; font-weight:500 !important; }
    .nav-btn:hover { background:#0d141a !important; }
    .nav-btn.active { background:linear-gradient(90deg,rgba(240,43,120,.08),transparent 80%) !important; border:0 !important; border-left:2px solid #f02b78 !important; color:#ff3f89 !important; box-shadow:none !important; }
    main { background:#080d12 !important; }
    .topbar { min-height:88px !important; padding:0 28px !important; background:rgba(8,13,18,.96) !important; }
    .toolbar { min-height:64px !important; padding:10px 0 !important; }
    .control, input, select, textarea { background:#0b1117 !important; border-color:#26313b !important; border-radius:6px !important; }
    main .panel, main .card, main .kpi, main .modal, .dashboard-command-card, .auth-panel, .loop-filter-drawer {
      background:linear-gradient(135deg,#10171e,#0e151b) !important;
      border-color:#26313b !important;
    }
    .kpi { min-height:98px !important; padding:18px 20px !important; }
    .kpi-icon { width:46px !important; height:46px !important; border-radius:50% !important; }
    .kpi .name { font-size:12px !important; letter-spacing:0 !important; text-transform:none !important; }
    .kpi .metric { font-size:24px !important; letter-spacing:0 !important; }
    .panel-header { min-height:54px !important; padding:0 18px !important; }
    .panel-title { font-size:15px !important; font-weight:600 !important; }
    .action-btn, .icon-btn, .sync-btn, .pending-payable-btn, .finance-tab { border-radius:6px !important; font-weight:550 !important; }
    .action-btn.approved, .action-btn.primary, .sync-btn, .primary, .auth-submit { background:linear-gradient(90deg,#ed286e,#b728a5) !important; border-color:#e62d78 !important; }
    .finance-tabs { min-height:58px !important; background:#080d12 !important; }
    .finance-tab { min-width:150px !important; font-size:14px !important; }
    .finance-tab.active { background:transparent !important; border-bottom:3px solid #f02b78 !important; color:#ff4389 !important; }
    .table-scroll { background:#10171e !important; }
    table { background:#10171e !important; }
    thead tr { background:#121b23 !important; }
    th { height:48px !important; font-size:11px !important; font-weight:600 !important; }
    td { height:58px !important; font-size:13px !important; }
    tbody tr:hover { background:#15202a !important; }
    .modal { border-radius:8px !important; background:#10171e !important; }
    .loop-entry-modal { max-width:min(640px,calc(100vw - 32px)) !important; }
    .loop-filter-drawer { width:min(390px,100vw) !important; background:#10171e !important; }
    @media (max-width:1100px) { aside { width:72px !important; } .brand { padding:0 !important; justify-content:center !important; } }
    @media (max-width:760px) { .topbar { min-height:68px !important; padding:0 12px !important; } .kpi { min-height:90px !important; } .finance-tab { min-width:0 !important; flex:1 !important; } }

    /* Final SaaS sidebar polish */
    .shell {
      grid-template-columns: 214px minmax(0, 1fr) !important;
    }
    .shell.sidebar-expanded {
      grid-template-columns: 214px minmax(0, 1fr) !important;
    }
    .shell.sidebar-collapsed {
      grid-template-columns: 68px minmax(0, 1fr) !important;
    }
    aside {
      width: 214px !important;
      padding: 0 10px 18px !important;
      background: #070b0f !important;
      border-right: 1px solid rgba(145, 162, 197, .14) !important;
      box-shadow: 10px 0 28px rgba(0, 0, 0, .22) !important;
    }
    .brand {
      min-height: 74px !important;
      height: 74px !important;
      padding: 0 14px !important;
      gap: 10px !important;
      border-bottom: 1px solid rgba(145, 162, 197, .12) !important;
    }
    .brand-mark {
      width: 34px !important;
      height: 34px !important;
      border-radius: 7px !important;
      box-shadow: none !important;
    }
    .brand-text strong {
      font-size: 20px !important;
      letter-spacing: -.03em !important;
    }
    .brand-text span {
      font-size: 11px !important;
    }
    .nav-title {
      margin: 8px 10px 6px !important;
      font-size: 10px !important;
      letter-spacing: .08em !important;
      color: #7f8997 !important;
    }
    .nav {
      display: grid !important;
      gap: 3px !important;
      padding: 4px 0 !important;
    }
    .nav-btn {
      position: relative !important;
      min-height: 44px !important;
      height: 44px !important;
      padding: 0 12px !important;
      display: grid !important;
      grid-template-columns: 24px minmax(0, 1fr) !important;
      align-items: center !important;
      gap: 10px !important;
      border: 1px solid transparent !important;
      border-radius: 7px !important;
      border-left: 1px solid transparent !important;
      background: transparent !important;
      color: #aeb6c7 !important;
      font-size: 13px !important;
      font-weight: 600 !important;
      letter-spacing: 0 !important;
      box-shadow: none !important;
    }
    .nav-btn:hover {
      background: rgba(255, 255, 255, .035) !important;
      border-color: rgba(145, 162, 197, .10) !important;
      color: #f3f6ff !important;
    }
    .nav-btn.active {
      background: linear-gradient(90deg, rgba(240, 43, 120, .13), rgba(240, 43, 120, .035) 78%, transparent) !important;
      border-color: rgba(240, 43, 120, .22) !important;
      color: #ff5f9f !important;
      box-shadow: none !important;
    }
    .nav-btn.active::after {
      content: "" !important;
      position: absolute !important;
      left: 0 !important;
      top: 9px !important;
      bottom: 9px !important;
      width: 2px !important;
      border-radius: 999px !important;
      background: #f02b78 !important;
      display: block !important;
    }
    .nav-icon {
      width: 22px !important;
      height: 22px !important;
      display: grid !important;
      place-items: center !important;
      color: inherit !important;
      font-size: 16px !important;
      filter: none !important;
    }
    .nav-icon svg {
      width: 17px !important;
      height: 17px !important;
      stroke-width: 1.8 !important;
    }
    .nav-label {
      min-width: 0 !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
    }
    .sidebar-toggle {
      width: 26px !important;
      height: 26px !important;
      right: -13px !important;
      top: 20px !important;
      border-radius: 7px !important;
      font-size: 18px !important;
      box-shadow: none !important;
    }
    .shell.sidebar-collapsed aside {
      width: 68px !important;
      padding: 0 7px 14px !important;
    }
    .shell.sidebar-collapsed .brand {
      min-height: 68px !important;
      height: 68px !important;
      padding: 0 !important;
      justify-content: center !important;
    }
    .shell.sidebar-collapsed .nav {
      padding: 6px 0 !important;
    }
    .shell.sidebar-collapsed .nav-btn {
      grid-template-columns: 1fr !important;
      justify-items: center !important;
      min-height: 44px !important;
      height: 44px !important;
      padding: 0 !important;
    }
    .shell.sidebar-collapsed .nav-btn.active::after {
      left: 6px !important;
      top: 12px !important;
      bottom: 12px !important;
    }