:root {
      --bg: #070a1b;
      --panel: #12172d;
      --ink: #f8f9ff;
      --muted: #a6afc8;
      --line: #28304d;
      --blue: #8b5cf6;
      --green: #35e5a1;
      --amber: #ff8a3d;
      --red: #ff5b7c;
      --teal: #23d7ff;
      --nav: #050716;
      --nav-soft: #161b34;
      --chip: #1d2442;
      --brand-pink: #ff4fd8;
      --brand-orange: #ff8a3d;
      --card-radius: 8px;
      --shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--ink);
      background: #000;
      letter-spacing: 0;
      min-height: 100vh;
      overflow-x: hidden;
    }

    body::before,
    body::after {
      content: "";
      position: fixed;
      inset: -18%;
      pointer-events: none;
      z-index: -2;
    }

    body::before {
      background:
        radial-gradient(circle at 10% 16%, rgba(255,255,255,1) 0 1px, transparent 3px),
        radial-gradient(circle at 34% 12%, rgba(59, 130, 246, 1) 0 2px, transparent 5px),
        radial-gradient(circle at 58% 20%, rgba(34, 211, 238, .95) 0 2px, transparent 6px),
        radial-gradient(circle at 78% 10%, rgba(99, 102, 241, .92) 0 1px, transparent 5px),
        radial-gradient(circle at 18% 72%, rgba(139, 92, 246, .92) 0 2px, transparent 6px),
        radial-gradient(circle at 48% 82%, rgba(255,255,255,.98) 0 2px, transparent 6px),
        radial-gradient(circle at 86% 62%, rgba(59, 130, 246, .92) 0 2px, transparent 6px);
      background-size: 310px 310px, 430px 430px, 520px 520px, 380px 380px, 470px 470px, 610px 610px, 540px 540px;
      opacity: .92;
      animation: starDrift 52s linear infinite;
    }

    body::after {
      background:
        radial-gradient(ellipse at 42% 26%, rgba(14, 165, 233, .18), transparent 28%),
        radial-gradient(ellipse at 30% 80%, rgba(99, 102, 241, .22), transparent 30%),
        radial-gradient(ellipse at 60% 72%, rgba(139, 92, 246, .14), transparent 24%),
        linear-gradient(180deg, rgba(0,0,0,.82), rgba(0,0,0,.96));
      filter: saturate(1.25);
      animation: universePulse 22s ease-in-out infinite alternate;
    }

    @keyframes starDrift {
      from { transform: translate3d(0, 0, 0) rotate(0deg); }
      to { transform: translate3d(-42px, 28px, 0) rotate(.8deg); }
    }

    @keyframes universePulse {
      from { transform: scale(1); opacity: .92; }
      to { transform: scale(1.04); opacity: 1; }
    }

    @keyframes dustFloat {
      from { transform: translate3d(0, 0, 0); }
      to { transform: translate3d(34px, -46px, 0); }
    }

    @keyframes floatPanel {
      from { transform: translateY(0); }
      to { transform: translateY(-4px); }
    }

    .shell {
      display: grid;
      grid-template-columns: 248px minmax(0, 1fr);
      min-height: 100vh;
      position: relative;
      z-index: 1;
      transition: grid-template-columns .22s ease;
    }

    .shell.sidebar-collapsed { grid-template-columns: 72px minmax(0, 1fr); }

    .shell::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: -1;
      background:
        radial-gradient(circle at 30% 24%, rgba(96, 165, 250, .96) 0 1px, transparent 3px),
        radial-gradient(circle at 54% 36%, rgba(255,255,255,.86) 0 1px, transparent 3px),
        radial-gradient(circle at 66% 20%, rgba(34, 211, 238, .82) 0 1px, transparent 4px),
        radial-gradient(circle at 82% 60%, rgba(255,255,255,.70) 0 1px, transparent 3px),
        radial-gradient(circle at 44% 76%, rgba(167, 139, 250, .82) 0 1px, transparent 4px);
      background-size: 420px 420px, 330px 330px, 510px 510px, 280px 280px, 460px 460px;
      opacity: .72;
      animation: dustFloat 60s linear infinite;
    }

    aside {
      background:
        radial-gradient(circle at 78% 14%, rgba(255, 138, 61, 0.18), transparent 24%),
        radial-gradient(circle at 25% 20%, rgba(255, 79, 216, 0.22), transparent 28%),
        rgba(2, 3, 12, 0.88);
      color: #f8fafc;
      padding: 18px 14px;
      position: sticky;
      top: 0;
      height: 100vh;
      border-right: 1px solid rgba(255,255,255,.08);
      backdrop-filter: blur(16px);
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 8px 18px;
      border-bottom: 1px solid rgba(255,255,255,0.1);
      margin-bottom: 16px;
    }

    .brand-text {
      min-width: 0;
      transition: opacity .18s ease;
    }

    .brand-mark {
      width: 42px;
      height: 42px;
      border-radius: 7px;
      background: linear-gradient(135deg, var(--brand-pink), var(--brand-orange));
      color: #fff;
      display: grid;
      place-items: center;
      font-weight: 800;
      font-size: 13px;
      box-shadow: 0 0 22px rgba(255, 79, 216, 0.35);
      overflow: hidden;
    }

    .brand-mark img { width: 100%; height: 100%; object-fit: cover; display: none; }
    .brand-mark.has-logo span { display: none; }
    .brand-mark.has-logo img { display: block; }

    .brand strong { display: block; font-size: 14px; }
    .brand span { display: block; color: #b9c3d6; font-size: 12px; margin-top: 2px; }

    .shell.sidebar-collapsed aside { padding: 12px 8px; }
    .shell.sidebar-collapsed .brand { justify-content: center; padding: 8px 4px 14px; }
    .shell.sidebar-collapsed .brand-text,
    .shell.sidebar-collapsed .nav-title,
    .shell.sidebar-collapsed .nav-label { display: none; }
    .shell.sidebar-collapsed .nav-btn { justify-content: center; }
    .sidebar-toggle { position:absolute; right:-15px; top:22px; width:30px; height:30px; padding:0; border:1px solid var(--line); border-radius:50%; background:#17171c; color:#fff; font-size:22px; z-index:4; }
    .shell.sidebar-expanded .sidebar-toggle { transform:rotate(180deg); }
    main { background:radial-gradient(circle at 50% 100%,rgba(183,16,204,.18),transparent 34%),radial-gradient(circle at 75% 7%,rgba(90,25,255,.13),transparent 29%),#06081d; }
    main .panel, main .card, main .kpi, main .modal { background:linear-gradient(145deg,rgba(16,18,55,.94),rgba(8,10,33,.96)); border-color:rgba(134,49,255,.48); box-shadow:0 0 0 1px rgba(255,48,201,.1),0 18px 48px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.06); backdrop-filter:blur(14px); }
    main .action-btn.approved, main .sync-btn, main .primary { background:linear-gradient(100deg,#b928d3,#ee38b5 55%,#ff8148); color:#fff; border-color:#ef47c5; box-shadow:0 10px 28px rgba(228,54,190,.22); }
    aside { background:linear-gradient(180deg,#0c0d30,#07081e); border-right-color:rgba(134,49,255,.3); }

    .nav-title {
      color: #9aa7bd;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      padding: 12px 8px 7px;
    }

    .nav-btn {
      width: 100%;
      min-height: 38px;
      border: 0;
      background: transparent;
      color: #dbe5f5;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 10px;
      border-radius: 7px;
      text-align: left;
      cursor: pointer;
      font-size: 14px;
      font-weight: 600;
    }

    .nav-btn:hover, .nav-btn.active { background: var(--nav-soft); color: #fff; box-shadow: inset 3px 0 0 var(--brand-pink); }
    .nav-icon { width: 20px; text-align: center; color: var(--brand-pink); }
    .nav-icon svg { width: 18px; height: 18px; display: block; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

    main {
      min-width: 0;
      padding: 22px 24px 34px;
    }

    body.compact main { padding: 14px 18px 24px; }
    body.compact .kpi { min-height: 96px; padding: 10px; }
    body.compact .panel-header, body.compact .panel-body { padding: 10px 12px; }
    body.no-glow { background: var(--bg); }
    body.no-glow::before, body.no-glow::after, body.no-glow .shell::before { display: none; }
    body.no-glow .brand-mark, body.no-glow .kpi, body.no-glow .panel { box-shadow: none; }

    body.auth-locked { overflow: hidden; }
    body.auth-locked .shell { visibility: hidden; }

    .auth-gate {
      position: fixed;
      inset: 0;
      z-index: 1000;
      display: grid;
      place-items: center;
      padding: 20px;
      background:
        radial-gradient(circle at 22% 18%, rgba(255, 0, 170, .16), transparent 34%),
        radial-gradient(circle at 78% 72%, rgba(40, 190, 255, .13), transparent 32%),
        rgba(0, 0, 5, .94);
      backdrop-filter: blur(16px);
    }

    .auth-gate[hidden] { display: none; }

    .auth-panel {
      width: min(420px, 100%);
      padding: 28px;
      border: 1px solid rgba(255, 255, 255, .16);
      border-radius: 8px;
      background: rgba(14, 15, 24, .94);
      box-shadow: 0 24px 80px rgba(0, 0, 0, .62), 0 0 36px rgba(255, 0, 170, .10);
    }

    .auth-brand {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 24px;
    }

    .auth-logo {
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(255, 0, 170, .55);
      border-radius: 50%;
      color: #fff;
      font-weight: 900;
      background: linear-gradient(135deg, rgba(255, 0, 170, .76), rgba(50, 145, 255, .70));
      box-shadow: 0 0 24px rgba(255, 0, 170, .28);
    }

    .auth-brand strong { display: block; font-size: 19px; }
    .auth-brand span { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
    .auth-panel h2 { margin: 0 0 7px; font-size: 22px; }
    .auth-copy { margin: 0 0 22px; color: var(--muted); font-size: 13px; line-height: 1.5; }
    .auth-form { display: grid; gap: 14px; }
    .auth-field { display: grid; gap: 7px; color: #dfe6f4; font-size: 12px; font-weight: 800; }
    .auth-field input {
      width: 100%;
      min-height: 44px;
      border: 1px solid rgba(255, 255, 255, .15);
      border-radius: 7px;
      padding: 0 13px;
      background: rgba(255, 255, 255, .045);
      color: #fff;
      font: inherit;
      outline: none;
    }
    .auth-field input:focus { border-color: var(--brand-pink); box-shadow: 0 0 0 3px rgba(255, 0, 170, .12); }
    .auth-submit {
      min-height: 44px;
      border: 0;
      border-radius: 7px;
      margin-top: 4px;
      background: linear-gradient(90deg, var(--brand-pink), #ff4a75);
      color: #fff;
      font-weight: 900;
      cursor: pointer;
    }
    .auth-error { min-height: 18px; margin: 0; color: #ff6b72; font-size: 12px; font-weight: 750; }
    .logout-btn { color: #ff8d96; }

    .topbar {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 18px;
      margin-bottom: 18px;
    }

    h1 {
      margin: 0;
      font-size: 24px;
      line-height: 1.2;
      font-weight: 800;
    }

    .subtitle {
      margin: 5px 0 0;
      color: var(--muted);
      font-size: 13px;
    }

    .toolbar {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    .period-quick { display:flex; gap:12px; padding:0; }
    .period-quick .seg { min-height:52px; padding:0 24px; border:1px solid #36363b; border-radius:14px; background:#121215; color:#b9b9c0; font-size:16px; display:grid; place-items:center; }
    .period-quick .seg.active { color:#fff; border-color:#ff35cb; background:linear-gradient(135deg,#ff1ec8,#e902a9); box-shadow:none; }

    .pending-payable-btn {
      min-height: 38px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 1px solid rgba(255, 184, 0, .48);
      border-radius: 8px;
      padding: 0 13px;
      background: rgba(255, 184, 0, .10);
      color: #ffbe19;
      font-size: 13px;
      font-weight: 850;
      cursor: pointer;
      white-space: nowrap;
      box-shadow: 0 0 22px rgba(255, 184, 0, .08);
    }

    .pending-payable-btn:hover {
      border-color: #ffbe19;
      background: rgba(255, 184, 0, .16);
      box-shadow: 0 0 26px rgba(255, 184, 0, .16);
    }

    .pending-payable-btn svg {
      width: 19px;
      height: 19px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .sync-btn {
      min-height: 38px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 1px solid rgba(53, 229, 161, .42);
      border-radius: 7px;
      padding: 0 12px;
      background: rgba(53, 229, 161, .09);
      color: var(--green);
      font-size: 12px;
      font-weight: 850;
      cursor: pointer;
      white-space: nowrap;
    }
    .sync-btn:hover { background: rgba(53, 229, 161, .15); border-color: var(--green); }
    .sync-btn:disabled { opacity: .58; cursor: wait; }
    .sync-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
    .sync-btn.blocked { color: var(--amber); border-color: rgba(255, 184, 0, .42); background: rgba(255, 184, 0, .08); }
    .local-server-warning {
      display: none;
      margin: 0 0 14px;
      padding: 14px 16px;
      border: 1px solid rgba(255, 184, 0, .45);
      border-radius: 8px;
      background: rgba(255, 184, 0, .1);
      color: var(--ink);
      font-weight: 800;
    }
    .local-server-warning code {
      display: block;
      margin-top: 8px;
      padding: 10px 12px;
      border-radius: 8px;
      background: rgba(0, 0, 0, .42);
      color: var(--green);
      white-space: normal;
      word-break: break-word;
      font-size: 12px;
    }
    body.file-mode .local-server-warning { display: block; }

    .control, .icon-btn {
      border: 1px solid var(--line);
      background: rgba(18, 23, 45, 0.78);
      color: var(--ink);
      border-radius: 7px;
      min-height: 36px;
      padding: 0 10px;
      font-size: 13px;
      font-weight: 650;
    }

    .clickable-row { cursor: pointer; }
    .clickable-row:hover { background: rgba(255,255,255,.045); }

    .icon-btn {
      min-width: 38px;
      display: inline-grid;
      place-items: center;
      cursor: pointer;
    }

    .action-btn {
      border: 1px solid var(--line);
      background: rgba(18, 23, 45, 0.78);
      color: var(--ink);
      border-radius: 7px;
      min-height: 32px;
      padding: 0 10px;
      font-size: 12px;
      font-weight: 750;
      cursor: pointer;
      white-space: nowrap;
    }

    .action-btn:hover { border-color: var(--brand-pink); color: var(--brand-pink); }
    .action-btn.approved { background: rgba(53, 229, 161, 0.12); border-color: rgba(53, 229, 161, 0.45); color: var(--green); }
    .movement-table .action-btn.approved,
    [data-approve-id].approved {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 64px;
      min-height: 22px;
      padding: 0 8px;
      border-radius: 999px;
      border: 1px solid rgba(31, 235, 145, .42);
      background: rgba(21, 82, 58, .26);
      color: #50e6a4;
      font-size: 11px;
      font-weight: 800;
      line-height: 1;
      box-shadow: none;
    }

    .movement-approved-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 64px;
      min-height: 22px;
      padding: 0 8px;
      border-radius: 999px;
      border: 1px solid rgba(31, 235, 145, .42);
      background: rgba(21, 82, 58, .26);
      color: #50e6a4;
      font-size: 11px;
      font-weight: 800;
      line-height: 1;
      cursor: default;
      user-select: none;
    }

    .movement-status-action {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 68px;
      min-height: 24px;
      padding: 0 9px;
      border-radius: 999px;
      border: 1px solid transparent;
      font-size: 11px;
      font-weight: 850;
      line-height: 1;
      cursor: pointer;
      white-space: nowrap;
    }

    .movement-status-action.pending {
      border-color: rgba(255, 184, 77, .42);
      background: rgba(118, 71, 18, .25);
      color: #ffc46b;
    }

    .movement-status-action.approved {
      border-color: rgba(31, 235, 145, .42);
      background: rgba(21, 82, 58, .26);
      color: #50e6a4;
    }

    .movement-status-action:hover {
      filter: brightness(1.12);
    }

    .modal-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(23, 32, 51, 0.42);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 18px;
      z-index: 30;
    }

    .modal-backdrop.open { display: flex; }

    .modal {
      width: min(620px, 100%);
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 8px;
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .modal-head, .modal-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 16px;
      border-bottom: 1px solid var(--line);
    }

    .modal-actions { border-top: 1px solid var(--line); border-bottom: 0; justify-content: flex-end; }
    .modal-title { font-size: 18px; font-weight: 850; }
    .modal-note { color: var(--muted); font-size: 13px; margin-top: 3px; }

    .payment-description-btn {
      display: inline-grid;
      gap: 3px;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--ink);
      text-align: left;
      cursor: pointer;
      font: inherit;
    }

    .payment-description-btn strong {
      color: var(--ink);
      font-size: 13px;
      font-weight: 850;
    }

    .payment-description-btn:hover strong { color: var(--brand-pink); }

    .payment-items-list {
      display: grid;
      gap: 10px;
    }

    .payment-item-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 14px;
      align-items: center;
      padding: 12px 14px;
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 8px;
      background: rgba(18,23,45,.66);
    }

    .payment-item-row strong {
      display: block;
      color: var(--ink);
      font-size: 14px;
    }

    .payment-item-row small {
      display: block;
      margin-top: 4px;
      color: var(--muted);
      font-size: 12px;
    }

    .payment-item-row b {
      color: var(--green);
      font-size: 14px;
      white-space: nowrap;
    }

    #manualEntryModal {
      background: rgba(0, 0, 0, .78);
      backdrop-filter: blur(2px);
    }

    .loop-entry-modal {
      width: min(620px, calc(100vw - 36px));
      max-height: calc(100vh - 36px);
      overflow: auto;
      border: 1px solid #343434;
      border-radius: 16px;
      background: #151515;
      box-shadow: 0 24px 80px rgba(0, 0, 0, .62);
    }

    .loop-entry-modal .modal-head {
      padding: 24px 32px 12px;
      border-bottom: 0;
      align-items: flex-start;
    }

    .loop-entry-modal .modal-title {
      font-size: clamp(22px, 2.2vw, 26px);
      line-height: 1.12;
      letter-spacing: -.02em;
      font-weight: 850;
    }

    .loop-entry-close {
      border: 0;
      background: transparent;
      color: #b8b8bd;
      min-width: 36px;
      min-height: 36px;
      padding: 0;
      font-size: 34px;
      line-height: 1;
      font-weight: 300;
      cursor: pointer;
    }

    .loop-entry-close:hover { color: #fff; }

    .manual-entry-form {
      display: grid;
      gap: 16px;
      padding: 8px 32px 14px;
    }

    .manual-entry-row {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
    }

    .manual-entry-field {
      display: grid;
      gap: 8px;
    }

    .manual-entry-field > span {
      color: #f7f7fa;
      font-size: 15px;
      line-height: 1.25;
      font-weight: 800;
    }

    .manual-entry-control {
      width: 100%;
      min-height: 46px;
      border: 1px solid #353535;
      border-radius: 10px;
      background: #1d1d1d;
      color: #f7f7fa;
      padding: 0 16px;
      font: inherit;
      font-size: 15px;
      outline: none;
      transition: border-color .18s ease, box-shadow .18s ease;
      color-scheme: dark;
    }

    .manual-entry-control::placeholder { color: #a8a8b1; opacity: 1; }
    .manual-entry-control:focus {
      border-color: var(--brand-pink);
      box-shadow: 0 0 0 3px rgba(255, 79, 216, .14);
    }

    select.manual-entry-control {
      appearance: auto;
      color: #b4b4bd;
    }

    select.manual-entry-control:valid { color: #f7f7fa; }

    .loop-entry-modal .modal-actions {
      padding: 12px 32px 24px;
      border: 0;
      gap: 12px;
    }

    .loop-entry-modal .modal-actions .action-btn {
      min-height: 46px;
      border-radius: 10px;
      padding: 0 22px;
      font-size: 15px;
      font-weight: 800;
    }

    .loop-entry-modal .modal-actions .approved {
      min-width: 190px;
      border-color: var(--brand-pink);
      background: var(--brand-pink);
      color: #fff;
    }

    .loop-entry-modal .modal-actions .approved:hover {
      filter: brightness(1.06);
      color: #fff;
    }

    @media (max-width: 700px) {
      .loop-entry-modal .modal-head { padding: 26px 24px 12px; }
      .manual-entry-form { padding: 10px 24px 18px; gap: 22px; }
      .manual-entry-row { grid-template-columns: 1fr; gap: 22px; }
      .manual-entry-field > span { font-size: 18px; }
      .manual-entry-control { min-height: 60px; padding: 0 18px; font-size: 18px; }
      .loop-entry-modal .modal-actions { padding: 12px 24px 26px; }
      .loop-entry-modal .modal-actions .action-btn { min-height: 54px; padding: 0 22px; font-size: 17px; }
      .loop-entry-modal .modal-actions .approved { min-width: 0; }
    }

    .reseller-list { padding: 8px 16px 4px; max-height: 360px; overflow: auto; }
    .reseller-item {
      display: grid;
      grid-template-columns: 28px minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      min-height: 58px;
      border-bottom: 1px solid var(--line);
    }
    .reseller-item:last-child { border-bottom: 0; }
    .reseller-name { font-weight: 800; }
    .reseller-meta { color: var(--muted); font-size: 12px; margin-top: 2px; }

    .setting-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(160px, 240px);
      gap: 12px;
      align-items: center;
      border: 1px solid var(--line);
      border-radius: var(--card-radius);
      padding: 12px;
      background: rgba(255,255,255,.03);
    }

    .setting-row strong { display: block; font-size: 13px; }
    .setting-row small { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; line-height: 1.35; }

    .switch-control {
      position: relative;
      width: 48px;
      height: 26px;
      justify-self: end;
    }

    .switch-control input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    .switch-control span {
      position: absolute;
      inset: 0;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255,255,255,.08);
      cursor: pointer;
      transition: .2s ease;
    }

    .switch-control span::after {
      content: "";
      position: absolute;
      width: 18px;
      height: 18px;
      top: 3px;
      left: 3px;
      border-radius: 50%;
      background: var(--muted);
      transition: .2s ease;
    }

    .switch-control input:checked + span {
      border-color: rgba(255,79,216,.65);
      background: rgba(255,79,216,.22);
      box-shadow: 0 0 18px rgba(255,79,216,.14);
    }

    .switch-control input:checked + span::after {
      transform: translateX(22px);
      background: var(--brand-pink);
    }

    .settings-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .reseller-access-layout {
      display: grid;
      grid-template-columns: minmax(320px, .78fr) minmax(0, 1.35fr);
      gap: 14px;
      align-items: start;
    }

    .reseller-access-form {
      display: grid;
      gap: 13px;
    }

    .form-control-group {
      display: grid;
      gap: 7px;
    }

    .form-control-group > span {
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
    }

    .reseller-access-form .control {
      width: 100%;
      min-height: 42px;
    }

    .reseller-form-actions {
      display: flex;
      justify-content: flex-end;
      padding-top: 2px;
    }

    .reseller-form-actions .action-btn {
      min-height: 40px;
      padding: 0 15px;
    }

    .registration-status {
      min-height: 18px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
    }

    .registration-status.success { color: var(--green); }
    .registration-status.error { color: var(--red); }

    .reseller-access-user {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .reseller-access-avatar {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      border-radius: 8px;
      background: rgba(255,79,216,.12);
      color: var(--brand-pink);
      font-size: 13px;
      font-weight: 850;
      text-transform: uppercase;
    }

    .reseller-access-user strong,
    .reseller-access-user small {
      display: block;
    }

    .reseller-access-user small {
      margin-top: 3px;
      color: var(--muted);
      font-size: 11px;
    }

    .reseller-access-table .action-btn {
      min-width: 82px;
    }

    .reseller-access-actions {
      display: flex;
      align-items: center;
      gap: 7px;
      white-space: nowrap;
    }

    .reseller-access-actions .action-btn.primary {
      border-color: rgba(255,79,216,.5);
      background: rgba(255,79,216,.12);
      color: var(--brand-pink);
    }

    .color-field {
      display: grid;
      gap: 8px;
      border: 1px solid var(--line);
      border-radius: var(--card-radius);
      padding: 12px;
      background: rgba(255,255,255,.03);
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
    }

    .color-field input {
      width: 100%;
      height: 36px;
      border: 0;
      background: transparent;
      padding: 0;
      cursor: pointer;
    }

    .status-strip {
      display: grid;
      grid-template-columns: 1.3fr repeat(4, 1fr);
      gap: 10px;
      margin-bottom: 14px;
    }

    .source-card {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 12px;
      box-shadow: var(--shadow);
      min-height: 72px;
    }

    .source-card .label {
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }

    .source-card .value {
      margin-top: 6px;
      font-size: 16px;
      font-weight: 800;
    }

    .health {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 5px 8px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 750;
      margin-top: 7px;
    }

    .health.ok { background: #e7f7ee; color: var(--green); }
    .health.warn { background: #fff4dc; color: var(--amber); }
    .health.bad { background: #ffe8e6; color: var(--red); }
    .dot { width: 8px; height: 8px; border-radius: 99px; background: currentColor; }

    .kpi-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 12px;
      margin: 14px 0;
    }

    .dashboard-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .kpi {
      background: rgba(18, 23, 45, 0.64);
      border: 1px solid rgba(255,255,255,.12);
      border-radius: var(--card-radius);
      padding: 13px;
      min-height: 114px;
      box-shadow: 0 20px 48px rgba(0,0,0,.28), 0 0 28px rgba(255,79,216,.05);
      backdrop-filter: blur(14px);
      animation: floatPanel 7.8s ease-in-out infinite alternate;
    }

    .kpi[data-move-filter] { cursor: pointer; }
    .kpi[data-move-filter].active {
      border-color: rgba(255, 79, 216, .62);
      box-shadow: 0 0 0 1px rgba(255, 79, 216, .22), 0 20px 54px rgba(255, 79, 216, .16);
      background: rgba(24, 17, 46, .86);
    }

    .kpi:nth-child(2n) { animation-delay: .45s; }
    .kpi:nth-child(3n) { animation-delay: .9s; }

    .kpi-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 8px;
    }

    .kpi-icon {
      width: 34px;
      height: 34px;
      border-radius: 8px;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      font-size: 18px;
      font-weight: 850;
      background: rgba(255, 79, 216, 0.12);
      color: var(--brand-pink);
    }

    .kpi-icon.green { background: rgba(53, 229, 161, 0.12); color: var(--green); }
    .kpi-icon.amber { background: rgba(255, 138, 61, 0.14); color: var(--amber); }
    .kpi-icon.teal { background: rgba(35, 215, 255, 0.12); color: var(--teal); }
    .kpi-icon.red { background: rgba(255, 91, 124, 0.14); color: var(--red); }
    .kpi-icon.gold { background: rgba(255, 204, 77, 0.16); color: #ffcc4d; }
    .kpi-icon.blue { background: rgba(96, 165, 250, 0.14); color: #60a5fa; }
    .kpi-icon.purple { background: rgba(168, 85, 247, 0.14); color: #a855f7; }
    .kpi-icon svg { width: 19px; height: 19px; display: block; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

    #funil .kpi-icon {
      width: 42px;
      height: 42px;
      background-image: linear-gradient(145deg, rgba(255,255,255,.07), transparent);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.035);
    }

    #funil .kpi-icon svg {
      width: 23px;
      height: 23px;
      stroke-width: 1.9;
    }

    .kpi .name {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.3;
      font-weight: 750;
    }

    .kpi .metric {
      margin-top: 9px;
      font-size: 25px;
      line-height: 1;
      font-weight: 850;
    }

    .kpi .delta {
      margin-top: 10px;
      font-size: 12px;
      color: var(--muted);
      line-height: 1.35;
    }

    .section-actions {
      display: flex;
      justify-content: flex-end;
      margin: 0 0 10px;
    }

    .good { color: var(--green); }
    .bad { color: var(--red); }
    .warn { color: var(--amber); }
    .blue { color: var(--blue); }

    .grid {
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.9fr);
      gap: 14px;
      align-items: start;
    }

    .panel {
      background: rgba(18, 23, 45, 0.66);
      border: 1px solid rgba(255,255,255,.12);
      border-radius: var(--card-radius);
      box-shadow: 0 20px 52px rgba(0,0,0,.30), 0 0 34px rgba(255,138,61,.04);
      min-width: 0;
      overflow: hidden;
      backdrop-filter: blur(14px);
      animation: floatPanel 8.6s ease-in-out infinite alternate;
    }

    .panel-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 14px 15px 10px;
      border-bottom: 1px solid var(--line);
    }

    .view-reseller-filter label {
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 750;
    }

    .view-reseller-filter .control { min-width: 190px; }

    .panel-title {
      font-size: 15px;
      font-weight: 800;
    }

    .panel-note {
      color: var(--muted);
      font-size: 12px;
      margin-top: 3px;
    }

    .panel-body { padding: 14px 15px; }

    #operacao .dashboard-surface {
      background: transparent;
      border: 0;
      box-shadow: none;
      overflow: visible;
      backdrop-filter: none;
      animation: none;
    }

    #operacao .dashboard-surface .panel-header {
      padding: 0 0 4px;
      border-bottom: 0;
    }

    #operacao .dashboard-surface .dashboard-grid {
      margin: 16px 0 0;
    }

    #operacao .dashboard-surface .kpi,
    #operacao .top-plan-panel {
      background: rgba(18, 23, 45, 0.72);
      box-shadow: 0 24px 58px rgba(0,0,0,.42), 0 0 34px rgba(255,79,216,.08);
    }

    #operacao .dashboard-grid {
      grid-template-columns: repeat(20, minmax(0, 1fr));
      gap: 14px;
    }

    #operacao .dashboard-grid .kpi {
      grid-column: span 5;
      min-height: 128px;
      display: grid;
      grid-template-columns: 56px minmax(0, 1fr);
      grid-template-rows: auto auto;
      column-gap: 20px;
      align-content: center;
      border-top: 3px solid rgba(255,79,216,.75);
      padding: 28px;
      animation: none;
    }

    #operacao .dashboard-grid .kpi:nth-child(n+5) {
      grid-column: span 4;
    }

    #operacao .dashboard-grid .kpi-head {
      display: contents;
    }

    #operacao .dashboard-grid .kpi-icon {
      grid-column: 1;
      grid-row: 1 / span 2;
      width: 56px;
      height: 56px;
      border-radius: 14px;
      align-self: center;
    }

    #operacao .dashboard-grid .kpi-icon svg {
      width: 27px;
      height: 27px;
    }

    #operacao .dashboard-grid .name {
      grid-column: 2;
      grid-row: 1;
      align-self: end;
      text-transform: uppercase;
      font-size: 16px;
      line-height: 1.05;
      letter-spacing: .045em;
    }

    #operacao .dashboard-grid .metric {
      grid-column: 2;
      grid-row: 2;
      margin-top: 8px;
      font-size: 31px;
      line-height: 1.05;
      color: var(--ink);
      white-space: nowrap;
    }

    #operacao .dashboard-grid .delta {
      grid-column: 2;
      grid-row: 3;
      display: flex;
      align-items: center;
      gap: 5px;
      margin-top: 8px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 850;
    }
    #operacao .dashboard-grid .delta.up { color: #22c55e; }
    #operacao .dashboard-grid .delta.down { color: #ef4444; }
    #operacao .dashboard-grid .delta.flat { color: #facc15; }

    .dashboard-insights {
      display: grid;
      grid-template-columns: minmax(0, 1.55fr) minmax(330px, .95fr);
      gap: 14px;
      margin-top: 18px;
      align-items: stretch;
    }

    .dashboard-insights .panel {
      min-height: 430px;
      animation: none;
    }

    .dashboard-finance-chart {
      height: 340px;
      padding: 14px 18px 18px;
    }

    .dashboard-finance-chart svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .dashboard-chart-area { fill: url(#dashboardAreaGradient); opacity: .7; }
    .dashboard-chart-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
    .dashboard-chart-label { fill: var(--muted); font-size: 11px; }
    .dashboard-chart-grid { stroke: rgba(255,255,255,.08); stroke-dasharray: 4 5; }

    .dashboard-plan-list {
      display: grid;
      gap: 22px;
      padding: 20px;
    }

    .dashboard-plan-item { display: grid; gap: 8px; }
    .dashboard-plan-head { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 800; }
    .dashboard-plan-head strong { color: var(--green); white-space: nowrap; }
    .dashboard-plan-track { height: 10px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.08); }
    .dashboard-plan-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand-pink), var(--brand-orange)); }

    .dashboard-secondary-insights {
      display: grid;
      grid-template-columns: minmax(300px, .75fr) minmax(0, 1.25fr);
      gap: 14px;
      margin-top: 14px;
    }

    .server-revenue-list,
    .retention-list {
      display: grid;
      gap: 18px;
      padding: 20px;
    }

    .retention-row {
      display: grid;
      grid-template-columns: minmax(110px, 1fr) minmax(120px, 2fr) 64px;
      align-items: center;
      gap: 12px;
      font-size: 13px;
      font-weight: 750;
    }

    .retention-track {
      height: 10px;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(255,255,255,.08);
    }

    .retention-fill { height: 100%; border-radius: inherit; }
    .retention-fill.green { background: var(--green); }
    .retention-fill.red { background: var(--red); }
    .retention-fill.amber { background: var(--amber); }

    .clients-toolbar {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      margin: 14px 0;
      flex-wrap: wrap;
    }

    .clients-search {
      width: min(430px, 100%);
      flex: 1 1 280px;
    }

    .clients-filter-bar {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      padding: 12px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.025);
      margin-bottom: 14px;
    }

    .clients-pagination {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      padding: 14px 16px;
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-size: 12px;
      font-weight: 750;
    }

    .clients-pagination-actions { display: flex; align-items: center; gap: 8px; }
    .clients-pagination .control { min-width: 74px; }
    .password-value { display: inline-flex; align-items: center; gap: 7px; }
    .password-toggle {
      border: 0;
      background: transparent;
      color: var(--blue);
      cursor: pointer;
      padding: 4px;
      font-weight: 800;
    }

    .client-history-trigger {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 6px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.03);
      color: var(--muted);
      border-radius: 6px;
      padding: 5px 8px;
      font-size: 11px;
      font-weight: 850;
      cursor: pointer;
    }

    .client-history-trigger:hover {
      color: var(--ink);
      border-color: rgba(255,79,216,.44);
    }

    .client-history-modal {
      width: min(780px, calc(100vw - 32px));
    }

    .client-history-summary {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 16px;
    }

    .client-history-summary div {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 10px 12px;
      background: rgba(255,255,255,.025);
    }

    .client-history-summary span {
      display: block;
      color: var(--muted);
      font-size: 11px;
      font-weight: 850;
      text-transform: uppercase;
    }

    .client-history-summary strong {
      display: block;
      margin-top: 4px;
      color: var(--ink);
      font-size: 14px;
    }

    .client-history-events {
      display: grid;
      gap: 10px;
      max-height: 520px;
      overflow: auto;
      padding-right: 4px;
    }

    @media (max-width: 760px) {
      .client-history-summary { grid-template-columns: 1fr; }
    }

    .tabs {
      display: flex;
      gap: 6px;
      padding: 4px;
      background: var(--chip);
      border-radius: 8px;
      width: fit-content;
    }

    .seg {
      border: 0;
      border-radius: 6px;
      padding: 7px 10px;
      background: transparent;
      color: var(--muted);
      cursor: pointer;
      font-size: 12px;
      font-weight: 800;
    }

    .seg.active { background: linear-gradient(135deg, rgba(255,79,216,.18), rgba(255,138,61,.16)); color: var(--ink); box-shadow: 0 0 18px rgba(255,79,216,.12); }

    .chart-wrap { height: 300px; position: relative; }
    svg { width: 100%; height: 100%; display: block; }
    .axis { stroke: var(--line); stroke-width: 1; }
    .gridline { stroke: rgba(255,255,255,.08); stroke-width: 1; }
    .line-blue { fill: none; stroke: var(--blue); stroke-width: 3; }
    .line-green { fill: none; stroke: var(--green); stroke-width: 3; }
    .line-amber { fill: none; stroke: var(--amber); stroke-width: 3; }
    .area-blue { fill: rgba(31,111,235,.10); }
    .chart-label { font-size: 11px; fill: var(--muted); font-weight: 650; }

    .bar-chart {
      display: grid;
      gap: 10px;
    }

    .bar-row {
      display: grid;
      grid-template-columns: 92px minmax(0, 1fr) 52px;
      gap: 9px;
      align-items: center;
      font-size: 12px;
      color: var(--muted);
      font-weight: 700;
    }

    .bar-track {
      height: 10px;
      background: rgba(255,255,255,.08);
      border-radius: 999px;
      overflow: hidden;
    }

    .bar-fill {
      height: 100%;
      background: var(--blue);
      border-radius: 999px;
    }

    .top-plan-chart .bar-row {
      grid-template-columns: 150px minmax(0, 1fr) 104px;
    }

    .top-plan-chart strong {
      color: var(--ink);
      text-align: right;
      white-space: nowrap;
    }

    .table-filter-row th {
      background: rgba(255,255,255,.025);
      padding: 10px 12px;
    }

    .table-filter-row .control {
      width: 100%;
      min-width: 150px;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
    }

    th {
      text-align: left;
      color: var(--muted);
      font-size: 11px;
      text-transform: uppercase;
      padding: 10px 8px;
      border-bottom: 1px solid var(--line);
      background: rgba(255,255,255,.04);
    }

    .table-sort {
      border: 0;
      padding: 0;
      background: transparent;
      color: inherit;
      font: inherit;
      text-transform: inherit;
      cursor: pointer;
    }

    td {
      padding: 11px 8px;
      border-bottom: 1px solid var(--line);
      vertical-align: middle;
    }

    tr:last-child td { border-bottom: 0; }

    .badge {
      display: inline-flex;
      min-height: 24px;
      align-items: center;
      padding: 3px 8px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 800;
      white-space: nowrap;
    }

    .badge.green { background: rgba(53, 229, 161, 0.12); color: var(--green); }
    .badge.red { background: rgba(255, 91, 124, 0.14); color: var(--red); }
    .badge.amber { background: rgba(255, 138, 61, 0.14); color: var(--amber); }
    .badge.blue { background: rgba(139, 92, 246, 0.16); color: var(--blue); }
    .badge.gray { background: rgba(255,255,255,.08); color: var(--muted); }
    .badge.reseller-orion {
      background: rgba(123, 92, 255, .20);
      color: #9f8cff;
      border: 1px solid rgba(123, 92, 255, .42);
      box-shadow: 0 0 16px rgba(123, 92, 255, .16);
    }
    .badge.reseller-nova {
      background: rgba(0, 215, 255, .16);
      color: #36e4ff;
      border: 1px solid rgba(0, 215, 255, .40);
      box-shadow: 0 0 16px rgba(0, 215, 255, .14);
    }
    .badge.reseller-nexus {
      background: rgba(0, 255, 150, .15);
      color: #36f6a8;
      border: 1px solid rgba(0, 255, 150, .38);
      box-shadow: 0 0 16px rgba(0, 255, 150, .14);
    }
    .badge.reseller-pulse {
      background: rgba(255, 51, 210, .15);
      color: #ff80e5;
      border: 1px solid rgba(255, 51, 210, .36);
      box-shadow: 0 0 16px rgba(255, 51, 210, .12);
    }
    .badge.reseller-default {
      background: rgba(255, 51, 210, .15);
      color: #ff80e5;
      border: 1px solid rgba(255, 51, 210, .36);
      box-shadow: 0 0 16px rgba(255, 51, 210, .12);
    }

    .timeline {
      display: grid;
      gap: 12px;
    }

    .event {
      display: grid;
      grid-template-columns: 12px minmax(0, 1fr);
      gap: 10px;
      align-items: start;
    }

    .event-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      margin-top: 5px;
      background: var(--blue);
      box-shadow: 0 0 0 4px rgba(255, 79, 216, 0.14);
    }

    .event strong { font-size: 13px; display: block; }
    .event span { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; line-height: 1.35; }

    .audit-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 340px;
      gap: 18px;
      align-items: start;
    }

    .audit-toolbar {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .audit-toolbar .control {
      min-width: 220px;
    }

    .audit-summary {
      display: grid;
      gap: 12px;
    }

    .audit-summary-card {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 14px;
      background: rgba(255,255,255,.025);
    }

    .audit-summary-card span {
      display: block;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
    }

    .audit-summary-card strong {
      display: block;
      margin-top: 6px;
      font-size: 26px;
      color: var(--ink);
    }

    .audit-timeline {
      display: grid;
      gap: 10px;
      max-height: 650px;
      overflow: auto;
      padding-right: 4px;
    }

    .audit-row {
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr) auto;
      gap: 12px;
      align-items: start;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: rgba(255,255,255,.025);
    }

    .audit-icon {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 8px;
      background: rgba(255,79,216,.12);
      color: var(--pink);
      font-weight: 900;
    }

    .audit-action {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
      font-weight: 800;
      color: var(--ink);
    }

    .audit-meta {
      margin-top: 5px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.4;
    }

    .audit-details {
      margin-top: 9px;
      color: var(--muted);
      font-size: 12px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .audit-time {
      color: var(--muted);
      font-size: 12px;
      white-space: nowrap;
      text-align: right;
    }

    @media (max-width: 1100px) {
      .audit-layout { grid-template-columns: 1fr; }
      .audit-row { grid-template-columns: 38px minmax(0, 1fr); }
      .audit-time { grid-column: 2; text-align: left; }
    }

    .view { display: none; }
    .view.active { display: block; }

    .two-col {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin-top: 14px;
    }

    .stack { display: grid; gap: 14px; }

    .callout {
      border-left: 4px solid var(--amber);
      background: rgba(255, 138, 61, 0.10);
      padding: 12px;
      border-radius: 6px;
      color: var(--ink);
      font-size: 13px;
      line-height: 1.45;
    }

    .finance-workspace { display: grid; gap: 18px; }
    .finance-heading { margin: 0; font-size: 28px; font-weight: 850; }

    .finance-tabs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      border-bottom: 1px solid var(--line);
      background: rgba(0,0,0,.22);
    }

    .finance-tab {
      min-height: 58px;
      border: 0;
      border-bottom: 2px solid transparent;
      background: transparent;
      color: var(--muted);
      font-size: 14px;
      font-weight: 800;
      cursor: pointer;
    }

    .finance-tab.active {
      color: var(--brand-pink);
      border-bottom-color: var(--brand-pink);
      background: linear-gradient(180deg, rgba(255,79,216,.10), rgba(255,79,216,.035));
    }

    .finance-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      flex-wrap: wrap;
    }

    .finance-periods { display: flex; gap: 8px; flex-wrap: wrap; }

    .finance-period {
      min-height: 38px;
      border: 1px solid var(--line);
      border-radius: 7px;
      padding: 0 14px;
      background: rgba(18,23,45,.72);
      color: var(--muted);
      font-weight: 750;
      cursor: pointer;
    }

    .finance-period.active {
      color: #fff;
      border-color: rgba(255,79,216,.6);
      background: linear-gradient(135deg, var(--brand-pink), #d934b4);
      box-shadow: 0 0 24px rgba(255,79,216,.2);
    }

    .finance-summary-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 14px;
    }

    .finance-summary-card {
      min-height: 116px;
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr);
      gap: 14px;
      align-items: center;
      padding: 18px;
      border: 1px solid rgba(255,255,255,.13);
      border-top: 3px solid var(--brand-pink);
      border-radius: var(--card-radius);
      background: rgba(18,23,45,.72);
      box-shadow: 0 22px 52px rgba(0,0,0,.34);
      backdrop-filter: blur(14px);
    }

    .finance-summary-icon {
      width: 48px;
      height: 48px;
      display: grid;
      place-items: center;
      border-radius: 8px;
      background: rgba(255,255,255,.06);
      font-size: 22px;
      font-weight: 850;
    }

    .finance-summary-icon svg {
      width: 23px;
      height: 23px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .finance-summary-label {
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
    }

    .finance-summary-value {
      margin-top: 6px;
      color: var(--ink);
      font-size: 25px;
      font-weight: 850;
      white-space: nowrap;
    }

    .finance-ledger {
      border: 1px solid rgba(255,255,255,.12);
      border-radius: var(--card-radius);
      background: rgba(18,23,45,.66);
      overflow: hidden;
      box-shadow: 0 22px 52px rgba(0,0,0,.28);
      backdrop-filter: blur(14px);
    }

    .finance-ledger-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 16px 20px;
      border-bottom: 1px solid var(--line);
      font-weight: 850;
    }

    .finance-ledger-title { display: flex; align-items: center; gap: 9px; }
    .finance-ledger-list { display: grid; }

    .finance-entry {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 18px;
      align-items: center;
      padding: 17px 20px;
      border-bottom: 1px solid rgba(255,255,255,.07);
    }

    .finance-entry:last-child { border-bottom: 0; }
    .finance-entry-title { font-size: 14px; font-weight: 800; }
    .finance-entry-meta { margin-top: 6px; color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
    .finance-entry-meta .badge { min-height: 21px; padding: 2px 9px; font-size: 11px; }
    .finance-entry-dot { color: rgba(155,166,206,.72); }
    .finance-entry-side { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
    .finance-entry-value { font-size: 15px; font-weight: 850; text-align: right; white-space: nowrap; }
    .finance-entry-value.in { color: var(--green); }
    .finance-entry-value.out { color: var(--red); }
    .finance-entry-delete {
      width: 34px;
      height: 34px;
      border-radius: 8px;
      border: 1px solid rgba(255, 91, 124, .28);
      background: rgba(255, 77, 120, .08);
      color: #ff6f8f;
      display: inline-grid;
      place-items: center;
      cursor: pointer;
      font-size: 16px;
      font-weight: 900;
    }
    .finance-entry-delete:hover { background: rgba(255, 77, 120, .16); border-color: rgba(255, 91, 124, .48); color: #fff; }
    .finance-summary-entry {
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr) auto;
      gap: 16px;
      align-items: start;
      padding: 22px 20px;
      border-bottom: 1px solid rgba(255,255,255,.07);
    }
    .finance-summary-entry:last-child { border-bottom: 0; }
    .finance-summary-kind-icon {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #ffb84d;
      background: rgba(255, 184, 77, .13);
      font-size: 21px;
      font-weight: 900;
    }
    .finance-summary-title {
      display: flex;
      align-items: center;
      gap: 8px;
      min-height: 32px;
      font-size: 15px;
      font-weight: 850;
    }
    .finance-summary-breakdown {
      display: grid;
      gap: 8px;
      margin-top: 8px;
    }
    .finance-summary-reseller {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 760;
    }
    .finance-summary-reseller .badge {
      min-width: 66px;
      justify-content: center;
      text-transform: uppercase;
    }
    .finance-summary-values {
      display: grid;
      gap: 8px;
      justify-items: end;
      text-align: right;
      white-space: nowrap;
    }
    .finance-summary-total {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      min-height: 32px;
      color: var(--green);
      font-size: 15px;
      font-weight: 900;
    }
    .finance-summary-chevron {
      color: rgba(248,249,255,.62);
      font-size: 24px;
      line-height: 1;
    }
    .finance-summary-subtotal {
      color: rgba(248,249,255,.66);
      font-size: 14px;
      font-weight: 850;
    }
    .finance-empty { padding: 24px 20px; color: var(--muted); text-align: center; }
    .finance-pane[hidden] { display: none; }
    .finance-accounts-table .action-btn { min-width: 108px; }
    .accounts-payable-cards { display: grid; gap: 18px; }
    .payments-command-strip {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      margin-bottom: 18px;
    }
    .payments-command-strip article {
      min-height: 92px;
      padding: 16px;
      border: 1px solid rgba(86, 111, 170, .24);
      border-radius: 8px;
      background: rgba(9, 14, 31, .82);
    }
    .payments-command-strip span {
      display: block;
      color: var(--muted);
      font-size: 11px;
      font-weight: 850;
      letter-spacing: .06em;
      text-transform: uppercase;
    }
    .payments-command-strip strong {
      display: block;
      margin-top: 8px;
      color: var(--ink);
      font-size: 24px;
      font-weight: 950;
    }
    .payments-command-strip small {
      display: block;
      margin-top: 6px;
      color: rgba(185, 195, 230, .78);
      font-size: 12px;
      font-weight: 750;
    }

    .finance-alert-strip {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin-bottom: 18px;
    }

    .finance-alert-card {
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr);
      gap: 10px;
      align-items: center;
      min-height: 78px;
      padding: 12px 14px;
      border: 1px solid rgba(255,255,255,.11);
      border-left: 3px solid var(--teal);
      border-radius: var(--card-radius);
      background: rgba(18,23,45,.70);
      box-shadow: 0 14px 34px rgba(0,0,0,.20);
    }

    .finance-alert-card.warn { border-left-color: var(--amber); }
    .finance-alert-card.bad { border-left-color: var(--red); }
    .finance-alert-card.good { border-left-color: var(--green); }

    .finance-alert-card i {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 8px;
      background: rgba(255,255,255,.07);
      color: var(--teal);
      font-style: normal;
      font-weight: 900;
    }

    .finance-alert-card.warn i { color: var(--amber); }
    .finance-alert-card.bad i { color: var(--red); }
    .finance-alert-card.good i { color: var(--green); }
    .finance-alert-card strong { display:block; color:var(--ink); font-size:13px; }
    .finance-alert-card span { display:block; color:var(--muted); font-size:12px; line-height:1.35; margin-top:4px; }

    .finance-quick-filters {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: center;
      margin: 18px 0;
    }

    .finance-quick-filters button {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 34px;
      padding: 0 12px;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 8px;
      background: rgba(18,23,45,.70);
      color: var(--muted);
      font-size: 12px;
      font-weight: 850;
      cursor: pointer;
    }

    .finance-quick-filters button.active {
      color: #fff;
      border-color: rgba(255,79,216,.68);
      background: linear-gradient(100deg,#b928d3,#ee38b5 55%,#ff8148);
      box-shadow: 0 12px 28px rgba(228,54,190,.20);
    }

    .finance-quick-filters b {
      min-width: 22px;
      min-height: 20px;
      padding: 1px 7px;
      border-radius: 999px;
      background: rgba(255,255,255,.12);
      color: inherit;
      font-size: 11px;
      line-height: 18px;
      text-align: center;
    }

    .reseller-payable-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin-bottom: 18px;
    }

    .reseller-payable-card {
      padding: 14px;
      border: 1px solid rgba(255,255,255,.11);
      border-radius: var(--card-radius);
      background: linear-gradient(180deg, rgba(4,12,36,.74), rgba(3,8,26,.90));
      box-shadow: inset 0 1px rgba(255,255,255,.045), 0 14px 34px rgba(0,0,0,.22);
    }

    .reseller-payable-card header {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: center;
      margin-bottom: 12px;
    }

    .reseller-payable-card header strong { font-size: 14px; }
    .reseller-payable-card dl { display: grid; gap: 8px; margin: 0; }
    .reseller-payable-card div { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
    .reseller-payable-card dt { color: var(--muted); font-size: 12px; }
    .reseller-payable-card dd { margin: 0; color: var(--ink); font-size: 13px; font-weight: 850; text-align: right; }
    .reseller-payable-card .warn { color: var(--amber); }
    .reseller-payable-card .good { color: var(--green); }
    .reseller-payable-card .bad { color: var(--red); }
    .reseller-payable-card .blue { color: var(--teal); }

    .settlement-rule-card {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 14px;
      padding: 14px 16px;
      border: 1px solid rgba(255,255,255,.12);
      border-left: 3px solid var(--brand-pink);
      border-radius: var(--card-radius);
      background: rgba(18,23,45,.72);
      box-shadow: 0 18px 42px rgba(0,0,0,.22);
    }

    .settlement-rule-copy {
      display: grid;
      gap: 4px;
      min-width: 0;
    }

    .settlement-rule-copy strong {
      color: var(--ink);
      font-size: 15px;
      font-weight: 850;
    }

    .settlement-rule-copy small {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
    }

    .settlement-rule-controls {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      flex-wrap: wrap;
    }

    .settlement-rule-controls .control {
      width: 120px;
      min-height: 38px;
    }

    .settlement-rule-status {
      min-width: 112px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 750;
      text-align: right;
    }

    .footer-note {
      margin-top: 16px;
      color: var(--muted);
      font-size: 12px;
    }

    @media (max-width: 1180px) {
      .shell { grid-template-columns: 72px minmax(0, 1fr); }
      aside { padding: 12px 8px; }
      .brand { justify-content: center; padding: 8px 4px 14px; }
      .brand-text, .nav-title, .nav-label { display: none; }
      .nav-btn { justify-content: center; }
      .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .status-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .grid, .two-col { grid-template-columns: 1fr; }
      .finance-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .finance-alert-strip,
      .reseller-payable-grid,
      .payments-command-strip { grid-template-columns: 1fr; }
      #operacao .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      #operacao .dashboard-grid .kpi,
      #operacao .dashboard-grid .kpi:nth-child(n+5) { grid-column: span 1; }
      .dashboard-insights { grid-template-columns: 1fr; }
      .dashboard-secondary-insights { grid-template-columns: 1fr; }
      .reseller-access-layout { grid-template-columns: 1fr; }
    }

    @media (max-width: 720px) {
      .shell { grid-template-columns: 1fr; }
      aside {
        position: static;
        height: auto;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 5px;
      }
      .brand, .nav-title { display: none; }
      main { padding: 16px; }
      .topbar { flex-direction: column; }
      .toolbar { justify-content: flex-start; width: 100%; }
      .control { flex: 1; min-width: 136px; }
      .kpi-grid, .status-strip { grid-template-columns: 1fr; }
      #operacao .dashboard-grid { grid-template-columns: 1fr; }
      .finance-summary-grid { grid-template-columns: 1fr; }
      .finance-entry { grid-template-columns: 1fr; gap: 8px; }
      .finance-entry-side { justify-content: space-between; }
      .finance-entry-value { text-align: left; }
      .panel-header { align-items: flex-start; flex-direction: column; }
      .settlement-rule-card { grid-template-columns: 1fr; }
      .settlement-rule-controls { justify-content: flex-start; }
      .settlement-rule-status { text-align: left; }
      .tabs { width: 100%; overflow-x: auto; }
      .seg { flex: 1; min-width: max-content; }
      .bar-row { grid-template-columns: 72px minmax(0, 1fr) 42px; }
      table { min-width: 680px; }
      .table-scroll { overflow-x: auto; }
      .setting-row, .settings-grid { grid-template-columns: 1fr; }
    }

    @media (prefers-reduced-motion: reduce) {
      body::before, body::after, .shell::before, .kpi, .panel { animation: none; }
    }

    /* Fusion+ V2 visual identity — reference dashboard 25/06/2026 */
    :root {
      --bg: #040618;
      --panel: #0b0f2a;
      --panel-strong: #101433;
      --ink: #f7f5ff;
      --muted: #9ba3c5;
      --line: rgba(144, 107, 255, .22);
      --brand-pink: #ff42d2;
      --brand-purple: #8b4dff;
      --brand-orange: #ff7a42;
      --green: #20f099;
      --amber: #ffc226;
      --red: #ff4d78;
      --teal: #25d7ff;
      --blue: #7c67ff;
      --card-radius: 10px;
      --shadow: 0 22px 56px rgba(0, 0, 0, .38);
    }

    body {
      background:
        radial-gradient(circle at 78% -8%, rgba(83, 42, 202, .28), transparent 30%),
        radial-gradient(circle at 58% 112%, rgba(247, 48, 199, .18), transparent 38%),
        linear-gradient(180deg, #05071b 0%, #030514 54%, #02030d 100%);
      color: var(--ink);
    }

    body::before {
      opacity: .22;
      background:
        radial-gradient(circle at 15% 22%, rgba(255,255,255,.8) 0 1px, transparent 2px),
        radial-gradient(circle at 72% 18%, rgba(255,66,210,.7) 0 1px, transparent 3px),
        radial-gradient(circle at 46% 78%, rgba(124,103,255,.75) 0 1px, transparent 3px);
      background-size: 320px 320px, 460px 460px, 520px 520px;
    }

    body::after {
      background:
        radial-gradient(ellipse at 86% 12%, rgba(255,66,210,.16), transparent 24%),
        radial-gradient(ellipse at 42% 96%, rgba(139,77,255,.20), transparent 32%),
        linear-gradient(180deg, rgba(2,4,16,.30), rgba(2,3,13,.76));
    }

    .shell {
      grid-template-columns: 224px minmax(0, 1fr);
    }

    aside {
      background:
        radial-gradient(circle at 82% 12%, rgba(255,66,210,.18), transparent 28%),
        linear-gradient(180deg, rgba(9, 10, 35, .98), rgba(3, 5, 18, .98));
      border-right: 1px solid rgba(126, 98, 255, .26);
      padding: 18px 14px;
      box-shadow: inset -1px 0 0 rgba(255,255,255,.03), 18px 0 50px rgba(0,0,0,.16);
    }

    .brand {
      gap: 12px;
      padding: 6px 6px 22px;
      border-bottom: 1px solid rgba(126, 98, 255, .20);
      margin-bottom: 20px;
    }

    .brand-mark {
      width: 42px;
      height: 42px;
      border-radius: 9px;
      background:
        linear-gradient(#090b22, #090b22) padding-box,
        linear-gradient(135deg, var(--brand-pink), var(--brand-purple), var(--brand-orange)) border-box;
      border: 1px solid transparent;
      color: #ff65dc;
      font-size: 15px;
      box-shadow: 0 0 24px rgba(255,66,210,.24);
    }

    .brand strong {
      font-size: 22px;
      line-height: 1;
      letter-spacing: -.04em;
      background: linear-gradient(90deg, #fff, #ff6fde 72%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .brand span {
      display: none;
    }

    .nav-title { display: none; }

    .nav-btn {
      min-height: 43px;
      padding: 12px 14px;
      border-radius: 8px;
      color: #c4c9e6;
      font-size: 14px;
      font-weight: 650;
      margin-bottom: 6px;
    }

    .nav-icon {
      color: #b8b5ff;
    }

    .nav-btn:hover,
    .nav-btn.active {
      background:
        linear-gradient(90deg, rgba(255,66,210,.34), rgba(140,72,255,.18)),
        rgba(19, 20, 55, .92);
      color: #fff;
      box-shadow:
        inset 2px 0 0 var(--brand-pink),
        0 0 24px rgba(255,66,210,.18);
    }

    .sidebar-toggle {
      top: 18px;
      right: -54px;
      width: 44px;
      height: 44px;
      border-radius: 8px;
      border-color: rgba(126, 98, 255, .24);
      background: rgba(13, 15, 45, .88);
      color: #d8ceff;
      box-shadow: 0 10px 26px rgba(0,0,0,.28);
    }

    main {
      padding: 24px 28px 36px;
      background:
        radial-gradient(circle at 74% -12%, rgba(86, 42, 202, .20), transparent 34%),
        radial-gradient(circle at 48% 110%, rgba(255,66,210,.16), transparent 38%),
        rgba(3, 5, 18, .72);
    }

    .topbar {
      align-items: center;
      margin-bottom: 26px;
      gap: 20px;
    }

    h1 {
      font-size: 25px;
      letter-spacing: -.035em;
      text-shadow: 0 0 16px rgba(255,255,255,.10);
    }

    .subtitle {
      color: #a9aecf;
      font-size: 13px;
      margin-top: 7px;
    }

    .toolbar {
      gap: 12px;
    }

    .sync-btn,
    .pending-payable-btn,
    .control,
    .icon-btn {
      min-height: 48px;
      border-radius: 9px;
      background: rgba(10, 14, 42, .72);
      border: 1px solid rgba(112, 130, 210, .23);
      box-shadow: inset 0 1px rgba(255,255,255,.04);
      color: #f5f2ff;
    }

    .sync-btn:not(.blocked),
    .sync-btn.connected {
      color: var(--green);
      border-color: rgba(32, 240, 153, .20);
      background: rgba(8, 24, 30, .58);
    }

    .sync-dot {
      box-shadow: 0 0 14px currentColor;
    }

    .pending-payable-btn {
      color: #ffd05d;
      border-color: rgba(255, 194, 38, .30);
      background: rgba(30, 20, 6, .52);
    }

    .period-quick {
      gap: 10px;
      padding: 0;
      border: 1px solid rgba(126, 98, 255, .14);
      background: rgba(17, 21, 56, .52);
      border-radius: 14px;
      padding: 6px;
    }

    .period-quick .seg {
      min-height: 58px;
      padding: 0 26px;
      border-radius: 11px;
      background: rgba(9, 11, 28, .82);
      border: 1px solid rgba(116, 124, 185, .18);
      color: #b5b8d4;
      font-weight: 850;
      font-size: 17px;
    }

    .period-quick .seg.active {
      background: linear-gradient(135deg, #ff30ca, #ee23bd 56%, #ff7946);
      border-color: rgba(255, 92, 218, .68);
      color: #fff;
      box-shadow: 0 12px 34px rgba(255, 66, 210, .22);
    }

    .panel,
    .card,
    .kpi,
    .modal {
      background:
        linear-gradient(145deg, rgba(14, 17, 49, .88), rgba(7, 10, 32, .94));
      border: 1px solid rgba(126, 98, 255, .25);
      border-radius: 10px;
      box-shadow:
        0 18px 45px rgba(0,0,0,.34),
        inset 0 1px rgba(255,255,255,.055);
      backdrop-filter: blur(18px);
    }

    .panel-header {
      border-bottom-color: rgba(126, 98, 255, .16);
    }

    .panel-title {
      letter-spacing: -.02em;
    }

    #operacao .dashboard-surface .panel-header {
      display: none;
    }

    #operacao .dashboard-surface .dashboard-grid {
      margin: 0;
    }

    #operacao .dashboard-grid {
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: 12px;
    }

    #operacao .dashboard-grid .kpi {
      grid-column: span 4;
      min-height: 150px;
      grid-template-columns: 48px minmax(0, 1fr);
      column-gap: 16px;
      align-content: start;
      padding: 18px 18px 14px;
      border-top: 0;
      position: relative;
      overflow: hidden;
    }

    #operacao .dashboard-grid .kpi:nth-child(n+5) {
      grid-column: span 3;
      min-height: 136px;
    }

    #operacao .dashboard-grid .kpi::after {
      content: "";
      position: absolute;
      inset: auto 14px 13px 14px;
      height: 34px;
      pointer-events: none;
      opacity: .82;
      background:
        linear-gradient(90deg, transparent 0 6%, currentColor 6% 9%, transparent 9% 14%, currentColor 14% 17%, transparent 17% 28%, currentColor 28% 32%, transparent 32% 40%, currentColor 40% 44%, transparent 44% 58%, currentColor 58% 63%, transparent 63% 72%, currentColor 72% 76%, transparent 76% 86%, currentColor 86% 100%);
      clip-path: polygon(0 84%, 8% 78%, 15% 86%, 25% 64%, 34% 71%, 44% 48%, 55% 58%, 67% 34%, 77% 46%, 88% 23%, 100% 19%, 100% 100%, 0 100%);
      filter: drop-shadow(0 0 10px currentColor);
    }

    #operacao .dashboard-grid .kpi:nth-child(1),
    #operacao .dashboard-grid .kpi:nth-child(6),
    #operacao .dashboard-grid .kpi:nth-child(9) { color: #b752ff; }
    #operacao .dashboard-grid .kpi:nth-child(2),
    #operacao .dashboard-grid .kpi:nth-child(4),
    #operacao .dashboard-grid .kpi:nth-child(8) { color: #23e89c; }
    #operacao .dashboard-grid .kpi:nth-child(3),
    #operacao .dashboard-grid .kpi:nth-child(5) { color: #ff537b; }
    #operacao .dashboard-grid .kpi:nth-child(7) { color: #ff9e21; }

    #operacao .dashboard-grid .kpi-icon {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      color: currentColor;
      background: color-mix(in srgb, currentColor 18%, transparent);
      box-shadow: 0 0 28px color-mix(in srgb, currentColor 18%, transparent);
    }

    #operacao .dashboard-grid .kpi-icon svg {
      width: 22px;
      height: 22px;
    }

    #operacao .dashboard-grid .name {
      font-size: 13px;
      line-height: 1.15;
      color: #b8bbd9;
      text-transform: none;
      letter-spacing: 0;
      font-weight: 700;
    }

    #operacao .dashboard-grid .metric {
      color: #fff;
      font-size: 27px;
      font-weight: 900;
      line-height: 1;
      margin-top: 7px;
      letter-spacing: -.035em;
      text-shadow: 0 0 18px rgba(255,255,255,.08);
    }

    #operacao .dashboard-grid .metric.good { color: #fff; }
    #operacao .dashboard-grid .metric.warn { color: #fff; }

    .dashboard-insights,
    .dashboard-secondary-insights {
      gap: 16px;
    }

    .dashboard-insights .panel {
      min-height: 392px;
    }

    .dashboard-finance-chart {
      height: 300px;
    }

    .dashboard-chart-line {
      stroke-width: 3.4;
      filter: drop-shadow(0 0 8px currentColor);
    }

    .dashboard-plan-track,
    .server-bar-track {
      background: rgba(255,255,255,.07);
    }

    .dashboard-plan-fill,
    .server-bar-fill {
      background: linear-gradient(90deg, #ff42d2, #a24dff, #ff7a42);
      box-shadow: 0 0 16px rgba(255,66,210,.28);
    }

    table {
      border-color: rgba(126, 98, 255, .16);
    }

    th {
      background: rgba(255,255,255,.035);
      color: #9fa7ca;
      font-size: 12px;
      letter-spacing: .06em;
    }

    td {
      border-color: rgba(126, 98, 255, .12);
    }

    tbody tr:hover {
      background: rgba(255,66,210,.06);
    }

    .primary,
    .action-btn.approved,
    .sync-btn,
    button.primary {
      background: linear-gradient(100deg, #a340ff, #ff31c8 58%, #ff7a42);
      border-color: rgba(255,66,210,.56);
      color: #fff;
      box-shadow: 0 14px 34px rgba(255,66,210,.20);
    }

    input,
    select,
    textarea,
    .control {
      background-color: rgba(9, 12, 35, .84);
      border-color: rgba(126, 98, 255, .24);
      color: #f7f5ff;
    }

    input:focus,
    select:focus,
    textarea:focus {
      outline: 2px solid rgba(255,66,210,.55);
      outline-offset: 1px;
    }

    @media (max-width: 1280px) {
      #operacao .dashboard-grid .kpi,
      #operacao .dashboard-grid .kpi:nth-child(n+5) {
        grid-column: span 4;
      }
    }

    .reconciliation-grid {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 14px;
      margin-bottom: 18px;
    }

    .reconciliation-card {
      min-height: 132px;
      padding: 18px;
      border: 1px solid rgba(126, 98, 255, .25);
      border-radius: 10px;
      background: linear-gradient(145deg, rgba(14, 17, 49, .88), rgba(7, 10, 32, .94));
      box-shadow: 0 18px 45px rgba(0,0,0,.30), inset 0 1px rgba(255,255,255,.055);
      position: relative;
      overflow: hidden;
    }

    .reconciliation-card::before {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      height: 3px;
      background: linear-gradient(90deg, #ff42d2, #8b4dff, #ff7a42);
      opacity: .9;
    }

    .reconciliation-card span {
      display: block;
      color: #a9aecf;
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .05em;
      margin-bottom: 10px;
    }

    .reconciliation-card strong {
      display: block;
      color: #fff;
      font-size: 28px;
      line-height: 1;
      letter-spacing: -.04em;
    }

    .reconciliation-card small {
      display: block;
      color: #9ba3c5;
      margin-top: 10px;
      font-size: 12px;
    }

    .reconciliation-card.good strong { color: var(--green); }
    .reconciliation-card.warn strong { color: var(--amber); }
    .reconciliation-card.bad strong { color: var(--red); }

    .pending-center-grid,
    .closing-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
      margin-bottom: 18px;
    }

    .pending-center-card,
    .closing-card {
      min-height: 104px;
      padding: 16px;
      border: 1px solid rgba(64, 123, 255, .26);
      border-radius: 8px;
      background: linear-gradient(180deg, rgba(4, 12, 36, .76), rgba(3, 8, 26, .90));
      box-shadow: inset 0 1px rgba(255,255,255,.045), 0 14px 34px rgba(0,0,0,.24);
    }

    .pending-center-card span,
    .closing-card span {
      display: block;
      color: #a9aecf;
      font-size: 11px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .055em;
      margin-bottom: 8px;
    }

    .pending-center-card strong,
    .closing-card strong {
      display: block;
      color: #fff;
      font-size: 24px;
      letter-spacing: -.035em;
    }

    .pending-center-card small,
    .closing-card small { display:block; color:#9ba3c5; margin-top:8px; font-size:12px; }
    .pending-center-card.warn strong,.closing-card.warn strong{color:var(--amber)}
    .pending-center-card.good strong,.closing-card.good strong{color:var(--green)}
    .pending-center-card.bad strong,.closing-card.bad strong{color:var(--red)}

    .closing-status {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:100px;
      min-height:28px;
      padding:0 10px;
      border-radius:999px;
      font-size:12px;
      font-weight:900;
      border:1px solid rgba(255,255,255,.16);
      color:#ffd064;
      background:rgba(255, 194, 38, .10);
    }
    .closing-status.fechado{color:var(--green);background:rgba(32,240,153,.10);border-color:rgba(32,240,153,.26)}
    .closing-status.pronto-para-fechar{color:#8fd3ff;background:rgba(27,124,255,.10);border-color:rgba(27,124,255,.26)}
    .closing-status.revisar-conciliacao{color:var(--red);background:rgba(255,77,120,.10);border-color:rgba(255,77,120,.28)}

    .daily-closing-panel{padding:0;margin-bottom:18px;overflow:hidden}
    .daily-closing-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;padding:16px}
    .daily-closing-card{min-height:104px;padding:14px;border:1px solid rgba(64,123,255,.24);border-radius:8px;background:rgba(4,10,31,.72)}
    .daily-closing-card span{display:block;color:#a9aecf;font-size:10px;font-weight:900;letter-spacing:.055em;text-transform:uppercase;margin-bottom:8px}
    .daily-closing-card strong{display:block;color:#fff;font-size:22px;letter-spacing:-.035em;line-height:1.05}
    .daily-closing-card small{display:block;color:#9ba3c5;margin-top:8px;font-size:12px}
    .daily-closing-card.good strong{color:var(--green)}
    .daily-closing-card.warn strong{color:var(--amber)}
    .daily-closing-card.bad strong{color:var(--red)}
    .daily-closing-body{display:grid;grid-template-columns:1.2fr .8fr;gap:14px;padding:0 16px 16px}
    .daily-closing-box{border:1px solid rgba(255,255,255,.10);border-radius:8px;background:rgba(255,255,255,.025);overflow:hidden}
    .daily-closing-box h3{margin:0;padding:13px 14px;border-bottom:1px solid rgba(255,255,255,.10);font-size:13px;color:#eef2ff;letter-spacing:.02em}
    .daily-closing-list{display:grid}
    .daily-closing-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.08);color:#e8ecff;font-size:13px}
    .daily-closing-row:last-child{border-bottom:0}
    .daily-closing-row b{color:#fff}
    .daily-closing-row strong{color:var(--amber);white-space:nowrap}
    .daily-closing-row.good strong{color:var(--green)}
    .daily-closing-row.bad strong{color:var(--red)}

    .reconciliation-status {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 104px;
      min-height: 30px;
      border-radius: 999px;
      padding: 0 12px;
      font-size: 12px;
      font-weight: 900;
      border: 1px solid rgba(255,255,255,.15);
    }

    .reconciliation-status.conciliado {
      color: var(--green);
      background: rgba(32, 240, 153, .10);
      border-color: rgba(32, 240, 153, .26);
    }

    .reconciliation-status.atenção,
    .reconciliation-status.atencao {
      color: var(--amber);
      background: rgba(255, 194, 38, .10);
      border-color: rgba(255, 194, 38, .28);
    }

    .reconciliation-status.divergente {
      color: var(--red);
      background: rgba(255, 77, 120, .10);
      border-color: rgba(255, 77, 120, .28);
    }

    .reconciliation-diff.positive { color: var(--green); font-weight: 900; }
    .reconciliation-diff.negative { color: var(--red); font-weight: 900; }
    .reconciliation-diff.zero { color: #cfd4f3; font-weight: 800; }

    .parent-alert-center {
      margin-bottom: 18px;
      border: 1px solid rgba(255, 73, 206, .30);
      border-radius: 10px;
      background: linear-gradient(135deg, rgba(45, 7, 43, .72), rgba(5, 12, 36, .78));
      box-shadow: inset 0 1px rgba(255,255,255,.05), 0 18px 46px rgba(0,0,0,.24);
      overflow: hidden;
    }

    .parent-alert-head {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      padding:16px 18px;
      border-bottom:1px solid rgba(255,255,255,.09);
    }

    .parent-alert-head strong {
      display:flex;
      align-items:center;
      gap:9px;
      color:#fff;
      font-size:16px;
    }

    .parent-alert-head span {
      display:block;
      color:#aeb5d7;
      margin-top:4px;
      font-size:13px;
    }

    .parent-alert-pill {
      display:inline-flex;
      align-items:center;
      min-height:30px;
      padding:0 12px;
      border-radius:999px;
      font-size:12px;
      font-weight:950;
      letter-spacing:.04em;
      text-transform:uppercase;
      border:1px solid rgba(255,255,255,.15);
      color:#8fd3ff;
      background:rgba(27,124,255,.10);
      white-space:nowrap;
    }

    .parent-alert-pill.warning {
      color:var(--amber);
      background:rgba(255,194,38,.12);
      border-color:rgba(255,194,38,.28);
    }

    .parent-alert-pill.danger {
      color:var(--red);
      background:rgba(255,77,120,.12);
      border-color:rgba(255,77,120,.28);
    }

    .parent-alert-list {
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:12px;
      padding:14px;
    }

    .parent-alert-item {
      display:grid;
      grid-template-columns:42px minmax(0,1fr) auto;
      align-items:center;
      gap:12px;
      min-height:86px;
      padding:13px;
      border:1px solid rgba(255,255,255,.10);
      border-radius:9px;
      background:rgba(255,255,255,.035);
    }

    .parent-alert-icon {
      width:42px;
      height:42px;
      display:grid;
      place-items:center;
      border-radius:10px;
      color:#8fd3ff;
      background:rgba(27,124,255,.12);
      font-weight:950;
    }

    .parent-alert-item.warning .parent-alert-icon { color:var(--amber); background:rgba(255,194,38,.12); }
    .parent-alert-item.danger .parent-alert-icon { color:var(--red); background:rgba(255,77,120,.12); }
    .parent-alert-item.success .parent-alert-icon { color:var(--green); background:rgba(32,240,153,.12); }

    .parent-alert-item strong {
      display:block;
      color:#fff;
      font-size:14px;
      margin-bottom:4px;
    }

    .parent-alert-item span {
      display:block;
      color:#aeb5d7;
      font-size:12px;
      line-height:1.35;
    }

    .parent-alert-item button {
      min-height:36px;
      padding:0 12px;
      border-radius:8px;
      border:1px solid rgba(255,255,255,.14);
      background:rgba(7,12,32,.72);
      color:#f7f8ff;
      font-weight:900;
      cursor:pointer;
      white-space:nowrap;
    }

    .parent-alert-item button:hover {
      border-color:rgba(255,79,216,.42);
      color:#fff;
    }

    @media (max-width: 1180px) {
      .reconciliation-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .pending-center-grid,
      .closing-grid,
      .daily-closing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .daily-closing-body { grid-template-columns: 1fr; }
      .parent-alert-list { grid-template-columns: 1fr; }
    }

    @media (max-width: 720px) {
      .reconciliation-grid { grid-template-columns: 1fr; }
      .pending-center-grid,
      .closing-grid,
      .daily-closing-grid { grid-template-columns: 1fr; }
      .parent-alert-head { align-items:flex-start; flex-direction:column; }
      .parent-alert-item { grid-template-columns:38px minmax(0,1fr); }
      .parent-alert-item button { grid-column:2; justify-self:start; }
    }

    @media (min-width: 721px) {
      .shell.sidebar-expanded { grid-template-columns: 248px minmax(0, 1fr); }
      .shell.sidebar-expanded aside { padding: 18px 14px; }
      .shell.sidebar-expanded .brand { justify-content: flex-start; padding: 8px 8px 18px; }
      .shell.sidebar-expanded .brand-text { display: block; }
      .shell.sidebar-expanded .nav-title { display: block; }
      .shell.sidebar-expanded .nav-label { display: inline; }
      .shell.sidebar-expanded .nav-btn { justify-content: flex-start; }
    }

    /* Fusion+ Cyber HUD identity — reference 25/06/2026 19:02 */
    :root {
      --bg: #020512;
      --panel: rgba(4, 10, 31, .78);
      --panel-strong: rgba(8, 15, 43, .92);
      --ink: #f8f7ff;
      --muted: #9ba6ce;
      --line: rgba(64, 123, 255, .34);
      --brand-pink: #ff33d2;
      --brand-purple: #9a4dff;
      --brand-orange: #ff8a22;
      --cyber-blue: #1b7cff;
      --cyber-cyan: #00d7ff;
      --cyber-violet: #7b3cff;
      --card-radius: 9px;
    }

    body {
      background:
        radial-gradient(circle at 58% 0%, rgba(101, 40, 255, .20), transparent 31%),
        radial-gradient(circle at 94% 46%, rgba(0, 136, 255, .18), transparent 34%),
        radial-gradient(circle at 49% 104%, rgba(255, 34, 206, .13), transparent 37%),
        linear-gradient(180deg, #030615 0%, #02040f 52%, #01030a 100%);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: .34;
      background:
        linear-gradient(rgba(45, 108, 255, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(45, 108, 255, .055) 1px, transparent 1px),
        radial-gradient(circle at 14% 11%, rgba(255, 69, 223, .9) 0 1px, transparent 2px),
        radial-gradient(circle at 72% 23%, rgba(0, 206, 255, .8) 0 1px, transparent 2px),
        radial-gradient(circle at 91% 68%, rgba(112, 75, 255, .85) 0 1px, transparent 2px);
      background-size: 72px 72px, 72px 72px, 420px 420px, 560px 560px, 610px 610px;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.8), rgba(0,0,0,.25));
    }

    body::after {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(ellipse at 50% 40%, transparent 0 47%, rgba(0, 153, 255, .10) 48%, transparent 49%),
        radial-gradient(ellipse at 50% 40%, transparent 0 59%, rgba(155, 77, 255, .10) 60%, transparent 61%),
        linear-gradient(180deg, rgba(3, 6, 21, .12), rgba(2, 4, 15, .74));
    }

    .shell {
      grid-template-columns: 236px minmax(0, 1fr);
      background: transparent;
    }

    aside {
      border-right: 1px solid rgba(58, 111, 255, .42);
      background:
        linear-gradient(180deg, rgba(5, 9, 31, .96), rgba(2, 5, 18, .98)),
        radial-gradient(circle at 0% 8%, rgba(255, 53, 211, .20), transparent 27%);
      box-shadow:
        inset -1px 0 rgba(0, 216, 255, .18),
        16px 0 46px rgba(0, 0, 0, .32);
    }

    .brand {
      border-bottom: 1px solid rgba(58, 111, 255, .24);
      padding: 10px 8px 24px;
    }

    .brand-mark,
    .auth-logo {
      width: 46px;
      height: 46px;
      border-radius: 10px;
      background:
        linear-gradient(145deg, rgba(12, 16, 47, .98), rgba(6, 8, 28, .98)) padding-box,
        linear-gradient(135deg, #ff3bd8, #7b3cff 48%, #00c8ff) border-box;
      border: 1px solid transparent;
      color: #fff;
      box-shadow:
        0 0 0 1px rgba(255,255,255,.04),
        0 0 16px rgba(255, 51, 210, .72),
        0 0 28px rgba(27, 124, 255, .44);
      text-shadow: 0 0 12px rgba(255, 255, 255, .75);
    }

    .brand strong {
      font-size: 23px;
      font-weight: 900;
      background: linear-gradient(90deg, #fff 0%, #fff 58%, #ff31d2 82%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .brand span { display: none; }

    .nav-btn {
      min-height: 44px;
      padding: 12px 12px;
      margin-bottom: 7px;
      border: 1px solid transparent;
      border-radius: 6px;
      color: #d9ddff;
      text-transform: uppercase;
      letter-spacing: .02em;
      font-size: 12px;
      font-weight: 850;
      background: transparent;
      position: relative;
    }

    .nav-icon {
      width: 23px;
      color: #f1d9ff;
      filter: drop-shadow(0 0 7px rgba(255, 59, 216, .45));
    }

    .nav-btn:hover,
    .nav-btn.active {
      color: #fff;
      border-color: rgba(193, 74, 255, .72);
      background:
        linear-gradient(90deg, rgba(255, 51, 210, .34), rgba(124, 60, 255, .22) 58%, rgba(0, 145, 255, .18)),
        rgba(7, 13, 43, .88);
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.06),
        inset 4px 0 0 #ff33d2,
        0 0 22px rgba(255, 51, 210, .32),
        0 0 34px rgba(27, 124, 255, .22);
    }

    .nav-btn.active::after {
      content: "";
      position: absolute;
      right: -9px;
      top: 8px;
      bottom: 8px;
      width: 8px;
      border: 1px solid rgba(123, 60, 255, .90);
      border-left: 0;
      border-radius: 0 8px 8px 0;
      box-shadow: 0 0 14px rgba(123, 60, 255, .85);
    }

    .sidebar-toggle {
      right: -16px;
      top: 24px;
      width: 32px;
      height: 46px;
      border-radius: 999px;
      background: rgba(7, 11, 34, .94);
      border-color: rgba(255, 67, 219, .45);
      box-shadow: 0 0 24px rgba(255, 51, 210, .32);
    }

    main {
      padding: 22px 24px 32px;
      background: transparent;
    }

    .topbar {
      gap: 18px;
      padding: 14px 18px;
      margin-bottom: 18px;
      border: 1px solid rgba(64, 123, 255, .32);
      border-radius: 8px;
      background:
        linear-gradient(180deg, rgba(6, 11, 35, .86), rgba(3, 8, 27, .72));
      box-shadow:
        inset 0 1px rgba(255,255,255,.04),
        inset 0 0 0 1px rgba(0, 216, 255, .04),
        0 0 32px rgba(27, 124, 255, .12);
      position: relative;
      overflow: visible;
    }

    .topbar::before,
    .panel::before,
    .card::before,
    .kpi::before,
    .reconciliation-card::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      border-radius: inherit;
      background:
        linear-gradient(90deg, #7b3cff 0 28px, transparent 28px calc(100% - 28px), #008dff calc(100% - 28px)) top / 100% 1px no-repeat,
        linear-gradient(90deg, #7b3cff 0 18px, transparent 18px calc(100% - 18px), #008dff calc(100% - 18px)) bottom / 100% 1px no-repeat,
        linear-gradient(#7b3cff 0 18px, transparent 18px calc(100% - 18px), #008dff calc(100% - 18px)) left / 1px 100% no-repeat,
        linear-gradient(#008dff 0 18px, transparent 18px calc(100% - 18px), #7b3cff calc(100% - 18px)) right / 1px 100% no-repeat;
      opacity: .76;
      filter: drop-shadow(0 0 7px rgba(0, 142, 255, .52));
    }

    h1 {
      text-transform: uppercase;
      font-size: 19px;
      letter-spacing: .02em;
      font-weight: 950;
    }

    .subtitle {
      font-size: 13px;
      color: #a8b1d4;
    }

    .toolbar { gap: 10px; }

    .sync-btn,
    .pending-payable-btn,
    .control,
    .icon-btn,
    .period-quick .seg {
      min-height: 42px;
      border-radius: 7px;
      background: rgba(3, 8, 28, .82);
      border: 1px solid rgba(64, 123, 255, .32);
      box-shadow:
        inset 0 1px rgba(255,255,255,.045),
        0 0 18px rgba(27,124,255,.10);
    }

    .sync-btn.connected,
    .sync-btn:not(.blocked) {
      color: #00ff96;
      border-color: rgba(0, 255, 150, .38);
      background: rgba(0, 32, 36, .48);
      text-shadow: 0 0 12px rgba(0, 255, 150, .30);
    }

    .pending-payable-btn {
      color: #ffd064;
      border-color: rgba(255, 153, 0, .34);
      background: rgba(25, 17, 3, .42);
    }

    .period-quick {
      padding: 0;
      gap: 10px;
      background: transparent;
      border: 0;
    }

    .period-quick .seg {
      min-height: 48px;
      padding: 0 22px;
      color: #d9dbec;
      font-size: 14px;
      text-transform: none;
    }

    .period-quick .seg.active,
    .primary,
    .action-btn.approved,
    button.primary {
      background: linear-gradient(135deg, #7b3cff 0%, #ff33d2 58%, #ff8a22 100%);
      color: #fff;
      border-color: rgba(255, 51, 210, .68);
      box-shadow:
        0 0 24px rgba(255, 51, 210, .34),
        inset 0 1px rgba(255,255,255,.22);
    }

    .panel,
    .card,
    .kpi,
    .modal,
    .reconciliation-card {
      border-radius: 8px;
      border: 1px solid rgba(64, 123, 255, .28);
      background:
        linear-gradient(180deg, rgba(4, 12, 36, .76), rgba(3, 8, 26, .90)),
        radial-gradient(circle at 85% 12%, rgba(0, 142, 255, .12), transparent 34%),
        radial-gradient(circle at 9% 9%, rgba(255, 51, 210, .10), transparent 26%);
      box-shadow:
        0 18px 46px rgba(0,0,0,.36),
        inset 0 1px rgba(255,255,255,.055),
        0 0 25px rgba(27, 124, 255, .12);
      position: relative;
      overflow: hidden;
    }

    .panel-header {
      min-height: 54px;
      border-bottom: 1px solid rgba(64, 123, 255, .18);
      background: rgba(2, 7, 25, .20);
    }

    .panel-title {
      text-transform: uppercase;
      font-size: 14px;
      letter-spacing: .02em;
      font-weight: 950;
    }

    .panel-note {
      color: #a2abd0;
      font-size: 12px;
    }

    #operacao .dashboard-surface {
      background: transparent;
      border: 0;
      box-shadow: none;
      padding: 0;
      overflow: visible;
    }

    #operacao .dashboard-surface::before { display: none; }

    #operacao .dashboard-grid {
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: 14px;
    }

    #operacao .dashboard-grid .kpi {
      grid-column: span 2;
      min-height: 144px;
      padding: 16px 16px 13px;
      grid-template-columns: 44px minmax(0, 1fr);
      border-color: rgba(64, 123, 255, .38);
    }

    #operacao .dashboard-grid .kpi:nth-child(n+7) {
      grid-column: span 2;
      min-height: 120px;
    }

    #operacao .dashboard-grid .kpi:nth-child(n+7) .delta {
      display: flex;
    }

    #operacao .dashboard-grid .kpi::after {
      inset: auto 12px 10px 72px;
      height: 34px;
      opacity: .80;
      filter: drop-shadow(0 0 8px currentColor);
    }

    #operacao .dashboard-grid .kpi:nth-child(1) { color: #a85cff; border-color: rgba(168, 92, 255, .42); }
    #operacao .dashboard-grid .kpi:nth-child(2) { color: #00f0bd; border-color: rgba(0, 240, 189, .35); }
    #operacao .dashboard-grid .kpi:nth-child(3) { color: #ff3c73; border-color: rgba(255, 60, 115, .35); }
    #operacao .dashboard-grid .kpi:nth-child(4) { color: #2f99ff; border-color: rgba(47, 153, 255, .38); }
    #operacao .dashboard-grid .kpi:nth-child(5) { color: #32f1a1; }
    #operacao .dashboard-grid .kpi:nth-child(6) { color: #ff42d2; }
    #operacao .dashboard-grid .kpi:nth-child(7) { color: #1794ff; }
    #operacao .dashboard-grid .kpi:nth-child(8) { color: #00d7ff; }
    #operacao .dashboard-grid .kpi:nth-child(9) { color: #9a4dff; }

    #operacao .dashboard-grid .kpi-icon,
    .kpi-icon,
    .finance-summary-icon {
      width: 42px;
      height: 42px;
      border-radius: 10px;
      color: currentColor;
      background:
        radial-gradient(circle at 50% 55%, color-mix(in srgb, currentColor 22%, transparent), transparent 54%),
        rgba(255,255,255,.045);
      border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
      box-shadow:
        inset 0 0 18px color-mix(in srgb, currentColor 13%, transparent),
        0 0 20px color-mix(in srgb, currentColor 29%, transparent);
    }

    #operacao .dashboard-grid .kpi-icon svg,
    .kpi-icon svg,
    .finance-summary-icon svg {
      width: 21px;
      height: 21px;
      stroke-width: 2.05;
      filter: drop-shadow(0 0 6px currentColor);
    }

    #operacao .dashboard-grid .name {
      text-transform: uppercase;
      font-size: 11px;
      line-height: 1.25;
      color: #c5c8e6;
      letter-spacing: .04em;
      font-weight: 850;
    }

    #operacao .dashboard-grid .metric {
      margin-top: 8px;
      color: #fff;
      font-size: 22px;
      font-weight: 950;
      line-height: 1.05;
      letter-spacing: -.025em;
    }

    #operacao .dashboard-grid .delta {
      margin-top: 8px;
      color: #22f29a;
      font-size: 11px;
      font-weight: 800;
    }

    .dashboard-insights {
      grid-template-columns: 1.35fr .95fr;
      gap: 16px;
      margin-top: 16px;
    }

    .dashboard-secondary-insights {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
      margin-top: 16px;
    }

    .dashboard-insights .panel,
    .dashboard-secondary-insights .panel {
      min-height: 288px;
    }

    .dashboard-finance-chart {
      height: 222px;
    }

    .dashboard-chart-grid {
      stroke: rgba(79, 135, 255, .18);
    }

    .dashboard-chart-line {
      stroke-width: 3;
      filter: drop-shadow(0 0 8px currentColor);
    }

    .dashboard-plan-item,
    .server-revenue-row,
    .retention-row,
    .recent-activity-row {
      border-color: rgba(64, 123, 255, .14);
    }

    .dashboard-plan-fill,
    .server-bar-fill {
      background: linear-gradient(90deg, #1b7cff, #7b3cff, #ff33d2);
      box-shadow: 0 0 14px rgba(51, 134, 255, .35);
    }

    table {
      background: rgba(3, 8, 28, .42);
      border-color: rgba(64, 123, 255, .18);
    }

    th {
      background: rgba(255,255,255,.035);
      color: #b4bce0;
    }

    td {
      border-color: rgba(64, 123, 255, .12);
    }

    tbody tr:hover {
      background: rgba(27, 124, 255, .075);
    }

    [data-card-action] {
      cursor: pointer;
      transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
    }

    [data-card-action]:hover {
      transform: translateY(-3px);
      filter: brightness(1.08);
    }

    [data-card-action]:focus-visible {
      outline: 2px solid rgba(255, 51, 210, .72);
      outline-offset: 3px;
    }

    /* Fusion+ identidade compacta — referência 26/06/2026 23:41 */
    :root {
      --compact-bg: #050c18;
      --compact-bg-2: #081323;
      --compact-surface: rgba(11, 20, 38, .88);
      --compact-surface-2: rgba(15, 27, 49, .78);
      --compact-line: rgba(91, 119, 170, .26);
      --compact-line-strong: rgba(126, 90, 255, .36);
      --compact-muted: #9da9c9;
      --compact-ink: #f7f8ff;
      --compact-green: #2cf0a0;
      --compact-blue: #318cff;
      --compact-pink: #ff3e96;
      --compact-purple: #9957ff;
    }

    body {
      background:
        radial-gradient(circle at 80% 0%, rgba(45, 91, 158, .14), transparent 34%),
        radial-gradient(circle at 50% 100%, rgba(120, 45, 180, .14), transparent 36%),
        linear-gradient(180deg, #07101d 0%, #050913 48%, #050811 100%) !important;
      color: var(--compact-ink);
    }

    body::before,
    body::after,
    .shell::before {
      opacity: .18 !important;
      filter: blur(.1px);
    }

    .shell {
      grid-template-columns: 220px minmax(0, 1fr) !important;
    }

    .shell.sidebar-collapsed {
      grid-template-columns: 68px minmax(0, 1fr) !important;
    }

    aside {
      padding: 24px 14px 18px !important;
      background:
        linear-gradient(180deg, rgba(9, 18, 34, .94), rgba(5, 11, 22, .98)),
        radial-gradient(circle at 0% 0%, rgba(140, 72, 255, .11), transparent 30%) !important;
      border-right: 1px solid rgba(77, 104, 150, .26) !important;
      box-shadow: inset -1px 0 rgba(255,255,255,.025) !important;
    }

    .brand {
      padding: 0 8px 24px !important;
      gap: 10px !important;
    }

    .brand-mark {
      width: 42px !important;
      height: 42px !important;
      border-radius: 10px !important;
      box-shadow: 0 0 20px rgba(161, 78, 255, .22) !important;
    }

    .brand-text strong {
      font-size: 26px !important;
      letter-spacing: -.04em !important;
    }

    .nav {
      gap: 8px !important;
    }

    .nav-btn {
      min-height: 42px !important;
      padding: 0 12px !important;
      border-radius: 7px !important;
      font-size: 13px !important;
      font-weight: 760 !important;
      letter-spacing: 0 !important;
      text-transform: none !important;
      border: 1px solid transparent !important;
      color: #d9def4 !important;
      background: transparent !important;
      box-shadow: none !important;
    }

    .nav-btn.active,
    .nav-btn:hover {
      background: linear-gradient(90deg, rgba(143, 71, 255, .62), rgba(105, 44, 201, .72)) !important;
      border-color: rgba(170, 112, 255, .36) !important;
      box-shadow: inset 0 1px rgba(255,255,255,.07), 0 12px 22px rgba(52, 22, 104, .24) !important;
    }

    .nav-icon {
      width: 20px !important;
      height: 20px !important;
      font-size: 17px !important;
      color: #d9dbff !important;
      filter: none !important;
    }

    main {
      padding: 24px 24px 22px !important;
      background: transparent !important;
    }

    .topbar {
      min-height: 64px !important;
      margin-bottom: 18px !important;
      padding: 0 0 14px !important;
      border: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
    }

    .topbar h1,
    .section-title,
    #operacao .dashboard-surface .panel-title {
      font-size: 21px !important;
      line-height: 1.08 !important;
      letter-spacing: -.025em !important;
      text-transform: uppercase !important;
      font-weight: 900 !important;
    }

    .topbar p,
    .panel-note,
    .muted {
      color: var(--compact-muted) !important;
      font-size: 12px !important;
    }

    .top-actions,
    .toolbar,
    .filter-row {
      gap: 10px !important;
    }

    button,
    select,
    input,
    .chip,
    .period-button,
    .pill,
    .filter-select {
      border-radius: 7px !important;
    }

    .period-button,
    [data-period],
    .filter-select,
    .toolbar select,
    .topbar select {
      min-height: 38px !important;
      padding: 0 14px !important;
      font-size: 12px !important;
      font-weight: 760 !important;
      background: rgba(8, 14, 28, .84) !important;
      border: 1px solid rgba(91, 119, 170, .30) !important;
      color: #d8def6 !important;
      box-shadow: inset 0 1px rgba(255,255,255,.035) !important;
    }

    .period-button.active,
    [data-period].active {
      background: linear-gradient(135deg, #ff3ba9, #7b45ff) !important;
      color: #fff !important;
      border-color: rgba(255, 79, 216, .42) !important;
      box-shadow: 0 0 20px rgba(255, 55, 186, .24), inset 0 1px rgba(255,255,255,.18) !important;
    }

    .parent-period-shell {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .parent-period-shell #periodFilter {
      display: none !important;
    }

    .parent-period-button {
      min-height: 38px;
      padding: 0 14px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 1px solid rgba(91, 119, 170, .30);
      border-radius: 7px;
      background: rgba(8, 14, 28, .84);
      color: #d8def6;
      font-size: 12px;
      font-weight: 800;
      box-shadow: inset 0 1px rgba(255,255,255,.035);
    }

    .parent-period-button.active {
      background: linear-gradient(135deg, #ff3ba9, #7b45ff);
      color: #fff;
      border-color: rgba(255, 79, 216, .52);
      box-shadow: 0 0 20px rgba(255, 55, 186, .24), inset 0 1px rgba(255,255,255,.18);
    }

    .parent-period-picker {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      z-index: 60;
      width: min(760px, calc(100vw - 48px));
      padding: 18px;
      border: 1px solid rgba(91, 119, 170, .30);
      border-radius: 8px;
      background: #161616;
      box-shadow: 0 22px 60px rgba(0,0,0,.58);
    }

    .parent-period-picker[hidden] {
      display: none !important;
    }

    .parent-period-head,
    .parent-period-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .parent-period-nav {
      width: 38px;
      height: 38px;
      padding: 0;
      border: 1px solid rgba(91, 119, 170, .42);
      border-radius: 10px;
      background: #0b1021;
      color: #eef2ff;
      font-size: 22px;
    }

    .parent-period-months {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
      margin-top: 14px;
    }

    .parent-period-title {
      margin: 14px 0 12px;
      text-align: center;
      color: #f7f7fb;
      font-size: 18px;
      font-weight: 950;
    }

    .parent-period-weekdays,
    .parent-period-days {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap: 8px;
    }

    .parent-period-weekdays span {
      text-align: center;
      color: #9b9ba1;
      font-size: 13px;
      font-weight: 900;
    }

    .parent-period-day {
      width: 100%;
      height: 42px;
      padding: 0;
      border: 1px solid rgba(59, 80, 125, .65);
      border-radius: 8px;
      background: #0b1021;
      color: #e8ecff;
      font-size: 16px;
      font-weight: 900;
    }

    .parent-period-day.out {
      color: #6f7280;
    }

    .parent-period-day.in-range {
      background: #242427;
    }

    .parent-period-day.selected {
      background: #ff0bc7;
      border-color: #ff61df;
      color: #fff;
    }

    .parent-period-actions {
      margin-top: 18px;
      padding-top: 14px;
      border-top: 1px solid rgba(255,255,255,.08);
      color: #b9bbca;
      font-weight: 800;
    }

    .parent-period-actions .primary {
      background: linear-gradient(135deg, #ff3ba9, #7b45ff);
      color: #fff;
    }

    @media (max-width: 760px) {
      .parent-period-picker {
        position: fixed;
        left: 12px;
        right: 12px;
        top: 78px;
        width: auto;
        max-height: calc(100vh - 96px);
        overflow: auto;
      }

      .parent-period-months {
        grid-template-columns: 1fr;
      }

      .parent-period-month:nth-child(2) {
        display: none;
      }
    }

    main .panel,
    main .card,
    main .kpi,
    main .modal {
      border-radius: 8px !important;
      border: 1px solid var(--compact-line) !important;
      background:
        radial-gradient(circle at 88% 100%, rgba(48, 108, 255, .08), transparent 32%),
        linear-gradient(180deg, rgba(12, 22, 42, .92), rgba(7, 14, 29, .96)) !important;
      box-shadow: inset 0 1px rgba(255,255,255,.035), 0 16px 34px rgba(0,0,0,.20) !important;
      backdrop-filter: none !important;
      animation: none !important;
    }

    main .panel::before,
    main .card::before,
    main .kpi::before,
    main .kpi::after,
    main .modal::before {
      opacity: 0 !important;
      display: none !important;
    }

    #operacao .dashboard-surface {
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
    }

    #operacao .dashboard-surface .panel-header {
      padding: 0 0 10px !important;
      border-bottom: 0 !important;
    }

    #operacao .dashboard-surface .dashboard-grid,
    #operacao .dashboard-grid {
      display: grid !important;
      grid-template-columns: repeat(24, minmax(0, 1fr)) !important;
      gap: 12px !important;
      margin-top: 12px !important;
    }

    #operacao .dashboard-grid .kpi {
      grid-column: span 6 !important;
      min-height: 128px !important;
      padding: 16px 18px !important;
      display: grid !important;
      grid-template-columns: 50px minmax(0, 1fr) !important;
      grid-template-rows: auto auto 1fr !important;
      column-gap: 14px !important;
      align-content: stretch !important;
      border-top: 0 !important;
      overflow: hidden !important;
    }

    #operacao .dashboard-grid .kpi:nth-child(1),
    #operacao .dashboard-grid .kpi:nth-child(2),
    #operacao .dashboard-grid .kpi:nth-child(3) {
      grid-column: span 8 !important;
      min-height: 138px !important;
    }

    #operacao .dashboard-grid .kpi:nth-child(n+6) {
      grid-column: span 6 !important;
      min-height: 104px !important;
    }

    #operacao .dashboard-grid .kpi-head {
      display: contents !important;
    }

    #operacao .dashboard-grid .kpi-icon {
      grid-column: 1 !important;
      grid-row: 1 / span 2 !important;
      width: 42px !important;
      height: 42px !important;
      border-radius: 10px !important;
      align-self: start !important;
      box-shadow: inset 0 0 16px rgba(255,255,255,.04), 0 0 18px color-mix(in srgb, currentColor 22%, transparent) !important;
    }

    #operacao .dashboard-grid .kpi-icon svg {
      width: 20px !important;
      height: 20px !important;
    }

    #operacao .dashboard-grid .name {
      grid-column: 2 !important;
      grid-row: 1 !important;
      align-self: end !important;
      font-size: 10.5px !important;
      letter-spacing: .055em !important;
      color: #b4bedf !important;
      text-transform: uppercase !important;
      line-height: 1.15 !important;
    }

    #operacao .dashboard-grid .metric {
      grid-column: 2 !important;
      grid-row: 2 !important;
      margin-top: 4px !important;
      font-size: clamp(22px, 1.45vw, 27px) !important;
      line-height: 1.04 !important;
      letter-spacing: -.035em !important;
      color: #fff !important;
    }

    #operacao .dashboard-grid .delta {
      display: block !important;
      grid-column: 2 !important;
      grid-row: 3 !important;
      margin-top: 8px !important;
      font-size: 11px !important;
      color: var(--compact-green) !important;
    }

    #operacao .dashboard-grid .delta.up { color: #22c55e !important; }
    #operacao .dashboard-grid .delta.down { color: #ef4444 !important; }
    #operacao .dashboard-grid .delta.flat { color: #facc15 !important; }

    #operacao .dashboard-grid .kpi .sparkline,
    #operacao .dashboard-grid .kpi svg.sparkline {
      position: absolute !important;
      right: 14px !important;
      bottom: 10px !important;
      width: 126px !important;
      height: 34px !important;
      opacity: .86 !important;
    }

    .dashboard-command-center {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      margin: 12px 0;
    }

    .dashboard-command-card {
      position: relative;
      min-height: 96px;
      padding: 15px 16px;
      border: 1px solid rgba(64, 123, 255, .24);
      border-radius: 8px;
      background: linear-gradient(180deg, rgba(6, 15, 38, .86), rgba(4, 10, 28, .94));
      box-shadow: inset 0 1px rgba(255,255,255,.045), 0 12px 30px rgba(0,0,0,.20);
      overflow: hidden;
    }

    .dashboard-command-card::before {
      content: "";
      position: absolute;
      inset: 0 auto 0 0;
      width: 3px;
      background: #2f99ff;
      opacity: .78;
    }

    .dashboard-command-card.warning::before { background: var(--amber); }
    .dashboard-command-card.money::before { background: var(--amber); }
    .dashboard-command-card.good::before { background: var(--green); }

    .dashboard-command-card span {
      display: block;
      color: #aeb8d9;
      font-size: 11px;
      font-weight: 950;
      letter-spacing: .055em;
      line-height: 1.2;
      text-transform: uppercase;
    }

    .dashboard-command-card strong {
      display: block;
      margin-top: 8px;
      color: #fff;
      font-size: clamp(21px, 1.35vw, 27px);
      line-height: 1.02;
      letter-spacing: -.035em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .dashboard-command-card small {
      display: block;
      margin-top: 8px;
      color: #8f9ac0;
      font-size: 12px;
      line-height: 1.25;
    }

    .dashboard-command-card.warning strong { color: var(--amber); }
    .dashboard-command-card.money strong { color: var(--amber); }
    .dashboard-command-card.good strong { color: var(--green); }

    .dashboard-insights {
      grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr) !important;
      gap: 12px !important;
      margin-top: 12px !important;
    }

    .dashboard-secondary-insights {
      display: grid !important;
      grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important;
      gap: 12px !important;
      margin-top: 12px !important;
    }

    .dashboard-insights .panel,
    .dashboard-secondary-insights .panel,
    .panel {
      min-height: unset !important;
    }

    .panel-header,
    .panel-body {
      padding: 14px 16px !important;
    }

    .panel-title,
    .panel h2,
    .panel h3 {
      font-size: 15px !important;
      line-height: 1.15 !important;
      letter-spacing: -.01em !important;
      text-transform: uppercase !important;
    }

    .dashboard-chart,
    .chart-card,
    .dashboard-finance-chart {
      min-height: 170px !important;
    }

    .dashboard-chart-summary {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 8px;
      margin-bottom: 10px;
    }

    .dashboard-chart-stat {
      min-height: 52px;
      padding: 8px 10px;
      border: 1px solid rgba(91,119,170,.22);
      border-radius: 8px;
      background: rgba(8,14,31,.58);
    }

    .dashboard-chart-stat span {
      display: block;
      color: #98a4c6;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .055em;
      text-transform: uppercase;
    }

    .dashboard-chart-stat strong {
      display: block;
      margin-top: 5px;
      color: #f8f9ff;
      font-size: clamp(12px, .9vw, 15px);
      line-height: 1.1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .dashboard-chart-stat.income strong { color: #35e5a1; }
    .dashboard-chart-stat.output strong { color: #ff5bca; }
    .dashboard-chart-stat.net strong,
    .dashboard-chart-stat.good strong { color: #5db8ff; }
    .dashboard-chart-stat.bad strong { color: #ff8a3d; }

    .dashboard-chart-tabs {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 10px;
    }

    .dashboard-chart-tabs button {
      min-height: 29px;
      padding: 0 10px;
      border: 1px solid rgba(91,119,170,.30);
      border-radius: 8px;
      background: rgba(8,14,28,.84);
      color: #d8def6;
      font-size: 12px;
      font-weight: 850;
    }

    .dashboard-chart-tabs button.active {
      border-color: rgba(255,79,216,.72);
      background: linear-gradient(135deg,#ff3ba9,#7b45ff);
      color: #fff;
    }

    .dashboard-chart-shell {
      position: relative;
      min-height: 152px;
      padding: 4px 4px 0;
      border: 1px solid rgba(91,119,170,.14);
      border-radius: 8px;
      background: linear-gradient(180deg,rgba(5,10,24,.28),rgba(5,10,24,.04));
    }

    .dashboard-axis-html {
      position: absolute;
      inset: 4px auto 0 10px;
      z-index: 2;
      width: 86px;
      pointer-events: none;
    }

    .dashboard-axis-html span {
      position: absolute;
      left: 0;
      transform: translateY(-50%);
      color: #8d97b8;
      font-size: 11px;
      font-weight: 750;
      letter-spacing: 0;
      white-space: nowrap;
      font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    }

    .dashboard-chart-legend {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
      padding: 0 0 10px;
      color: #9faad0;
      font-size: 12px;
      font-weight: 800;
    }

    .dashboard-chart-legend span {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      white-space: nowrap;
    }

    .dashboard-chart-legend i {
      display: inline-block;
      width: 9px;
      height: 9px;
      border-radius: 999px;
      box-shadow: 0 0 14px currentColor;
    }

    .dashboard-chart-legend i.blue,
    .dashboard-chart-legend i.income { color: var(--blue); background: var(--blue); }
    .dashboard-chart-legend i.red,
    .dashboard-chart-legend i.output { color: var(--red); background: var(--red); }
    .dashboard-chart-legend i.green,
    .dashboard-chart-legend i.net { color: var(--green); background: var(--green); }

    .dashboard-chart-line {
      fill: none;
      stroke-width: 2.2;
      vector-effect: non-scaling-stroke;
      filter: drop-shadow(0 0 5px currentColor);
    }

    .dashboard-chart-line.income { stroke: var(--blue); color: var(--blue); }
    .dashboard-chart-line.output { stroke: var(--red); color: var(--red); }
    .dashboard-chart-line.net { stroke: var(--green); color: var(--green); }

    .dashboard-chart-point {
      fill: rgba(8,12,28,.96);
      stroke-width: 2;
      vector-effect: non-scaling-stroke;
      cursor: pointer;
    }

    .dashboard-chart-point.income { stroke: var(--blue); }
    .dashboard-chart-point.output { stroke: var(--red); }
    .dashboard-chart-point.net { stroke: var(--green); }
    .dashboard-chart-point.danger { stroke: #ff5b7c; fill: rgba(255,91,124,.22); }
    .dashboard-chart-point.neutral { stroke: #ffcc33; fill: rgba(255,204,51,.18); }

    .dashboard-chart-empty {
      display: grid;
      gap: 8px;
      padding: 20px;
      border: 1px dashed rgba(166,175,200,.25);
      border-radius: 8px;
      background: rgba(8,14,28,.58);
      color: #a6afc8;
    }

    .dashboard-chart-empty strong { color: #f8f9ff; font-size: 15px; }
    .dashboard-chart-empty span { font-size: 13px; line-height: 1.45; }

    table th,
    table td {
      padding: 10px 12px !important;
      font-size: 12px !important;
    }

    th {
      color: #a8b3d3 !important;
      letter-spacing: .055em !important;
    }

    .status-strip {
      gap: 0 !important;
      margin-top: 14px !important;
      border-radius: 8px !important;
      border: 1px solid var(--compact-line) !important;
      background: rgba(11, 20, 38, .82) !important;
    }

    .status-strip > * {
      padding: 12px 16px !important;
      min-height: 54px !important;
      border-right: 1px solid rgba(91,119,170,.20) !important;
    }

    @media (max-width: 1440px) {
      #operacao .dashboard-grid .kpi,
      #operacao .dashboard-grid .kpi:nth-child(n+7) {
        grid-column: span 8 !important;
      }
      .dashboard-command-center { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (max-width: 1080px) {
      #operacao .dashboard-grid .kpi,
      #operacao .dashboard-grid .kpi:nth-child(n+7) {
        grid-column: span 12 !important;
      }
      .dashboard-insights,
      .dashboard-secondary-insights { grid-template-columns: 1fr !important; }
    }

    @media (max-width: 720px) {
      .topbar { padding: 14px; }
      #operacao .dashboard-grid .kpi,
      #operacao .dashboard-grid .kpi:nth-child(n+7) {
        grid-column: span 24 !important;
      }
      .dashboard-command-center { grid-template-columns: 1fr; }
      .dashboard-insights,
      .dashboard-secondary-insights {
        grid-template-columns: 1fr !important;
      }
    }
    /* Detalhamentos explicativos: aparecem só ao passar o mouse/focar o card. */
    .kpi .delta,
    .reconciliation-card small,
    .pending-center-card small,
    .closing-card small,
    .finance-summary-card small {
      max-height: 0 !important;
      margin-top: 0 !important;
      opacity: 0 !important;
      overflow: hidden !important;
      transform: translateY(-3px) !important;
      transition: max-height .18s ease, opacity .18s ease, margin-top .18s ease, transform .18s ease !important;
      pointer-events: none !important;
    }

    .kpi:hover .delta,
    .kpi:focus-within .delta,
    .kpi:focus-visible .delta,
    .reconciliation-card:hover small,
    .reconciliation-card:focus-within small,
    .pending-center-card:hover small,
    .pending-center-card:focus-within small,
    .closing-card:hover small,
    .closing-card:focus-within small,
    .finance-summary-card:hover small,
    .finance-summary-card:focus-within small {
      max-height: 44px !important;
      margin-top: 8px !important;
      opacity: 1 !important;
      transform: translateY(0) !important;
    }
    .loop-filter-backdrop{position:fixed;inset:0;z-index:399;background:rgba(0,0,0,.34)}
    .loop-filter-backdrop[hidden]{display:none!important}
    .loop-filter-drawer{position:fixed;inset:0 0 0 auto;z-index:400;width:320px;height:100vh;display:grid;grid-template-rows:auto 1fr auto;transform:translateX(104%);transition:transform .28s ease;background:rgba(29,29,29,.95);border-left:1px solid rgba(255,255,255,.08);box-shadow:-18px 0 42px rgba(0,0,0,.42);color:#f7f6fa;overflow:hidden;backdrop-filter:blur(18px)}
    .loop-filter-drawer.show{transform:translateX(0)}
    .loop-filter-head{height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 24px}
    .loop-filter-head h2{margin:0;color:#fff;font-size:20px;font-weight:900}
    .loop-filter-head button{width:34px;height:34px;padding:0;border:0;background:transparent;color:#bdbbc1;box-shadow:none;font-size:31px;font-weight:300;line-height:1}
    .loop-filter-body{display:grid;align-content:start;gap:30px;padding:18px 24px 24px;overflow:auto}
    .loop-filter-body label{display:grid;gap:8px;color:#a8a8ad;font-size:14px;font-weight:850}
    .loop-filter-body select{height:51px;margin:0;padding:0 16px;border:1px solid #303033;border-radius:10px;background:#202020;color:#d7d7dc;box-shadow:none;font-size:15px}
    .loop-filter-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:18px 24px 24px}
    .loop-filter-actions button{height:46px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;font-size:15px}
    .loop-filter-actions button:not(.primary){background:#202020;border:1px solid #303033;color:#c8c5cd;box-shadow:none}
    .loop-filter-actions .primary{background:#ff00bd;border:0;color:#fff;box-shadow:none}
    .clients-filter-bar,.movement-filter-bar{display:none!important}
    @media(max-width:620px){.loop-filter-drawer{width:min(320px,88vw)}.loop-filter-head{height:60px;padding:0 18px}.loop-filter-body{padding:18px}.loop-filter-actions{padding:16px 18px 20px}}
    :root{
      --fusion-status-green-bg:rgba(34,197,94,.14);
      --fusion-status-green-border:rgba(34,197,94,.46);
      --fusion-status-green-text:#4ade80;
      --fusion-status-yellow-bg:rgba(250,204,21,.14);
      --fusion-status-yellow-border:rgba(250,204,21,.48);
      --fusion-status-yellow-text:#facc15;
      --fusion-status-red-bg:rgba(239,68,68,.14);
      --fusion-status-red-border:rgba(239,68,68,.48);
      --fusion-status-red-text:#f87171;
      --fusion-status-blue-bg:rgba(59,130,246,.14);
      --fusion-status-blue-border:rgba(59,130,246,.48);
      --fusion-status-blue-text:#60a5fa;
    }
    .badge.green,
    .status.approved,
    .status.active,
    .movement-status-action.approved,
    .movement-approved-pill,
    .payable-status-badge.paid{
      background:var(--fusion-status-green-bg)!important;
      border-color:var(--fusion-status-green-border)!important;
      color:var(--fusion-status-green-text)!important;
    }
    .badge.amber,
    .status.pending,
    .movement-status-action.pending,
    .payable-status-badge.pending,
    .payable-status-badge.due,
    .payable-status-badge.neutral{
      background:var(--fusion-status-yellow-bg)!important;
      border-color:var(--fusion-status-yellow-border)!important;
      color:var(--fusion-status-yellow-text)!important;
    }
    .badge.red,
    .status.blocked,
    .status.expired,
    .payable-status-badge.overdue,
    .payable-status-badge.error{
      background:var(--fusion-status-red-bg)!important;
      border-color:var(--fusion-status-red-border)!important;
      color:var(--fusion-status-red-text)!important;
    }
    .badge.blue,
    .payable-status-badge.receivable,
    .payment-method-badge,
    .statement-badge,
    .server-badge.reseller-default{
      background:var(--fusion-status-blue-bg)!important;
      border-color:var(--fusion-status-blue-border)!important;
      color:var(--fusion-status-blue-text)!important;
    }

    .vault-admin-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(320px,.55fr);gap:16px;align-items:start}
    .vault-admin-row-main{display:grid;gap:4px}
    .vault-admin-row-main strong{color:var(--text)}
    .vault-admin-row-main small{color:var(--muted)}
    .vault-admin-actions{display:flex;gap:8px;flex-wrap:wrap}
    .vault-admin-actions .action-btn{min-width:82px;padding:8px 10px}
    .inline-check{display:flex;align-items:center;gap:10px;color:var(--muted);font-weight:700}
    .inline-check input{width:auto}
    @media(max-width:1120px){.vault-admin-layout{grid-template-columns:1fr}}

    /* Dashboard financeiro: evita que resumo, legenda e grafico se sobreponham. */
    #operacao .dashboard-finance-chart {
      display: grid !important;
      grid-template-rows: auto auto auto minmax(190px, 1fr) !important;
      align-content: start !important;
      gap: 10px !important;
      height: auto !important;
      min-height: 380px !important;
      padding: 14px 16px 16px !important;
      overflow: hidden !important;
    }

    #operacao .dashboard-chart-summary {
      display: grid !important;
      grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
      gap: 8px !important;
      margin: 0 !important;
      width: 100% !important;
    }

    #operacao .dashboard-chart-stat {
      display: grid !important;
      align-content: center !important;
      min-width: 0 !important;
      min-height: 56px !important;
      padding: 8px 10px !important;
      border: 1px solid rgba(91,119,170,.22) !important;
      border-radius: 8px !important;
      background: rgba(8,14,31,.62) !important;
      text-align: left !important;
    }

    #operacao .dashboard-chart-stat span,
    #operacao .dashboard-chart-stat strong {
      display: block !important;
      min-width: 0 !important;
      text-align: left !important;
      line-height: 1.12 !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }

    #operacao .dashboard-chart-stat span {
      color: #98a4c6 !important;
      font-size: 10px !important;
      font-weight: 900 !important;
      letter-spacing: .055em !important;
      text-transform: uppercase !important;
    }

    #operacao .dashboard-chart-stat strong {
      margin-top: 5px !important;
      color: #f8f9ff !important;
      font-size: clamp(12px, .88vw, 15px) !important;
    }

    #operacao .dashboard-chart-tabs {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 8px !important;
      flex-wrap: wrap !important;
      margin: 0 !important;
      width: 100% !important;
    }

    #operacao .dashboard-chart-tabs button {
      width: auto !important;
      min-width: 92px !important;
      height: 34px !important;
      min-height: 34px !important;
      padding: 0 12px !important;
      border-radius: 8px !important;
      font-size: 12px !important;
      line-height: 1 !important;
    }

    #operacao .dashboard-chart-legend {
      display: flex !important;
      align-items: center !important;
      justify-content: flex-start !important;
      gap: 14px !important;
      flex-wrap: wrap !important;
      padding: 0 !important;
      margin: 0 !important;
      width: 100% !important;
      color: #a6afcf !important;
      font-size: 12px !important;
      font-weight: 800 !important;
      line-height: 1.2 !important;
    }

    #operacao .dashboard-chart-legend span {
      display: inline-flex !important;
      align-items: center !important;
      gap: 7px !important;
      min-width: 0 !important;
      white-space: nowrap !important;
    }

    #operacao .dashboard-chart-legend i {
      display: inline-block !important;
      width: 9px !important;
      height: 9px !important;
      flex: 0 0 9px !important;
      border-radius: 999px !important;
    }

    #operacao .dashboard-chart-shell {
      position: relative !important;
      width: 100% !important;
      height: 210px !important;
      min-height: 210px !important;
      padding: 0 !important;
      border: 1px solid rgba(91,119,170,.16) !important;
      border-radius: 8px !important;
      background: linear-gradient(180deg,rgba(5,10,24,.30),rgba(5,10,24,.05)) !important;
      overflow: hidden !important;
    }

    #operacao .dashboard-chart-shell svg {
      position: absolute !important;
      inset: 0 !important;
      display: block !important;
      width: 100% !important;
      height: 100% !important;
      overflow: visible !important;
    }

    #operacao .dashboard-axis-html {
      position: absolute !important;
      top: 0 !important;
      bottom: 28px !important;
      left: 10px !important;
      z-index: 2 !important;
      width: 94px !important;
      pointer-events: none !important;
    }

    #operacao .dashboard-axis-html span {
      position: absolute !important;
      left: 0 !important;
      transform: translateY(-50%) !important;
      max-width: 88px !important;
      color: #8d97b8 !important;
      font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
      font-size: 11px !important;
      font-weight: 750 !important;
      letter-spacing: 0 !important;
      line-height: 1 !important;
      white-space: nowrap !important;
    }

    @media (max-width: 980px) {
      #operacao .dashboard-chart-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }
    }

    @media (max-width: 620px) {
      #operacao .dashboard-finance-chart {
        grid-template-rows: auto auto auto minmax(180px, 1fr) !important;
        min-height: 500px !important;
      }

      #operacao .dashboard-chart-summary {
        grid-template-columns: 1fr !important;
      }

      #operacao .dashboard-chart-shell {
        height: 190px !important;
        min-height: 190px !important;
      }
    }