:root {
      --ink: #0f0f11;
      --surface: #f4f2ee;
      --card: #ffffff;
      --accent: #e8521a;
      --accent2: #2563eb;
      --muted: #6b7280;
      --border: #e3dfd6;
      --danger: #dc2626;
      --success: #16a34a;
      --warning: #d97706;
      --sidebar: #0f0f11;
      --sidebar-item: #fff9;
      --sidebar-active: #fff1;
      --row-hover: #f5f3ef;
      --sw: 256px
    }

    /* ── Dark theme ── */
    [data-theme="dark"] {
      --ink: #e8e6e1;
      --surface: #111113;
      --card: #1c1c1f;
      --muted: #9ca3af;
      --border: #2d2d32;
      --danger: #f87171;
      --success: #4ade80;
      --warning: #fbbf24;
      --sidebar: #0a0a0c;
      --sidebar-item: #ffffff99;
      --sidebar-active: #ffffff14;
      --row-hover: #252528;
    }

    /* transição suave de tema */
    *,
    *::before,
    *::after {
      transition: background-color .22s ease, border-color .22s ease, color .12s ease
    }

    /* mas não atrasar transforms/opacidade/outros */
    button,
    a,
    .btn,
    .nav-item,
    .modal-ov,
    .sidebar {
      transition: background-color .22s ease, border-color .22s ease, color .12s ease, transform .22s ease, opacity .18s ease
    }

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

    body {
      font-family: 'DM Sans', sans-serif;
      background: var(--surface);
      color: var(--ink);
      font-size: 15px
    }

    h1,
    h2,
    h3,
    h4 {
      font-family: 'Syne', sans-serif
    }

    /* ── Sidebar ── */
    .sidebar {
      width: var(--sw);
      background: var(--sidebar);
      position: fixed;
      top: 0;
      left: 0;
      height: 100vh;
      overflow-y: auto;
      z-index: 50;
      display: flex;
      flex-direction: column;
      transition: transform .28s cubic-bezier(.4, 0, .2, 1)
    }

    .sb-logo {
      font-family: 'Syne', sans-serif;
      font-weight: 800;
      font-size: 1.35rem;
      color: #fff;
      padding: 1.4rem 1.4rem .9rem;
      border-bottom: 1px solid var(--sidebar-active);
      display: flex;
      align-items: center;
      justify-content: space-between
    }

    .sb-logo span {
      color: var(--accent)
    }

    /* ── Collapse menu financeiro ── */
    .nav-collapse-btn {
      display: flex;
      align-items: center;
      gap: .7rem;
      padding: .6rem 1.4rem;
      color: var(--sidebar-item);
      font-size: .83rem;
      font-weight: 500;
      cursor: pointer;
      border-left: 3px solid transparent;
      transition: .12s;
      user-select: none;
      justify-content: space-between;
      width: 100%
    }

    .nav-collapse-btn:hover {
      color: #fff;
      background: var(--sidebar-active)
    }

    .nav-collapse-btn.open {
      color: #fff
    }

    .nav-collapse-arrow {
      transition: transform .22s ease;
      flex-shrink: 0;
      opacity: .6
    }

    .nav-collapse-btn.open .nav-collapse-arrow {
      transform: rotate(90deg)
    }

    .nav-collapse-body {
      overflow: hidden;
      max-height: 0;
      transition: max-height .28s cubic-bezier(.4, 0, .2, 1)
    }

    .nav-collapse-body.open {
      max-height: 200px
    }

    .nav-sub-item {
      display: flex;
      align-items: center;
      gap: .7rem;
      padding: .5rem 1.4rem .5rem 2.6rem;
      color: var(--sidebar-item);
      font-size: .8rem;
      font-weight: 400;
      cursor: pointer;
      border-left: 3px solid transparent;
      transition: .12s;
      user-select: none
    }

    .nav-sub-item:hover {
      color: #fff;
      background: var(--sidebar-active)
    }

    .nav-sub-item.active {
      color: #fff;
      background: var(--sidebar-active);
      border-left-color: var(--accent)
    }

    .nav-sec {
      padding: .5rem 1.4rem .2rem;
      font-size: .65rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .12em;
      color: #fff4;
      margin-top: .4rem
    }

    .nav-item {
      display: flex;
      align-items: center;
      gap: .7rem;
      padding: .6rem 1.4rem;
      color: var(--sidebar-item);
      font-size: .83rem;
      font-weight: 500;
      cursor: pointer;
      border-left: 3px solid transparent;
      transition: .12s;
      user-select: none
    }

    .nav-item:hover {
      color: #fff;
      background: var(--sidebar-active)
    }

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

    .sb-foot {
      padding: 1rem 1.4rem;
      border-top: 1px solid #fff1;
      margin-top: auto
    }

    /* Botão fechar dentro do sidebar (mobile) */
    .sb-close-btn {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      color: #fff9;
      padding: .3rem;
      border-radius: 6px;
      line-height: 1;
      transition: .12s
    }

    .sb-close-btn:hover {
      color: #fff;
      background: #fff2
    }

    /* Overlay escuro atrás do sidebar em mobile */
    .sb-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: #00000060;
      z-index: 45;
      backdrop-filter: blur(2px);
      opacity: 0;
      transition: opacity .28s
    }

    .sb-overlay.visible {
      opacity: 1
    }

    /* Botão hambúrguer na topbar */
    .btn-hamburger {
      display: none;
      background: none;
      border: 1.5px solid var(--border);
      border-radius: 8px;
      cursor: pointer;
      padding: .38rem .45rem;
      color: var(--ink);
      align-items: center;
      justify-content: center;
      transition: .12s;
      flex-shrink: 0
    }

    .btn-hamburger:hover {
      background: var(--surface);
      border-color: var(--muted)
    }

    .btn-hamburger .hb-icon {
      display: block;
      width: 18px;
      height: 2px;
      background: currentColor;
      border-radius: 2px;
      transition: .25s;
      position: relative
    }

    .btn-hamburger .hb-icon::before,
    .btn-hamburger .hb-icon::after {
      content: '';
      position: absolute;
      width: 18px;
      height: 2px;
      background: currentColor;
      border-radius: 2px;
      transition: .25s;
      left: 0
    }

    .btn-hamburger .hb-icon::before {
      top: -6px
    }

    .btn-hamburger .hb-icon::after {
      top: 6px
    }

    /* Animação X quando sidebar está aberto */
    .btn-hamburger.open .hb-icon {
      background: transparent
    }

    .btn-hamburger.open .hb-icon::before {
      transform: rotate(45deg);
      top: 0
    }

    .btn-hamburger.open .hb-icon::after {
      transform: rotate(-45deg);
      top: 0
    }

    /* ── Main ── */
    .main {
      margin-left: var(--sw);
      padding: 1.75rem;
      min-height: 100vh;
      transition: margin-left .28s cubic-bezier(.4, 0, .2, 1)
    }

    .topbar {
      background: var(--card);
      border-bottom: 1px solid var(--border);
      padding: .7rem 1.75rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: sticky;
      top: 0;
      z-index: 40;
      margin: -1.75rem -1.75rem 1.75rem;
      gap: .75rem
    }

    /* ── Responsive breakpoints ── */
    @media(max-width:900px) {
      :root {
        --sw: 260px
      }

      .sidebar {
        transform: translateX(-100%)
      }

      .sidebar.sb-open {
        transform: translateX(0);
        box-shadow: 8px 0 32px #00000040
      }

      .sb-overlay {
        display: block
      }

      .sb-close-btn {
        display: flex
      }

      .btn-hamburger {
        display: flex
      }

      .main {
        margin-left: 0
      }

      .g4 {
        grid-template-columns: repeat(2, 1fr)
      }
    }

    @media(max-width:600px) {
      .topbar {
        padding: .6rem 1rem;
        gap: .5rem
      }

      .main {
        padding: 1rem
      }

      .topbar {
        margin: -1rem -1rem 1rem
      }

      .g2,
      .g3,
      .g4 {
        grid-template-columns: 1fr
      }

      .modal {
        max-width: calc(100vw - 1.5rem) !important;
        margin: .75rem
      }

      .modal-lg {
        max-width: calc(100vw - 1.5rem) !important
      }

      #userNameTop,
      #userRoleTop {
        display: none
      }

      .kpi-val {
        font-size: 1.3rem
      }
    }

    /* ── Pages ── */
    .page {
      display: none
    }

    .page.active {
      display: block
    }

    /* ── Cards ── */
    .card {
      background: var(--card);
      border-radius: 12px;
      border: 1px solid var(--border);
      padding: 1.4rem
    }

    .kpi-card {
      background: var(--card);
      border-radius: 12px;
      border: 1px solid var(--border);
      padding: 1.1rem 1.3rem
    }

    .kpi-lbl {
      font-size: .68rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .09em;
      color: var(--muted)
    }

    .kpi-val {
      font-family: 'Syne', sans-serif;
      font-size: 1.7rem;
      font-weight: 800;
      margin: .2rem 0 .05rem
    }

    .kpi-sub {
      font-size: .72rem;
      color: var(--muted)
    }

    /* ── Buttons ── */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      padding: .5rem 1.1rem;
      border-radius: 8px;
      font-size: .83rem;
      font-weight: 600;
      cursor: pointer;
      border: none;
      font-family: 'DM Sans', sans-serif;
      transition: .12s;
      line-height: 1.2
    }

    .btn-primary {
      background: var(--accent);
      color: #fff
    }

    .btn-primary:hover {
      background: #d44816
    }

    .btn-secondary {
      background: transparent;
      border: 1.5px solid var(--border);
      color: var(--ink)
    }

    .btn-secondary:hover {
      background: var(--surface)
    }

    .btn-success {
      background: var(--success);
      color: #fff
    }

    .btn-success:hover {
      filter: brightness(.9)
    }

    .btn-danger {
      background: var(--danger);
      color: #fff
    }

    .btn-danger:hover {
      filter: brightness(.9)
    }

    .btn-ghost {
      background: transparent;
      color: var(--muted);
      border: none
    }

    .btn-ghost:hover {
      color: var(--ink)
    }

    .btn-sm {
      padding: .3rem .7rem;
      font-size: .75rem
    }

    /* ── Forms ── */
    .fg {
      margin-bottom: .9rem
    }

    .fl {
      display: block;
      font-size: .72rem;
      font-weight: 600;
      color: var(--muted);
      margin-bottom: .3rem;
      text-transform: uppercase;
      letter-spacing: .06em
    }

    .fi {
      width: 100%;
      padding: .55rem .85rem;
      border: 1.5px solid var(--border);
      border-radius: 8px;
      font-size: .855rem;
      font-family: 'DM Sans', sans-serif;
      background: var(--card);
      color: var(--ink);
      transition: .12s
    }

    .fi:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px #e8521a15
    }

    select.fi {
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right .7rem center;
      padding-right: 2.2rem
    }

    textarea.fi {
      resize: vertical
    }

    /* ── Badges ── */
    .badge {
      display: inline-flex;
      align-items: center;
      padding: .18rem .6rem;
      border-radius: 20px;
      font-size: .68rem;
      font-weight: 700
    }

    .bs {
      background: color-mix(in srgb, #16a34a 15%, var(--card));
      color: var(--success)
    }

    .bd {
      background: color-mix(in srgb, #dc2626 15%, var(--card));
      color: var(--danger)
    }

    .bw {
      background: color-mix(in srgb, #d97706 15%, var(--card));
      color: var(--warning)
    }

    .bi {
      background: color-mix(in srgb, #2563eb 15%, var(--card));
      color: var(--accent2)
    }

    .bg {
      background: var(--surface);
      color: var(--muted)
    }

    /* ── Tables ── */
    table {
      width: 100%;
      border-collapse: collapse
    }

    th {
      text-align: left;
      padding: .65rem .9rem;
      font-size: .68rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .07em;
      color: var(--muted);
      border-bottom: 2px solid var(--border);
      background: var(--surface)
    }

    td {
      padding: .65rem .9rem;
      border-bottom: 1px solid var(--border);
      vertical-align: middle;
      font-size: .85rem;
      color: var(--ink)
    }

    tr:hover td {
      background: var(--row-hover)
    }

    /* ── Modals ── */
    .modal-ov {
      position: fixed;
      inset: 0;
      background: #0009;
      z-index: 100;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 1rem
    }

    .modal-ov.open {
      display: flex
    }

    .modal {
      background: var(--card);
      border-radius: 16px;
      width: 100%;
      max-width: 680px;
      max-height: 90vh;
      overflow-y: auto;
      color: var(--ink)
    }

    .modal-lg {
      max-width: 900px
    }

    .mh {
      padding: 1.3rem 1.4rem;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: sticky;
      top: 0;
      background: var(--card);
      z-index: 1
    }

    .mb {
      padding: 1.4rem
    }

    .mf {
      padding: .9rem 1.4rem;
      border-bottom: 1px solid var(--border);
      display: flex;
      justify-content: flex-end;
      gap: .65rem;
      position: sticky;
      bottom: 0;
      background: var(--card)
    }

    /* ── Tabs ── */
    .tabs {
      display: flex;
      gap: .2rem;
      border-bottom: 2px solid var(--border);
      margin-bottom: 1.3rem
    }

    .tab {
      padding: .55rem 1.1rem;
      font-size: .83rem;
      font-weight: 600;
      cursor: pointer;
      color: var(--muted);
      border-bottom: 2px solid transparent;
      margin-bottom: -2px;
      transition: .12s
    }

    .tab.active {
      color: var(--accent);
      border-bottom-color: var(--accent)
    }

    .tc {
      display: none
    }

    .tc.active {
      display: block
    }

    /* ── Misc ── */
    .avatar {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: .75rem;
      color: #fff;
      flex-shrink: 0
    }

    .theme-opt:hover {
      background: var(--surface)
    }

    .theme-opt.active {
      color: var(--accent);
      font-weight: 700
    }

    .theme-opt.active::after {
      content: '✓';
      margin-left: auto;
      font-size: .8rem
    }

    .ac-drop {
      display: none;
      position: absolute;
      top: calc(100% + 2px);
      left: 0;
      right: 0;
      background: var(--card);
      border: 1.5px solid var(--accent2);
      border-top: none;
      border-radius: 0 0 10px 10px;
      box-shadow: 0 8px 24px #0003;
      z-index: 1002;
      max-height: 240px;
      overflow-y: auto
    }

    .ac-item {
      padding: .6rem .85rem;
      cursor: pointer;
      border-bottom: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: .5rem;
      transition: background .12s
    }

    .ac-item:hover {
      background: var(--bg)
    }

    .ac-item:last-child {
      border-bottom: none;
      border-radius: 0 0 10px 10px
    }

    .ac-item .ac-name {
      font-weight: 600;
      font-size: .85rem
    }

    .ac-item .ac-sub {
      font-size: .72rem;
      color: var(--muted);
      margin-top: .1rem
    }

    .ac-item .ac-badge {
      font-size: .7rem;
      font-weight: 700;
      padding: .15rem .45rem;
      border-radius: 5px
    }

    .pbar {
      height: 5px;
      border-radius: 3px;
      background: var(--border);
      overflow: hidden
    }

    .pfill {
      height: 100%;
      border-radius: 3px
    }

    .alert {
      border-radius: 8px;
      padding: .7rem .9rem;
      font-size: .83rem;
      margin-bottom: .9rem
    }

    .alert-s {
      background: color-mix(in srgb, #16a34a 12%, var(--card));
      color: var(--success);
      border: 1px solid color-mix(in srgb, #16a34a 30%, transparent)
    }

    .alert-d {
      background: color-mix(in srgb, #dc2626 12%, var(--card));
      color: var(--danger);
      border: 1px solid color-mix(in srgb, #dc2626 30%, transparent)
    }

    .alert-w {
      background: color-mix(in srgb, #d97706 12%, var(--card));
      color: var(--warning);
      border: 1px solid color-mix(in srgb, #d97706 30%, transparent)
    }

    .sbox {
      position: relative
    }

    .sbox input {
      padding-left: 2.3rem
    }

    .sbox .ico {
      position: absolute;
      left: .7rem;
      top: 50%;
      transform: translateY(-50%);
      color: var(--muted);
      pointer-events: none
    }

    .ndot {
      position: absolute;
      top: 1px;
      right: 1px;
      width: 9px;
      height: 9px
    }

    .ndot::before,
    .ndot::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: var(--danger)
    }

    .ndot::before {
      animation: ping 1.4s cubic-bezier(0, 0, .2, 1) infinite
    }

    @keyframes ping {
      0% {
        transform: scale(1);
        opacity: .9
      }

      70% {
        transform: scale(2.2);
        opacity: 0
      }

      100% {
        transform: scale(2.2);
        opacity: 0
      }
    }

    .notif-item {
      padding: .75rem 1rem;
      border-bottom: 1px solid var(--border);
      display: flex;
      gap: .7rem;
      align-items: flex-start;
      font-size: .8rem;
      cursor: default;
      transition: background .12s
    }

    .notif-item:last-child {
      border-bottom: none
    }

    .notif-item:hover {
      background: var(--row-hover)
    }

    .notif-item .ni-icon {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: .9rem
    }

    .notif-item .ni-txt {
      flex: 1
    }

    .notif-item .ni-title {
      font-weight: 600;
      color: var(--ink);
      margin-bottom: .15rem
    }

    .notif-item .ni-sub {
      color: var(--muted);
      font-size: .75rem
    }

    .g2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: .9rem
    }

    .g3 {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: .9rem
    }

    .g4 {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: .9rem
    }

    .divider {
      border: none;
      border-top: 1px solid var(--border);
      margin: .9rem 0
    }

    /* Login */
    .login-sc {
      position: fixed;
      inset: 0;
      background: var(--ink);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 200
    }

    .login-card {
      background: var(--card);
      border-radius: 18px;
      padding: 2.3rem;
      width: 100%;
      max-width: 400px;
      position: relative
    }

    /* Formas de pagamento */
    .payment-methods-list {
      display: flex;
      flex-direction: column;
      gap: .4rem
    }

    .pm-row {
      display: grid;
      grid-template-columns: 32px 160px 1fr 34px;
      gap: .5rem;
      align-items: center;
      background: var(--card);
      border: 1.5px solid var(--border);
      border-radius: 9px;
      padding: .45rem .65rem;
      transition: .12s
    }

    .pm-row:hover {
      border-color: #d0ccc5
    }

    .pm-row.highlight {
      border-color: var(--accent2);
      background: color-mix(in srgb, var(--accent2) 10%, var(--card))
    }

    .pm-empty {
      text-align: center;
      padding: .9rem;
      color: var(--muted);
      font-size: .78rem;
      background: var(--surface);
      border-radius: 8px;
      border: 1.5px dashed var(--border)
    }

    .pm-total-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: .6rem .75rem;
      background: var(--sidebar);
      border-radius: 8px;
      margin-top: .4rem;
      font-size: .83rem;
      color: #fff
    }

    .pm-total-row .lbl {
      color: #ffffff80;
      font-size: .75rem
    }

    .pm-saldo {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: .5rem .75rem;
      border-radius: 8px;
      margin-top: .35rem;
      font-size: .83rem;
      font-weight: 600;
      border: 1.5px solid
    }

    .pm-saldo.ok {
      background: color-mix(in srgb, #16a34a 12%, var(--card));
      border-color: color-mix(in srgb, #16a34a 35%, transparent);
      color: var(--success)
    }

    .pm-saldo.warn {
      background: color-mix(in srgb, #d97706 12%, var(--card));
      border-color: color-mix(in srgb, #d97706 40%, transparent);
      color: var(--warning)
    }

    .pm-saldo.err {
      background: color-mix(in srgb, #dc2626 12%, var(--card));
      border-color: color-mix(in srgb, #dc2626 40%, transparent);
      color: var(--danger)
    }

    .pm-chip {
      display: inline-flex;
      align-items: center;
      gap: .25rem;
      padding: .17rem .52rem;
      border-radius: 6px;
      font-size: .7rem;
      font-weight: 700
    }

    .pm-chip.dinheiro {
      background: color-mix(in srgb, #16a34a 15%, var(--card));
      color: var(--success)
    }

    .pm-chip.pix {
      background: color-mix(in srgb, #2563eb 15%, var(--card));
      color: var(--accent2)
    }

    .pm-chip.cartao-debito {
      background: color-mix(in srgb, #d97706 15%, var(--card));
      color: var(--warning)
    }

    .pm-chip.cartao-credito {
      background: color-mix(in srgb, #7c3aed 15%, var(--card));
      color: #a78bfa
    }

    .pm-chip.boleto {
      background: var(--surface);
      color: var(--ink)
    }

    .pm-chip.cheque {
      background: color-mix(in srgb, #be185d 15%, var(--card));
      color: #f472b6
    }

    .pm-ico {
      width: 28px;
      height: 28px;
      border-radius: 7px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .85rem;
      flex-shrink: 0
    }

    /* ── User Panel (topbar) ── */
    .user-panel-wrap {
      position: relative
    }

    .user-panel-btn {
      display: flex;
      align-items: center;
      gap: .55rem;
      cursor: pointer;
      padding: .3rem .55rem .3rem .3rem;
      border-radius: 10px;
      border: 1.5px solid transparent;
      transition: .15s;
      background: none;
      color: var(--ink)
    }

    .user-panel-btn:hover {
      background: var(--surface);
      border-color: var(--border)
    }

    .user-panel-btn:focus {
      outline: none
    }

    #userAvatar {
      width: 38px;
      height: 38px;
      font-size: .8rem;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      color: #fff;
      flex-shrink: 0;
      box-shadow: 0 2px 8px #0002
    }

    .user-panel-chevron {
      color: var(--muted);
      transition: transform .2s ease;
      flex-shrink: 0
    }

    .user-panel-wrap.open .user-panel-chevron {
      transform: rotate(180deg)
    }

    .user-dropdown {
      display: none;
      position: absolute;
      right: 0;
      top: calc(100% + 8px);
      width: 260px;
      background: var(--card);
      border: 1.5px solid var(--border);
      border-radius: 14px;
      box-shadow: 0 12px 40px #0004;
      z-index: 300;
      overflow: hidden;
      animation: panelIn .18s ease
    }

    @keyframes panelIn {
      from {
        opacity: 0;
        transform: translateY(-6px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    .user-panel-wrap.open .user-dropdown {
      display: block
    }

    .udrop-header {
      padding: 1.2rem 1.1rem 1rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: .55rem;
      border-bottom: 1px solid var(--border);
      background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 8%, var(--card)), var(--card) 60%)
    }

    .udrop-avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Syne', sans-serif;
      font-weight: 800;
      font-size: 1.4rem;
      color: #fff;
      box-shadow: 0 4px 16px #0003;
      flex-shrink: 0
    }

    .udrop-name {
      font-family: 'Syne', sans-serif;
      font-weight: 700;
      font-size: .95rem;
      text-align: center;
      line-height: 1.25
    }

    .udrop-badge {
      display: inline-flex;
      align-items: center;
      gap: .3rem;
      background: color-mix(in srgb, var(--accent) 14%, var(--card));
      color: var(--accent);
      border-radius: 20px;
      padding: .2rem .65rem;
      font-size: .7rem;
      font-weight: 700
    }

    .udrop-rows {
      padding: .65rem .8rem
    }

    .udrop-row {
      display: flex;
      align-items: center;
      gap: .6rem;
      padding: .45rem .4rem;
      border-radius: 8px;
      font-size: .8rem;
      color: var(--muted)
    }

    .udrop-row svg {
      flex-shrink: 0;
      color: var(--muted)
    }

    .udrop-row span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--ink);
      font-size: .8rem
    }

    .udrop-row strong {
      font-weight: 600
    }

    .udrop-divider {
      border: none;
      border-top: 1px solid var(--border);
      margin: .3rem 0
    }

    .udrop-logout {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: .5rem;
      padding: .6rem;
      background: none;
      border: none;
      cursor: pointer;
      color: var(--danger);
      font-size: .8rem;
      font-weight: 600;
      font-family: 'DM Sans', sans-serif;
      border-radius: 0 0 12px 12px;
      transition: .14s
    }

    .udrop-logout:hover {
      background: color-mix(in srgb, var(--danger) 10%, var(--card))
    }

    /* ── DRE ── */
    .dre-wrap {
      font-size: .85rem
    }

    .dre-periodo-bar {
      display: flex;
      align-items: center;
      gap: .65rem;
      flex-wrap: wrap;
      margin-bottom: 1.3rem
    }

    .dre-section {
      border-radius: 10px;
      overflow: hidden;
      margin-bottom: .75rem;
      border: 1px solid var(--border)
    }

    .dre-section-head {
      display: flex;
      align-items: center;
      gap: .6rem;
      padding: .6rem 1rem;
      font-family: 'Syne', sans-serif;
      font-weight: 700;
      font-size: .8rem;
      text-transform: uppercase;
      letter-spacing: .07em;
      cursor: pointer;
      user-select: none;
      transition: background .12s
    }

    .dre-section-head:hover {
      filter: brightness(.96)
    }

    .dre-section-head .dre-sec-arrow {
      margin-left: auto;
      transition: transform .2s;
      opacity: .6;
      flex-shrink: 0
    }

    .dre-section-head.collapsed .dre-sec-arrow {
      transform: rotate(-90deg)
    }

    .dre-section-body {
      transition: none
    }

    .dre-section-body.collapsed {
      display: none
    }

    .dre-row {
      display: grid;
      grid-template-columns: 1fr repeat(var(--dre-cols, 1), 110px);
      align-items: center;
      padding: .42rem 1rem;
      border-top: 1px solid var(--border);
      gap: .5rem
    }

    .dre-row:first-child {
      border-top: none
    }

    .dre-row:hover {
      background: var(--row-hover)
    }

    .dre-row.sub {
      padding-left: 2rem;
      font-size: .8rem;
      color: var(--muted)
    }

    .dre-row.sub .dre-label {
      color: var(--muted)
    }

    .dre-label {
      font-weight: 500;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .dre-val {
      text-align: right;
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      white-space: nowrap
    }

    .dre-val.neg {
      color: var(--danger)
    }

    .dre-val.pos {
      color: var(--success)
    }

    .dre-val.neutral {
      color: var(--muted)
    }

    .dre-totline {
      display: grid;
      grid-template-columns: 1fr repeat(var(--dre-cols, 1), 110px);
      align-items: center;
      padding: .55rem 1rem;
      gap: .5rem;
      font-family: 'Syne', sans-serif;
      font-weight: 800;
      font-size: .83rem;
      border-top: 2px solid var(--border);
      background: var(--surface)
    }

    .dre-totline .dre-label {
      color: var(--ink)
    }

    .dre-totline .dre-val {
      font-size: .88rem
    }

    .dre-result-block {
      border-radius: 12px;
      padding: 1rem 1.3rem;
      display: grid;
      grid-template-columns: 1fr repeat(var(--dre-cols, 1), 130px);
      align-items: center;
      gap: .5rem;
      margin-bottom: .75rem
    }

    .dre-result-block .dre-label {
      font-family: 'Syne', sans-serif;
      font-weight: 800;
      font-size: .95rem
    }

    .dre-result-block .dre-val {
      font-family: 'Syne', sans-serif;
      font-weight: 800;
      font-size: 1.1rem;
      text-align: right
    }

    .dre-col-head {
      display: grid;
      grid-template-columns: 1fr repeat(var(--dre-cols, 1), 110px);
      padding: .45rem 1rem .35rem;
      gap: .5rem;
      border-bottom: 2px solid var(--border);
      margin-bottom: .2rem
    }

    .dre-col-head span {
      text-align: right;
      font-size: .68rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: var(--muted)
    }

    .dre-col-head span:first-child {
      text-align: left
    }

    .dre-badge-var {
      display: inline-flex;
      align-items: center;
      font-size: .7rem;
      font-weight: 700;
      padding: .1rem .4rem;
      border-radius: 6px;
      white-space: nowrap
    }

    .dre-badge-var.up {
      background: color-mix(in srgb, #16a34a 14%, var(--card));
      color: var(--success)
    }

    .dre-badge-var.dn {
      background: color-mix(in srgb, #dc2626 14%, var(--card));
      color: var(--danger)
    }

    .dre-badge-var.eq {
      background: var(--surface);
      color: var(--muted)
    }

    .dre-kpi-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: .9rem;
      margin-bottom: 1.3rem
    }

    @media(max-width:900px) {
      .dre-kpi-row {
        grid-template-columns: repeat(2, 1fr)
      }
    }

    @media(max-width:600px) {
      .dre-kpi-row {
        grid-template-columns: 1fr
      }

      .dre-row,
      .dre-totline,
      .dre-col-head,
      .dre-result-block {
        grid-template-columns: 1fr 110px !important
      }
    }

    /* ── Config toggles ── */
    .cfg-toggle input:checked~.cfg-toggle-track {
      background: var(--success) !important
    }

    .cfg-toggle input:checked~.cfg-toggle-track .cfg-toggle-thumb {
      transform: translateX(20px)
    }

    .item-sem-estoque-warn {
      display: flex;
      align-items: center;
      gap: .4rem;
      font-size: .74rem;
      color: var(--danger);
      background: color-mix(in srgb, #dc2626 10%, var(--card));
      border: 1px solid color-mix(in srgb, #dc2626 30%, transparent);
      border-radius: 6px;
      padding: .25rem .6rem;
      margin-top: .3rem;
      animation: fadeIn .2s
    }

    /* ── Dashboard Selector Dropdown ── */
    .dash-selector-wrap {
      position: relative;
      display: inline-block
    }

    .dash-selector-btn {
      display: flex;
      align-items: center;
      gap: .55rem;
      padding: .45rem .85rem .45rem .7rem;
      background: var(--card);
      border: 1.5px solid var(--border);
      border-radius: 10px;
      cursor: pointer;
      font-family: 'Syne', sans-serif;
      font-weight: 700;
      font-size: 1.05rem;
      color: var(--ink);
      transition: .15s;
      min-width: 220px
    }

    .dash-selector-btn:hover {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent)
    }

    .dash-selector-btn .ds-icon {
      font-size: 1.1rem;
      flex-shrink: 0
    }

    .dash-selector-btn .ds-label {
      flex: 1;
      text-align: left
    }

    .dash-selector-btn .ds-chevron {
      color: var(--muted);
      transition: transform .2s;
      flex-shrink: 0
    }

    .dash-selector-wrap.open .ds-chevron {
      transform: rotate(180deg)
    }

    .dash-selector-menu {
      display: none;
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      min-width: 240px;
      background: var(--card);
      border: 1.5px solid var(--border);
      border-radius: 12px;
      box-shadow: 0 12px 40px #0004;
      z-index: 300;
      overflow: hidden;
      animation: panelIn .16s ease
    }

    .dash-selector-wrap.open .dash-selector-menu {
      display: block
    }

    .ds-menu-item {
      display: flex;
      align-items: center;
      gap: .75rem;
      padding: .7rem 1rem;
      cursor: pointer;
      transition: .12s;
      border-left: 3px solid transparent
    }

    .ds-menu-item:hover {
      background: var(--surface);
      border-left-color: var(--border)
    }

    .ds-menu-item.active {
      background: color-mix(in srgb, var(--accent) 8%, var(--card));
      border-left-color: var(--accent)
    }

    .ds-menu-item .dsi-icon {
      font-size: 1.15rem;
      width: 28px;
      text-align: center;
      flex-shrink: 0
    }

    .ds-menu-item .dsi-info {
      flex: 1
    }

    .ds-menu-item .dsi-title {
      font-family: 'Syne', sans-serif;
      font-weight: 700;
      font-size: .85rem;
      color: var(--ink)
    }

    .ds-menu-item .dsi-sub {
      font-size: .7rem;
      color: var(--muted);
      margin-top: .1rem
    }

    .ds-menu-item.active .dsi-title {
      color: var(--accent)
    }

    .ds-menu-item .dsi-check {
      color: var(--accent);
      font-size: .8rem;
      opacity: 0;
      transition: .12s
    }

    .ds-menu-item.active .dsi-check {
      opacity: 1
    }

    /* ── Dashboard Views ── */
    .dash-view {
      display: none
    }

    .dash-view.active {
      display: block
    }

    /* ── Chart containers ── */
    .chart-wrap {
      position: relative;
      width: 100%;
      overflow: hidden
    }

    .chart-wrap canvas {
      display: block;
      width: 100% !important
    }

    .chart-legend {
      display: flex;
      flex-wrap: wrap;
      gap: .5rem .9rem;
      margin-top: .9rem
    }

    .chart-legend-item {
      display: flex;
      align-items: center;
      gap: .35rem;
      font-size: .75rem;
      color: var(--muted);
      cursor: pointer
    }

    .chart-legend-dot {
      width: 10px;
      height: 10px;
      border-radius: 3px;
      flex-shrink: 0
    }

    /* ── Dashboard Financeiro cards ── */
    .fin-meter {
      background: var(--card);
      border-radius: 12px;
      border: 1px solid var(--border);
      padding: 1.1rem 1.3rem
    }

    .fin-meter-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: .6rem
    }

    .fin-meter-label {
      font-size: .68rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .09em;
      color: var(--muted)
    }

    .fin-meter-val {
      font-family: 'Syne', sans-serif;
      font-weight: 800;
      font-size: 1.3rem
    }

    .fin-meter-bar {
      height: 7px;
      border-radius: 4px;
      background: var(--border);
      overflow: hidden;
      margin-bottom: .4rem
    }

    .fin-meter-fill {
      height: 100%;
      border-radius: 4px;
      transition: width .5s ease
    }

    .fin-meter-foot {
      display: flex;
      justify-content: space-between;
      font-size: .72rem;
      color: var(--muted)
    }

    /* ── Top list cards ── */
    .top-list-item {
      display: flex;
      align-items: center;
      gap: .75rem;
      padding: .6rem 0;
      border-bottom: 1px solid var(--border)
    }

    .top-list-item:last-child {
      border-bottom: none
    }

    .top-rank {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .65rem;
      font-weight: 800;
      flex-shrink: 0
    }

    .rank-1 {
      background: linear-gradient(135deg, #ffd700, #f59e0b);
      color: #78350f
    }

    .rank-2 {
      background: linear-gradient(135deg, #c0c0c0, #9ca3af);
      color: #374151
    }

    .rank-3 {
      background: linear-gradient(135deg, #cd7f32, #b45309);
      color: #fff
    }

    .rank-n {
      background: var(--surface);
      color: var(--muted)
    }

    /* ── Chat Widget ── */
    .chat-fab {
      position: fixed;
      bottom: 1.5rem;
      right: 1.5rem;
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: var(--accent);
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 20px color-mix(in srgb, var(--accent) 40%, transparent);
      z-index: 400;
      transition: .2s;
      color: #fff
    }

    .chat-fab:hover {
      transform: scale(1.1);
      box-shadow: 0 6px 28px color-mix(in srgb, var(--accent) 55%, transparent)
    }

    .chat-fab .cf-badge {
      position: absolute;
      top: -2px;
      right: -2px;
      width: 18px;
      height: 18px;
      background: var(--danger);
      border-radius: 50%;
      font-size: .6rem;
      font-weight: 800;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid var(--card)
    }

    .chat-win {
      position: fixed;
      bottom: 5.5rem;
      right: 1.5rem;
      width: 360px;
      max-height: 520px;
      background: var(--card);
      border: 1.5px solid var(--border);
      border-radius: 18px;
      box-shadow: 0 16px 56px #0005;
      z-index: 400;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      animation: panelIn .2s ease;
      transform-origin: bottom right
    }

    .chat-win.hidden {
      display: none
    }

    .chat-head {
      padding: .85rem 1.1rem;
      background: var(--accent);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0
    }

    .chat-head-title {
      font-family: 'Syne', sans-serif;
      font-weight: 700;
      font-size: .9rem;
      display: flex;
      align-items: center;
      gap: .5rem
    }

    .chat-head-status {
      font-size: .7rem;
      opacity: .85;
      margin-top: .1rem
    }

    .chat-close-btn {
      background: none;
      border: none;
      cursor: pointer;
      color: #ffffffb0;
      padding: .2rem;
      border-radius: 6px;
      line-height: 1;
      font-size: 1.2rem;
      transition: .12s
    }

    .chat-close-btn:hover {
      color: #fff;
      background: #ffffff20
    }

    .chat-msgs {
      flex: 1;
      overflow-y: auto;
      padding: .9rem;
      display: flex;
      flex-direction: column;
      gap: .65rem;
      min-height: 220px;
      max-height: 320px
    }

    .chat-bubble {
      max-width: 80%;
      padding: .55rem .85rem;
      border-radius: 14px;
      font-size: .82rem;
      line-height: 1.45;
      word-break: break-word
    }

    .chat-bubble.bot {
      background: var(--surface);
      color: var(--ink);
      align-self: flex-start;
      border-bottom-left-radius: 4px
    }

    .chat-bubble.user {
      background: var(--accent);
      color: #fff;
      align-self: flex-end;
      border-bottom-right-radius: 4px
    }

    .chat-bubble.typing {
      padding: .7rem .9rem
    }

    .chat-typing-dots span {
      display: inline-block;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--muted);
      animation: typingBounce 1.2s infinite;
      margin: 0 1.5px
    }

    .chat-typing-dots span:nth-child(2) {
      animation-delay: .2s
    }

    .chat-typing-dots span:nth-child(3) {
      animation-delay: .4s
    }

    @keyframes typingBounce {

      0%,
      60%,
      100% {
        transform: translateY(0)
      }

      30% {
        transform: translateY(-5px)
      }
    }

    .chat-time {
      font-size: .62rem;
      color: var(--muted);
      margin-top: .15rem;
      padding: 0 .2rem
    }

    .chat-msg-row {
      display: flex;
      flex-direction: column
    }

    .chat-msg-row.user {
      align-items: flex-end
    }

    .chat-footer {
      padding: .65rem .9rem;
      border-top: 1px solid var(--border);
      display: flex;
      gap: .5rem;
      flex-shrink: 0
    }

    .chat-input {
      flex: 1;
      padding: .5rem .75rem;
      border: 1.5px solid var(--border);
      border-radius: 10px;
      font-size: .83rem;
      font-family: 'DM Sans', sans-serif;
      background: var(--surface);
      color: var(--ink);
      transition: .12s;
      resize: none;
      height: 38px;
      line-height: 1.4
    }

    .chat-input:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px #e8521a15
    }

    .chat-send-btn {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      background: var(--accent);
      border: none;
      cursor: pointer;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: .12s;
      flex-shrink: 0
    }

    .chat-send-btn:hover {
      background: #d44816
    }

    .chat-send-btn:disabled {
      opacity: .4;
      cursor: not-allowed
    }

    .chat-quick-btns {
      padding: .4rem .9rem .6rem;
      display: flex;
      flex-wrap: wrap;
      gap: .35rem;
      border-top: 1px solid var(--border)
    }

    .chat-quick-btn {
      padding: .28rem .6rem;
      border-radius: 20px;
      background: var(--surface);
      border: 1.5px solid var(--border);
      font-size: .72rem;
      cursor: pointer;
      color: var(--muted);
      transition: .12s;
      font-family: 'DM Sans', sans-serif;
      white-space: nowrap
    }

    .chat-quick-btn:hover {
      border-color: var(--accent);
      color: var(--accent)
    }

    .print-area {
      display: none
    }

    @media print {
      body>*:not(.print-area) {
        display: none !important
      }

      .print-area {
        display: block !important
      }
    }

    @media(max-width:900px) {
      .g4 {
        grid-template-columns: 1fr 1fr
      }

      .g3 {
        grid-template-columns: 1fr 1fr
      }
    }

    @media(max-width:640px) {

      .g2,
      .g3,
      .g4 {
        grid-template-columns: 1fr
      }

      .sidebar {
        transform: translateX(-100%)
      }

      .sidebar.mob-open {
        transform: none
      }

      .main {
        margin-left: 0
      }
    }