:root {
      --bg: #000000;
      --bg-soft: #111111;
      --panel: rgba(27, 27, 27, 0.96);
      --panel-strong: #1b1b1b;
      --panel-soft: #151515;
      --line: rgba(255,255,255,0.1);
      --line-strong: rgba(255,194,15,0.22);
      --text: #ffffff;
      --muted: #d9d9d9;
      --muted-2: #8c8c8e;
      --text-muted: #8a8998;
      --primary: #FFC20F;
      --primary-strong: #ffcf4d;
      --primary-soft: rgba(255,194,15,0.14);
      --chart-blue: #38bdf8;
      --chart-purple: #8b5cf6;
      --danger: #ff4d4f;
      --danger-soft: rgba(255,77,79,0.14);
      --ok: #38d27a;
      --ok-soft: rgba(56,210,122,0.14);
      --warning: #ff9f0a;
      --warning-soft: rgba(255,159,10,0.14);
      --glass: linear-gradient(180deg, rgba(28,28,28,.98), rgba(19,19,19,.98));
      --glass-border: var(--line);
      --shadow: 0 24px 60px rgba(0,0,0,.45);
      --space-xs: 8px;
      --space-sm: 12px;
      --space-md: 18px;
      --space-lg: 24px;
      --space-xl: 32px;
      --gap-cards: 12px;
      --radius-sm: 8px;
      --radius-md: 12px;
      --radius-lg: 16px;
      --font-xs: 11px;
      --font-sm: 13px;
      --font-base: 14px;
      --font-lg: 16px;
      --radius: 22px;
    }
    * { box-sizing: border-box; }
    html {
      color-scheme: dark;
      min-height: 100%;
    }
    body {
      margin: 0;
      font-family: 'Montserrat', 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at top left, rgba(255,194,15,.12), transparent 28%),
        radial-gradient(circle at top right, rgba(255,194,15,.08), transparent 25%),
        linear-gradient(180deg, #050505 0%, #000000 100%);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }
    body.body-scroll-locked {
      overflow: hidden;
    }
    .app {
      width: 100%;
      max-width: 1560px;
      margin: 0 auto;
      padding: var(--space-lg);
      flex: 1 0 auto;
      display: flex;
      flex-direction: column;
    }
    .noscript-banner {
      padding: 16px;
      background: #111111;
      color: #ffffff;
      border-bottom: 1px solid rgba(255,255,255,.12);
      font: 600 14px/1.5 Montserrat, system-ui, sans-serif;
    }
    .glass {
      background: var(--glass);
      border: 1px solid var(--glass-border);
      box-shadow: var(--shadow);
      border-radius: var(--radius);
      position: relative;
      overflow: hidden;
    }
    .glass::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 18%);
    }
    .hero-shell {
      display: grid;
      gap: var(--gap-cards);
      margin-bottom: 20px;
    }
    .hero {
      display: grid;
      grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
      gap: var(--gap-cards);
      align-items: stretch;
    }
    .hero-main, .hero-side, .section, .modal-content {
      padding: 22px;
    }
    .hero-main {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      gap: 14px;
      min-height: 100%;
      padding: 20px 22px 18px;
    }
    .hero-copy {
      display: grid;
      gap: 10px;
      align-content: start;
    }
    .hero-main::after {
      content: "";
      position: absolute;
      right: -28px;
      bottom: -28px;
      width: 180px;
      height: 90px;
      border: 5px solid rgba(255,194,15,.25);
      border-color: rgba(255,194,15,.35) transparent transparent transparent;
      border-radius: 100% 100% 0 0;
      transform: rotate(-8deg);
      pointer-events: none;
    }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: var(--space-xs);
      padding: var(--space-xs) var(--space-sm);
      border-radius: 999px;
      background: var(--primary-soft);
      color: var(--primary);
      font-size: 12px;
      letter-spacing: .1em;
      text-transform: uppercase;
      border: 1px solid var(--line-strong);
      font-weight: 800;
      line-height: 1.2;
    }
    h1, h2, h3, .card-value, .mini-stat .value {
      letter-spacing: .02em;
    }
    h1 {
      margin: 8px 0 4px;
      font-size: clamp(32px, 4.6vw, 50px);
      line-height: .96;
      max-width: 12ch;
      text-transform: uppercase;
    }
    .subtitle {
      color: #d8d8d8;
      font-size: 15px;
      max-width: 66ch;
      line-height: 1.62;
      margin: 0;
    }
    .hero-actions, .toolbar-actions, .inline-actions, .rank-actions, .nps-controls {
      display: flex;
      gap: var(--space-sm);
      row-gap: 10px;
      flex-wrap: wrap;
      margin-top: var(--space-md);
    }
    .hero-action-bar {
      padding: 18px 22px;
    }
    .hero-actions--bar {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: var(--space-sm);
      margin-top: 0;
      width: 100%;
    }
    .hero-actions--bar > .btn {
      width: 100%;
      min-width: 0;
    }
    button, select, input, textarea {
      font: inherit;
    }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border: 0;
      border-radius: 14px;
      padding: 11px 16px;
      min-height: 46px;
      line-height: 1.2;
      font-size: 13px;
      letter-spacing: .02em;
      cursor: pointer;
      transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease, opacity .18s ease;
      font-weight: 800;
      text-decoration: none;
      user-select: none;
      white-space: nowrap;
      vertical-align: middle;
      -webkit-tap-highlight-color: transparent;
    }
    .btn:hover { transform: translateY(-1px); }
    .btn:active {
      transform: translateY(0);
      transition-duration: .08s;
    }
    .btn:disabled,
    .btn[disabled] {
      opacity: .55;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }
    .btn-primary {
      background: var(--primary);
      color: #111111;
      border: 1px solid rgba(255,194,15,.34);
      box-shadow: 0 12px 24px rgba(255,194,15,.22);
    }
    .btn-primary:hover {
      background: #ffd24a;
      border-color: rgba(255,194,15,.5);
      box-shadow: 0 14px 28px rgba(255,194,15,.26);
    }
    .btn-primary:active {
      background: #f2bf1b;
      box-shadow: 0 8px 18px rgba(255,194,15,.18);
    }
    .btn-ghost {
      background: rgba(255,255,255,.055);
      border: 1px solid rgba(255,255,255,.1);
      color: #f5f5f5;
    }
    .btn-ghost:hover {
      background: rgba(255,255,255,.08);
      border-color: rgba(255,255,255,.16);
    }
    .btn-ghost:active {
      background: rgba(255,255,255,.1);
    }
    .btn-success {
      background: rgba(255,194,15,.14);
      color: #ffe7a9;
      border: 1px solid rgba(255,194,15,.24);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
    }
    .btn-success:hover {
      background: rgba(255,194,15,.18);
      border-color: rgba(255,194,15,.32);
    }
    .btn-success:active {
      background: rgba(255,194,15,.22);
    }
    .btn-danger {
      background: rgba(255,77,79,.12);
      color: #ffd0d1;
      border: 1px solid rgba(255,77,79,.2);
    }
    .btn-danger:hover {
      background: rgba(255,77,79,.18);
      border-color: rgba(255,77,79,.3);
    }
    .btn-danger:active {
      background: rgba(255,77,79,.22);
    }
    .btn-xs {
      min-height: 36px;
      padding: 8px 12px;
      border-radius: var(--radius-md);
      font-size: 12px;
      letter-spacing: .01em;
    }
    
    .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 14px 18px;
      margin-bottom: 18px;
      background: rgba(10,10,10,.92);
      border: 1px solid var(--line);
      border-radius: 18px;
      position: sticky;
      top: 12px;
      z-index: 20;
      backdrop-filter: blur(12px);
    }
    .topbar-left, .topbar-right, .period-controls {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
    }
    .brand-mark {
      width: 48px;
      height: 42px;
      border-radius: var(--radius-md);
      background: var(--primary);
      color: #000;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 900;
      font-size: var(--font-sm);
      letter-spacing: .03em;
      box-shadow: 0 8px 24px rgba(255,194,15,.18);
      flex: 0 0 auto;
    }
    .brand-copy {
      display: flex;
      flex-direction: column;
      line-height: 1.05;
    }
    .brand-title {
      font-size: var(--font-sm);
      font-weight: 800;
      letter-spacing: .04em;
      text-transform: uppercase;
    }
    .brand-subtitle {
      color: var(--muted);
      font-size: var(--font-xs);
      letter-spacing: .18em;
      text-transform: uppercase;
      margin-top: 4px;
    }
    .divider-v {
      width: 1px;
      height: 34px;
      background: var(--line);
    }
    .period-label {
      color: var(--muted);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .08em;
      font-weight: 700;
    }
    .period-select, .period-year {
      min-width: 108px;
      height: 44px;
      border-radius: var(--radius-md);
      border: 1px solid var(--line-strong);
      background: #141414;
      color: var(--text);
      padding: 0 14px;
      font-weight: 700;
      outline: none;
    }
    .period-year {
      width: 88px;
      min-width: 88px;
    }
    .month-status-badge {
      display: inline-flex;
      align-items: center;
      gap: var(--space-xs);
      padding: 10px 13px;
      border-radius: var(--radius-md);
      background: rgba(255,255,255,.04);
      border: 1px solid var(--line);
      color: #e1e1e1;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.3;
    }
    .hero-side {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-auto-rows: minmax(0, 1fr);
      gap: 14px;
      align-content: stretch;
      min-height: 100%;
    }
    .hero-side .mini-stat {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 100%;
    }
    .hero-side .mini-stat--wide {
      grid-column: 1 / -1;
    }
    .mini-stat-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      width: fit-content;
      margin-top: 12px;
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.1);
      background: rgba(255,255,255,.04);
      color: #e3e3e3;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.3;
    }
    .mini-stat-badge.is-active {
      border-color: rgba(255,194,15,.3);
      background: rgba(255,194,15,.14);
      color: var(--primary);
    }
    .mini-stat, .card, .ticket, .person-block, .chart-box, .kanban-col, .rank-item, .insight-card, .schedule-kpi, .event-card {
      background: rgba(255,255,255,.03);
      border: 1px solid var(--line);
      border-radius: 18px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
    }
    .mini-stat {
      padding: 18px;
    }
    .mini-stat .label, .card .card-label, .bar-label, th {
      color: var(--muted);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .08em;
      line-height: 1.45;
    }
    .mini-stat .value {
      font-size: 30px;
      font-weight: 800;
      margin-top: 8px;
      line-height: 1;
      color: var(--primary);
    }
    .mini-stat-value--period {
      font-size: 22px;
    }
    .mini-stat .hint, .card .card-foot, .muted {
      color: #dddddd;
      font-size: 13px;
      line-height: 1.64;
    }
    .pending-response-label {
      color: var(--muted);
    }

    .tabs {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin: 18px 0 22px;
    }
    .tab-btn {
      background: rgba(255,255,255,.04);
      color: var(--muted);
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 11px 18px;
      min-height: 44px;
      cursor: pointer;
      font-weight: 800;
      font-size: 13px;
      letter-spacing: .02em;
      line-height: 1.2;
      transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
    }
    .tab-btn:hover {
      transform: translateY(-1px);
      border-color: rgba(255,255,255,.14);
      color: #f3f3f3;
    }
    .tab-btn:active {
      transform: translateY(0);
    }
    .tab-btn.active {
      color: #111111;
      background: var(--primary);
      border-color: rgba(255,194,15,.4);
      box-shadow: 0 10px 24px rgba(255,194,15,.18);
    }
    .view { display: none; }
    .view.active { display: block; }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: var(--gap-cards);
      margin-bottom: 18px;
      align-items: stretch;
      grid-auto-rows: 1fr;
    }
    .card {
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-width: 0;
      height: 100%;
      padding: var(--space-lg) var(--space-md);
      overflow: hidden;
    }
    .card > * { min-width: 0; }
    .card .card-label {
      margin: 0;
      line-height: 1.4;
    }
    .card .card-value {
      font-size: 30px;
      font-weight: 800;
      margin-top: 0;
      line-height: 1.02;
      overflow-wrap: anywhere;
      word-break: break-word;
      color: var(--primary);
    }
    .card .card-foot {
      margin-top: auto;
      padding-top: 8px;
      line-height: 1.62;
      overflow-wrap: anywhere;
      word-break: break-word;
    }

    .grid-2 {
      display: grid;
      grid-template-columns: 1.08fr .92fr;
      gap: var(--gap-cards);
      margin-bottom: var(--gap-cards);
    }
    .grid-3 {
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(380px, .95fr);
      gap: 18px;
      margin-top: 18px;
      align-items: start;
    }
    .toolbar {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 16px;
      flex-wrap: wrap;
      margin-bottom: 16px;
    }
    .toolbar--top-gap {
      margin-top: 12px;
    }
    .toolbar--compact {
      margin-bottom: 10px;
    }
    .toolbar-title {
      display: grid;
      gap: 10px;
      min-width: 0;
      align-content: start;
    }
    .section-kicker {
      display: inline-flex;
      align-items: center;
      width: fit-content;
      padding: 7px 11px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.035);
      color: var(--primary);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .13em;
      text-transform: uppercase;
      line-height: 1.15;
    }
    .toolbar-title h2 {
      margin: 0;
      font-size: clamp(22px, 2vw, 25px);
      line-height: 1.14;
      letter-spacing: .022em;
      text-transform: uppercase;
    }
    .heading-compact {
      margin: 0;
      font-size: 16px;
    }
    .toolbar-title p {
      margin: 0;
      color: #d4d4d4;
      font-size: 14px;
      line-height: 1.74;
      max-width: 64ch;
    }
    .field-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(160px, 1fr));
      gap: 14px;
    }
    .field-grid--mention {
      grid-template-columns: 1.2fr .5fr auto;
    }
    .field, .field-stack {
      display: flex;
      flex-direction: column;
      gap: 7px;
    }
    .field--end {
      justify-content: end;
    }
    .field-stack { margin-bottom: 14px; }
    .field-stack--top-gap {
      margin-top: 12px;
    }
    label {
      color: #d9d9d9;
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .085em;
      line-height: 1.4;
    }
    input, select, textarea {
      width: 100%;
      background: #101010;
      color: var(--text);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 14px;
      min-height: 46px;
      padding: 12px 14px;
      line-height: 1.45;
      font-size: 14px;
      outline: none;
      transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
    }
    input:hover, select:hover, textarea:hover {
      border-color: rgba(255,255,255,.16);
      background: #121212;
    }
    input:focus, select:focus, textarea:focus {
      border-color: rgba(255,194,15,.65);
      box-shadow: 0 0 0 3px rgba(255,194,15,.14);
      background: #141414;
    }
    textarea {
      min-height: 118px;
      padding-top: 13px;
      padding-bottom: 13px;
      resize: vertical;
    }
    input::placeholder, textarea::placeholder {
      color: #8e8e8e;
      line-height: 1.45;
    }
    select {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      padding-right: 42px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%23FFC20F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      background-size: 14px;
    }
    select option, select optgroup {
      background: #161616;
      color: #ffffff;
    }

    .table-wrap {
      overflow: auto;
      overscroll-behavior-x: contain;
      scrollbar-gutter: stable both-edges;
      border-radius: 18px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.024);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
    }
    tbody tr {
      transition: background .16s ease;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      min-width: 1100px;
    }
    th, td {
      padding: 14px 12px;
      border-bottom: 1px solid rgba(255,255,255,.06);
      text-align: left;
      font-size: 14px;
      vertical-align: top;
    }
    th {
      position: sticky;
      top: 0;
      z-index: 1;
      background: #111111;
      color: var(--muted);
    }
    td small { color: var(--muted); }
    tr:hover td { background: rgba(255,255,255,.02); }
    tbody tr:focus-within td {
      background: rgba(255,194,15,.05);
    }
    .row-attention td:first-child {
      box-shadow: inset 4px 0 0 var(--danger);
    }

    .table-input {
      min-width: 0;
      width: 100%;
      min-height: 40px;
      padding: 9px 12px;
      border-radius: var(--radius-md);
      font-size: 13px;
      line-height: 1.35;
      background: #0d0d0d;
    }
    .table-input[type="date"] {
      padding-right: 1.8rem;
      min-width: 130px;
    }
    .table-input[type="time"] {
      min-width: 100px;
      padding-right: 1.8rem;
    }
    .table-input:hover {
      border-color: rgba(255,255,255,.18);
      background: #111111;
    }
    td.right {
      white-space: nowrap;
    }
    td.right .btn {
      margin-left: 6px;
    }
    td.right .btn:first-child {
      margin-left: 0;
    }

    .pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border-radius: 999px;
      padding: 8px 11px;
      background: rgba(255,255,255,.055);
      border: 1px solid rgba(255,255,255,.1);
      font-size: 12px;
      color: #ffffff;
      white-space: normal;
      font-weight: 700;
      line-height: 1.3;
      letter-spacing: .015em;
      vertical-align: middle;
    }
    .pill.ok { background: var(--ok-soft); color: #9cf0bd; border-color: rgba(56,210,122,.2); }
    .pill.warn { background: var(--warning-soft); color: #ffd08a; border-color: rgba(255,159,10,.22); }
    .pill.bad { background: var(--danger-soft); color: #ffc8c9; border-color: rgba(255,77,79,.22); }
    .pill.info { background: var(--primary-soft); color: #ffdf7f; border-color: rgba(255,194,15,.24); }
    .pill.muted { background: rgba(255,255,255,.06); color: var(--muted-2); border-color: rgba(255,255,255,.08); }
    .pill.open-pill {
      color: #ffe5e5;
      border-color: rgba(255,77,79,.3);
      background: rgba(255,77,79,.12);
    }
    .pulse-dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--danger);
      box-shadow: 0 0 0 rgba(255,77,79,.7);
      animation: pulse 1.35s infinite;
      flex: 0 0 auto;
    }
    @keyframes pulse {
      0% { box-shadow: 0 0 0 0 rgba(255,77,79,.55); opacity: 1; }
      70% { box-shadow: 0 0 0 10px rgba(255,77,79,0); opacity: .9; }
      100% { box-shadow: 0 0 0 0 rgba(255,77,79,0); opacity: 1; }
    }

    .summary-list {
      display: grid;
      gap: 14px;
      align-content: start;
    }
    .summary-item {
      display: grid;
      grid-template-columns: 1.2fr repeat(5, .8fr);
      gap: 16px;
      align-items: start;
      padding: 18px 20px;
      background: rgba(255,255,255,.035);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      min-width: 0;
      overflow: hidden;
    }
    .summary-item > * { min-width: 0; }
    .summary-item--col1 { grid-template-columns: 1fr; }
    .summary-item--col2 { grid-template-columns: auto 1fr; }
    .summary-item--col4 { grid-template-columns: 1.2fr repeat(3, .9fr); }
    .summary-item--backup { grid-template-columns: 1.2fr repeat(3, .9fr); }
    .summary-item--diagnostic { grid-template-columns: auto 1fr; }
    .summary-item--audit { grid-template-columns: 1.2fr repeat(4, .8fr) auto; }
    .summary-item--addon-overview {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      padding: 14px 16px;
      margin-bottom: 0;
    }
    #addonsOverview {
      display: grid;
      gap: 10px;
      padding: 0;
    }
    .addon-card-name {
      flex: 0 0 auto;
      min-width: 80px;
      color: rgba(255,255,255,.95);
      font-size: 1rem;
      font-weight: 600;
      line-height: 1.35;
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
    }
    .addon-card-details {
      display: flex;
      flex: 1 1 auto;
      flex-direction: column;
      min-width: 0;
    }
    .addon-card-categories {
      margin-top: 4px;
      color: rgba(255,255,255,.70);
      font-size: .85rem;
      font-weight: 400;
      line-height: 1.45;
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
    }
    .addon-card-total {
      flex: 0 0 auto;
      text-align: right;
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
    }
    .addon-card-total strong {
      display: block;
      font-size: 1.8rem;
      font-weight: 700;
      line-height: 1.05;
      color: var(--primary);
      margin-bottom: 3px;
    }
    .addon-card-total span {
      display: block;
      font-size: .7rem;
      color: rgba(255,255,255,.40);
      text-transform: uppercase;
      letter-spacing: .08em;
      line-height: 1.3;
    }
    .mt-md { margin-top: var(--space-md); }
    .summary-item .name {
      font-weight: 800;
      line-height: 1.42;
      color: #f3f3f3;
    }
    .metric strong {
      display: block;
      font-size: clamp(24px, 2vw, 28px);
      color: var(--primary);
      line-height: 1.04;
      margin-bottom: 6px;
    }
    .metric span {
      color: #d5d5d5;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .06em;
      line-height: 1.52;
    }
    .subtle-note {
      margin-top: 10px;
      color: #cfcfcf;
      font-size: 13px;
      line-height: 1.66;
    }

    .chart-box { padding: var(--space-md); }
    .chart-box--spaced {
      margin-bottom: 12px;
    }
    .chart {
      height: 260px;
      display: flex;
      align-items: flex-end;
      gap: 10px;
      padding-top: 12px;
    }
    .bar-col {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: end;
      align-items: center;
      gap: 10px;
      min-width: 70px;
    }
    .bar {
      width: 100%;
      border-radius: 16px 16px 8px 8px;
      background: linear-gradient(180deg, #ffdf74, #FFC20F 55%, #c99500 100%);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
      min-height: 6px;
      position: relative;
    }
    .bar-value {
      font-weight: 800;
      font-size: 13px;
      color: var(--primary);
      line-height: 1.1;
    }

    .addon-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 12px;
      align-items: stretch;
      width: 100%;
    }
    .person-block {
      padding: 18px;
      display: flex;
      flex-direction: column;
      height: 100%;
    }
    .person-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 14px;
    }
    .person-head h3 {
      margin: 0;
      outline: none;
    }
    .day-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(62px, 1fr));
      gap: var(--space-xs);
      margin-bottom: var(--space-sm);
    }
    #addons .person-block .chart-box {
      margin-bottom: 10px !important;
    }
    .addons-ranking-card {
      margin-top: 14px;
      padding: 18px;
      border-radius: 22px;
      border: 1px solid rgba(255,255,255,.08);
      background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
      box-shadow: var(--shadow-soft);
    }
    .addons-ranking-head {
      margin-bottom: 14px;
    }
    .addons-ranking-list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 10px;
      align-items: stretch;
    }
    .addons-ranking-item {
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      border-radius: 16px;
      background: rgba(255,255,255,.03);
      border: 1px solid rgba(255,255,255,.08);
      min-height: 68px;
    }
    .addons-ranking-item.is-leading {
      border-color: rgba(255, 215, 0, .38);
      background: linear-gradient(180deg, rgba(255,215,0,.12), rgba(255,255,255,.035));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
    }
    .addons-ranking-pos {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      display: inline-grid;
      place-items: center;
      font-weight: 900;
      font-size: 13px;
      color: var(--primary);
      background: rgba(255, 215, 0, .14);
      border: 1px solid rgba(255, 215, 0, .2);
    }
    .addons-ranking-meta {
      min-width: 0;
      display: grid;
      gap: 4px;
    }
    .addons-ranking-name {
      font-weight: 800;
      font-size: 14px;
      line-height: 1.2;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .addons-ranking-label {
      color: var(--muted);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: .08em;
    }
    .addons-ranking-total {
      justify-self: end;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 10px;
      border-radius: 999px;
      background: rgba(255, 215, 0, .12);
      border: 1px solid rgba(255, 215, 0, .18);
      color: #ffe28a;
      font-weight: 800;
      font-size: 13px;
      white-space: nowrap;
    }
    .addons-ranking-empty {
      min-height: 96px;
    }
    @media (max-width: 720px) {
      .addons-ranking-list {
        grid-template-columns: 1fr;
      }
    }
    .day-cell {
      background: rgba(255,255,255,.03);
      border: 1px solid rgba(255,255,255,.06);
      border-radius: 14px;
      padding: var(--space-xs);
      text-align: center;
    }
    .day-cell .day {
      color: var(--muted);
      font-size: var(--font-xs);
      margin-bottom: 6px;
      text-transform: uppercase;
      letter-spacing: .05em;
    }
    .day-cell input {
      padding: 10px 6px;
      text-align: center;
      border-radius: 10px;
      min-width: 0;
    }

    .empty {
      display: grid;
      gap: 10px;
      justify-items: center;
      align-content: center;
      min-height: 128px;
      padding: 24px;
      text-align: center;
      color: #dddddd;
      border: 1px dashed rgba(255,255,255,.1);
      border-radius: 18px;
      font-size: 14px;
      line-height: 1.76;
      background: rgba(255,255,255,.018);
      max-width: 100%;
    }
    td .empty {
      min-height: 88px;
      border-radius: 14px;
    }
    .right { text-align: right; }
    .danger-text { color: #ffb1b2 !important; }
    .gold-text { color: var(--primary); }
    .table-wrap td {
      max-width: 280px;
    }
    .cell-text, .cell-ellipsis {
      display: block;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .table-date-static {
      display: inline-block;
      white-space: nowrap;
    }
    .cell-text.multiline {
      white-space: normal;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      line-clamp: 3;
      overflow: hidden;
      word-break: break-word;
      overflow-wrap: anywhere;
      line-height: 1.45;
    }
    .pending-table {
      min-width: 900px;
      width: 100%;
      table-layout: fixed;
    }
    .pending-table th,
    .pending-table td {
      vertical-align: top;
    }
    .pending-table th:nth-child(1), .pending-table td:nth-child(1) { width: 12%; }
    .pending-table th:nth-child(2), .pending-table td:nth-child(2) { width: 10%; }
    .pending-table th:nth-child(3), .pending-table td:nth-child(3) { width: 24%; }
    .pending-table th:nth-child(4), .pending-table td:nth-child(4) { width: 11%; }
    .pending-table th:nth-child(5), .pending-table td:nth-child(5) { width: 11%; }
    .pending-table th:nth-child(6), .pending-table td:nth-child(6) { width: 13%; }
    .pending-table th:nth-child(7), .pending-table td:nth-child(7) { width: 9%; }
    .pending-table th:nth-child(8), .pending-table td:nth-child(8) { width: 10%; }
    .pending-table tbody tr:nth-child(even) td {
      background: rgba(255,255,255,.024);
    }
    .pending-table tbody tr:hover td {
      background: rgba(255,255,255,.04);
    }
    .pending-cell-main.cell-text.multiline {
      -webkit-line-clamp: 4;
      line-clamp: 4;
    }
    .pending-cell-response {
      display: inline-block;
      max-width: 100%;
    }
    .pending-cell-response.cell-text.multiline {
      -webkit-line-clamp: 2;
      line-clamp: 2;
      line-height: 1.4;
    }
    .pending-cell-response-empty {
      color: var(--muted-2);
    }
    .pending-status-strip {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      width: 100%;
      margin: 0 auto 14px;
      align-items: stretch;
    }
    .pending-status-card {
      position: relative;
      display: grid;
      align-content: center;
      justify-items: center;
      gap: 8px;
      min-height: 94px;
      padding: 16px 18px 18px;
      border-radius: 20px;
      border: 1px solid rgba(255,255,255,.08);
      background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.022));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 14px 28px rgba(0,0,0,.16);
      overflow: hidden;
      text-align: center;
    }
    .pending-status-card::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,0) 46%);
      opacity: .65;
    }
    .pending-status-label,
    .pending-status-value {
      position: relative;
      z-index: 1;
    }
    .pending-status-label {
      font-size: 10px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .14em;
      line-height: 1.4;
      color: rgba(255,255,255,.68);
    }
    .pending-status-value {
      font-size: clamp(28px, 2.5vw, 38px);
      line-height: .95;
      letter-spacing: -.04em;
    }
    .pending-status-card--open {
      border-color: rgba(255,77,79,.14);
      background: linear-gradient(180deg, rgba(255,77,79,.12), rgba(255,255,255,.022));
    }
    .pending-status-card--progress {
      border-color: rgba(255,194,15,.16);
      background: linear-gradient(180deg, rgba(255,194,15,.12), rgba(255,255,255,.022));
    }
    .pending-status-card--done {
      border-color: rgba(56,210,122,.16);
      background: linear-gradient(180deg, rgba(56,210,122,.11), rgba(255,255,255,.022));
    }
    .pending-status-card--total {
      grid-column: 1 / -1;
      grid-template-columns: 1fr auto;
      justify-items: start;
      align-items: center;
      min-height: 74px;
      padding: 14px 18px;
      text-align: left;
    }
    .pending-status-card--total .pending-status-label {
      max-width: 28ch;
    }
    .pending-status-card--total .pending-status-value {
      justify-self: end;
    }
    .pending-status-card--open .pending-status-value {
      color: #ff8a8c;
    }
    .pending-status-card--progress .pending-status-value {
      color: #ffd36f;
    }
    .pending-status-card--done .pending-status-value {
      color: #9cf0bd;
    }
    .pending-status-card--total .pending-status-value {
      color: var(--primary);
    }

    /* Tabela de alunos — 11 colunas com espaço adequado */
    .student-table {
      min-width: 1510px;
      width: 100%;
      table-layout: fixed;
    }
    .student-table th,
    .student-table td {
      vertical-align: top;
      padding: 14px 10px;
    }
    .student-table th:nth-child(1),  .student-table td:nth-child(1)  { width: 140px; }  /* Nome */
    .student-table th:nth-child(2),  .student-table td:nth-child(2)  { width: 100px; }  /* Matrícula */
    .student-table th:nth-child(3),  .student-table td:nth-child(3)  { width: 160px; }  /* Última visita */
    .student-table th:nth-child(4),  .student-table td:nth-child(4)  { width: 130px; }  /* Hora da visita */
    .student-table th:nth-child(5),  .student-table td:nth-child(5)  { width: 110px; }  /* Início */
    .student-table th:nth-child(6),  .student-table td:nth-child(6)  { width: 100px; }  /* Aviso NPS */
    .student-table th:nth-child(7),  .student-table td:nth-child(7)  { width: 110px; }  /* Atendimento */
    .student-table th:nth-child(8),  .student-table td:nth-child(8)  { width: 120px; }  /* Feedback */
    .student-table th:nth-child(9),  .student-table td:nth-child(9)  { width: 100px; }  /* Addon */
    .student-table th:nth-child(10), .student-table td:nth-child(10) { width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }  /* Observações */
    .student-table th:nth-child(11), .student-table td:nth-child(11) { width: 140px; white-space: nowrap; }  /* Ações */
    #students .students-toolbar-actions {
      display: grid;
      grid-template-columns: minmax(260px, 1.8fr) minmax(180px, .72fr) minmax(180px, .72fr) auto;
      gap: 10px;
      align-items: center;
      margin-top: 8px;
      width: 100%;
    }
    #students .students-toolbar-actions > input,
    #students .students-toolbar-actions > select,
    #students .students-toolbar-actions > .btn {
      min-width: 0;
      margin: 0;
    }
    #students .students-toolbar-actions > .btn {
      width: 100%;
      min-height: 42px;
      padding: 10px 14px;
    }
    .students-summary-bar {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: 10px;
      margin: 14px 0 14px;
      padding: 10px;
      border-radius: 20px;
      border: 1px solid rgba(255,255,255,.08);
      background: linear-gradient(135deg, rgba(255,194,15,.08), rgba(255,255,255,.014) 34%, rgba(255,255,255,.028) 100%);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 12px 28px rgba(0,0,0,.14);
    }
    .students-summary-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      gap: 5px;
      min-width: 0;
      min-height: 68px;
      padding: 10px 12px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.06);
      background: linear-gradient(180deg, rgba(255,255,255,.048), rgba(255,255,255,.018));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
    }
    .students-summary-item--total,
    .students-summary-item--addons {
      grid-column: span 2;
    }
    .students-summary-item--attendants {
      grid-column: span 5;
    }
    .students-summary-item--feedback {
      grid-column: span 3;
    }
    .students-summary-label {
      display: block;
      font-size: 10px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .12em;
      line-height: 1.35;
      color: rgba(255,255,255,.62);
    }
    .students-summary-value {
      display: block;
      max-width: 100%;
      color: var(--primary);
      font-weight: 800;
      letter-spacing: -.03em;
      line-height: 1.08;
      overflow-wrap: anywhere;
    }
    .students-summary-item--total .students-summary-value,
    .students-summary-item--addons .students-summary-value {
      font-size: clamp(24px, 2vw, 30px);
    }
    .students-summary-item--attendants .students-summary-value {
      font-size: 14px;
      line-height: 1.45;
      letter-spacing: 0;
    }
    .students-summary-item--feedback .students-summary-value {
      font-size: 17px;
      letter-spacing: -.01em;
    }
    .students-summary-meta {
      display: block;
      color: #d5d5d5;
      font-size: 11px;
      line-height: 1.42;
    }
    #students,
    #students .section,
    #students .toolbar,
    #students .students-summary-bar,
    #students .table-wrap,
    #scale,
    #scale .section,
    #scale .toolbar,
    #scale .schedule-note-box,
    #scale .schedule-topbar,
    #scale .scale-ops-summary,
    #scale .scale-board-wrap,
    #scale .schedule-matrix {
      width: 100%;
      max-width: 100%;
      min-width: 0;
    }
    #students .table-wrap,
    #scale .table-wrap,
    #scale .schedule-matrix {
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
    }
    #students .student-table {
      min-width: 1510px;
      width: 100%;
    }
    #students .student-table thead th {
      white-space: nowrap;
      font-size: 11px;
      letter-spacing: .04em;
      padding-left: 8px;
      padding-right: 8px;
    }
    #students .student-table th:nth-child(1),
    #students .student-table td:nth-child(1) { width: 140px; }          /* Nome */
    #students .student-table th:nth-child(2),
    #students .student-table td:nth-child(2) { width: 100px; }          /* Matrícula */
    #students .student-table th:nth-child(3),
    #students .student-table td:nth-child(3) { width: 160px; }          /* Última visita */
    #students .student-table th:nth-child(4),
    #students .student-table td:nth-child(4) { width: 130px; }          /* Hora visita */
    #students .student-table th:nth-child(5),
    #students .student-table td:nth-child(5) { width: 110px; }          /* Início */
    #students .student-table th:nth-child(6),
    #students .student-table td:nth-child(6) { width: 100px; }          /* Aviso NPS */
    #students .student-table th:nth-child(7),
    #students .student-table td:nth-child(7) { width: 110px; }          /* Atendimento */
    #students .student-table th:nth-child(8),
    #students .student-table td:nth-child(8) { width: 120px; }          /* Feedback */
    #students .student-table th:nth-child(9),
    #students .student-table td:nth-child(9) { width: 100px; }          /* Addon */
    #students .student-table th:nth-child(10),
    #students .student-table td:nth-child(10) { width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }  /* Observações */
    #students .student-table th:nth-child(11),
    #students .student-table td:nth-child(11) { width: 140px; white-space: nowrap; }

    .pending-overview-cards {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .dashboard-pending-list {
      margin-top: var(--space-sm);
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
      align-items: start;
    }
    .ticket {
      padding: 16px 14px 14px;
      display: grid;
      gap: 10px;
      min-width: 0;
      overflow: hidden;
      position: relative;
      isolation: isolate;
      border: 1px solid rgba(255,255,255,.08);
      transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
    }
    .ticket:hover {
      transform: translateY(-1px);
      border-color: rgba(255,194,15,.18);
      background: rgba(255,255,255,.042);
      box-shadow: 0 10px 24px rgba(0,0,0,.18);
    }
    .ticket.dragging {
      opacity: .52;
      transform: rotate(1deg) scale(.99);
      cursor: grabbing;
    }
    .ticket-topline {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
      flex-wrap: wrap;
    }
    .dashboard-pending-ticket {
      border-radius: var(--radius-lg);
      min-height: 182px;
      padding: 18px 16px 16px;
      align-content: start;
    }
    .dashboard-pending-ticket .title {
      line-height: 1.35;
    }
    .dashboard-pending-ticket .title,
    .dashboard-pending-ticket .desc {
      -webkit-line-clamp: 3;
      line-clamp: 3;
    }
    .dashboard-pending-ticket .meta {
      min-height: 20px;
      color: #d7d7d7;
      line-height: 1.5;
    }
    .kanban-scroll {
      overflow-x: auto;
      overflow-y: hidden;
      padding-bottom: 8px;
      scrollbar-gutter: stable both-edges;
      overscroll-behavior-x: contain;
    }
    .kanban {
      display: grid;
      grid-template-columns: repeat(3, minmax(250px, 1fr));
      gap: 14px;
      min-width: 808px;
      align-items: start;
    }
    #pendingKanban.kanban {
      grid-template-columns: repeat(3, 1fr);
      min-width: 0;
      width: 100%;
    }
    .kanban-col {
      padding: 14px;
      min-width: 0;
      min-height: 540px;
      display: grid;
      grid-template-rows: auto 1fr;
      gap: var(--space-sm);
      overflow: visible;
      align-self: start;
    }
    .kanban-col h3 {
      margin: 0;
      display: flex;
      align-items: center;
      gap: var(--space-xs);
      font-size: clamp(15px, 1.05vw, 18px);
      line-height: 1.2;
      text-transform: uppercase;
      letter-spacing: .04em;
      white-space: nowrap;
    }
    .kanban-col .col-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: nowrap;
      gap: var(--space-xs);
      min-width: 0;
    }
    .kanban-list {
      display: grid;
      gap: var(--space-sm);
      align-content: start;
      min-height: 180px;
      max-height: 66vh;
      overflow-y: auto;
      overflow-x: hidden;
      padding-right: 6px;
    }
    .kanban-col.drop-target {
      border-color: rgba(255,194,15,.45);
      box-shadow: inset 0 0 0 1px rgba(255,194,15,.22);
    }
    .ticket .title, .ticket .desc, .ticket .meta-item {
      min-width: 0;
    }
    .ticket .title {
      display: block;
      overflow: visible;
      overflow-wrap: anywhere;
      word-break: break-word;
      white-space: normal;
      line-height: 1.48;
      font-size: 15px;
      font-weight: 800;
      padding-top: 2px;
      margin-top: 1px;
    }
    .ticket .desc {
      white-space: normal;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 4;
      line-clamp: 4;
      overflow: hidden;
      overflow-wrap: anywhere;
      word-break: break-word;
      line-height: 1.5;
      font-size: 13px;
      padding-top: 1px;
    }
    .ticket .meta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px 8px;
      row-gap: 4px;
      color: var(--muted);
      font-size: 13px;
      overflow-wrap: anywhere;
    }
    .meta-item,
    .meta-sep {
      min-width: 0;
    }
    .ticket .foot {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 10px;
      flex-wrap: wrap;
      padding-top: 2px;
    }
    .drag-hint {
      color: var(--muted-2);
      font-size: var(--font-xs);
      text-transform: uppercase;
      letter-spacing: .08em;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      max-width: 100%;
      overflow-wrap: anywhere;
    }
    #pending {
      --pending-split-left: 1.14fr;
      --pending-split-right: .86fr;
      --pending-panel-height: clamp(560px, 68vh, 860px);
    }
    #pending > .grid-3 {
      grid-template-columns: minmax(0, var(--pending-split-left)) minmax(340px, var(--pending-split-right));
      align-items: start;
      margin-top: 0;
    }
    #pending > .grid-3 > .section {
      display: flex;
      flex-direction: column;
      min-height: 0;
    }
    #pending > .grid-3 > .section .toolbar,
    #pending > .grid-3 > .section .toolbar-title {
      flex: 0 0 auto;
    }
    #pending .table-wrap {
      flex: 1 1 auto;
      min-height: 0;
      max-height: var(--pending-panel-height);
      overflow: auto;
    }
    #pending .pending-table {
      min-width: 1040px;
      table-layout: fixed;
      width: 100%;
    }
    #pending .pending-table th {
      white-space: nowrap;
    }
    #pending .pending-table th:nth-child(1),
    #pending .pending-table td:nth-child(1) { width: 14%; }
    #pending .pending-table th:nth-child(2),
    #pending .pending-table td:nth-child(2) { width: 8%; }
    #pending .pending-table th:nth-child(3),
    #pending .pending-table td:nth-child(3) { width: 22%; }
    #pending .pending-table th:nth-child(4),
    #pending .pending-table td:nth-child(4) { width: 10%; }
    #pending .pending-table th:nth-child(5),
    #pending .pending-table td:nth-child(5) { width: 10%; }
    #pending .pending-table th:nth-child(6),
    #pending .pending-table td:nth-child(6) { width: 13%; }
    #pending .pending-table th:nth-child(7),
    #pending .pending-table td:nth-child(7) { width: 10%; }
    #pending .pending-table th:nth-child(8),
    #pending .pending-table td:nth-child(8) { width: 140px; }
    #pending .pending-table td.right {
      white-space: nowrap;
      text-align: center;
    }
    #pending .pending-table td.right .btn {
      white-space: nowrap;
    }
    #pending .pending-table td:nth-child(7) {
      overflow: hidden;
    }
    #pending .pending-table td:nth-child(7) .pill {
      max-width: 100%;
      box-sizing: border-box;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      justify-content: center;
      padding: 7px 9px;
      font-size: 11px;
    }
    #pending .table-wrap td {
      max-width: none;
    }
    #pending .kanban-scroll {
      flex: 1 1 auto;
      min-height: 0;
      max-height: var(--pending-panel-height);
      overflow-y: auto;
      overflow-x: auto;
      padding: 0 4px 6px 0;
    }
    #pending #pendingKanban.kanban {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      min-width: 0;
      width: 100%;
      align-items: start;
    }
    #pending .kanban-col {
      min-height: 0;
      padding: 12px;
      gap: 10px;
    }
    #pending .kanban-list {
      max-height: 60vh;
      min-height: 0;
      padding-right: 4px;
    }
    #pending .ticket {
      padding: 12px 12px 11px;
      gap: 8px;
      min-height: 132px;
      border-radius: 16px;
      border-left: 3px solid var(--line);
    }
    #pending .kanban-col[data-drop-status="aberto"] .ticket {
      border-left-color: var(--danger);
    }
    #pending .kanban-col[data-drop-status="respondido"] .ticket {
      border-left-color: var(--warning);
    }
    #pending .kanban-col[data-drop-status="concluido"] .ticket {
      border-left-color: var(--ok);
    }
    #pending .ticket .title {
      font-size: 14px;
      font-weight: 600;
      line-height: 1.38;
    }
    #pending .ticket .desc,
    #pending .ticket .meta {
      font-size: 12px;
      line-height: 1.45;
    }
    #pending .ticket .desc {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      min-height: calc(2 * 1.45em);
      overflow: hidden;
    }
    #pending .ticket .foot {
      padding-top: 8px;
      align-items: start;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px 12px;
      min-height: 42px;
      border-top: 1px solid rgba(255,255,255,.06);
    }
    #pending .ticket-actions {
      justify-content: flex-end;
      align-self: start;
      gap: 6px;
      padding-left: 6px;
    }
    #pending .ticket-actions .btn {
      flex: 0 0 auto;
    }
    #pending .drag-hint {
      font-size: 10px;
      letter-spacing: .11em;
      line-height: 1.45;
      min-width: 0;
      align-self: center;
    }
    #pending .drag-grip {
      width: 16px;
      height: 16px;
      font-size: 11px;
    }
    .drag-grip {
      display: inline-grid;
      place-items: center;
      width: 20px;
      height: 20px;
      border-radius: var(--radius-sm);
      border: 1px solid rgba(255,255,255,.1);
      background: rgba(255,255,255,.04);
      color: var(--muted);
      font-size: 12px;
      flex: 0 0 auto;
      cursor: grab;
      transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease;
    }
    .drag-grip:hover {
      border-color: rgba(255,194,15,.22);
      background: rgba(255,255,255,.07);
      color: #f0f0f0;
      transform: translateY(-1px);
    }
    .ticket-actions {
      display: flex;
      gap: var(--space-xs);
      flex-wrap: wrap;
      flex: 0 0 auto;
      justify-content: flex-end;
      align-items: center;
      min-width: 0;
      max-width: 100%;
    }
    .icon-btn {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      display: inline-grid;
      place-items: center;
      padding: 0;
      font-size: 14px;
      transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
    }
    .icon-btn:hover {
      transform: translateY(-1px);
    }
    .tooltip {
      position: fixed;
      z-index: 60;
      max-width: min(360px, calc(100vw - 24px));
      padding: 10px 12px;
      border-radius: var(--radius-md);
      background: rgba(10,10,10,.96);
      color: var(--text);
      border: 1px solid rgba(255,194,15,.24);
      box-shadow: 0 18px 40px rgba(0,0,0,.4);
      font-size: var(--font-sm);
      line-height: 1.5;
      pointer-events: none;
      opacity: 0;
      transform: translateY(4px);
      transition: opacity .12s ease, transform .12s ease;
    }
    .tooltip.show {
      opacity: 1;
      transform: translateY(0);
    }
    .save-toast {
      position: fixed;
      right: 18px;
      bottom: 18px;
      z-index: 70;
      padding: 12px 15px;
      border-radius: 14px;
      border: 1px solid var(--line-strong);
      background: rgba(17,17,17,.94);
      color: var(--primary);
      box-shadow: var(--shadow);
      font-weight: 800;
      line-height: 1.35;
      opacity: 0;
      transform: translateY(10px);
      transition: opacity .18s ease, transform .18s ease;
      pointer-events: none;
    }
    .save-toast.show {
      opacity: 1;
      transform: translateY(0);
    }
    .save-toast--warning { color: var(--warning); border-color: rgba(255,159,10,.28); }
    .save-toast--danger  { color: var(--danger);  border-color: rgba(255,77,79,.28); }
    .save-toast--info    { color: var(--muted);   border-color: rgba(255,255,255,.15); }
    .modal {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.76);
      display: none;
      padding: var(--space-lg);
      z-index: 20;
    }
    .modal.show {
      display: grid;
      place-items: center;
    }
    .modal-content {
      width: min(980px, 100%);
      max-height: 90vh;
      overflow: auto;
      box-shadow: 0 28px 64px rgba(0,0,0,.38);
      animation: modalPop .18s ease both;
    }
    @keyframes modalPop {
      from { opacity: 0; transform: translateY(8px) scale(.985); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
    .modal-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: var(--space-sm);
      margin-bottom: var(--space-md);
    }
    .modal-head h2 {
      margin: 0;
      text-transform: uppercase;
      line-height: 1.15;
    }
    .modal-head .btn {
      flex: 0 0 auto;
    }
    .modal-content .inline-actions {
      justify-content: flex-start;
      padding-top: 6px;
    }
    .confirm-modal-content {
      max-width: 480px;
    }
    .confirm-message {
      font-size: 16px;
      font-weight: 700;
      line-height: 1.55;
      text-transform: none;
      color: #f2f2f2;
      max-width: 30ch;
    }
    .confirm-actions {
      justify-content: flex-end;
      padding-top: 4px;
      border-top: 1px solid rgba(255,255,255,.08);
    }

    .nps-grid {
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 18px;
      margin-bottom: 18px;
    }
    .nps-left-panel,
    .nps-ranking-panel {
      display: flex;
      flex-direction: column;
      gap: 18px;
      min-height: clamp(620px, 72vh, 920px);
    }
    .score-hero {
      display: flex;
      align-items: end;
      gap: 16px;
      flex-wrap: wrap;
      margin-bottom: 18px;
    }
    .nps-score-copy {
      display: grid;
      gap: 10px;
    }
    .score-number {
      font-size: clamp(44px, 6vw, 68px);
      font-weight: 900;
      line-height: .95;
      letter-spacing: -.035em;
      color: var(--primary);
    }
    .score-band {
      padding: 10px 14px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.04);
      font-weight: 700;
      line-height: 1.3;
    }
    .risk-meter-wrap {
      position: relative;
      padding-top: 24px;
      padding-bottom: 28px;
    }
    .risk-meter {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: var(--space-xs);
      position: relative;
    }
    .risk-segment {
      height: 64px;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,.06);
      position: relative;
      overflow: hidden;
    }
    .risk-segment::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(255,255,255,.18), transparent 50%);
      opacity: .3;
    }
    .risk-red { background: linear-gradient(180deg, #7d1117, #ff3b30); }
    .risk-orange { background: linear-gradient(180deg, #7a3a00, #ff8a00); }
    .risk-yellow { background: linear-gradient(180deg, #7d6400, #ffd60a); }
    .risk-green-light { background: linear-gradient(180deg, #497400, #86d72f); }
    .risk-green-dark { background: linear-gradient(180deg, #0f5d2a, #1cbf69); }
    .risk-pointer {
      position: absolute;
      top: 0;
      transform: translateX(-50%);
      transition: left .2s ease;
      display: grid;
      justify-items: center;
      gap: 6px;
      pointer-events: none;
    }
    .risk-pointer .marker {
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-top: 16px solid #ffffff;
      filter: drop-shadow(0 6px 12px rgba(0,0,0,.35));
    }
    .risk-pointer .marker-value {
      background: #ffffff;
      color: #111111;
      border-radius: 999px;
      padding: 6px 10px;
      font-size: 12px;
      font-weight: 800;
    }
    .risk-scale {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: var(--space-xs);
      margin-top: 10px;
      font-size: var(--font-xs);
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .06em;
    }
    .score-slider-row {
      display: grid;
      grid-template-columns: 160px 1fr;
      gap: 14px;
      align-items: end;
      margin-top: 18px;
    }
    .nps-goals-panel {
      display: grid;
      gap: 14px;
      margin-top: 18px;
      padding: 18px;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.03);
    }
    .goal-pill-strong {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 11px 14px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.05);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .04em;
      line-height: 1.3;
    }
    .goal-pill-strong strong {
      color: var(--primary);
      font-size: 14px;
    }
    .nps-progress-grid {
      display: grid;
      gap: 12px;
    }
    .nps-progress-card {
      display: grid;
      gap: 8px;
    }
    .nps-progress-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }
    .nps-progress-title {
      color: #f2f2f2;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
      line-height: 1.35;
    }
    .nps-progress-meta {
      color: #d8d8d8;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.35;
    }
    .nps-progress-track {
      height: 12px;
      border-radius: 999px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.05);
    }
    .nps-progress-fill {
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #ffc20f 0%, #ffd86f 55%, #fff0ae 100%);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
    }
    .nps-history-panel {
      display: grid;
      gap: 14px;
      margin-top: 18px;
      padding: 18px;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.03);
    }
    .nps-history-list {
      display: grid;
      gap: 10px;
    }
    .nps-history-item {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) auto auto;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.06);
      background: rgba(255,255,255,.025);
    }
    .nps-history-period {
      color: #f2f2f2;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.35;
    }
    .nps-history-score {
      color: var(--primary);
      font-size: 20px;
      font-weight: 900;
      line-height: 1;
    }
    .nps-history-band {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 8px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.08);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
      line-height: 1.2;
      white-space: nowrap;
    }
    .nps-history-band.is-risk { background: rgba(255,77,79,.12); color: #ffd0d1; border-color: rgba(255,77,79,.2); }
    .nps-history-band.is-warning { background: rgba(255,159,10,.12); color: #ffd08a; border-color: rgba(255,159,10,.22); }
    .nps-history-band.is-mid { background: rgba(255,214,10,.14); color: #ffe08f; border-color: rgba(255,214,10,.22); }
    .nps-history-band.is-good { background: rgba(132,215,47,.12); color: #d9ff9e; border-color: rgba(132,215,47,.22); }
    .nps-history-band.is-excellent { background: rgba(28,191,105,.12); color: #9cf0bd; border-color: rgba(28,191,105,.22); }
    .nps-history-empty {
      min-height: 124px;
    }
    input[type="range"] {
      padding: 0;
      height: 12px;
      border-radius: 999px;
      background: #0f0f0f;
      border: 1px solid rgba(255,255,255,.08);
      accent-color: var(--primary);
    }

    .rank-list {
      display: grid;
      gap: 12px;
      margin-top: 16px;
      max-height: 620px;
      overflow: auto;
      padding-right: 6px;
    }
    .rank-item {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: var(--space-md);
      align-items: center;
      padding: 12px 18px 12px 14px;
    }
    .rank-left {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      min-width: 0;
    }
    .rank-position {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      border-radius: 12px;
      background: rgba(255,255,255,.05);
      border: 1px solid var(--line);
      font-weight: 800;
      font-size: 14px;
      color: var(--primary);
      flex: 0 0 auto;
    }
    .rank-name-group {
      min-width: 0;
    }
    .rank-name-line {
      display: flex;
      align-items: center;
      gap: var(--space-xs);
      min-width: 0;
      margin-bottom: 6px;
    }
    .crown {
      font-size: 18px;
      line-height: 1;
    }
    .rank-name-input {
      min-width: 0;
      max-width: 200px;
      font-weight: 700;
      padding: 8px 10px;
      min-height: 40px;
    }
    .rank-meta {
      color: #d6d6d6;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: .06em;
      line-height: 1.45;
    }
    .rank-actions {
      margin-top: 0;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 6px;
    }
    .count-box {
      width: 90px;
      text-align: center;
      font-weight: 800;
      font-size: 24px;
      line-height: 1;
      color: var(--primary);
      min-height: 40px;
    }
    .trend-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: 999px;
      padding: 7px 10px;
      font-size: 11px;
      font-weight: 800;
      white-space: normal;
      line-height: 1.3;
      border: 1px solid transparent;
    }
    .trend-up {
      background: rgba(56,210,122,.12);
      color: #9cf0bd;
      border-color: rgba(56,210,122,.22);
    }
    .trend-down {
      background: rgba(255,77,79,.12);
      color: #ffd4d5;
      border-color: rgba(255,77,79,.22);
    }
    .trend-stable {
      background: rgba(255,194,15,.12);
      color: #ffe08f;
      border-color: rgba(255,194,15,.22);
    }
    .trend-new {
      background: rgba(255,255,255,.05);
      color: #ffffff;
      border-color: rgba(255,255,255,.1);
    }

    /* Líderes dos meses anteriores — seção na coluna direita do NPS */
    .hist-leaders {
      margin-top: 18px;
      padding-top: 18px;
      border-top: 1px solid var(--line);
    }
    .hist-leaders-title {
      font-size: var(--font-lg);
      font-weight: 800;
      color: var(--text);
      margin-bottom: 4px;
    }
    .hist-leaders-subtitle {
      font-size: var(--font-xs);
      color: var(--muted-2);
      margin-bottom: 14px;
      line-height: 1.45;
    }
    .hist-leaders-list {
      display: grid;
      gap: 10px;
      max-height: 420px;
      overflow: auto;
      padding-right: 4px;
    }
    .hist-leaders-card {
      background: rgba(255,255,255,.03);
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      padding: 12px 14px;
    }
    .hist-leaders-period {
      font-size: var(--font-sm);
      font-weight: 700;
      color: var(--primary);
      margin-bottom: 8px;
    }
    .hist-leaders-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 4px 0;
      font-size: var(--font-xs);
      color: var(--muted);
    }
    .hist-leaders-row + .hist-leaders-row {
      border-top: 1px solid rgba(255,255,255,.04);
      margin-top: 2px;
      padding-top: 6px;
    }
    .hist-leaders-label {
      color: var(--muted-2);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .04em;
    }
    .hist-leaders-value {
      font-weight: 700;
      color: var(--text);
    }
    .hist-leaders-value .hl-total {
      color: var(--primary);
      font-size: 12px;
      margin-left: 6px;
    }
    .hist-leaders-empty {
      text-align: center;
      padding: 24px 12px;
      color: var(--muted-2);
      font-size: var(--font-sm);
    }

    .obs-box {
      display: grid;
      gap: 14px;
      margin-top: 18px;
    }
    .nps-observations-panel {
      padding-top: 2px;
    }

    .insight-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: var(--gap-cards);
      margin-bottom: var(--gap-cards);
    }
    .insight-card {
      display: grid;
      gap: 12px;
      align-content: start;
      padding: 18px;
      background: rgba(255,255,255,.03);
      border: 1px solid var(--line);
      border-radius: 18px;
      min-width: 0;
      overflow: hidden;
    }
    .insight-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 2px;
    }
    .insight-title {
      color: #d6d6d6;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .09em;
      line-height: 1.4;
    }
    .insight-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 34px;
      height: 34px;
      padding: 0 10px;
      border-radius: var(--radius-md);
      border: 1px solid var(--line);
      background: rgba(255,255,255,.04);
      color: var(--primary);
      font-weight: 800;
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
    }
    .insight-value {
      font-size: 24px;
      font-weight: 800;
      color: var(--text);
      line-height: 1.22;
      overflow-wrap: anywhere;
      word-break: break-word;
      white-space: normal;
    }
    .insight-meta {
      margin-top: 0;
      color: #d7d7d7;
      font-size: 13px;
      line-height: 1.66;
      min-height: 42px;
    }
    .progress-track {
      margin-top: 12px;
      height: 10px;
      border-radius: 999px;
      background: rgba(255,255,255,.06);
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.06);
    }
    .progress-fill {
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #c99500, #FFC20F, #ffdf74);
      width: 0;
    }
    .quick-kbd {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 10px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.03);
      color: #ececec;
      font-size: 12px;
      letter-spacing: .04em;
    }
    .quick-kbd kbd {
      padding: 4px 7px;
      border-radius: 8px;
      background: #0f0f0f;
      border: 1px solid rgba(255,255,255,.08);
      color: var(--text);
      font-family: inherit;
      font-weight: 700;
    }
    .card-nav {
      cursor: pointer;
      transition: transform .18s ease, border-color .18s ease, background .18s ease;
    }
    .card-nav:hover {
      transform: translateY(-2px);
      border-color: rgba(255,194,15,.24);
      background: rgba(255,255,255,.04);
    }
    .card-nav:active {
      transform: translateY(0);
    }
    .card-nav .card-value {
      font-size: 22px;
      line-height: 1.15;
      min-height: 50px;
      display: flex;
      align-items: center;
    }
    .card-nav .card-foot {
      line-height: 1.55;
    }
    .card-nav .card-foot strong {
      color: var(--primary);
    }

    .schedule-topbar, .events-topbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
      margin-bottom: 14px;
    }
    .schedule-note-box, .events-note-box {
      padding: 16px 18px;
      border-radius: 16px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.03);
      color: #d9d9d9;
      font-size: 13px;
      line-height: 1.66;
      margin-bottom: 16px;
    }

    .schedule-kpis {
      display: grid;
      grid-template-columns: repeat(4, minmax(150px, 1fr));
      gap: 14px;
      width: 100%;
    }
    .schedule-kpi {
      padding: 18px;
      min-width: 0;
      overflow: hidden;
    }
    .schedule-kpi-label {
      color: #d8d8d8;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: .12em;
      margin-bottom: 8px;
      line-height: 1.45;
    }
    .schedule-kpi-value {
      color: var(--primary);
      font-size: 28px;
      font-weight: 900;
      line-height: .98;
      margin-bottom: 8px;
    }
    .schedule-kpi-foot {
      color: #dddddd;
      font-size: 12px;
      line-height: 1.6;
    }
    .scale-ops-summary {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px 14px;
      margin: 0 0 16px;
      padding: 12px 14px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.03);
      color: #dddddd;
      font-size: 12px;
      line-height: 1.5;
    }
    .scale-ops-item {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }
    .scale-ops-item strong {
      color: var(--primary);
      font-size: 13px;
    }
    .scale-ops-item span:last-child {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .scale-ops-sep {
      width: 1px;
      height: 18px;
      background: rgba(255,255,255,.08);
      flex: 0 0 auto;
    }
    .scale-board-wrap {
      display: grid;
      gap: 16px;
      margin-bottom: 18px;
    }
    .scale-board {
      display: grid;
      gap: 14px;
      width: 100%;
    }
    .scale-board-row {
      display: grid;
      width: 100%;
      grid-template-columns: minmax(150px, .82fr) minmax(340px, 1.55fr) minmax(240px, 1.08fr) minmax(170px, .9fr);
      border-radius: 22px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.03);
      align-items: stretch;
    }
    .scale-board-row.tone-green {
      border-color: rgba(134,215,47,.28);
      box-shadow: inset 0 0 0 1px rgba(134,215,47,.08);
    }
    .scale-board-row.tone-red {
      border-color: rgba(255,77,79,.32);
      box-shadow: inset 0 0 0 1px rgba(255,77,79,.1);
    }
    .scale-board-row.tone-neutral {
      border-color: rgba(255,255,255,.08);
    }
    .scale-board-day,
    .scale-board-prof,
    .scale-board-recep,
    .scale-board-side {
      padding: 16px;
      min-width: 0;
    }
    .scale-board-day {
      background: rgba(0,0,0,.34);
      border-right: 1px solid rgba(255,255,255,.08);
      display: grid;
      align-content: center;
      gap: 8px;
    }
    .scale-board-day .date {
      font-size: 30px;
      font-weight: 900;
      line-height: 1;
      color: var(--text);
    }
    .scale-board-day .month {
      color: var(--muted);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .12em;
    }
    .scale-board-day .weekday {
      display: inline-flex;
      width: fit-content;
      align-items: center;
      gap: 8px;
      padding: 7px 10px;
      border-radius: 999px;
      background: rgba(255,194,15,.12);
      color: var(--primary);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
    }
    .scale-board-prof,
    .scale-board-recep {
      display: grid;
      gap: 10px;
      border-right: 1px solid rgba(255,255,255,.08);
    }
    .scale-board-head {
      color: var(--muted);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: .12em;
      font-weight: 800;
    }
    .scale-board-shift {
      display: grid;
      grid-template-columns: 116px 1fr;
      gap: 12px;
      align-items: start;
      padding: 10px 12px;
      border-radius: 14px;
      background: rgba(255,255,255,.045);
      min-width: 0;
      min-height: 64px;
    }
    .scale-board-shift.single {
      grid-template-columns: 1fr;
    }
    .scale-board-time {
      font-size: 18px;
      font-weight: 900;
      color: var(--text);
      white-space: nowrap;
    }
    .scale-board-name {
      font-size: 18px;
      font-weight: 900;
      color: var(--text);
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    .scale-board-swap {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.4;
      margin-top: 4px;
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    .scale-board-side {
      background: rgba(255,255,255,.02);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 14px;
    }
    .scale-tone-pill {
      display: inline-flex;
      width: fit-content;
      align-items: center;
      gap: 8px;
      padding: 8px 10px;
      border-radius: 999px;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: .12em;
      font-weight: 900;
      border: 1px solid rgba(255,255,255,.08);
    }
    .scale-tone-pill.green {
      color: #b4f55f;
      background: rgba(134,215,47,.12);
    }
    .scale-tone-pill.red {
      color: #ff8c8f;
      background: rgba(255,77,79,.14);
    }
    .scale-tone-pill.neutral {
      color: var(--text);
      background: rgba(255,255,255,.06);
    }
    .scale-board-note {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.5;
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    .scale-board-note--spaced {
      margin-top: 12px;
    }
    .scale-board-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    .schedule-matrix table {
      width: 100%;
      min-width: 980px;
      table-layout: fixed;
    }
    #scale .table-wrap td {
      max-width: none;
    }
    #scale .schedule-matrix th,
    #scale .schedule-matrix td {
      min-width: 110px;
    }
    #scale .schedule-matrix th:nth-child(1),
    #scale .schedule-matrix td:nth-child(1) { width: 15%; }
    #scale .schedule-matrix th:nth-child(2),
    #scale .schedule-matrix td:nth-child(2) { width: 12%; }
    #scale .schedule-matrix th:nth-child(3),
    #scale .schedule-matrix td:nth-child(3) { width: 18%; }
    #scale .schedule-matrix th:nth-child(4),
    #scale .schedule-matrix td:nth-child(4) { width: 14%; }
    #scale .schedule-matrix th:nth-child(5),
    #scale .schedule-matrix td:nth-child(5) { width: 12%; }
    #scale .schedule-matrix th:nth-child(6),
    #scale .schedule-matrix td:nth-child(6) { width: 17%; }
    #scale .schedule-matrix th:nth-child(7),
    #scale .schedule-matrix td:nth-child(7) { width: 12%; }
    .scale-tone-green td {
      background: rgba(134,215,47,.12);
    }
    .scale-tone-red td {
      background: rgba(255,77,79,.14);
    }
    .scale-tone-neutral td {
      background: rgba(255,255,255,.035);
    }
    .scale-date-cell {
      min-width: 144px;
    }
    .scale-date-main {
      font-size: 18px;
      font-weight: 800;
      color: var(--text);
      margin-bottom: 6px;
    }
    .scale-date-sub {
      color: var(--muted);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .08em;
      margin-bottom: 10px;
    }
    .scale-mini-note {
      margin-top: 10px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
      max-width: 22ch;
      overflow-wrap: anywhere;
    }
    .scale-action-row {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 12px;
    }
    .scale-cell-stack {
      display: grid;
      gap: 4px;
      min-width: 0;
    }
    .scale-primary {
      font-weight: 800;
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    .scale-secondary {
      color: var(--muted);
      font-size: 12px;
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    .shift-editor-list {
      display: grid;
      gap: 10px;
    }
    .shift-editor-row {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr auto;
      gap: 10px;
      align-items: end;
      padding: 14px;
      border-radius: 16px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.032);
    }

    .event-list {
      display: grid;
      gap: 14px;
      min-width: 0;
    }
    .events-quick-summary {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 14px;
      align-items: center;
      margin: 16px 0 14px;
      padding: 12px 14px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.03);
      color: #dddddd;
      font-size: 12px;
      line-height: 1.45;
    }
    .events-quick-summary-item {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .events-quick-summary-item strong {
      font-size: 13px;
    }
    .events-quick-summary-item.type-event strong { color: var(--primary); }
    .events-quick-summary-item.type-action strong { color: var(--ok); }
    .events-quick-summary-item.type-holiday strong { color: #ff8a8c; }
    .events-quick-summary-item.type-confirmed strong { color: #9cf0bd; }
    .events-quick-summary-item.type-programmed strong { color: #ffe08f; }
    .events-quick-summary-sep {
      width: 1px;
      height: 18px;
      background: rgba(255,255,255,.08);
      flex: 0 0 auto;
    }
    .event-card {
      padding: 14px;
      display: grid;
      gap: 10px;
      min-width: 0;
      overflow: hidden;
    }
    .event-head {
      display: flex;
      justify-content: space-between;
      align-items: start;
      gap: 12px;
      flex-wrap: wrap;
    }
    .event-title {
      font-size: 17px;
      font-weight: 800;
      line-height: 1.28;
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    .event-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      color: #d5d5d5;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: .06em;
      line-height: 1.45;
    }
    .event-type {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 10px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 800;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.04);
      color: var(--primary);
      white-space: nowrap;
    }
    .event-desc {
      color: #d8d8d8;
      font-size: 13px;
      line-height: 1.52;
      overflow-wrap: anywhere;
      word-break: break-word;
      max-height: 5.9em;
      overflow: auto;
      padding-right: 2px;
    }
    .event-chip-row {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    .event-chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 9px;
      border-radius: 12px;
      background: rgba(255,255,255,.04);
      border: 1px solid var(--line);
      color: #dddddd;
      font-size: 11px;
      font-weight: 700;
      line-height: 1.35;
      max-width: 100%;
      min-width: 0;
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    .event-status-programado { color: #ffe08f; border-color: rgba(255,194,15,.22); }
    .event-status-confirmado { color: #9cf0bd; border-color: rgba(56,210,122,.22); }
    .event-status-concluido { color: #9cf0bd; border-color: rgba(56,210,122,.22); }
    .event-status-cancelado { color: #ffd4d5; border-color: rgba(255,77,79,.22); }
    .scale-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 12px;
    }
    .scale-legend-item {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 9px 12px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.04);
      color: #dddddd;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.35;
    }
    .scale-legend-swatch {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      flex: 0 0 auto;
    }
    .scale-legend-swatch.red { background: var(--danger); box-shadow: 0 0 0 4px rgba(255,77,79,.18); }
    .scale-legend-swatch.green { background: #86d72f; box-shadow: 0 0 0 4px rgba(134,215,47,.18); }
    .scale-legend-swatch.neutral { background: #d9d9d9; box-shadow: 0 0 0 4px rgba(255,255,255,.10); }
    .event-stack {
      display: grid;
      gap: 18px;
    }
    .event-overview-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
      gap: 18px;
      align-items: stretch;
      margin-bottom: 0;
    }
    .event-calendar-card,
    .event-sidebar-stack,
    .event-consolidated-card {
      min-width: 0;
    }
    .event-calendar-shell,
    .event-consolidated-card {
      border-radius: 20px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.025);
      padding: 16px;
      overflow: hidden;
    }
    .event-sidebar-stack {
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      gap: 18px;
      min-height: 0;
    }
    .event-calendar-head {
      display: flex;
      justify-content: space-between;
      align-items: start;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 14px;
    }
    .event-calendar-title {
      font-size: 18px;
      font-weight: 800;
    }
    .event-calendar-subtitle {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.5;
      margin-top: 4px;
    }
    .event-calendar-legend {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    .event-legend-chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 10px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.04);
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .06em;
      text-transform: uppercase;
    }
    .event-legend-dot {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      flex: 0 0 auto;
    }
    .event-dot-evento { background: var(--primary); }
    .event-dot-acao { background: var(--ok); }
    .event-dot-campanha { background: var(--warning); }
    .event-dot-treinamento { background: #9d7dff; }
    .event-dot-feriado { background: var(--danger); }
    .event-dot-outro { background: var(--muted-2); }
    .event-calendar-scroll {
      overflow-x: auto;
      overflow-y: hidden;
      padding-bottom: 6px;
      scrollbar-gutter: stable both-edges;
    }
    .event-calendar-grid {
      display: grid;
      grid-template-columns: repeat(7, minmax(96px, 1fr));
      gap: 10px;
      min-width: 700px;
      align-items: stretch;
    }
    .event-weekday-head {
      padding: 8px 10px;
      border-radius: 12px;
      text-align: center;
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .08em;
      background: rgba(255,255,255,.035);
      border: 1px solid rgba(255,255,255,.06);
    }
    .event-calendar-day {
      min-height: 112px;
      border-radius: 18px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.03);
      padding: 10px;
      display: grid;
      align-content: start;
      gap: 6px;
      min-width: 0;
      overflow: hidden;
    }
    .event-calendar-day.empty {
      min-height: 72px;
      background: rgba(255,255,255,.012);
      border-style: dashed;
      opacity: .38;
    }
    .event-calendar-day.today {
      border-color: rgba(255,194,15,.34);
      box-shadow: inset 0 0 0 1px rgba(255,194,15,.14);
    }
    .event-calendar-day.has-items {
      background: linear-gradient(180deg, rgba(255,194,15,.10), rgba(255,255,255,.03));
      border-color: rgba(255,194,15,.22);
      box-shadow: inset 0 0 0 1px rgba(255,194,15,.08);
    }
    .event-day-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
    }
    .event-day-number {
      font-size: 18px;
      font-weight: 900;
      color: var(--text);
      line-height: 1;
    }
    .event-day-count {
      font-size: 10px;
      font-weight: 800;
      color: var(--muted);
      letter-spacing: .08em;
      text-transform: uppercase;
      padding: 6px 8px;
      border-radius: 999px;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.06);
    }
    .event-day-list {
      display: grid;
      gap: 6px;
      min-width: 0;
      overflow: hidden;
    }
    .event-day-pill {
      display: grid;
      gap: 3px;
      padding: 7px 9px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.06);
      background: rgba(255,255,255,.04);
      min-width: 0;
      overflow: hidden;
    }
    .event-day-pill.type-evento { border-left: 3px solid var(--primary); }
    .event-day-pill.type-acao { border-left: 3px solid var(--ok); }
    .event-day-pill.type-campanha { border-left: 3px solid var(--warning); }
    .event-day-pill.type-treinamento { border-left: 3px solid #9d7dff; }
    .event-day-pill.type-feriado { border-left: 3px solid var(--danger); }
    .event-day-pill.type-outro { border-left: 3px solid var(--muted-2); }
    .event-day-time {
      color: var(--muted);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .event-day-time.wrap {
      white-space: normal;
      line-height: 1.3;
    }
    .event-day-name {
      color: var(--text);
      font-size: 12px;
      font-weight: 800;
      line-height: 1.35;
      overflow-wrap: anywhere;
      word-break: break-word;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .event-day-extra {
      color: var(--muted-2);
      font-size: 11px;
      line-height: 1.35;
      overflow-wrap: anywhere;
      word-break: break-word;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .event-day-more {
      color: var(--primary);
      font-size: 11px;
      font-weight: 800;
      margin-top: 2px;
    }
    .event-day-empty-note {
      color: var(--muted-2);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .04em;
      line-height: 1.3;
      padding-top: 2px;
    }
    .summary-main .name,
    .card .card-label,
    .card .card-foot,
    .schedule-kpi-foot,
    .toolbar-title p {
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    .event-consolidated-card {
      min-width: 0;
      overflow: hidden;
    }
    #events #eventsList {
      max-height: 600px;
      overflow: auto;
      padding-right: 6px;
    }
    #events #eventsUpcoming .event-card {
      min-height: 0;
    }
    #events .event-list .ticket-actions .btn,
    #events .pending-table .btn {
      min-height: 34px;
      padding: 7px 10px;
      font-size: 11px;
    }
    #events .event-consolidated-card .table-wrap {
      max-height: 520px;
      overflow-y: auto;
      overflow-x: auto;
    }
    #events .table-wrap tbody tr:nth-child(even) td {
      background: rgba(255,255,255,.022);
    }
    #events .table-wrap tbody tr:hover td {
      background: rgba(255,255,255,.04);
    }
    #settings {
      gap: 22px;
    }
    #settings .settings-health-bar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px 14px;
      margin-bottom: 18px;
      padding: 12px 14px;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.035);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
      color: #dddddd;
      font-size: 12px;
      line-height: 1.5;
    }
    #settings .settings-health-item {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }
    #settings .settings-health-item strong {
      color: var(--primary);
      font-size: 13px;
    }
    #settings .settings-health-sep {
      width: 1px;
      height: 18px;
      background: rgba(255,255,255,.08);
      flex: 0 0 auto;
    }
    #settings .settings-shell {
      display: grid;
      grid-template-columns: minmax(0, 1.32fr) minmax(320px, .82fr);
      gap: 22px;
      align-items: start;
    }
    #settings .settings-main-column,
    #settings .settings-side-column {
      display: grid;
      gap: 22px;
      align-content: start;
      min-width: 0;
    }
    #settings .section {
      display: grid;
      gap: 0;
      min-width: 0;
      align-content: start;
    }
    #settings .settings-card {
      overflow: hidden;
    }
    #settings .settings-card-head,
    #settings .settings-card-body,
    #settings .settings-card-actions,
    #settings .settings-card-foot {
      min-width: 0;
    }
    #settings .settings-card-head {
      display: grid;
      gap: 10px;
      align-content: start;
      padding-bottom: 18px;
      border-bottom: 1px solid rgba(255,255,255,.08);
    }
    #settings .settings-card-head h2 {
      margin: 0;
      font-size: clamp(24px, 1.9vw, 30px);
      line-height: 1.14;
    }
    #settings .settings-card-head p {
      margin: 0;
      max-width: 62ch;
      font-size: 14px;
      line-height: 1.62;
      color: #d6d6d6;
    }
    #settings .settings-card-head .section-kicker {
      width: fit-content;
      margin: 0;
      font-size: 11px;
      padding: 8px 12px;
      letter-spacing: .12em;
    }
    #settings .settings-card-body {
      display: grid;
      gap: 18px;
      align-content: start;
      padding-top: 18px;
    }
    #settings .settings-card-actions {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      align-items: stretch;
      justify-content: flex-start;
      padding-top: 18px;
      margin-top: 18px;
      border-top: 1px solid rgba(255,255,255,.08);
    }
    #settings .settings-card-actions > * {
      min-width: 0;
      max-width: 100%;
    }
    #settings .settings-card-actions .btn,
    #settings .settings-card-actions .import-label {
      min-height: 48px;
      padding: 12px 16px;
      border-radius: var(--radius-lg);
      font-weight: 800;
      flex: 1 1 220px;
    }
    #settings .settings-card-foot {
      display: grid;
      gap: 12px;
      padding-top: 16px;
      margin-top: 16px;
      border-top: 1px solid rgba(255,255,255,.06);
    }
    #settings .settings-card--critical {
      width: 100%;
      max-width: 560px;
      justify-self: start;
      padding-top: 18px;
      padding-bottom: 18px;
      border-color: rgba(255,77,79,.18);
      background:
        linear-gradient(180deg, rgba(31,18,19,.98), rgba(24,16,17,.98));
    }
    #settings .settings-card--critical .section-kicker {
      background: rgba(255,77,79,.12);
      border-color: rgba(255,77,79,.22);
      color: #ffd4d5;
    }
    #settings .settings-card--critical .settings-card-head {
      gap: 8px;
      padding-bottom: 14px;
    }
    #settings .settings-card--critical .settings-card-head h2 {
      font-size: clamp(20px, 1.65vw, 25px);
      line-height: 1.16;
    }
    #settings .settings-card--critical .settings-card-head p {
      max-width: 54ch;
      font-size: 13px;
      line-height: 1.54;
      color: #e8c1c2;
    }
    #settings .settings-card--critical .settings-card-body {
      padding-top: 12px;
    }
    #settings .settings-card--critical .settings-card-actions {
      padding-top: 0;
      margin-top: 12px;
      border-top: 0;
    }
    #settings .settings-card--critical .settings-card-actions .btn {
      flex: 0 0 auto;
      min-width: 220px;
    }
    #settings .settings-card--critical .settings-note--warn {
      padding: 12px 14px;
      font-size: 12px;
      line-height: 1.55;
    }
    #settings .settings-card--secondary .section-kicker,
    #settings .settings-card--support .section-kicker {
      background: rgba(255,255,255,.05);
      border-color: rgba(255,255,255,.08);
      color: #f2f2f2;
    }
    #settings .settings-form-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
    }
    #settings .field-stack {
      margin-bottom: 0;
    }
    #settings .settings-field-card {
      display: grid;
      gap: 10px;
      padding: 18px;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,.07);
      background: rgba(255,255,255,.03);
      min-width: 0;
    }
    #settings .settings-field-card--full {
      grid-column: 1 / -1;
    }
    #settings .settings-field-help {
      font-size: 13px;
      line-height: 1.55;
      color: #cfcfcf;
    }
    #settings .settings-toggle-row {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 14px 16px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.04);
      text-transform: none;
      letter-spacing: normal;
      font-weight: 600;
      cursor: pointer;
    }
    #settings .settings-toggle-row input[type="checkbox"] {
      width: 18px;
      height: 18px;
      margin: 2px 0 0;
      accent-color: var(--primary);
      flex: 0 0 auto;
    }
    #settings .settings-toggle-copy {
      display: grid;
      gap: 4px;
      min-width: 0;
    }
    #settings .settings-toggle-copy strong {
      font-size: 14px;
      line-height: 1.45;
      color: #f4f4f4;
      font-weight: 800;
    }
    #settings .settings-toggle-copy span {
      font-size: 13px;
      line-height: 1.55;
      color: #cfcfcf;
    }
    #settings textarea {
      min-height: 170px;
      max-height: 340px;
      overflow-y: auto;
      line-height: 1.56;
      font-size: 14px;
    }
    #settings label {
      font-size: 12px;
      letter-spacing: .08em;
      line-height: 1.45;
      color: #ededed;
      text-transform: uppercase;
      font-weight: 800;
    }
    #settings .settings-note {
      padding: 14px 16px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.035);
      color: #d8d8d8;
      font-size: 13px;
      line-height: 1.6;
    }
    #settings .settings-note--soft {
      background: rgba(255,194,15,.08);
      border-color: rgba(255,194,15,.18);
      color: #f0dfa3;
    }
    #settings .settings-note--warn {
      background: rgba(255,77,79,.12);
      border-color: rgba(255,77,79,.22);
      color: #ffd7d8;
    }
    #settings .settings-maintenance-card .settings-card-body {
      gap: 16px;
    }
    #settings .settings-subsection {
      display: grid;
      gap: 12px;
      min-width: 0;
    }
    #settings .settings-subsection + .settings-subsection {
      padding-top: 18px;
      border-top: 1px solid rgba(255,255,255,.08);
    }
    #settings .settings-subsection-head {
      display: grid;
      gap: 6px;
      min-width: 0;
    }
    #settings .settings-subsection-head h3 {
      margin: 0;
      font-size: 15px;
      line-height: 1.4;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--text);
    }
    #settings .settings-subsection-head p {
      margin: 0;
      color: #cecece;
      font-size: 13px;
      line-height: 1.58;
    }
    #settings .summary-list {
      gap: 14px;
      grid-template-columns: 1fr;
    }
    #settings .summary-item {
      border-radius: 16px;
      padding: 18px;
      gap: 14px;
      align-items: start;
      background: rgba(255,255,255,.032);
      border: 1px solid rgba(255,255,255,.06);
    }
    #settings .summary-item--col1 {
      padding: 18px;
    }
    #settings .settings-about-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 10px;
    }
    #settings .settings-about-item {
      display: grid;
      gap: 6px;
      padding: 14px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.07);
      background: rgba(255,255,255,.03);
      min-width: 0;
    }
    #settings .settings-about-item .name {
      font-size: 11px;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: #cfcfcf;
    }
    #settings .settings-about-item .value {
      font-size: 16px;
      line-height: 1.25;
      font-weight: 800;
      color: var(--text);
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    #settings .settings-storage-box {
      display: grid;
      gap: 12px;
      padding: 16px;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,.07);
      background: rgba(255,255,255,.028);
    }
    #settings .settings-storage-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }
    #settings .settings-storage-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 14px;
      color: #d7d7d7;
      font-size: 12px;
    }
    #settings .settings-storage-meta strong {
      color: var(--primary);
    }
    #settings .settings-storage-bar {
      width: 100%;
      height: 10px;
      border-radius: 999px;
      overflow: hidden;
      background: rgba(255,255,255,.07);
      border: 1px solid rgba(255,255,255,.05);
    }
    #settings .settings-storage-fill {
      height: 100%;
      width: 0;
      border-radius: inherit;
      background: linear-gradient(90deg, #FFD700 0%, #FFC20F 55%, #ff9f1a 100%);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
    }
    #settings .settings-storage-foot {
      color: #cfcfcf;
      font-size: 12px;
      line-height: 1.55;
    }
    #settings .settings-maintenance-actions {
      border-top: 0;
      margin-top: 0;
      padding-top: 0;
    }
    #settings .summary-item .name {
      font-size: 14px;
      line-height: 1.44;
    }
    #settings .muted,
    #settings .subtle-note,
    #settings .summary-item .muted {
      font-size: 13px;
      line-height: 1.62;
      color: #d7d7d7;
    }
    #settings .subtle-note {
      margin-top: 8px;
      color: #bfbfbf;
    }
    #settings .metric {
      align-content: start;
      min-width: 0;
    }
    #settings .metric strong {
      font-size: clamp(26px, 2vw, 32px);
      line-height: 1;
    }
    #settings .metric span {
      font-size: 11px;
      line-height: 1.55;
      white-space: normal;
    }
    #settings #backupSummaryList .summary-item--backup {
      grid-template-columns: minmax(0, 1.45fr) repeat(3, minmax(84px, .55fr));
      gap: 16px;
    }
    #settings #diagnosticSummaryList .summary-item--diagnostic,
    #settings #flowSmokeList .summary-item--col2 {
      grid-template-columns: auto minmax(0, 1fr);
      gap: 12px 14px;
      align-items: start;
    }
    #settings #diagnosticSummaryList .pill,
    #settings #flowSmokeList .pill {
      margin-top: 2px;
    }
    #settings #persistenceTechList .summary-item--col4 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px 18px;
      align-items: start;
    }
    #settings #persistenceTechList .summary-item--col4 > div {
      min-width: 0;
    }
    #settings #persistenceTechList .summary-item--col4 .muted {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      flex-wrap: wrap;
    }
    #settings #periodAuditList .summary-item--audit {
      grid-template-columns: 1fr;
      gap: 12px;
      align-items: stretch;
      padding: 18px 18px 16px;
      min-height: 64px;
    }
    #settings #periodAuditList {
      display: grid;
      gap: 12px;
      max-height: min(72vh, 860px);
      overflow: auto;
      padding: 2px 8px 2px 0;
    }
    #settings .settings-period-card {
      display: grid;
      gap: 12px;
      min-width: 0;
      border-radius: 18px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
    }
    #settings .settings-period-card.is-empty {
      opacity: .72;
      background: rgba(255,255,255,.018);
      border-color: rgba(255,255,255,.05);
    }
    #settings .settings-period-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: start;
      min-height: 58px;
      min-width: 0;
    }
    #settings .settings-period-title {
      display: grid;
      gap: 5px;
      align-content: start;
      padding-top: 1px;
      min-width: 0;
    }
    #settings .settings-period-month {
      font-size: 16px;
      line-height: 1.18;
      font-weight: 800;
      color: var(--text);
    }
    #settings .settings-period-year {
      display: block;
      font-size: 11px;
      line-height: 1.52;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: #bbbbbb;
      font-weight: 800;
      min-height: 1.4em;
    }
    #settings .settings-period-meta {
      font-size: 12px;
      line-height: 1.5;
      color: #cfcfcf;
    }
    #settings .settings-period-status {
      align-self: start;
      opacity: .88;
      padding-top: 2px;
      padding-right: 6px;
    }
    #settings .settings-period-status .pill {
      font-size: 10px;
      padding: 6px 9px;
      letter-spacing: .04em;
    }
    #settings .settings-period-kpis {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
    }
    #settings .settings-period-kpi {
      display: grid;
      gap: 4px;
      padding: 10px 9px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.06);
      background: rgba(255,255,255,.028);
      min-width: 0;
    }
    #settings .settings-period-kpi strong {
      font-size: 19px;
      line-height: 1;
      color: var(--text);
    }
    #settings .settings-period-kpi span {
      font-size: 10px;
      line-height: 1.4;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: #bdbdbd;
      font-weight: 800;
    }
    #settings .settings-period-foot {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: center;
      padding-top: 10px;
      border-top: 1px solid rgba(255,255,255,.06);
    }
    #settings .settings-period-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 9px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.06);
      background: rgba(255,255,255,.03);
      color: #cecece;
      font-size: 11px;
      line-height: 1.3;
      letter-spacing: .04em;
      text-transform: uppercase;
      font-weight: 800;
    }
    #settings .settings-help-list {
      gap: 12px;
    }
    #settings .settings-help-step {
      padding: 18px;
    }
    #dashboard .section,
    #settings .section {
      align-content: start;
    }
    #dashboard .toolbar,
    #settings .toolbar {
      margin-bottom: 0;
    }
    #dashboard .toolbar-title,
    #settings .toolbar-title {
      min-width: 0;
    }
    #dashboard #dashboardCards {
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: var(--gap-cards);
      margin-bottom: var(--gap-cards);
      align-items: stretch;
    }
    #dashboard #dashboardCards > .card {
      grid-column: span 3;
    }
    #dashboard #dashboardCards > .card-nav[data-tab-target="scale"] {
      grid-column: span 5;
    }
    #dashboard #dashboardCards > .card-nav[data-tab-target="events"] {
      grid-column: span 4;
    }
    #dashboard #dashboardInsights {
      gap: var(--gap-cards);
      margin-bottom: var(--gap-cards);
      align-items: stretch;
    }
    #dashboard .dashboard-visual-section {
      display: grid;
      gap: 14px;
      margin-bottom: var(--gap-cards);
    }
    #dashboard .dashboard-visual-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--gap-cards);
      align-items: stretch;
    }
    #dashboard .dashboard-chart-card {
      display: grid;
      gap: 12px;
      padding: 16px;
      border-radius: 12px;
      background: var(--glass);
      border: 1px solid var(--glass-border);
      box-shadow: var(--shadow);
      min-width: 0;
    }
    #dashboard .dashboard-chart-card--wide {
      grid-column: 1 / -1;
    }
    #dashboard .dashboard-chart-title {
      color: var(--text-muted);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .02em;
    }
    #dashboard .dashboard-chart-shell {
      position: relative;
      min-height: 260px;
    }
    #dashboard .dashboard-chart-shell canvas {
      width: 100% !important;
      height: 260px !important;
      display: block;
      background: transparent;
    }
    #dashboard .dashboard-chart-empty {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      padding: 18px;
      border-radius: 10px;
      border: 1px dashed rgba(255,255,255,.08);
      background: rgba(255,255,255,.02);
      color: var(--text-muted);
      font-size: 13px;
      line-height: 1.5;
      text-align: center;
    }
    #dashboard > .grid-2 {
      gap: var(--gap-cards);
      margin-bottom: var(--gap-cards);
    }
    #dashboard .dashboard-balance-row {
      align-items: stretch;
    }
    #dashboard .toolbar {
      justify-content: flex-start;
    }
    #dashboard .dashboard-section {
      display: flex;
      flex-direction: column;
      gap: 18px;
      min-height: 0;
    }
    #dashboard .summary-list {
      gap: 14px;
      flex: 1;
    }
    #dashboard .summary-item--dashboard-person {
      grid-template-columns: minmax(0, 1.35fr) repeat(5, minmax(0, .72fr));
      align-items: center;
      gap: 16px;
      overflow: visible;
    }
    #dashboard .summary-main {
      display: grid;
      gap: 8px;
      min-width: 0;
    }
    #dashboard .summary-main .name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: normal;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      line-height: 1.42;
    }
    #dashboard .summary-main .muted {
      color: #d5d5d5;
      line-height: 1.65;
    }
    #dashboard .metric {
      display: grid;
      gap: 4px;
      align-content: start;
      overflow: visible;
    }
    #dashboard .metric span {
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
    }
    #dashboard .chart-box {
      padding: 18px 20px 14px;
    }
    #dashboard .dashboard-section--feedback {
      min-width: 0;
    }
    #dashboard .dashboard-section--feedback .chart-box {
      display: flex;
      flex-direction: column;
      gap: 14px;
      flex: 1;
      justify-content: flex-start;
      padding: 16px 18px 15px;
      overflow-x: auto;
      overflow-y: hidden;
      min-width: 0;
      min-height: 0;
    }
    #dashboard .dashboard-section--feedback .chart {
      flex: 1 1 0;
      width: 100%;
      min-width: 0 !important;
      box-sizing: border-box;
      height: 0;
      min-height: 220px;
      max-height: 360px;
      gap: 12px;
      padding: 8px 14px 4px 2px;
      align-items: flex-end;
      contain: layout size;
    }
    #dashboard .dashboard-section--feedback .bar-col {
      min-width: 70px;
      max-width: none;
      flex: 1 1 0;
      gap: 8px;
    }
    #dashboard .dashboard-section--feedback .bar {
      min-height: 18px;
      border-radius: 18px 18px 10px 10px;
    }
    #dashboard .dashboard-section--feedback .bar-value {
      font-size: 14px;
      line-height: 1.05;
    }
    #dashboard .dashboard-section--feedback .bar-label {
      width: 100%;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 12px;
      line-height: 1.28;
    }
    .feedback-summary {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
      gap: 10px;
      padding-top: 14px;
      border-top: 1px solid rgba(255,255,255,.08);
      align-items: stretch;
    }
    .feedback-summary-chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 10px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.08);
      color: #dddddd;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.4;
      text-align: center;
    }
    .feedback-summary-chip strong {
      color: var(--primary);
      font-size: 13px;
    }
    #dashboard #pendingOverview {
      display: grid;
      gap: 14px;
    }
    .recados-section {
      display: flex;
      flex-direction: column;
      gap: 18px;
    }
    .recados-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 16px;
      flex-wrap: wrap;
    }
    .recados-counter {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 14px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.1);
      background: rgba(255,255,255,.04);
      color: #e1e1e1;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .02em;
      line-height: 1.3;
    }
    .recados-counter.has-unread {
      border-color: rgba(255,194,15,.3);
      background: rgba(255,194,15,.14);
      color: var(--primary);
    }
    .recados-form {
      display: grid;
      grid-template-columns: minmax(150px, .72fr) minmax(150px, .72fr) minmax(0, 1.8fr) auto;
      gap: 14px;
      align-items: end;
    }
    .field-recado-message {
      min-width: 0;
    }
    .field-recado-message textarea {
      min-height: 58px;
      max-height: 148px;
      resize: vertical;
    }
    .recados-submit {
      min-width: 140px;
    }
    .recados-list {
      display: grid;
      gap: 12px;
    }
    .recado-card {
      display: grid;
      gap: 14px;
      padding: 18px;
      border-radius: 18px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.03);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
    }
    .recado-card--unread {
      border-color: rgba(255,215,0,.34);
      background: linear-gradient(180deg, rgba(255,215,0,.08), rgba(255,255,255,.03));
      box-shadow: inset 0 0 0 1px rgba(255,215,0,.16);
    }
    .recado-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
      flex-wrap: wrap;
    }
    .recado-route {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }
    .recado-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 11px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.1);
      background: rgba(255,255,255,.05);
      color: #f3f3f3;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.3;
    }
    .recado-pill--to::before {
      content: "→";
      color: var(--primary);
      font-weight: 900;
    }
    .recado-meta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      color: #d9d9d9;
      font-size: 12px;
      line-height: 1.4;
    }
    .recado-badge {
      display: inline-flex;
      align-items: center;
      padding: 7px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.04);
      color: #dadada;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
      line-height: 1.2;
    }
    .recado-badge--unread {
      border-color: rgba(255,194,15,.35);
      background: rgba(255,194,15,.16);
      color: var(--primary);
    }
    .recado-text {
      padding: 14px 16px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.06);
      background: rgba(0,0,0,.18);
      color: #f0f0f0;
      line-height: 1.72;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }
    .recado-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      flex-wrap: wrap;
    }
    .recado-empty {
      margin-top: 2px;
    }
    .pending-overview-cards {
      align-items: stretch;
    }
    .pending-overview-cards .metric {
      padding-right: 6px;
      min-width: 0;
      overflow: visible;
    }
    .pending-overview-cards .metric span {
      font-size: 11px;
      letter-spacing: .04em;
      word-break: keep-all;
      white-space: nowrap;
    }
    .summary-item--addon-overview {
      align-items: flex-start;
      gap: 16px;
      padding: 16px 18px;
    }
    .addon-card-details {
      gap: 4px;
    }
    .addon-card-name {
      font-weight: 700;
      line-height: 1.4;
    }
    .addon-card-categories {
      color: #d3d3d3;
      line-height: 1.55;
    }
    .addon-card-total span {
      color: #c8c8c8;
    }
    #settings .settings-actions {
      margin-top: 0;
    }
    #settings .settings-help-step .name {
      font-size: 14px;
      line-height: 1.42;
      margin-bottom: 6px;
    }
    #settings .settings-help-step .muted {
      color: #d8d8d8;
      line-height: 1.62;
    }
    .event-sidebar-stack {
      display: grid;
      gap: 18px;
    }
    .section-separator {
      height: 1px;
      border: 0;
      background: var(--line);
      margin: 22px 0 18px;
    }
    .app[data-active-tab="settings"] .topbar {
      background: rgba(12,12,12,.76);
      border-color: rgba(255,255,255,.07);
      box-shadow: 0 16px 34px rgba(0,0,0,.22);
    }
    .app[data-active-tab="settings"] .brand-mark {
      box-shadow: none;
      transform: none;
      opacity: .88;
    }
    .app[data-active-tab="settings"] .brand-title,
    .app[data-active-tab="settings"] .brand-subtitle,
    .app[data-active-tab="settings"] .period-label {
      color: #cfcfcf;
    }
    .app[data-active-tab="settings"] .period-select,
    .app[data-active-tab="settings"] .period-year {
      background: rgba(255,255,255,.03);
      border-color: rgba(255,255,255,.08);
    }
    .app[data-active-tab="settings"] .month-status-badge {
      background: rgba(255,255,255,.025);
      border-color: rgba(255,255,255,.07);
      box-shadow: none;
    }
    .app[data-active-tab="settings"] .topbar-actions .btn {
      min-height: 42px;
      box-shadow: none;
    }
    .app[data-active-tab="settings"] .topbar-actions .btn-ghost {
      background: rgba(255,255,255,.04);
      border-color: rgba(255,255,255,.08);
    }
    .app[data-active-tab="settings"] .topbar-actions .btn-primary {
      background: rgba(255,194,15,.18);
      border-color: rgba(255,194,15,.22);
      color: #ffe7a6;
    }
    .app[data-active-tab="settings"] .topbar-actions .btn-primary:hover {
      background: rgba(255,194,15,.22);
      color: #fff0bf;
    }
    @media (max-width: 1180px) {
      #settings .settings-shell {
        grid-template-columns: minmax(0, 1fr);
      }
    }
    @media (max-width: 760px) {
      #settings .settings-form-grid {
        grid-template-columns: 1fr;
      }
      #settings .settings-health-sep {
        display: none;
      }
      #settings .settings-field-card--full {
        grid-column: auto;
      }
      #settings .settings-card-actions {
        flex-direction: column;
      }
      #settings .settings-card-actions > * {
        width: 100%;
      }
      #settings #backupSummaryList .summary-item--backup,
      #settings #persistenceTechList .summary-item--col4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      #settings #backupSummaryList .summary-item--backup > :first-child {
        grid-column: 1 / -1;
      }
      #settings .settings-period-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
    @media (max-width: 560px) {
      #settings #backupSummaryList .summary-item--backup,
      #settings #diagnosticSummaryList .summary-item--diagnostic,
      #settings #flowSmokeList .summary-item--col2,
      #settings #persistenceTechList .summary-item--col4 {
        grid-template-columns: 1fr;
      }
      #settings #backupSummaryList .summary-item--backup > :first-child {
        grid-column: auto;
      }
      #settings .settings-period-head,
      #settings .settings-period-kpis {
        grid-template-columns: 1fr;
      }
      #settings .settings-card--critical .settings-card-actions .btn {
        min-width: 0;
      }
    }
  
    /* v5 stability overrides */
    .summary-item {
      grid-template-columns: minmax(180px, 1.3fr) repeat(5, minmax(88px, .8fr));
      min-width: 0;
    }
    .summary-main, .metric, .bar-col, .bar-label {
      min-width: 0;
    }
    .summary-main .name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .metric {
      min-width: 0;
      overflow: hidden;
    }
    .metric span {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .chart-box {
      overflow: hidden;
    }
    .chart {
      overflow-x: auto;
      overflow-y: hidden;
      align-items: end;
      padding-bottom: 8px;
      min-width: 0;
      scrollbar-gutter: stable both-edges;
    }
    .bar-col {
      min-width: 78px;
      max-width: 92px;
      flex: 0 0 78px;
    }
    .bar-label {
      width: 100%;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .tooltip {
      max-width: min(320px, calc(100vw - 24px));
      max-height: min(260px, calc(100vh - 24px));
      overflow: auto;
      overflow-wrap: anywhere;
      word-break: break-word;
      white-space: normal;
    }
    .ticket .desc,
    .ticket .title,
    .cell-text.multiline {
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    .score-hero {
      align-items: start;
      gap: 12px;
      flex-wrap: wrap;
    }
    .goal-pills {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
      margin-left: auto;
    }
    .nps-grid-3 {
      grid-template-columns: repeat(3, minmax(180px, 1fr));
    }
    .event-kpis {
      margin-bottom: 2px;
    }
    .toolbar-actions input,
    .toolbar-actions select {
      min-height: 42px;
    }
    .table-toolbar-note {
      color: var(--muted);
      font-size: 12px;
    }
    /* ===== v34 consolidated improvements ===== */

    .topbar-social {
      display: flex;
      gap: 8px;
      align-items: center;
    }
    @keyframes ledPulse {
      0%, 100% { box-shadow: 0 0 3px 0 var(--led-color); }
      50% { box-shadow: 0 0 10px 3px var(--led-color); }
    }
    .topbar-social a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: rgba(255,255,255,.07);
      border: 1px solid rgba(255,255,255,.12);
      color: rgba(255,255,255,.7);
      transition: transform .2s, background .2s, color .2s, border-color .2s, box-shadow .2s;
      text-decoration: none;
      animation: ledPulse 2s ease-in-out infinite;
    }
    .topbar-social a[aria-label="Instagram"] {
      --led-color: rgba(225,48,108,.55);
      animation-delay: 0s;
    }
    .topbar-social a[aria-label="WhatsApp"] {
      --led-color: rgba(37,211,102,.55);
      animation-delay: 0.4s;
    }
    .topbar-social a[aria-label="LinkedIn"] {
      --led-color: rgba(10,102,194,.55);
      animation-delay: 0.8s;
    }
    .topbar-social a:hover {
      transform: scale(1.12);
      background: rgba(245,197,24,.18);
      border-color: rgba(245,197,24,.35);
      color: #f5c518;
      animation: none;
      box-shadow: 0 0 12px 4px rgba(245,197,24,.3);
    }
    .topbar-social a svg {
      width: 20px;
      height: 20px;
      fill: currentColor;
    }
    .topbar-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    .skip-link {
      position: absolute;
      top: 12px;
      left: 12px;
      z-index: 100;
      padding: 10px 14px;
      border-radius: 12px;
      background: var(--primary);
      color: #111111;
      font-weight: 800;
      text-decoration: none;
      transform: translateY(-160%);
      transition: transform .18s ease;
    }
    .skip-link:focus {
      transform: translateY(0);
    }
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0,0,0,0);
      white-space: nowrap;
      border: 0;
    }
    .import-label {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
    }
    .import-label:hover {
      transform: translateY(-1px);
    }
    .import-label:active {
      transform: translateY(0);
    }
    html { scroll-behavior: smooth; }
    .view { animation: fadeSlideIn .28s ease; }
    @keyframes fadeSlideIn {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .stats-grid .card,
    .insight-grid .insight-card {
      animation: cardPop .32s ease both;
    }
    .stats-grid .card:nth-child(1), .insight-grid .insight-card:nth-child(1) { animation-delay: .04s; }
    .stats-grid .card:nth-child(2), .insight-grid .insight-card:nth-child(2) { animation-delay: .08s; }
    .stats-grid .card:nth-child(3), .insight-grid .insight-card:nth-child(3) { animation-delay: .12s; }
    .stats-grid .card:nth-child(4), .insight-grid .insight-card:nth-child(4) { animation-delay: .16s; }
    .stats-grid .card:nth-child(5) { animation-delay: .20s; }
    .stats-grid .card:nth-child(6) { animation-delay: .24s; }
    .stats-grid .card:nth-child(7) { animation-delay: .28s; }
    @keyframes cardPop {
      from { opacity: 0; transform: translateY(12px) scale(.97); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
    .insight-card {
      transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
    }
    .insight-card:hover {
      transform: translateY(-3px);
      border-color: rgba(255,194,15,.18);
      box-shadow: 0 12px 32px rgba(0,0,0,.25);
    }
    .progress-fill {
      transition: width .6s cubic-bezier(.22,.61,.36,1);
    }
    .month-status-badge.closed {
      background: rgba(255,77,79,.12);
      border-color: rgba(255,77,79,.28);
      color: #ffb1b2;
    }
    .month-status-badge.active {
      background: rgba(56,210,122,.1);
      border-color: rgba(56,210,122,.22);
      color: #9cf0bd;
    }
    .tab-btn:focus-visible,
    .btn:focus-visible,
    .import-label:focus-visible,
    .drag-grip:focus-visible,
    .icon-btn:focus-visible,
    .card-nav:focus-visible {
      outline: none;
      box-shadow: 0 0 0 3px rgba(255,194,15,.24), 0 0 0 1px rgba(255,194,15,.52);
    }
    .ticket:focus-visible,
    .shift-editor-row:focus-within {
      outline: none;
      box-shadow: 0 0 0 3px rgba(255,194,15,.16), inset 0 0 0 1px rgba(255,194,15,.38);
    }
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible,
    .table-input:focus-visible {
      outline: none;
      box-shadow: 0 0 0 3px rgba(255,194,15,.14), 0 0 0 1px rgba(255,194,15,.42);
    }
    [aria-invalid="true"] {
      border-color: rgba(255,77,79,.72) !important;
      box-shadow: 0 0 0 3px rgba(255,77,79,.14);
    }
    .risk-pointer {
      transition: left .4s cubic-bezier(.22,.61,.36,1);
    }
    .score-number {
      transition: color .3s ease;
    }
    .app-main {
      display: grid;
      gap: 0;
      flex: 1 0 auto;
      min-height: 0;
    }
    .ticket[draggable="true"] { cursor: grab; }
    .ticket[draggable="true"]:active { cursor: grabbing; }
    ::-webkit-scrollbar { width: 8px; height: 8px; }
    ::-webkit-scrollbar-track { background: rgba(255,255,255,.03); border-radius: 8px; }
    ::-webkit-scrollbar-thumb {
      background: rgba(255,194,15,.2);
      border-radius: 8px;
      border: 2px solid transparent;
      background-clip: padding-box;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: rgba(255,194,15,.35);
      background-clip: padding-box;
    }
    .save-toast { transition: opacity .22s ease, transform .22s cubic-bezier(.22,.61,.36,1); }
    .empty { transition: background .18s ease; }
    .empty:hover { background: rgba(255,255,255,.02); }
    /* ─── Footer de autoria ──────────────────────────────────────────────── */
    .app-footer {
      text-align: center;
      padding: 28px 16px 22px;
      color: var(--muted);
      font-size: 11px;
      letter-spacing: .04em;
      line-height: 1.7;
      border-top: 1px solid rgba(255,255,255,.06);
      margin-top: 36px;
    }
    .app-footer .author-line {
      font-weight: 700;
      color: var(--text);
      font-size: 12px;
      margin-bottom: 4px;
      letter-spacing: .06em;
    }
    .app-footer .project-line {
      opacity: .7;
    }
    .app-footer .claude-mark {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      margin-top: 8px;
      opacity: .45;
      font-size: 10px;
      letter-spacing: .03em;
    }
    .app-footer .claude-mark svg {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
    }
    @media (max-width: 1440px) {
      #settings > .grid-2:nth-of-type(2) {
        grid-template-columns: minmax(0, 1.16fr) minmax(280px, .84fr);
      }
    }

    @media (max-width: 1320px) {
      #settings > .grid-2 {
        grid-template-columns: 1fr;
      }
      #settings > .grid-2:nth-of-type(2),
      #settings > .grid-2:nth-of-type(3) {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 1180px) {
      #settings #backupSummaryList .summary-item--backup,
      #settings #persistenceTechList .summary-item--col4,
      #settings #periodAuditList .summary-item--audit {
        grid-template-columns: 1fr;
      }
      #settings #backupSummaryList .summary-item--backup > :first-child,
      #settings #periodAuditList .summary-item--audit > :first-child,
      #settings #periodAuditList .summary-item--audit > :last-child {
        grid-column: auto;
      }
      #settings .settings-section-head {
        min-height: auto;
      }
    }

    @media (max-width: 860px) {
      #settings .summary-item,
      #settings .summary-item--col1,
      #settings #diagnosticSummaryList .summary-item--diagnostic,
      #settings #flowSmokeList .summary-item--col2,
      #settings #backupSummaryList .summary-item--backup,
      #settings #persistenceTechList .summary-item--col4,
      #settings #periodAuditList .summary-item--audit {
        grid-template-columns: 1fr;
      }
      #settings #periodAuditList {
        max-height: none;
        overflow: visible;
        padding-right: 0;
      }
      #settings .inline-actions .btn,
      #settings .toolbar .btn,
      #settings .btn-success {
        flex-basis: 100%;
      }
      #settings textarea {
        min-height: 176px;
      }
      #settings .settings-section-body {
        padding-top: 18px;
      }
    }

    /* ── Breakpoint 1380px ── */
    @media (max-width: 1380px) {
      .event-overview-grid { grid-template-columns: 1fr; }
    }

    /* ── Breakpoint 1260px ── */
    @media (max-width: 1260px) {
      .hero, .grid-2, .grid-3, .nps-grid { grid-template-columns: 1fr; }
      .insight-grid { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
      .stats-grid { grid-template-columns: repeat(2, 1fr); }
      .summary-item { grid-template-columns: 1fr 1fr 1fr; }
      .kanban { grid-template-columns: 1fr; }
      .field-grid { grid-template-columns: repeat(2, minmax(160px, 1fr)); }
      #students .students-toolbar-actions {
        grid-template-columns: minmax(240px, 1.35fr) minmax(180px, .8fr) minmax(180px, .8fr);
      }
      #students .students-toolbar-actions > .btn {
        grid-column: 1 / -1;
        width: fit-content;
        justify-self: start;
      }
      .students-summary-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .students-summary-item,
      .students-summary-item--total,
      .students-summary-item--addons {
        grid-column: auto;
      }
      .students-summary-item--attendants,
      .students-summary-item--feedback {
        grid-column: 1 / -1;
      }
      .hero-actions--bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .hero-side { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .hero-side .mini-stat--wide { grid-column: 1 / -1; }
      #dashboard #dashboardCards {
        grid-template-columns: repeat(6, minmax(0, 1fr));
      }
      #dashboard #dashboardCards > .card,
      #dashboard #dashboardCards > .card-nav[data-tab-target="scale"],
      #dashboard #dashboardCards > .card-nav[data-tab-target="events"] {
        grid-column: span 3;
      }
      /* Pending kanban: collapse to single column on tablets */
      #pending #pendingKanban.kanban {
        grid-template-columns: 1fr;
        min-width: 0;
      }
      #pending .kanban-scroll {
        max-height: 50vh;
      }
      #pending .kanban-list {
        max-height: 45vh;
      }
      /* Pending table: reduce min-width for tablets */
      #pending .pending-table {
        min-width: 960px;
      }
      /* NPS panels: reduce min-height on tablets */
      .nps-left-panel,
      .nps-ranking-panel {
        min-height: clamp(400px, 60vh, 700px);
      }
    }

    /* ── Breakpoint 1100px ── */
    @media (max-width: 1100px) {
      #pendingKanban.kanban { grid-template-columns: minmax(260px, 1fr); min-width: 0; }
      .kanban { min-width: 0; }
      .kanban-col { min-height: 460px; }
      #students .student-table {
        min-width: 1240px;
      }
      #students .student-table th,
      #students .student-table td {
        padding: 12px 8px;
        font-size: 13px;
      }
      #students .student-table th:nth-child(3),
      #students .student-table td:nth-child(3),
      #students .student-table th:nth-child(5),
      #students .student-table td:nth-child(5) {
        min-width: 132px;
      }
      #students .student-table th:nth-child(4),
      #students .student-table td:nth-child(4) {
        min-width: 110px;
      }
      .pending-status-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .pending-status-card--total {
        grid-column: 1 / -1;
      }
      .nps-history-item {
        grid-template-columns: minmax(0, 1fr) auto;
      }
      .nps-history-band {
        grid-column: 1 / -1;
        justify-self: start;
      }
      .summary-item {
        grid-template-columns: repeat(3, minmax(110px, 1fr));
      }
      .summary-item > :first-child {
        grid-column: 1 / -1;
      }
      .nps-grid-3 {
        grid-template-columns: 1fr;
      }
      .schedule-kpis {
        grid-template-columns: repeat(2, minmax(160px, 1fr));
      }
      #scale .schedule-matrix table {
        min-width: 900px;
      }
      #scale .schedule-matrix th,
      #scale .schedule-matrix td {
        min-width: 92px;
        padding: 12px 8px;
        font-size: 13px;
      }
      .scale-date-cell {
        min-width: 128px;
      }
      .scale-date-main {
        font-size: 16px;
        margin-bottom: 4px;
      }
      .scale-date-sub,
      .scale-mini-note {
        font-size: 11px;
      }
      .scale-board-row {
        grid-template-columns: 1fr;
      }
      .recados-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .field-recado-message,
      .recados-submit {
        grid-column: 1 / -1;
      }
      .scale-board-day,
      .scale-board-prof,
      .scale-board-recep {
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.08);
      }
    }

    /* ── Breakpoint 900px ── */
    @media (max-width: 900px) {
      .event-calendar-grid { min-width: 700px; }
      .event-calendar-day { min-height: 146px; }
      .shift-editor-row {
        grid-template-columns: 1fr;
      }
      .topbar {
        position: static;
        align-items: flex-start;
        padding: 12px 14px;
        flex-wrap: wrap;
      }
      .topbar-left, .topbar-right {
        width: 100%;
      }
      .divider-v {
        display: none;
      }
      .schedule-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      /* Topbar: period selectors wrap on tablet */
      .topbar-right {
        flex-wrap: wrap;
      }
      /* Hero: side stats go single column */
      .hero-side {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      /* Pending kanban: keep single column, reduce height */
      #pending .kanban-scroll {
        max-height: 45vh;
      }
      #pending .kanban-list {
        max-height: 40vh;
      }
      /* Pending table */
      #pending .pending-table {
        min-width: 900px;
      }
      /* Field grids: 2 columns */
      .field-grid {
        grid-template-columns: repeat(2, minmax(140px, 1fr));
      }
      /* Tabs: ensure wrapping and touch-friendly sizing */
      .tabs {
        gap: 8px;
      }
      .tab-btn {
        min-height: 40px;
        padding: 10px 14px;
        font-size: 12px;
      }
      /* Modal: reduce padding on tablet */
      .modal-content {
        width: min(960px, 95vw);
      }
    }

    /* ── Breakpoint 760px ── */
    @media (max-width: 760px) {
      .app { padding: 14px; }
      .stats-grid, .field-grid, .score-slider-row, .insight-grid { grid-template-columns: 1fr; }
      #dashboard .dashboard-visual-grid { grid-template-columns: 1fr; }
      #dashboard .dashboard-chart-card--wide { grid-column: auto; }
      .goal-pills {
        justify-content: flex-start;
        margin-left: 0;
      }
      .nps-left-panel,
      .nps-ranking-panel {
        min-height: auto;
      }
      .rank-list {
        max-height: none;
        overflow: visible;
        padding-right: 0;
      }
      .events-quick-summary-sep {
        display: none;
      }
      #events #eventsList {
        max-height: none;
        overflow: visible;
        padding-right: 0;
      }
      #events .event-consolidated-card .table-wrap {
        max-height: none;
      }
      #students .students-toolbar-actions {
        grid-template-columns: 1fr;
      }
      #students .students-toolbar-actions > .btn {
        grid-column: auto;
        width: 100%;
      }
      #students .section {
        padding: 16px;
      }
      .students-summary-bar {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 8px;
      }
      .students-summary-item {
        min-height: 0;
        padding: 10px 12px;
      }
      .students-summary-item,
      .students-summary-item--total,
      .students-summary-item--attendants,
      .students-summary-item--feedback,
      .students-summary-item--addons {
        grid-column: auto;
      }
      #students .student-table {
        min-width: 1240px;
      }
      #students .student-table th,
      #students .student-table td {
        padding: 10px 7px;
        font-size: 12px;
      }
      #students .student-table th:nth-child(3),
      #students .student-table td:nth-child(3),
      #students .student-table th:nth-child(5),
      #students .student-table td:nth-child(5) {
        min-width: 118px;
      }
      #students .student-table th:nth-child(4),
      #students .student-table td:nth-child(4) {
        min-width: 96px;
      }
      #students .student-table td .table-input {
        min-width: 0;
        font-size: 12px;
      }
      .pending-status-strip {
        grid-template-columns: 1fr;
      }
      .pending-status-card {
        min-height: 0;
      }
      .pending-status-card--total {
        grid-template-columns: 1fr auto;
      }
      .scale-ops-sep {
        display: none;
      }
      .summary-item { grid-template-columns: 1fr 1fr; }
      .hero-main, .hero-side, .section { padding: 18px; }
      .hero-action-bar { padding: 18px; }
      .hero-side { grid-template-columns: 1fr; }
      .hero-side .mini-stat--wide { grid-column: auto; }
      .hero-actions--bar { grid-template-columns: 1fr; }
      .recados-form { grid-template-columns: 1fr; }
      .field-recado-message,
      .recados-submit { grid-column: auto; }
      #dashboard .dashboard-section--feedback .chart {
        min-height: 180px;
        max-height: 280px;
        gap: 10px;
      }
      h1 { max-width: none; }
      .rank-item { grid-template-columns: 1fr; }
      .rank-actions { justify-content: stretch; }
      .rank-name-input { max-width: none; }
      #dashboard #dashboardCards {
        grid-template-columns: 1fr;
      }
      #dashboard #dashboardCards > .card,
      #dashboard #dashboardCards > .card-nav[data-tab-target="scale"],
      #dashboard #dashboardCards > .card-nav[data-tab-target="events"] {
        grid-column: span 1;
      }
      #settings .grid-2 {
        grid-template-columns: 1fr;
      }
      #scale .section {
        padding: 16px;
      }
      #scale .schedule-note-box,
      #scale .scale-board-wrap {
        margin-bottom: 14px;
      }
      #scale .scale-board {
        gap: 10px;
      }
      #scale .scale-board-row {
        border-radius: 18px;
      }
      #scale .scale-board-day,
      #scale .scale-board-prof,
      #scale .scale-board-recep,
      #scale .scale-board-side {
        padding: 12px;
      }
      #scale .scale-board-day .date {
        font-size: 24px;
      }
      #scale .scale-board-day .weekday {
        font-size: 10px;
        padding: 6px 8px;
      }
      #scale .scale-board-shift {
        padding: 8px 10px;
      }
      #scale .schedule-matrix table {
        min-width: 800px;
      }
      #scale .schedule-matrix th,
      #scale .schedule-matrix td {
        min-width: 80px;
        padding: 10px 7px;
        font-size: 12px;
      }
      #scale .scale-date-cell {
        min-width: 116px;
      }
      #scale .scale-date-main {
        font-size: 15px;
      }
      #scale .scale-date-sub,
      #scale .scale-mini-note {
        font-size: 10px;
      }
      .settings-panel-block + .settings-panel-block {
        padding-top: 14px;
      }
      #pending .ticket .foot {
        grid-template-columns: 1fr;
      }
      #pending .ticket-actions {
        justify-content: flex-start;
      }
      /* Pending table on mobile: smaller min-width for better scroll */
      #pending .pending-table {
        min-width: 860px;
      }
      #pending .pending-table th,
      #pending .pending-table td {
        padding: 10px 8px;
        font-size: 13px;
      }
      /* Pending layout on mobile: stack table above kanban */
      #pending > .grid-3 {
        grid-template-columns: 1fr;
      }
      /* Pending kanban on mobile: vertical columns */
      #pending #pendingKanban.kanban {
        grid-template-columns: 1fr;
        min-width: 0;
      }
      #pending .kanban-scroll {
        max-height: none;
        overflow-y: visible;
        padding: 0 2px 4px 0;
      }
      #pending .kanban-col {
        padding: 10px;
        min-height: 0;
        max-height: 300px;
        overflow-y: auto;
      }
      #pending .kanban-list {
        max-height: 240px;
        overflow-y: auto;
      }
      /* Modal on mobile: smaller width and padding */
      .modal {
        padding: 10px;
      }
      .modal-content {
        width: min(560px, 96vw);
        padding: 18px 16px;
      }
      .modal-head h2 {
        font-size: 18px;
      }
      /* Buttons: full-width on mobile for touch */
      .btn {
        min-height: 44px;
      }
      .btn-xs {
        min-height: 38px;
        padding: 8px 10px;
      }
      /* Section padding reduction */
      .section {
        padding: 14px;
      }
      /* Glass card border radius reduction on mobile */
      .glass {
        border-radius: 16px;
      }
      /* Tabs: scrollable on very small screens */
      .tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
      }
      .tabs::-webkit-scrollbar {
        display: none;
      }
      .tab-btn {
        flex-shrink: 0;
        min-height: 38px;
        padding: 9px 14px;
        font-size: 11px;
      }
      /* Topbar elements: better mobile sizing */
      .period-select {
        min-width: 90px;
        height: 40px;
        font-size: 13px;
      }
      .period-year {
        width: 76px;
        min-width: 76px;
        height: 40px;
      }
      /* Input fields: better touch targets */
      input, select, textarea {
        min-height: 44px;
        font-size: 16px; /* prevents iOS zoom on focus */
      }
      textarea {
        font-size: 16px;
      }
      /* Table inputs on mobile */
      .table-input {
        min-height: 40px;
        font-size: 16px;
      }
      /* Kanban list: smaller max-height on mobile */
      #pending .kanban-list {
        max-height: 35vh;
        padding-right: 2px;
      }
      /* Ensure no page-level horizontal overflow */
      .app {
        overflow-x: hidden;
      }
      /* Scrollbar styling for mobile table wrappers */
      .table-wrap::-webkit-scrollbar {
        height: 6px;
      }
      #pending .kanban-scroll::-webkit-scrollbar {
        height: 6px;
      }
    }

    /* ── Breakpoint 720px ── */
    @media (max-width: 720px) {
      .schedule-kpis {
        grid-template-columns: 1fr;
      }
      .scale-board-shift {
        grid-template-columns: 1fr;
      }
      .scale-board-time {
        white-space: normal;
      }
    }

    /* ── Breakpoint 640px ── */
    @media (max-width: 640px) {
      .event-calendar-grid { min-width: 630px; gap: 8px; }
      .event-calendar-day { min-height: 132px; padding: 10px; }
      .event-day-name, .event-day-extra { -webkit-line-clamp: 1; line-clamp: 1; }
      .schedule-kpis {
        grid-template-columns: 1fr;
      }
      #students .student-table {
        min-width: 1240px;
      }
      #scale .schedule-matrix table {
        min-width: 760px;
      }
      #scale .scale-board-day .date {
        font-size: 22px;
      }
      .toolbar-actions {
        width: 100%;
      }
      .toolbar-actions > * {
        width: 100%;
      }
      /* Small phone: even more compact layout */
      .app {
        padding: 10px;
      }
      .hero-main, .hero-side, .section {
        padding: 14px;
      }
      .section.glass {
        padding: 12px;
      }
      /* Kanban: tighter on small screens */
      #pending .kanban-scroll {
        max-height: 38vh;
      }
      #pending .kanban-col {
        padding: 8px;
      }
      #pending .kanban-list {
        max-height: 30vh;
      }
      /* Pending table: smaller cells */
      #pending .pending-table {
        min-width: 820px;
      }
      #pending .pending-table th,
      #pending .pending-table td {
        padding: 8px 6px;
        font-size: 12px;
      }
      /* Modal: nearly full width on small phones */
      .modal-content {
        width: 98vw;
        padding: 14px 12px;
      }
      /* h1: smaller on phone */
      h1 {
        font-size: clamp(24px, 6vw, 32px);
      }
      .subtitle {
        font-size: 13px;
      }
      /* Toolbar titles */
      .toolbar-title h2 {
        font-size: clamp(18px, 4.5vw, 22px);
      }
      /* Mini stat values */
      .mini-stat .value {
        font-size: 24px;
      }
      .card .card-value {
        font-size: 24px;
      }
      /* Brand */
      .brand-mark {
        width: 42px;
        height: 36px;
        font-size: 11px;
      }
      .brand-title {
        font-size: 12px;
      }
      /* Tabs: even smaller on phone */
      .tab-btn {
        min-height: 36px;
        padding: 8px 11px;
        font-size: 10px;
      }
      /* Summary items: single column on small phone */
      .summary-item {
        grid-template-columns: 1fr;
      }
      /* NPS score number */
      .score-number {
        font-size: clamp(36px, 10vw, 48px);
      }
    }

    /* ── Fix Bug 2: cards de atendente em 2 colunas abaixo de 480px ── */
    @media (max-width: 480px) {
      #dashboard .summary-item--dashboard-person {
        grid-template-columns: 1fr 1fr;
        row-gap: 8px;
      }
      #dashboard .summary-item--dashboard-person .summary-main {
        grid-column: 1 / -1;
      }
      #dashboard .metric span {
        font-size: 12px;
      }
    }

    /* ── Fix Bug 3: scroll horizontal no gráfico Feedback Positivo ── */
    @media (max-width: 760px) {
      #dashboard .dashboard-section--feedback .chart-box {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }
      #dashboard .dashboard-section--feedback .chart {
        contain: none;
        min-width: min-content !important;
        flex-shrink: 0;
        width: auto;
      }
      #dashboard .dashboard-section--feedback .bar-col {
        flex: 0 0 88px;
        min-width: 88px;
        max-width: 88px;
      }
      #dashboard .dashboard-section--feedback .bar-label {
        max-width: 100%;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }
      *,
      *::before,
      *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
      }
    }

    @media print {
      .topbar, .hero-actions, .tabs, .toolbar-actions,
      .btn, .save-toast, .tooltip, .modal { display: none !important; }
      .view { display: block !important; }
      .glass { box-shadow: none; border: 1px solid #ddd; }
      body { background: #fff; color: #000; }
      .card-value, .score-number, .mini-stat .value,
      .insight-value, .metric strong { color: #000; }
      .app-footer { display: block !important; border-top: 1px solid #ccc; color: #000; }
      .app-footer .author-line { color: #000; }
      .app-footer .claude-mark { opacity: .6; }
    }


    /* ══════════════════════════════════════════
       ACESSIBILIDADE — prefers-reduced-motion
       Desabilita animações e transições para usuários sensíveis a movimento
       ══════════════════════════════════════════ */
    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
      .pulse-dot {
        animation: none !important;
      }
      .modal.show .modal-content {
        animation: none !important;
      }
      .save-toast.show {
        animation: none !important;
      }
      .dragging {
        animation: none !important;
      }
      [data-tooltip]::after {
        transition: none !important;
      }
    }

    /* ════════════════════════════════════════════════════════════════
       WPM DESIGN SYSTEM — POLISH LAYER v1
       Camada final de consistência, tokens estendidos, estados,
       acessibilidade, escaneabilidade e refinamento visual.
       Objetivo: elevar a UI para nível de produto maduro sem reescrever
       nenhum seletor pré-existente. Tudo aqui é aditivo.
       ════════════════════════════════════════════════════════════════ */

    :root {
      /* Tipografia — escala fluida baseada em corpo 14 */
      --font-2xs: 10px;
      --font-xs: 11px;
      --font-sm: 13px;
      --font-base: 14px;
      --font-md: 15px;
      --font-lg: 16px;
      --font-xl: 18px;
      --font-2xl: 22px;
      --font-3xl: 28px;
      --font-display: clamp(32px, 4.6vw, 50px);
      --leading-tight: 1.15;
      --leading-snug: 1.35;
      --leading-normal: 1.5;
      --leading-relaxed: 1.65;
      /* Espaçamento — escala 4 baseada */
      --space-2xs: 4px;
      --space-xs: 8px;
      --space-sm: 12px;
      --space-md: 18px;
      --space-lg: 24px;
      --space-xl: 32px;
      --space-2xl: 40px;
      --space-3xl: 56px;
      /* Radius tokens */
      --radius-xs: 6px;
      --radius-sm: 8px;
      --radius-md: 12px;
      --radius-lg: 16px;
      --radius-xl: 20px;
      --radius-2xl: 22px;
      --radius-pill: 999px;
      /* Shadows em camadas (elevation) */
      --shadow-xs: 0 1px 2px rgba(0,0,0,.32);
      --shadow-sm: 0 4px 10px rgba(0,0,0,.22);
      --shadow-md: 0 12px 24px rgba(0,0,0,.28);
      --shadow-lg: 0 24px 60px rgba(0,0,0,.45);
      --shadow-xl: 0 40px 96px rgba(0,0,0,.55);
      --shadow-focus: 0 0 0 3px rgba(255,194,15,.24), 0 0 0 1px rgba(255,194,15,.52);
      --shadow-focus-danger: 0 0 0 3px rgba(255,77,79,.22), 0 0 0 1px rgba(255,77,79,.55);
      /* Motion tokens */
      --motion-fast: .12s;
      --motion-base: .18s;
      --motion-slow: .28s;
      --ease-out: cubic-bezier(.22,.61,.36,1);
      --ease-in-out: cubic-bezier(.4,0,.2,1);
      /* Z-index scale — uma ordem só, previsível */
      --z-base: 1;
      --z-sticky: 30;
      --z-topbar: 40;
      --z-dropdown: 50;
      --z-tooltip: 60;
      --z-toast: 70;
      --z-modal-backdrop: 80;
      --z-modal: 90;
      --z-skip-link: 100;
      /* Surface tints utilitárias */
      --surface-1: rgba(255,255,255,.025);
      --surface-2: rgba(255,255,255,.04);
      --surface-3: rgba(255,255,255,.06);
      --surface-hover: rgba(255,255,255,.07);
      /* Status semânticos soft */
      --status-info-bg: rgba(56,189,248,.10);
      --status-info-bd: rgba(56,189,248,.26);
      --status-info-fg: #9ad8f7;
    }

    /* ── Hierarquia de camadas (corrige conflito topbar vs modal) ── */
    .topbar { z-index: var(--z-topbar); }
    .tooltip { z-index: var(--z-tooltip); }
    .save-toast { z-index: var(--z-toast); }
    .modal { z-index: var(--z-modal); background: rgba(0,0,0,.78); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
    .skip-link { z-index: var(--z-skip-link); }

    /* ── Foco visível universal, consistente e acessível ── */
    *:focus { outline: none; }
    a:focus-visible,
    button:focus-visible,
    [role="button"]:focus-visible,
    [role="tab"]:focus-visible,
    [tabindex]:focus-visible,
    summary:focus-visible {
      outline: none;
      box-shadow: var(--shadow-focus);
      border-radius: var(--radius-md);
    }
    .btn-danger:focus-visible { box-shadow: var(--shadow-focus-danger); }
    .skip-link:focus-visible { box-shadow: 0 0 0 3px rgba(17,17,17,.8); }
    .tab-btn:focus-visible {
      border-radius: var(--radius-pill);
    }

    /* ── Seleção de texto com cor de marca ── */
    ::selection {
      background: rgba(255,194,15,.36);
      color: #111;
    }

    /* ── Botões: hierarquia mais nítida e microinterações premium ── */
    .btn {
      position: relative;
      letter-spacing: .025em;
    }
    .btn:hover {
      transform: translateY(-1px);
    }
    .btn-primary:hover {
      box-shadow: 0 16px 32px rgba(255,194,15,.28), inset 0 1px 0 rgba(255,255,255,.18);
    }
    .btn-ghost {
      color: #ededed;
    }
    .btn-ghost:hover {
      color: #ffffff;
    }
    .btn-danger:hover {
      box-shadow: 0 14px 28px rgba(255,77,79,.18);
    }
    /* Spinner opcional para botões em ação assíncrona (utilitário) */
    .btn.is-loading {
      color: transparent !important;
      pointer-events: none;
    }
    .btn.is-loading::after {
      content: "";
      position: absolute;
      inset: 0;
      margin: auto;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 2px solid currentColor;
      border-right-color: transparent;
      color: var(--primary);
      animation: btn-spin .7s linear infinite;
    }
    .btn-primary.is-loading::after { color: #111; }
    @keyframes btn-spin { to { transform: rotate(360deg); } }

    /* ── Topbar mobile: deixar brand + período respirar, e garantir ação visível ── */
    .topbar {
      box-shadow: 0 12px 32px rgba(0,0,0,.28);
    }
    .topbar-left {
      min-width: 0;
      row-gap: 10px;
    }
    .period-controls {
      row-gap: 8px;
    }
    .brand-title, .brand-subtitle { white-space: nowrap; }
    @media (max-width: 640px) {
      .topbar { padding: 12px 12px; border-radius: 16px; gap: 10px; }
      .topbar-social { gap: 6px; order: 2; }
      .topbar-social a { width: 34px; height: 34px; }
      .topbar-actions { width: 100%; }
      .topbar-actions .btn { flex: 1; }
      .brand-mark { width: 40px; height: 36px; }
      .brand-copy { flex: 1; min-width: 0; }
      .brand-subtitle { letter-spacing: .12em; }
      .period-controls { width: 100%; gap: 8px; }
      .period-select { flex: 1 1 auto; min-width: 0; }
      .period-year { flex: 0 0 auto; }
      .month-status-badge { width: 100%; justify-content: center; }
    }

    /* ── Tabs: indicador sólido, undertone e respiração ── */
    .tabs {
      position: relative;
      padding-bottom: 6px;
    }
    .tab-btn {
      position: relative;
      transition: transform var(--motion-base) var(--ease-out),
                  border-color var(--motion-base) var(--ease-out),
                  background var(--motion-base) var(--ease-out),
                  color var(--motion-base) var(--ease-out),
                  box-shadow var(--motion-base) var(--ease-out);
    }
    .tab-btn.active::after {
      content: "";
      position: absolute;
      left: 18%;
      right: 18%;
      bottom: -7px;
      height: 3px;
      border-radius: 3px;
      background: linear-gradient(90deg, transparent 0%, var(--primary) 25%, var(--primary) 75%, transparent 100%);
      opacity: .9;
      pointer-events: none;
    }
    @media (max-width: 760px) {
      .tab-btn.active::after { bottom: -4px; height: 2px; }
    }

    /* ── Inputs: estados previsíveis ── */
    input, select, textarea {
      transition: border-color var(--motion-base) var(--ease-out),
                  box-shadow var(--motion-base) var(--ease-out),
                  background var(--motion-base) var(--ease-out);
    }
    input:disabled, select:disabled, textarea:disabled {
      opacity: .55;
      cursor: not-allowed;
    }
    input[readonly], select[readonly], textarea[readonly] {
      background: rgba(255,255,255,.02);
      border-color: rgba(255,255,255,.06);
    }

    /* ── Tabelas: scroll-shadows e hover row mais tátil ── */
    .table-wrap {
      position: relative;
      background:
        linear-gradient(90deg, rgba(28,28,28,.98) 0%, rgba(28,28,28,0) 6%, rgba(28,28,28,0) 94%, rgba(28,28,28,.98) 100%) 0 0 / 100% 100% no-repeat,
        linear-gradient(90deg, rgba(0,0,0,.55), transparent 8%, transparent 92%, rgba(0,0,0,.55)) 0 0 / 100% 100% no-repeat,
        rgba(255,255,255,.024);
      background-attachment: local, scroll, local;
    }
    tbody tr {
      transition: background var(--motion-base) var(--ease-out),
                  box-shadow var(--motion-base) var(--ease-out);
    }
    tbody tr:hover td {
      background: rgba(255,194,15,.035);
    }
    tbody tr:focus-within td {
      background: rgba(255,194,15,.06);
      box-shadow: inset 2px 0 0 var(--primary);
    }
    th {
      text-transform: uppercase;
      font-weight: 800;
      letter-spacing: .06em;
      font-size: 11px;
    }
    /* Zebra leve universal para tabelas dentro de .table-wrap, respeitando overrides existentes */
    .table-wrap tbody tr:nth-child(even) > td {
      background: rgba(255,255,255,.018);
    }
    .table-wrap tbody tr:nth-child(even):hover > td {
      background: rgba(255,194,15,.04);
    }

    /* ── Empty state: mais elegante, com glifo e hierarquia ── */
    .empty {
      position: relative;
      gap: 6px;
      background:
        radial-gradient(circle at 50% -20%, rgba(255,194,15,.06), transparent 60%),
        rgba(255,255,255,.02);
      border: 1px dashed rgba(255,255,255,.12);
      color: #d0d0d0;
      letter-spacing: .005em;
    }
    .empty::before {
      content: "";
      display: block;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background:
        radial-gradient(circle at center, rgba(255,194,15,.28), rgba(255,194,15,0) 70%),
        rgba(255,255,255,.04);
      border: 1px solid rgba(255,194,15,.28);
      margin-bottom: 6px;
      flex: 0 0 auto;
    }
    td .empty::before,
    .empty.empty--inline::before {
      display: none;
    }

    /* ── Skeleton loading — utilitários prontos ── */
    @keyframes wpm-skeleton-shimmer {
      0% { background-position: -200% 0; }
      100% { background-position: 200% 0; }
    }
    .skeleton {
      display: block;
      border-radius: var(--radius-md);
      background: linear-gradient(
        90deg,
        rgba(255,255,255,.04) 0%,
        rgba(255,194,15,.08) 50%,
        rgba(255,255,255,.04) 100%
      );
      background-size: 200% 100%;
      animation: wpm-skeleton-shimmer 1.4s linear infinite;
      color: transparent !important;
      user-select: none;
      pointer-events: none;
    }
    .skeleton-line {
      height: 12px;
      border-radius: 6px;
      margin: 6px 0;
    }
    .skeleton-line--sm { height: 10px; border-radius: 5px; }
    .skeleton-line--lg { height: 16px; border-radius: 8px; }
    .skeleton-card {
      padding: var(--space-md);
      border-radius: var(--radius-lg);
      border: 1px solid var(--line);
      background: rgba(255,255,255,.02);
      display: grid;
      gap: 10px;
    }

    /* ── Pill com dot semântica (nova variante opt-in) ── */
    .pill--dot { padding-left: 10px; }
    .pill--dot::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: currentColor;
      flex: 0 0 auto;
      display: inline-block;
    }

    /* ── Cards KPI e insight: hover mais consistente ── */
    .card, .mini-stat, .insight-card, .schedule-kpi, .event-card {
      transition: transform var(--motion-base) var(--ease-out),
                  border-color var(--motion-base) var(--ease-out),
                  background var(--motion-base) var(--ease-out),
                  box-shadow var(--motion-base) var(--ease-out);
    }
    .card:hover, .mini-stat:hover {
      border-color: rgba(255,194,15,.18);
      box-shadow: 0 12px 28px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.04);
    }
    .card-nav {
      cursor: pointer;
    }
    .card-nav:hover {
      transform: translateY(-2px);
    }

    /* ── Hero side (mini-stats): mais ritmo ── */
    .mini-stat .value {
      font-variant-numeric: tabular-nums;
    }
    .card .card-value, .mini-stat .value, .pending-status-value, .score-number, .students-summary-value {
      font-variant-numeric: tabular-nums;
    }

    /* ── Modal: scroll interno com header sticky, responsivo e elegante ── */
    .modal-content {
      box-shadow: var(--shadow-xl), 0 0 0 1px rgba(255,194,15,.08);
    }
    .modal-content .modal-head {
      position: sticky;
      top: -22px;
      margin: -22px -22px 16px;
      padding: 18px 22px 14px;
      background: linear-gradient(180deg, rgba(22,22,22,.98) 0%, rgba(22,22,22,.94) 100%);
      border-bottom: 1px solid rgba(255,255,255,.06);
      z-index: 2;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }
    .modal-content > .inline-actions:last-child {
      position: sticky;
      bottom: -22px;
      margin: 16px -22px -22px;
      padding: 14px 22px 18px;
      background: linear-gradient(180deg, rgba(22,22,22,.94) 0%, rgba(22,22,22,.98) 100%);
      border-top: 1px solid rgba(255,255,255,.06);
      z-index: 2;
    }
    /* Quando a modal compacta (confirm) não precisa desses affixes */
    .confirm-modal-content .modal-head,
    .confirm-modal-content .inline-actions:last-child {
      position: static;
      margin: 0;
      padding: 0;
      background: none;
      border: 0;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    .confirm-modal-content .modal-head {
      margin-bottom: 16px;
    }
    .confirm-modal-content .inline-actions:last-child {
      margin-top: 20px;
    }
    @media (max-width: 760px) {
      .modal-content .modal-head {
        top: -18px;
        margin: -18px -16px 14px;
        padding: 14px 16px 12px;
      }
      .modal-content > .inline-actions:last-child {
        bottom: -18px;
        margin: 14px -16px -18px;
        padding: 12px 16px 16px;
      }
    }

    /* ── Recados counter: componente com identidade clara ── */
    .recados-counter {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-radius: var(--radius-pill);
      background: var(--primary-soft);
      border: 1px solid rgba(255,194,15,.26);
      color: var(--primary);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .04em;
      line-height: 1.2;
      text-transform: uppercase;
      min-height: 32px;
      white-space: nowrap;
    }
    .recados-counter::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: currentColor;
      box-shadow: 0 0 0 4px rgba(255,194,15,.14);
      flex: 0 0 auto;
    }

    /* ── Badge de status de mês: mais peso visual ── */
    .month-status-badge {
      transition: background var(--motion-base) var(--ease-out),
                  border-color var(--motion-base) var(--ease-out),
                  color var(--motion-base) var(--ease-out);
    }

    /* ── Section-kicker: mesma escala em todos os contextos ── */
    .section-kicker {
      font-size: var(--font-2xs);
      padding: 6px 10px;
      letter-spacing: .14em;
    }

    /* ── Toolbar-title: espaço entre kicker, título e parágrafo mais consistente ── */
    .toolbar-title {
      gap: 8px;
    }
    .toolbar-title > h2 + p {
      margin-top: -2px;
    }

    /* ── Divider utility ── */
    .divider-h {
      height: 1px;
      width: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.12) 20%, rgba(255,255,255,.12) 80%, transparent);
      margin: var(--space-md) 0;
      border: 0;
    }

    /* ── Kanban: visual mais rico no drop-target ── */
    .kanban-col.drop-target {
      background: linear-gradient(180deg, rgba(255,194,15,.08), rgba(255,194,15,0) 120px), rgba(255,255,255,.03);
    }
    .kanban-col h3::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: currentColor;
      opacity: .38;
      flex: 0 0 auto;
    }

    /* ── Ticket: borda esquerda semântica mais viva ── */
    .ticket {
      will-change: transform;
    }
    #pending .kanban-col[data-drop-status="aberto"] .ticket:hover,
    #pending .kanban-col[data-drop-status="respondido"] .ticket:hover,
    #pending .kanban-col[data-drop-status="concluido"] .ticket:hover {
      border-left-width: 4px;
    }

    /* ── Links genéricos com underline animado (utilitário opt-in) ── */
    .link-accent {
      color: var(--primary);
      text-decoration: none;
      background-image: linear-gradient(90deg, currentColor, currentColor);
      background-size: 0% 2px;
      background-position: 0 100%;
      background-repeat: no-repeat;
      transition: background-size var(--motion-base) var(--ease-out), color var(--motion-base) var(--ease-out);
      padding-bottom: 2px;
    }
    .link-accent:hover { background-size: 100% 2px; }

    /* ── Scrollbar mais refinada ── */
    * { scrollbar-width: thin; scrollbar-color: rgba(255,194,15,.22) transparent; }

    /* ── Detalhes de densidade em mobile (≤ 480px) ── */
    @media (max-width: 480px) {
      .hero-main, .hero-side, .section, .modal-content { padding: 14px; }
      .hero-main { padding: 14px 14px 16px; }
      .section-kicker { padding: 5px 9px; letter-spacing: .1em; }
      .recados-counter { font-size: 11px; padding: 6px 10px; }
      .toolbar-title h2 { font-size: clamp(17px, 5.2vw, 20px); }
      .toolbar-title p { font-size: 13px; line-height: 1.6; }
      .card { padding: 16px 14px; }
      .card .card-value { font-size: 22px; }
      .mini-stat { padding: 14px; }
      .mini-stat .value { font-size: 22px; }
      .btn { border-radius: 12px; font-size: 12px; padding: 10px 14px; }
      .tabs { gap: 6px; margin: 14px 0 18px; }
      .modal-content { border-radius: 18px; }
    }

    /* ── Hero action bar: não empilha em 4 ações se houver largura ── */
    @media (min-width: 1261px) {
      .hero-actions--bar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    }

    /* ── Table-wrap: scroll horizontal suave + hint visual em mobile ── */
    @media (max-width: 1100px) {
      .table-wrap {
        scroll-snap-type: x proximity;
        scroll-padding-inline: 8px;
      }
      .table-wrap::-webkit-scrollbar-thumb {
        background: rgba(255,194,15,.28);
      }
    }

    /* ── Previne jump layout com chrome de scroll estável em blocos pequenos ── */
    .kanban-list, .rank-list, #eventsList, #periodAuditList {
      scrollbar-gutter: auto;
    }

    /* ── Links sociais mobile: menos animação (LED pulse pode cansar) ── */
    @media (prefers-reduced-motion: reduce) {
      .topbar-social a { animation: none !important; }
      .view { animation: none !important; }
      .stats-grid .card, .insight-grid .insight-card { animation: none !important; }
      .skeleton { animation: none !important; background: rgba(255,255,255,.05); }
    }

    /* ── Light print refinements ── */
    @media print {
      .app-footer .claude-mark,
      .topbar-social { display: none !important; }
      .glass::before { display: none; }
      .empty::before { display: none; }
    }

    /* ── Container dashboard-chart-card: hover sutil para afirmar interatividade ── */
    #dashboard .dashboard-chart-card {
      transition: transform var(--motion-base) var(--ease-out),
                  border-color var(--motion-base) var(--ease-out),
                  box-shadow var(--motion-base) var(--ease-out);
    }
    #dashboard .dashboard-chart-card:hover {
      transform: translateY(-2px);
      border-color: rgba(255,194,15,.18);
      box-shadow: var(--shadow-md);
    }

    /* ── Melhor contraste em textos secundários no dashboard (escaneabilidade) ── */
    #dashboard .dashboard-chart-title {
      color: #e4e4e4;
      font-weight: 800;
      letter-spacing: .035em;
      text-transform: uppercase;
      font-size: 12px;
    }

    /* ── Polimento do chart-empty ── */
    #dashboard .dashboard-chart-empty {
      background:
        radial-gradient(circle at 50% -10%, rgba(255,194,15,.06), transparent 60%),
        rgba(255,255,255,.018);
    }
    #dashboard .dashboard-chart-empty::before {
      content: "— sem dados —";
      display: block;
      font-size: 11px;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: rgba(255,255,255,.42);
      margin-bottom: 6px;
    }

    /* ── Toolbar-actions em tabelas muito densas: inputs com ícone "buscar" (opt-in) ── */
    .toolbar-actions input[type="text"][placeholder*="Buscar"],
    .toolbar-actions input[type="text"][placeholder*="buscar"],
    .toolbar-actions input[id$="Search"] {
      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='%23FFC20F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.3' y1='16.3' x2='21' y2='21'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: 12px center;
      padding-left: 38px;
    }

    /* ── Details/summary (se vier a ser usado) ── */
    details > summary {
      cursor: pointer;
      list-style: none;
    }
    details > summary::-webkit-details-marker { display: none; }

    /* ── Ações destrutivas: reforço visual em hover ── */
    .btn-danger:hover { color: #ffe5e5; }

    /* ── Banner de mês fechado: se .month-status-badge.closed marca closed, adicionar listra no topbar ── */
    .topbar:has(.month-status-badge.closed) {
      box-shadow: inset 0 2px 0 rgba(255,77,79,.45), 0 12px 32px rgba(0,0,0,.28);
    }
    .topbar:has(.month-status-badge.active) {
      box-shadow: inset 0 2px 0 rgba(56,210,122,.35), 0 12px 32px rgba(0,0,0,.28);
    }

    /* ── Settings: pequenos alinhamentos e respiração ── */
    .settings-card-head h2 {
      letter-spacing: .03em;
    }
    .settings-note {
      line-height: 1.6;
    }

    /* ── NPS ranking list: scroll refinado ── */
    .rank-list { scroll-behavior: smooth; }

    /* ── Hard cap para textos longos em cards (evita explosão) ── */
    .card .card-label {
      overflow-wrap: anywhere;
      hyphens: auto;
    }

    /* ── Inputs com sinal claro de erro ── */
    [aria-invalid="true"]:focus {
      box-shadow: 0 0 0 3px rgba(255,77,79,.22), 0 0 0 1px rgba(255,77,79,.62);
    }

    /* ── Ajuste fino de contraste em badges semânticos ── */
    .pill.ok { color: #b8f5d0; }
    .pill.warn { color: #ffda91; }
    .pill.bad { color: #ffd0d1; }

    /* ── Utilitário: esconder visualmente apenas em mobile ── */
    @media (max-width: 640px) {
      .hide-sm { display: none !important; }
    }
    @media (min-width: 641px) {
      .only-sm { display: none !important; }
    }

    /* ── View transitions mais suaves ao trocar abas ── */
    .view {
      animation-timing-function: var(--ease-out);
    }

    /* ── Ação principal da topbar mais fluida em mobile ── */
    @media (max-width: 520px) {
      .topbar-actions { gap: 8px; }
      .topbar-actions .btn { font-size: 12px; padding: 9px 12px; min-height: 42px; }
    }

    /* ── Tooltip caret (triângulo sutil abaixo) ── */
    .tooltip.show::after {
      content: "";
      position: absolute;
      left: 16px;
      bottom: -5px;
      width: 10px;
      height: 10px;
      background: inherit;
      border-right: 1px solid rgba(255,194,15,.24);
      border-bottom: 1px solid rgba(255,194,15,.24);
      transform: rotate(45deg);
      border-radius: 0 0 2px 0;
    }

    /* ── Empty rico: título + body + ação ── */
    .empty strong {
      display: block;
      color: #f2f2f2;
      font-size: 15px;
      font-weight: 800;
      letter-spacing: .01em;
      line-height: 1.35;
      margin-bottom: 2px;
    }
    .empty small {
      display: block;
      color: var(--muted-2);
      font-size: 11px;
      letter-spacing: .12em;
      text-transform: uppercase;
      margin-top: 6px;
    }
    .empty .btn,
    .empty a {
      margin-top: 12px;
    }
    .empty.empty--compact {
      min-height: 88px;
      padding: 16px;
      gap: 4px;
    }
    .empty.empty--compact::before {
      width: 28px;
      height: 28px;
      margin-bottom: 2px;
    }
    .empty.empty--compact strong {
      font-size: 13px;
    }
    td .empty strong { font-size: 14px; }
    .empty em {
      font-style: normal;
      font-weight: 700;
      color: var(--primary);
      padding: 0 2px;
    }

    /* ── Voltar ao topo — botão flutuante discreto em views longas ── */
    .back-to-top {
      position: fixed;
      right: 18px;
      bottom: 84px;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      display: inline-grid;
      place-items: center;
      border: 1px solid rgba(255,194,15,.32);
      background: rgba(17,17,17,.92);
      color: var(--primary);
      font-weight: 900;
      font-size: 18px;
      cursor: pointer;
      z-index: var(--z-sticky);
      opacity: 0;
      pointer-events: none;
      transform: translateY(10px) scale(.92);
      transition: opacity var(--motion-base) var(--ease-out),
                  transform var(--motion-base) var(--ease-out),
                  border-color var(--motion-base) var(--ease-out),
                  background var(--motion-base) var(--ease-out);
      box-shadow: var(--shadow-md), 0 0 0 1px rgba(255,194,15,.08);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }
    .back-to-top.show {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0) scale(1);
    }
    .back-to-top:hover {
      background: rgba(255,194,15,.14);
      border-color: rgba(255,194,15,.52);
      transform: translateY(-2px);
    }
    .back-to-top:focus-visible {
      box-shadow: var(--shadow-focus), var(--shadow-md);
    }
    @media (max-width: 640px) {
      .back-to-top { right: 12px; bottom: 72px; width: 40px; height: 40px; font-size: 16px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .back-to-top { transition: opacity .1s linear !important; transform: none !important; }
    }
    /* Esconde o botão quando um modal está aberto para não competir com o diálogo */
    body:has(.modal.show) .back-to-top { opacity: 0 !important; pointer-events: none !important; }

    /* ── Field helper: mensagens inline de erro (opt-in) ── */
    .field-error {
      display: block;
      color: #ffb1b2;
      font-size: 11px;
      font-weight: 700;
      margin-top: 6px;
      letter-spacing: .02em;
      line-height: 1.4;
    }
    .field-error::before {
      content: "⚠ ";
      margin-right: 4px;
    }

    /* ── Group-label para blocos de campos relacionados no modal ── */
    .field-group {
      display: grid;
      gap: 12px;
      padding: 14px 16px;
      border-radius: var(--radius-lg);
      border: 1px solid rgba(255,255,255,.06);
      background: rgba(255,255,255,.018);
    }
    .field-group-title {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--primary);
      margin-bottom: 2px;
    }
    .field-group-title::before {
      content: "";
      width: 14px;
      height: 2px;
      border-radius: 2px;
      background: currentColor;
      display: inline-block;
    }

    /* ── Focus ring em containers colapsáveis (details/kanban) ── */
    .kanban-col:focus-within {
      border-color: rgba(255,194,15,.26);
    }

    /* ── Contraste reforçado (a11y) ── */
    @media (prefers-contrast: more) {
      .btn-ghost { border-color: rgba(255,255,255,.35); }
      .pill { border-color: rgba(255,255,255,.32); }
      input, select, textarea { border-color: rgba(255,255,255,.28); }
      .summary-item, .card, .mini-stat, .ticket, .insight-card { border-color: rgba(255,255,255,.22); }
      th { color: #ffffff; }
    }

    /* ── Fine adjustments em cards que exibem números grandes ── */
    .card-value, .pending-status-value, .score-number {
      font-feature-settings: "tnum" 1, "ss01" 1;
    }

    /* ── Highlight de resultado em tabela após edit inline ── */
    @keyframes wpm-row-saved {
      0% { background: rgba(56,210,122,.18); }
      100% { background: transparent; }
    }
    tbody tr.just-saved td {
      animation: wpm-row-saved 1.2s var(--ease-out) both;
    }

    /* ── Ajuste de respiro em inline-actions ── */
    .inline-actions { align-items: center; }

    /* ── Placeholder mais gentil em dark ── */
    input::placeholder, textarea::placeholder { opacity: .72; }

    /* ── Ajuste: botões primários em hover sem "double-shadow" em mobile ── */
    @media (max-width: 760px) {
      .btn-primary { box-shadow: 0 8px 16px rgba(255,194,15,.18); }
      .btn-primary:hover { box-shadow: 0 10px 20px rgba(255,194,15,.22); }
    }

    /* ── Etapa 9: tabelas operacionais viram cards no mobile ── */
    @media (max-width: 760px) {
      #students .table-wrap,
      #pending .table-wrap {
        overflow: visible;
        background: transparent;
        box-shadow: none;
        padding-right: 0;
      }

      #students .student-table,
      #pending .pending-table {
        display: block;
        min-width: 0 !important;
        width: 100% !important;
        table-layout: auto;
        border-spacing: 0;
      }

      #students .student-table thead,
      #pending .pending-table thead {
        display: none;
      }

      #students .student-table tbody,
      #pending .pending-table tbody {
        display: grid;
        gap: 12px;
        width: 100%;
      }

      #students .student-table tr,
      #pending .pending-table tr {
        display: grid;
        gap: 10px;
        width: 100%;
        padding: 14px;
        border: 1px solid rgba(255,255,255,.08);
        border-radius: var(--radius-md);
        background:
          radial-gradient(circle at top left, rgba(255,194,15,.07), transparent 42%),
          rgba(255,255,255,.026);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
      }

      #students .student-table td,
      #pending .pending-table td {
        display: grid;
        grid-template-columns: minmax(92px, .42fr) minmax(0, 1fr);
        align-items: center;
        gap: 10px;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 0 !important;
        border-bottom: 0;
        background: transparent !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
      }

      #students .student-table td::before,
      #pending .pending-table td::before {
        color: var(--muted-2);
        content: "";
        font-size: 10px;
        font-weight: 900;
        letter-spacing: .12em;
        line-height: 1.25;
        text-transform: uppercase;
      }

      #students .student-table td[colspan],
      #pending .pending-table td[colspan] {
        display: block;
      }

      #students .student-table td[colspan]::before,
      #pending .pending-table td[colspan]::before {
        content: none;
      }

      #students .student-table td:nth-child(1)::before { content: "Nome"; }
      #students .student-table td:nth-child(2)::before { content: "Matrícula"; }
      #students .student-table td:nth-child(3)::before { content: "Última visita"; }
      #students .student-table td:nth-child(4)::before { content: "Hora visita"; }
      #students .student-table td:nth-child(5)::before { content: "Início"; }
      #students .student-table td:nth-child(6)::before { content: "Aviso NPS"; }
      #students .student-table td:nth-child(7)::before { content: "Atendimento"; }
      #students .student-table td:nth-child(8)::before { content: "Feedback"; }
      #students .student-table td:nth-child(9)::before { content: "Addon"; }
      #students .student-table td:nth-child(10)::before { content: "Observações"; }
      #students .student-table td:nth-child(11)::before { content: "Ações"; }

      #pending .pending-table td:nth-child(1)::before { content: "Nome"; }
      #pending .pending-table td:nth-child(2)::before { content: "Matrícula"; }
      #pending .pending-table td:nth-child(3)::before { content: "Pendência"; }
      #pending .pending-table td:nth-child(4)::before { content: "Solicitação"; }
      #pending .pending-table td:nth-child(5)::before { content: "Hostess"; }
      #pending .pending-table td:nth-child(6)::before { content: "Resposta"; }
      #pending .pending-table td:nth-child(7)::before { content: "Status"; }
      #pending .pending-table td:nth-child(8)::before { content: "Ações"; }

      #students .student-table td.right,
      #pending .pending-table td.right {
        display: grid;
        grid-template-columns: minmax(92px, .42fr) minmax(0, 1fr);
        text-align: left;
      }

      #students .student-table td.right > .btn,
      #pending .pending-table td.right > .btn {
        width: 100%;
      }

      #students .student-table td.right {
        grid-template-columns: 1fr;
      }

      #students .student-table td.right::before {
        grid-column: 1 / -1;
      }

      #students .student-table td.right .btn + .btn,
      #pending .pending-table td.right .btn + .btn {
        margin-left: 0;
        margin-top: 8px;
      }

      #students .student-table .table-input {
        min-width: 0 !important;
        width: 100%;
        font-size: 16px;
      }

      #students .student-table .cell-ellipsis,
      #students .student-table .cell-text,
      #pending .pending-table .cell-ellipsis,
      #pending .pending-table .cell-text {
        max-width: none;
        white-space: normal;
        overflow-wrap: anywhere;
      }

      #scale .schedule-matrix,
      #events .event-consolidated-card:has(#eventsTableBody) {
        display: none;
      }
    }

    /* ── UI audit corrective layer: layout density + responsive containment ── */
    html,
    body {
      max-width: 100%;
      overflow-x: hidden;
    }
    .app {
      overflow-x: clip;
    }
    .app-main {
      grid-template-columns: minmax(0, 1fr);
      min-width: 0;
      width: 100%;
    }
    .tabs,
    .view {
      min-width: 0;
      max-width: 100%;
      width: 100%;
    }
    #settings .settings-shell {
      grid-template-columns: 1fr;
      gap: 16px;
    }
    #settings .settings-main-column,
    #settings .settings-side-column {
      grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
      gap: 16px;
    }
    #settings .settings-main-column > .settings-card:first-child {
      grid-column: 1 / -1;
    }
    #settings .settings-card {
      border-radius: 16px;
    }
    #settings .settings-card-head {
      gap: 8px;
      padding-bottom: 12px;
    }
    #settings .settings-card-head h2 {
      font-size: clamp(19px, 1.45vw, 24px);
      line-height: 1.18;
    }
    #settings .settings-card-head p {
      font-size: 13px;
      line-height: 1.48;
    }
    #settings .settings-card-body {
      gap: 14px;
      padding-top: 14px;
    }
    #settings .settings-card-actions {
      gap: 10px;
      padding-top: 12px;
      margin-top: 12px;
    }
    #settings .settings-card-actions .btn,
    #settings .settings-card-actions .import-label {
      min-height: 42px;
      padding: 10px 14px;
      flex-basis: 180px;
    }
    #settings .settings-card-foot {
      padding-top: 12px;
      margin-top: 12px;
    }
    #settings .settings-form-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }
    #settings .settings-field-card--full {
      grid-column: auto;
    }
    #settings .settings-field-card {
      padding: 14px;
      border-radius: 14px;
    }
    #settings textarea {
      min-height: 128px;
      max-height: 220px;
    }
    #settings .summary-item,
    #settings .summary-item--col1 {
      padding: 14px;
      border-radius: 14px;
      gap: 10px;
    }
    #settings .settings-help-step {
      padding: 14px;
    }
    #settings .settings-about-grid {
      grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    }
    #settings #periodAuditList {
      max-height: min(52vh, 560px);
    }
    #settings .settings-panel-nav {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 0 0 16px;
      padding: 8px;
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 16px;
      background: rgba(255,255,255,.025);
    }
    #settings .settings-panel-tab {
      appearance: none;
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 999px;
      background: rgba(255,255,255,.035);
      color: #eeeeee;
      cursor: pointer;
      font: 800 12px/1 Montserrat, system-ui, sans-serif;
      min-height: 38px;
      padding: 10px 14px;
      transition: background var(--motion-base) var(--ease-out),
                  border-color var(--motion-base) var(--ease-out),
                  color var(--motion-base) var(--ease-out),
                  transform var(--motion-base) var(--ease-out);
    }
    #settings .settings-panel-tab:hover {
      transform: translateY(-1px);
      border-color: rgba(255,194,15,.24);
      background: rgba(255,194,15,.08);
    }
    #settings .settings-panel-tab.active {
      border-color: rgba(255,194,15,.42);
      background: var(--primary);
      color: #111111;
      box-shadow: 0 10px 22px rgba(255,194,15,.18);
    }
    #settings .settings-card[hidden] {
      display: none !important;
    }
    #settings .settings-main-column:not(:has(.settings-card:not([hidden]))),
    #settings .settings-side-column:not(:has(.settings-card:not([hidden]))) {
      display: none !important;
    }

    #students .toolbar {
      align-items: end;
      gap: 16px;
    }
    #students .toolbar-title h2 {
      font-size: clamp(21px, 1.55vw, 28px);
      letter-spacing: 0;
      line-height: 1.12;
    }
    #students .toolbar-title p {
      max-width: 68ch;
      white-space: normal;
    }
    #students .students-toolbar-actions {
      grid-template-columns: minmax(220px, 1fr) minmax(152px, .55fr) minmax(152px, .55fr) minmax(118px, auto);
      gap: 10px;
      max-width: 100%;
    }
    #students .students-toolbar-actions > input,
    #students .students-toolbar-actions > select,
    #students .students-toolbar-actions > .btn {
      width: 100%;
      min-width: 0;
      margin: 0;
    }
    #students .students-summary-bar {
      grid-template-columns: minmax(112px, .45fr) minmax(0, 1.35fr) minmax(180px, .7fr) minmax(112px, .45fr);
      gap: 10px;
      margin: 12px 0;
      padding: 8px;
      border-radius: 16px;
    }
    #students .students-summary-item,
    #students .students-summary-item--total,
    #students .students-summary-item--attendants,
    #students .students-summary-item--feedback,
    #students .students-summary-item--addons {
      grid-column: auto;
      min-height: 62px;
      padding: 10px 12px;
      border-radius: 14px;
    }
    #students .students-summary-label {
      font-size: 9px;
      letter-spacing: .1em;
    }
    #students .students-summary-value {
      letter-spacing: 0;
      line-height: 1.12;
    }
    #students .students-summary-item--total .students-summary-value,
    #students .students-summary-item--addons .students-summary-value {
      font-size: clamp(22px, 1.75vw, 28px);
    }
    #students .students-summary-item--attendants .students-summary-value {
      display: -webkit-box;
      font-size: 13px;
      line-height: 1.35;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      overflow: hidden;
    }
    #students .students-summary-item--feedback .students-summary-value {
      font-size: 16px;
      letter-spacing: 0;
    }
    #students .students-summary-meta {
      font-size: 10px;
      line-height: 1.35;
    }
    #students .table-wrap {
      max-height: min(58vh, 620px);
      overflow: auto;
      scrollbar-gutter: stable;
    }
    #students .student-table {
      min-width: 1296px;
      table-layout: fixed;
    }
    #students .student-table th,
    #students .student-table td {
      padding: 10px 8px;
      font-size: 12.5px;
      line-height: 1.35;
    }
    #students .student-table thead th {
      position: sticky;
      top: 0;
      z-index: 2;
      font-size: 10px;
      letter-spacing: .04em;
    }
    #students .student-table th:nth-child(1),
    #students .student-table td:nth-child(1) { width: 138px; }
    #students .student-table th:nth-child(2),
    #students .student-table td:nth-child(2) { width: 88px; }
    #students .student-table th:nth-child(3),
    #students .student-table td:nth-child(3) { width: 132px; }
    #students .student-table th:nth-child(4),
    #students .student-table td:nth-child(4) { width: 104px; }
    #students .student-table th:nth-child(5),
    #students .student-table td:nth-child(5) { width: 112px; }
    #students .student-table th:nth-child(6),
    #students .student-table td:nth-child(6) { width: 92px; }
    #students .student-table th:nth-child(7),
    #students .student-table td:nth-child(7) { width: 122px; }
    #students .student-table th:nth-child(8),
    #students .student-table td:nth-child(8) { width: 120px; }
    #students .student-table th:nth-child(9),
    #students .student-table td:nth-child(9) { width: 96px; }
    #students .student-table th:nth-child(10),
    #students .student-table td:nth-child(10) { width: 168px; }
    #students .student-table th:nth-child(11),
    #students .student-table td:nth-child(11) { width: 124px; }
    #students .student-table .table-input {
      min-height: 34px;
      padding: 7px 9px;
      font-size: 12px;
    }
    #students .student-table .table-input[type="date"],
    #students .student-table .table-input[type="time"] {
      min-width: 0;
      padding-right: 8px;
    }
    #students .student-table td:nth-child(10) .cell-text.multiline {
      -webkit-line-clamp: 2;
      line-clamp: 2;
    }
    #students .student-table td.right {
      white-space: nowrap;
    }
    #students .student-table td.right .btn {
      min-height: 32px;
      margin-left: 4px;
      padding: 7px 9px;
    }

    #pending > .grid-3 {
      grid-template-columns: 1fr;
      gap: 16px;
    }
    #pending .pending-status-strip {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    #pending .pending-status-card,
    #pending .pending-status-card--total {
      grid-column: auto;
      grid-template-columns: 1fr;
      justify-items: center;
      min-height: 74px;
      padding: 13px 16px;
      text-align: center;
    }
    #pending .pending-status-card--total .pending-status-value {
      justify-self: center;
    }
    #pending .toolbar {
      align-items: end;
      gap: 16px;
    }
    #pending .toolbar-actions {
      display: grid;
      grid-template-columns: minmax(260px, 1fr) auto auto;
      gap: 10px;
      align-items: center;
      min-width: min(520px, 100%);
    }
    #pending .toolbar-actions > input,
    #pending .toolbar-actions > .btn {
      width: 100%;
      margin: 0;
    }
    #pending > .grid-3 > .section {
      min-width: 0;
    }
    #pending .kanban-scroll {
      max-height: none;
      overflow: visible;
      padding-right: 0;
    }
    #pending #pendingKanban.kanban {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      min-width: 0;
    }
    #pending .kanban-col {
      min-height: 0;
    }
    #pending .kanban-col .col-head {
      align-items: center;
    }
    #pending .kanban-count {
      display: inline-grid;
      min-width: 30px;
      height: 28px;
      place-items: center;
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 999px;
      background: rgba(255,255,255,.045);
      color: var(--primary);
      font-size: 12px;
      font-weight: 900;
      line-height: 1;
    }
    #pending .kanban-list {
      max-height: min(52vh, 520px);
    }

    @media (min-width: 1500px) {
      #pending > .grid-3 {
        grid-template-columns: minmax(620px, .95fr) minmax(620px, 1.05fr);
        gap: 18px;
      }
      #pending .pending-table {
        min-width: 960px;
      }
      #pending .kanban-list {
        max-height: min(56vh, 620px);
      }
    }

    #addons .addon-grid {
      grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
      gap: 12px;
      align-items: start;
    }
    #addons .toolbar {
      align-items: end;
      gap: 14px;
    }
    #addons .toolbar-title h2 {
      font-size: clamp(22px, 1.55vw, 28px);
      letter-spacing: 0;
      line-height: 1.12;
    }
    #addons .toolbar-title p {
      max-width: 64ch;
      white-space: normal;
    }
    #addons .toolbar-actions {
      display: grid;
      grid-template-columns: minmax(132px, 1fr) auto;
      gap: 10px;
      align-items: center;
      min-width: min(270px, 100%);
    }
    #addons .toolbar-actions > select,
    #addons .toolbar-actions > .btn {
      width: 100%;
      min-width: 0;
      margin: 0;
    }
    #addons .person-block {
      height: auto;
      min-height: 0;
      max-height: min(70vh, 680px);
      overflow-x: hidden;
      overflow-y: auto;
      padding: 14px;
      scrollbar-gutter: stable;
    }
    #addons .person-head {
      position: sticky;
      top: -14px;
      z-index: 2;
      align-items: start;
      gap: 8px;
      margin: 0 0 10px;
      padding: 0 0 10px;
      border-bottom: 1px solid rgba(255,255,255,.08);
      background: linear-gradient(180deg, rgba(32,32,32,.98), rgba(32,32,32,.92));
    }
    #addons .person-head h3 {
      display: -webkit-box;
      flex: 1 1 220px;
      max-width: 100%;
      font-size: 17px;
      line-height: 1.24;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      overflow: hidden;
      overflow-wrap: anywhere;
    }
    #addons .person-head .pill {
      min-height: 28px;
      padding: 6px 10px;
      line-height: 1.15;
    }
    #addons .chart-box--spaced {
      margin-bottom: 10px;
      padding: 12px;
      border-radius: 14px;
    }
    #addons .chart-box--spaced .toolbar--compact {
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
    }
    #addons .chart-box--spaced .toolbar--compact strong {
      display: -webkit-box;
      max-width: 100%;
      font-size: 14px;
      line-height: 1.28;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      overflow: hidden;
      overflow-wrap: anywhere;
    }
    #addons .chart-box--spaced .toolbar--compact .pill {
      min-height: 28px;
      padding: 6px 10px;
    }
    #addons .day-grid {
      grid-template-columns: repeat(auto-fit, minmax(46px, 1fr));
      gap: 6px;
      max-height: min(32vh, 236px);
      overflow-y: auto;
      padding-right: 3px;
    }
    #addons .day-cell {
      padding: 6px;
      border-radius: 10px;
    }
    #addons .day-cell .day {
      margin-bottom: 4px;
      font-size: 9px;
      line-height: 1.2;
      letter-spacing: .04em;
    }
    #addons .day-cell input {
      min-height: 34px;
      padding: 7px 4px;
      border-radius: 8px;
      font-size: 13px;
    }
    #addons .addons-ranking-card {
      margin-top: 12px;
      padding: 14px;
      border-radius: 18px;
    }
    #addons .addons-ranking-head {
      align-items: end;
      margin-bottom: 10px;
    }
    #addons .addons-ranking-list {
      grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
      gap: 10px;
    }
    #addons .addons-ranking-item {
      min-height: 62px;
      padding: 10px 12px;
      gap: 10px;
    }
    #addons .addons-ranking-name {
      display: -webkit-box;
      white-space: normal;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-clamp: 2;
    }
    #addons .addons-ranking-total {
      padding: 7px 9px;
      font-size: 12px;
    }

    #scale .toolbar {
      align-items: end;
      gap: 14px;
    }
    #scale .toolbar-title h2 {
      font-size: clamp(22px, 1.55vw, 28px);
      letter-spacing: 0;
      line-height: 1.12;
    }
    #scale .toolbar-title p {
      max-width: 68ch;
      white-space: normal;
    }
    #scale .toolbar-actions {
      display: grid;
      grid-template-columns: minmax(260px, 1fr) auto auto auto;
      gap: 10px;
      align-items: center;
      max-width: 100%;
    }
    #scale .toolbar-actions > input,
    #scale .toolbar-actions > .btn {
      width: 100%;
      min-width: 0;
      margin: 0;
    }
    #scale .schedule-note-box {
      margin-bottom: 12px;
      padding: 13px 15px;
      border-radius: 14px;
      line-height: 1.55;
    }
    #scale .scale-legend {
      gap: 8px;
      margin-top: 10px;
    }
    #scale .scale-legend-item {
      min-height: 32px;
      padding: 7px 10px;
      font-size: 11px;
    }
    #scale .schedule-topbar {
      gap: 12px;
      margin-bottom: 12px;
    }
    #scale .schedule-kpis {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
    }
    #scale .schedule-kpi {
      min-height: 96px;
      padding: 13px 15px;
      border-radius: 14px;
    }
    #scale .schedule-kpi-label {
      font-size: 9px;
      letter-spacing: .1em;
      margin-bottom: 6px;
    }
    #scale .schedule-kpi-value {
      font-size: 25px;
      margin-bottom: 6px;
    }
    #scale .schedule-kpi-foot {
      font-size: 11px;
      line-height: 1.45;
    }
    #scale .scale-ops-summary {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
      margin-bottom: 12px;
      padding: 8px;
      border-radius: 14px;
    }
    #scale .scale-ops-sep {
      display: none;
    }
    #scale .scale-ops-item {
      display: grid;
      align-content: center;
      gap: 4px;
      min-height: 58px;
      padding: 9px 10px;
      border: 1px solid rgba(255,255,255,.07);
      border-radius: 12px;
      background: rgba(255,255,255,.028);
    }
    #scale .scale-ops-item > span:first-child {
      color: rgba(255,255,255,.62);
      font-size: 9px;
      font-weight: 900;
      letter-spacing: .1em;
      line-height: 1.25;
      text-transform: uppercase;
    }
    #scale .scale-ops-item strong {
      display: block;
      min-width: 0;
      color: var(--primary);
      font-size: 13px;
      line-height: 1.25;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    #scale .scale-ops-item span:last-child {
      color: #d8d8d8;
      font-size: 10px;
      line-height: 1.35;
    }
    #scale .scale-board-wrap {
      gap: 12px;
      margin-bottom: 14px;
    }
    #scale .scale-board {
      gap: 10px;
    }
    #scale .scale-board-row {
      grid-template-columns: minmax(110px, .58fr) minmax(248px, 1.24fr) minmax(198px, .88fr) minmax(148px, .68fr);
      border-radius: 16px;
      min-height: 0;
    }
    #scale .scale-board-day,
    #scale .scale-board-prof,
    #scale .scale-board-recep,
    #scale .scale-board-side {
      padding: 11px 12px;
    }
    #scale .scale-board-day {
      gap: 5px;
    }
    #scale .scale-board-day .date {
      font-size: 24px;
    }
    #scale .scale-board-day .month {
      font-size: 10px;
      letter-spacing: .1em;
    }
    #scale .scale-board-day .weekday {
      padding: 6px 8px;
      font-size: 9px;
      letter-spacing: .1em;
    }
    #scale .scale-board-prof,
    #scale .scale-board-recep {
      gap: 8px;
    }
    #scale .scale-board-head {
      font-size: 9px;
      letter-spacing: .11em;
    }
    #scale .scale-board-shift {
      grid-template-columns: minmax(82px, .34fr) minmax(0, 1fr);
      gap: 8px;
      min-height: 46px;
      padding: 8px 10px;
      border-radius: 12px;
    }
    #scale .scale-board-time,
    #scale .scale-board-name {
      font-size: 14px;
      line-height: 1.18;
    }
    #scale .scale-board-swap,
    #scale .scale-board-note {
      font-size: 11px;
      line-height: 1.35;
    }
    #scale .scale-board-note {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 4;
      line-clamp: 4;
      overflow: hidden;
    }
    #scale .scale-board-note--spaced {
      margin-top: 9px;
    }
    #scale .scale-tone-pill {
      padding: 6px 8px;
      font-size: 9px;
      letter-spacing: .1em;
    }
    #scale .scale-board-actions {
      gap: 6px;
    }
    #scale .scale-board-actions .btn {
      min-height: 32px;
      padding: 7px 9px;
    }
    #scale .schedule-matrix {
      max-height: min(46vh, 520px);
      overflow: auto;
      scrollbar-gutter: stable;
    }
    #scale .schedule-matrix thead th {
      position: sticky;
      top: 0;
      z-index: 2;
    }
    #scale .schedule-matrix table {
      min-width: 900px;
    }
    #scale .schedule-matrix th,
    #scale .schedule-matrix td {
      padding: 10px 8px;
      font-size: 12.5px;
    }

    #events .event-calendar-grid {
      grid-template-columns: repeat(7, minmax(76px, 1fr));
      min-width: 560px;
      gap: 8px;
    }
    #events .event-calendar-day {
      min-height: 98px;
      border-radius: 14px;
    }
    .view {
      scroll-margin-top: 190px;
    }

    @media (max-width: 1180px) {
      #settings .settings-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      #students .students-toolbar-actions {
        grid-template-columns: minmax(0, 1fr) minmax(150px, .55fr);
      }
      #students .students-toolbar-actions > .btn {
        grid-column: auto;
      }
      #students .students-summary-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      #addons .toolbar-actions {
        grid-template-columns: minmax(120px, 1fr) auto;
      }
      #addons .addon-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr));
      }
      #pending #pendingKanban.kanban {
        grid-template-columns: 1fr;
      }
      #pending .kanban-list {
        max-height: 320px;
      }
      #scale .toolbar-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
      }
      #scale .toolbar-actions > input {
        grid-column: 1 / -1;
      }
      #scale .schedule-kpis,
      #scale .scale-ops-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 760px) {
      .topbar {
        gap: 10px;
        padding: 12px;
      }
      .topbar-left,
      .topbar-right,
      .period-controls,
      .topbar-actions {
        width: 100%;
      }
      .period-controls {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(86px, auto);
      }
      .period-label,
      .month-status-badge {
        grid-column: 1 / -1;
      }
      .period-select,
      .period-year {
        min-width: 0;
        width: 100%;
        font-size: 16px;
      }
      .topbar-social {
        order: 1;
      }
      .topbar-actions {
        order: 2;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      .topbar-actions .btn {
        width: 100%;
        min-width: 0;
        padding-inline: 10px;
      }
      #pending .pending-status-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-bottom: 10px;
      }
      #pending .pending-status-card,
      #pending .pending-status-card--total {
        min-height: 62px;
        padding: 10px 12px;
        border-radius: 14px;
      }
      #pending .pending-status-label {
        font-size: 9px;
        letter-spacing: .11em;
      }
      #pending .pending-status-value {
        font-size: 27px;
      }
      #pending .toolbar {
        gap: 12px;
      }
      #pending .toolbar-title h2 {
        font-size: 22px;
      }
      #pending .toolbar-title p {
        max-width: 100%;
        white-space: normal;
        overflow: visible;
        overflow-wrap: anywhere;
        text-overflow: clip;
      }
      #pending .toolbar-actions {
        grid-template-columns: 1fr;
        min-width: 0;
        width: 100%;
      }
      #pending .table-wrap {
        max-height: min(52vh, 440px);
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 2px;
      }
      #pending .pending-table tbody {
        gap: 10px;
      }
      #pending .pending-table tr {
        padding: 12px;
        border-radius: 14px;
      }
      #pending .pending-table td {
        grid-template-columns: minmax(82px, .36fr) minmax(0, 1fr);
        gap: 8px;
      }
      #pending .pending-table td.right {
        grid-template-columns: 1fr;
      }
      #pending .pending-table td.right::before {
        grid-column: 1 / -1;
      }
      #pending .pending-table td.right > .btn {
        min-height: 38px;
      }
      #pending .kanban-col .col-head {
        min-height: 30px;
      }
      #pending .kanban-count {
        min-width: 28px;
        height: 26px;
      }
      .tabs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        overflow: visible;
        padding: 0 0 8px;
      }
      .tab-btn {
        justify-content: center;
        min-width: 0;
        width: 100%;
        font-size: 12px;
        min-height: 40px;
        padding: 9px 12px;
      }
      #settings {
        gap: 14px;
      }
      #settings .settings-health-bar {
        gap: 8px 12px;
        padding: 10px 12px;
      }
      #settings .settings-panel-nav {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        overflow: visible;
        padding: 7px;
      }
      #settings .settings-panel-tab {
        width: 100%;
        min-height: 38px;
        padding: 9px 10px;
      }
      #settings .settings-main-column,
      #settings .settings-side-column,
      #settings .settings-form-grid {
        grid-template-columns: 1fr;
        gap: 12px;
      }
      #settings .settings-main-column,
      #settings .settings-side-column {
        display: flex;
        align-items: stretch;
        gap: 12px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 2px 2px 10px;
        scroll-snap-type: x mandatory;
        scrollbar-gutter: stable;
      }
      #settings .settings-main-column > .settings-card,
      #settings .settings-side-column > .settings-card {
        flex: 0 0 min(344px, 91vw);
        width: min(344px, 91vw);
        scroll-snap-align: start;
      }
      #settings .settings-main-column > .settings-card:first-child {
        flex-basis: min(360px, 92vw);
        width: min(360px, 92vw);
      }
      #settings .settings-card {
        border-radius: 14px;
      }
      #settings .settings-card-head h2 {
        font-size: 21px;
      }
      #settings .settings-card-actions {
        flex-direction: column;
      }
      #settings textarea {
        min-height: 132px;
      }
      #settings #periodAuditList,
      #settings .rank-list,
      #settings .summary-list {
        max-height: min(52vh, 430px);
        overflow-y: auto;
        padding-right: 4px;
      }
      #settings .settings-card--primary .settings-card-body,
      #settings .settings-maintenance-card .settings-card-body {
        max-height: min(58vh, 520px);
        overflow-y: auto;
        padding-right: 4px;
      }
      #students .toolbar {
        align-items: stretch;
        gap: 12px;
      }
      #students .toolbar-title h2 {
        font-size: 22px;
      }
      #students .students-toolbar-actions,
      #students .students-summary-bar {
        grid-template-columns: 1fr;
      }
      #students .students-summary-item--attendants .students-summary-value {
        -webkit-line-clamp: 3;
        line-clamp: 3;
      }
      #students .table-wrap {
        max-height: none;
        overflow: visible;
      }
      #addons .toolbar {
        align-items: stretch;
        gap: 12px;
      }
      #addons .toolbar-title h2 {
        font-size: 22px;
      }
      #addons .toolbar-actions {
        grid-template-columns: 1fr;
        width: 100%;
      }
      #pending .kanban-scroll {
        max-height: none;
      }
      #pending .kanban-col {
        max-height: none;
        overflow: visible;
      }
      #pending .kanban-list {
        max-height: min(46vh, 390px);
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 4px;
      }
      #addons .day-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        max-height: 232px;
      }
      #addons .addon-grid {
        display: flex;
        align-items: stretch;
        gap: 12px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 2px 2px 10px;
        scroll-snap-type: x mandatory;
      }
      #addons .person-block {
        flex: 0 0 min(330px, 88vw);
        width: min(330px, 88vw);
        max-height: min(72vh, 560px);
        padding: 12px;
        scroll-snap-align: start;
      }
      #addons .person-head {
        top: -12px;
      }
      #addons .addons-ranking-list {
        grid-template-columns: 1fr;
      }
      #scale .toolbar {
        align-items: stretch;
        gap: 12px;
      }
      #scale .toolbar-title h2 {
        font-size: 22px;
      }
      #scale .toolbar-actions {
        grid-template-columns: 1fr;
        width: 100%;
      }
      #scale .toolbar-actions > input {
        grid-column: auto;
      }
      #scale .schedule-note-box {
        max-height: 220px;
        overflow-y: auto;
        padding: 12px;
      }
      #scale .scale-legend {
        display: grid;
        grid-template-columns: 1fr;
      }
      #scale .schedule-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }
      #scale .schedule-kpi {
        min-height: 84px;
        padding: 10px 12px;
      }
      #scale .schedule-kpi-value {
        font-size: 23px;
      }
      #scale .scale-ops-summary {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 7px;
      }
      #scale .scale-ops-item {
        min-height: 0;
        padding: 9px 10px;
      }
      #scale .scale-board-row {
        grid-template-columns: 1fr;
        max-height: min(74vh, 520px);
        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-gutter: stable;
      }
      #scale .scale-board-day {
        grid-template-columns: auto minmax(0, 1fr);
        align-content: center;
        align-items: center;
        gap: 4px 8px;
      }
      #scale .scale-board-day .date {
        grid-row: 1 / 3;
        font-size: 24px;
      }
      #scale .scale-board-day .month {
        font-size: 10px;
      }
      #scale .scale-board-day .weekday {
        width: fit-content;
        max-width: 100%;
        padding: 5px 7px;
        font-size: 9px;
      }
      #scale .scale-board-prof,
      #scale .scale-board-recep,
      #scale .scale-board-side {
        gap: 8px;
      }
      #scale .scale-board-shift {
        grid-template-columns: minmax(74px, .34fr) minmax(0, 1fr);
        min-height: 40px;
        padding: 7px 9px;
      }
      #scale .scale-board-time,
      #scale .scale-board-name {
        font-size: 13px;
      }
      #scale .scale-board-swap,
      #scale .scale-board-note {
        font-size: 10.5px;
      }
      #scale .scale-board-side {
        justify-content: start;
      }
      #scale .scale-board-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      #scale .scale-board-actions .btn {
        justify-content: center;
        width: 100%;
      }
      #events .event-calendar-scroll {
        overflow-x: auto;
        overflow-y: hidden;
      }
      #events .event-calendar-grid {
        grid-template-columns: repeat(7, minmax(76px, 1fr));
        min-width: 560px;
      }
      #events .event-weekday-head {
        display: block;
      }
      #events .event-calendar-day {
        min-height: 96px;
      }
      #events .event-stack,
      #events .event-overview-grid,
      #scale .scale-board-wrap {
        gap: 12px;
      }
      #events .event-list,
      #events #eventsUpcoming,
      #scale .scale-board {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 2px 2px 10px;
        scroll-snap-type: x mandatory;
      }
      #events .event-card,
      #scale .scale-board-row {
        flex: 0 0 min(330px, 88vw);
        width: min(330px, 88vw);
        scroll-snap-align: start;
      }
      #events .event-card {
        min-height: 0;
      }
      #events .events-quick-summary,
      #events .event-overview-grid .schedule-kpis {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      #dashboard .dashboard-visual-grid,
      #dashboard #dashboardInsights,
      #dashboard #dashboardCards,
      #dashboard > .grid-2,
      #dashboard .dashboard-balance-row,
      #nps .nps-grid {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 2px 2px 10px;
        scroll-snap-type: x mandatory;
      }
      #dashboard .dashboard-chart-card,
      #dashboard #dashboardInsights > *,
      #dashboard #dashboardCards > .card,
      #dashboard > .grid-2 > .section,
      #dashboard .dashboard-balance-row > .section,
      #nps .nps-grid > .section {
        flex: 0 0 min(336px, 88vw);
        width: min(336px, 88vw);
        scroll-snap-align: start;
      }
      #dashboard #dashboardCards > .card {
        min-height: 132px;
      }
      #dashboard #dashboardCards > .card .card-value {
        font-size: 26px;
      }
      #dashboard .dashboard-chart-shell {
        min-height: 190px;
      }
      #dashboard .dashboard-chart-shell canvas {
        height: 190px !important;
      }
      #dashboard .dashboard-section {
        max-height: min(78vh, 620px);
        overflow-y: auto;
      }
      #dashboard .recados-section {
        max-height: none;
      }
      #dashboard .recados-form {
        gap: 10px;
      }
      #nps .nps-grid > .section {
        max-height: min(80vh, 640px);
        overflow-y: auto;
      }
    }

    @media (max-width: 420px) {
      .app {
        padding: 8px;
      }
      .brand-title {
        white-space: normal;
      }
      .topbar-actions {
        grid-template-columns: 1fr;
      }
      .tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      #pending .pending-status-strip {
        grid-template-columns: 1fr 1fr;
      }
      #pending .pending-table td {
        grid-template-columns: 1fr;
      }
      #pending .pending-table td::before {
        margin-bottom: -2px;
      }
      #settings .settings-panel-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      #settings .settings-field-card,
      #settings .summary-item,
      #settings .summary-item--col1 {
        padding: 12px;
      }
      #settings .settings-main-column > .settings-card,
      #settings .settings-side-column > .settings-card,
      #settings .settings-main-column > .settings-card:first-child {
        flex-basis: min(328px, 90vw);
        width: min(328px, 90vw);
      }
      #addons .day-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    /* ════════════════════════════════════════════════════════════════
       FIM — WPM DESIGN SYSTEM POLISH LAYER v1
       ════════════════════════════════════════════════════════════════ */