/* ========================================
       🎨 ORGANIC MODERN — FLUID MATERIAL DESIGN
       Inspired by Material You (Google) & Gravity
       ======================================== */

    /* === CSS VARIABLES === */
    :root {
      /* === CORE COLORS (Default/Dark) === */
      --bg: #0b0f18;
      --bg2: #0e1320;
      --card: rgba(255, 255, 255, 0.035);
      --card-solid: #0e1320;
      /* Made solid for spoilers */
      --border: rgba(255, 255, 255, 0.05);
      --primary: #5a9cff;
      --primary2: #8ec0ff;
      --primary-glow: rgba(90, 156, 255, 0.12);
      --accent: #45dea0;
      --accent2: #ff7b8a;
      --text: #e8edf6;
      --text-secondary: rgba(195, 208, 230, 0.78);
      --muted: rgba(155, 172, 205, 0.55);

      /* === SHAPES & ANIMATION === */
      --radius-xs: 12px;
      --radius-sm: 16px;
      --radius-md: 20px;
      --radius-lg: 28px;
      --radius-xl: 32px;
      --radius-pill: 999px;
      --ease: cubic-bezier(0.25, 0.8, 0.25, 1);
      --transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
      /* Faster transitions */
      --card-width: 560px;
      --card-min-width: 430px;
      --dev-width: 240px;
      --grid-gap: 16px;
      --ui-scale: 0.81;

      /* === SHADOWS === */
      --shadow-soft: 0 12px 28px rgba(0, 0, 0, 0.2);
      --shadow-medium: 0 20px 42px rgba(0, 0, 0, 0.34);
      --shadow-glow: 0 0 34px var(--primary-glow);

      /* === UTILITY COLORS === */
      --green: #45dea0;
      --blue: #5a9cff;
      --orange: #ffaa55;
      --red: #ff7b8a;
      --red2: #ff9aa6;
      --bg-shift-x: 0px;
      --bg-shift-y: 0px;
    }

    /* === RESET & BASE === */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html,
    body {
      height: 100%;
    }

    body {
      font-family: 'Manrope', 'Google Sans', system-ui, -apple-system, sans-serif;
      color: var(--text);
      background: var(--bg);
      display: flex;
      align-items: flex-start;
      justify-content: center;
      min-height: 100vh;
      /* Fixed: Ensure background covers full viewport including scroll */
      height: auto;
      padding: 20px 12px 30px;
      overflow-x: hidden;
      letter-spacing: 0.2px;
      line-height: 1.6;
      position: relative;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
    }

    /* === FLOATING ORBS BACKGROUND === */
    body::before {
      content: "";
      position: fixed;
      inset: -30%;
      pointer-events: none;
      z-index: 0;
      background:
        radial-gradient(600px 600px at 15% 25%, rgba(90, 156, 255, 0.07), transparent 70%),
        radial-gradient(500px 500px at 80% 60%, rgba(120, 80, 255, 0.04), transparent 70%),
        radial-gradient(450px 450px at 50% 80%, rgba(69, 222, 160, 0.03), transparent 70%);
      animation: orbDrift 32s ease-in-out infinite alternate;
      will-change: transform;
    }

    body::after {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 2;
      opacity: 0;
      background:
        radial-gradient(120% 90% at 50% -10%, rgba(255, 191, 92, 0.08), transparent 62%),
        linear-gradient(180deg, rgba(255, 183, 77, 0.06), rgba(255, 183, 77, 0.02));
      transition: opacity 220ms var(--ease);
    }

    body.blueLightFilter::after {
      opacity: 1;
    }

    .interactiveAura {
      position: fixed;
      inset: -20%;
      pointer-events: none;
      z-index: 0;
      background:
        radial-gradient(35% 30% at 20% 30%, rgba(90, 156, 255, 0.07), transparent 70%),
        radial-gradient(30% 25% at 75% 65%, rgba(120, 80, 255, 0.05), transparent 70%),
        radial-gradient(25% 22% at 50% 50%, rgba(69, 222, 160, 0.03), transparent 70%);
      transform: translate3d(var(--bg-shift-x), var(--bg-shift-y), 0);
      animation: orbPulse 14s ease-in-out infinite;
      will-change: transform, opacity;
    }

    /* === SCROLLBAR: minimal capsule === */
    html,
    body,
    * {
      scrollbar-width: thin;
      scrollbar-color: rgba(74, 144, 255, 0.35) transparent;
    }

    *::-webkit-scrollbar {
      width: 5px;
      height: 5px;
      background: transparent;
    }

    *::-webkit-scrollbar-track {
      background: transparent !important;
    }

    *::-webkit-scrollbar-thumb {
      background: rgba(74, 144, 255, 0.3);
      border-radius: var(--radius-pill);
    }

    *::-webkit-scrollbar-thumb:hover {
      background: rgba(74, 144, 255, 0.5);
    }

    *::-webkit-scrollbar-button {
      width: 0;
      height: 0;
      display: none;
    }

    *::-webkit-scrollbar-corner {
      background: transparent !important;
    }

    *::-webkit-resizer {
      background: transparent !important;
    }

    /* === PAGE SHELL & GRID === */
    .pageShell {
      width: min(100%, calc((var(--card-width) * 2) + var(--dev-width, 240px) + (var(--grid-gap) * 2)));
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      zoom: var(--ui-scale);
    }

    @supports not (zoom: 1) {
      .pageShell {
        transform: scale(var(--ui-scale));
        transform-origin: top center;
      }
    }

    .gridShell {
      width: min(100%, calc((var(--card-width) * 2) + var(--dev-width, 240px) + (var(--grid-gap) * 2)));
      margin: 0 auto;
      display: grid;
      grid-template-columns:
        minmax(220px, var(--dev-width, 240px))
        minmax(var(--card-min-width, 430px), var(--card-width))
        minmax(var(--card-min-width, 430px), var(--card-width));
      gap: var(--grid-gap);
      align-items: start;
      justify-content: center;
      perspective: 1600px;
    }

    .gridShell .wrap {
      width: 100%;
      max-width: none;
      min-width: 0;
      margin: 0;
      display: flex;
      align-self: start;
    }

    .gridShell .wrap .card {
      max-width: none;
      min-width: 0;
    }

    .wrap {
      width: min(100%, var(--card-width));
      margin: 0 auto;
      display: flex;
      justify-content: center;
      position: relative;
      z-index: 1;
    }

    /* === STARTUP ENTRANCE (one-shot) === */
    .gridShell > .wrap .card {
      opacity: 0;
      transform: translate3d(0, 18px, 0) scale(0.985);
      animation: startupCardIn 680ms cubic-bezier(0.2, 0.75, 0.22, 1) var(--startup-delay, 0ms) 1 both;
    }

    .gridShell > .wrap:nth-child(1) .card {
      --startup-delay: 40ms;
    }

    .gridShell > .wrap:nth-child(2) .card {
      --startup-delay: 130ms;
    }

    .gridShell > .wrap:nth-child(3) .card {
      --startup-delay: 220ms;
    }

    .devHeaderTitle,
    .formCard .header .title,
    .genCard .header .title {
      opacity: 0;
      transform: translate3d(0, 10px, 0);
      filter: blur(4px);
      animation: startupTextIn 600ms cubic-bezier(0.2, 0.75, 0.22, 1) 360ms 1 both;
    }

    .formCard .header .logo,
    .genCard .header .logo {
      opacity: 0;
      transform: translate3d(0, 14px, 0) scale(0.9);
      filter: blur(6px);
      animation: startupLogoIn 640ms cubic-bezier(0.2, 0.75, 0.22, 1) 320ms 1 both;
    }

    /* === CARD — Glassmorphism 2.0 === */
    .card {
      position: relative;
      background: var(--card);
      border: 1px solid rgba(255, 255, 255, 0.07);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow-medium), 0 0 0 1px rgba(255, 255, 255, 0.015) inset;
      /* PERFORMANCE: keep layout containment without clipping overlays */
      transform: translate3d(0, 0, 0);
      contain: layout style;
      will-change: transform;
      /* Reduced blur for performance */
      backdrop-filter: blur(12px) saturate(1.2);
      -webkit-backdrop-filter: blur(12px) saturate(1.2);
      overflow: visible;
      /* FIXED: Clipping issue on dropdowns */
      width: 100%;
      max-width: var(--card-width);
      transition: var(--transition);
    }

    .card::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(500px 300px at 20% 0%, rgba(90, 156, 255, 0.04), transparent 60%),
        radial-gradient(400px 280px at 80% 10%, rgba(120, 80, 255, 0.025), transparent 60%);
      pointer-events: none;
      opacity: .6;
      border-radius: inherit;
      /* Ensure radius is respected since we removed overflow: hidden */
      clip-path: inset(0 round var(--radius-xl));
    }

    .card::after {
      content: "";
      position: absolute;
      inset: 1px;
      border-radius: inherit;
      pointer-events: none;
      background: linear-gradient(160deg,
          rgba(255, 255, 255, 0.08) 0%,
          rgba(255, 255, 255, 0.015) 40%,
          rgba(0, 0, 0, 0.08) 100%);
      opacity: .5;
      clip-path: inset(0 round var(--radius-xl));
    }

    @media (hover:hover) and (pointer:fine) {
      .formCard:hover,
      .genCard:hover {
        transform: translate3d(0, -4px, 0);
        box-shadow: 0 24px 52px rgba(0, 0, 0, 0.38), var(--shadow-glow);
      }
    }

    .formCard {
      box-shadow: var(--shadow-medium), var(--shadow-glow);
    }

    .genCard {
      box-shadow: var(--shadow-medium);
      /* PERFORMANCE */
      transform: translate3d(0, 0, 0);
      contain: content;
    }

    /* === HEADER === */
    .header {
      position: relative;
      padding: 20px 24px 16px;
      border-bottom: none;
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .logo {
      width: 52px;
      height: 52px;
      border-radius: var(--radius-md);
      background: rgba(74, 144, 255, 0.08);
      border: none;
      box-shadow: 0 0 30px rgba(74, 144, 255, 0.15);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .logoImg {
      width: 78%;
      height: 78%;
      object-fit: contain;
      display: block;
      image-rendering: pixelated;
      image-rendering: crisp-edges;
      filter: drop-shadow(0 0 12px rgba(74, 144, 255, 0.3));
    }

    .titlebox {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .title {
      font-family: 'Manrope', 'Google Sans', sans-serif;
      font-weight: 800;
      letter-spacing: 0.3px;
      font-size: 22px;
      line-height: 1.15;
      background: none;
      color: var(--text);
    }

    /* === BODY === */
    .body {
      position: relative;
      padding: 16px 24px 18px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    /* === TOP ROW & STATUS (fixed: no line break) === */
    .topRow {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      flex-wrap: nowrap;
      margin-bottom: 2px;
      min-height: 40px;
    }

    .statusCluster {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: nowrap;
      flex-shrink: 0;
    }

    .statusPill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 14px;
      border-radius: var(--radius-pill);
      border: none;
      background: rgba(255, 255, 255, 0.05);
      color: var(--text-secondary);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .3px;
      text-transform: uppercase;
      transition: var(--transition);
    }

    .statusPill i {
      font-size: 16px;
      color: var(--primary2);
    }

    .statusPill.active {
      background: rgba(74, 144, 255, 0.12);
      box-shadow: 0 0 20px rgba(74, 144, 255, 0.1);
      color: var(--text);
    }

    .dirMini {
      font-size: 12px;
      color: var(--text-secondary);
      flex-shrink: 1;
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 2px;
      padding-left: 2px;
    }

    .sheetMiniAccess {
      display: flex;
      justify-content: flex-end;
      margin-top: 6px;
    }

    .sheetMiniLink {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      text-decoration: none;
      user-select: none;
    }

    .sheetMiniIcon {
      width: 44px;
      height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 12px;
      background: rgba(14, 29, 20, 0.34);
      border: 1px solid rgba(108, 255, 170, 0.65);
      box-shadow:
        0 0 0 1px rgba(82, 255, 155, 0.16) inset,
        0 0 18px rgba(52, 255, 141, 0.22);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
    }

    .sheetMiniIcon i {
      font-size: 20px;
      color: #8dffbc;
      text-shadow: 0 0 14px rgba(89, 255, 163, 0.35);
    }

    .sheetMiniText {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .2px;
      color: rgba(198, 255, 224, 0.86);
      line-height: 1;
      text-align: center;
      white-space: nowrap;
    }

    .sheetMiniLink:hover .sheetMiniIcon {
      transform: translateY(-1px);
      background: rgba(17, 36, 25, 0.42);
      border-color: rgba(124, 255, 181, 0.78);
      box-shadow:
        0 0 0 1px rgba(103, 255, 170, 0.24) inset,
        0 0 26px rgba(52, 255, 141, 0.3);
    }

    .sheetMiniLink:active .sheetMiniIcon {
      transform: translateY(0) scale(0.98);
    }

    .sheetMiniLink:focus-visible {
      outline: none;
    }

    .sheetMiniLink:focus-visible .sheetMiniIcon {
      box-shadow:
        0 0 0 2px rgba(12, 24, 18, 0.82),
        0 0 0 4px rgba(116, 255, 175, 0.56),
        0 0 24px rgba(52, 255, 141, 0.35);
    }

    .timerMini {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 12px;
      border-radius: var(--radius-pill);
      border: none;
      background: rgba(255, 255, 255, 0.05);
      color: var(--text-secondary);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .2px;
      min-width: 108px;
      justify-content: center;
    }

    .timerMini i {
      font-size: 14px;
      color: var(--primary2);
    }

    .timerMini.active {
      background: rgba(74, 144, 255, 0.12);
    }

    .timerMini.paused {
      background: rgba(255, 193, 7, 0.12);
    }

    /* === FIELDS & FORM === */
    .field {
      display: flex;
      flex-direction: column;
      gap: 7px;
    }

    #form {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 10px 12px;
      flex: 1;
      align-content: start;
    }

    #form .fullSpan {
      grid-column: 1 / -1;
    }

    .label {
      font-size: 11px;
      color: rgba(180, 200, 235, 0.9);
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 8px;
      letter-spacing: .5px;
      text-transform: uppercase;
    }

    .label i {
      color: var(--primary);
      font-size: 16px;
    }

    .req {
      color: var(--red);
      font-weight: 800;
      margin-left: 2px;
    }

    /* === INPUTS — Filled Style === */
    .input,
    .textarea {
      width: 100%;
      background: rgba(255, 255, 255, 0.06);
      border: 2px solid transparent;
      color: var(--text);
      border-radius: var(--radius-sm);
      padding: 12px 14px;
      font-size: 14px;
      font-family: inherit;
      transition: var(--transition);
      box-shadow: none;
    }

    .input::placeholder,
    .textarea::placeholder {
      color: var(--muted);
    }

    .input:focus,
    .textarea:focus {
      border-color: var(--primary);
      background: rgba(255, 255, 255, 0.08);
      box-shadow: 0 0 0 4px rgba(74, 144, 255, 0.1);
    }

    .input.is-invalid,
    .selectPill.is-invalid {
      border-color: var(--red) !important;
      box-shadow: 0 0 0 4px rgba(255, 107, 122, 0.12) !important;
    }

    .input.is-valid,
    .selectPill.is-valid {
      border-color: var(--primary) !important;
      box-shadow: 0 0 0 4px rgba(74, 144, 255, 0.12) !important;
    }

    .fieldError {
      min-height: 0;
      max-height: 0;
      opacity: 0;
      transform: translateY(-4px);
      overflow: hidden;
      font-size: 12px;
      font-weight: 600;
      color: var(--red2);
      transition: opacity .2s var(--ease), max-height .2s var(--ease), transform .2s var(--ease);
    }

    .fieldError.show {
      max-height: 34px;
      opacity: 1;
      transform: translateY(0);
    }

    .field.hasError .label {
      color: var(--red2);
    }

    /* === CHIPS / PILLS === */
    .chipGroup {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      padding: 12px;
      border-radius: var(--radius-lg);
      border: none;
      background: rgba(255, 255, 255, 0.025);
    }

    .chip {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      border-radius: var(--radius-sm);
      padding: 12px 16px;
      border: none;
      background: rgba(255, 255, 255, 0.06);
      color: var(--text-secondary);
      cursor: pointer;
      user-select: none;
      box-shadow: none;
      transition: var(--transition);
      min-height: 48px;
    }

    .chip:hover {
      transform: translateY(-2px);
      background: rgba(255, 255, 255, 0.10);
      box-shadow: var(--shadow-soft);
    }

    .chip:active {
      transform: translateY(0px) scale(0.98);
    }

    .chip .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      box-shadow: 0 0 8px currentColor;
      flex-shrink: 0;
    }

    .chip .main {
      display: flex;
      flex-direction: column;
      line-height: 1.1;
      gap: 3px;
    }

    .chip .name {
      font-weight: 800;
      letter-spacing: .3px;
      text-transform: uppercase;
      font-size: 12.5px;
    }

    .chip .sub {
      font-size: 12px;
      color: var(--muted);
      font-weight: 600;
    }

    .chip.blue .dot {
      background: var(--blue);
    }

    .chip.green .dot {
      background: var(--green);
    }

    .chip.orange .dot {
      background: var(--orange);
    }

    .chip.active {
      background: rgba(74, 144, 255, 0.15);
      color: var(--text);
      box-shadow: 0 0 24px rgba(74, 144, 255, 0.12);
      transform: translateY(-2px);
    }

    /* === DIRECTORY CHIPS (Grid) === */
    .chipGroup.dirGroup {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      padding: 10px;
    }

    #dirChips.unlocked {
      box-shadow: 0 0 24px rgba(74, 144, 255, 0.15);
    }

    #dirChips.shake {
      animation: dirShake 160ms ease;
    }


    .chipGroup.dirGroup .chip {
      position: relative;
      width: 100%;
      min-width: 0;
      min-height: 56px;
      padding: 10px 12px;
      justify-content: center;
      border-radius: var(--radius-md);
      --dir-color: var(--primary);
      background: rgba(255, 255, 255, 0.04);
      transition: var(--transition);
    }

    .chipGroup.dirGroup .chip.green {
      --dir-color: #38d98a;
    }

    .chipGroup.dirGroup .chip.blue {
      --dir-color: #4a90ff;
    }

    .chipGroup.dirGroup .chip.orange {
      --dir-color: #ff9f43;
    }

    .chipGroup.dirGroup .chip .dot {
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      background: var(--dir-color);
      box-shadow: 0 0 10px var(--dir-color);
    }

    .chipGroup.dirGroup .chip .main {
      width: 100%;
      min-width: 0;
      padding-left: 8px;
      padding-right: 6px;
      align-items: center;
      text-align: center;
    }

    .chipGroup.dirGroup .chip .name {
      font-size: 11.5px;
      line-height: 1.15;
      letter-spacing: .15px;
      font-weight: 800;
      text-transform: none;
      font-family: 'Manrope', 'Google Sans', sans-serif;
    }

    .chipGroup.dirGroup .chip .sub {
      font-size: 10px;
      line-height: 1.2;
      opacity: .75;
      font-family: 'Manrope', 'Google Sans', sans-serif;
    }

    .chipGroup.dirGroup .chip .name,
    .chipGroup.dirGroup .chip .sub {
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .chipGroup.dirGroup .chip[data-cat="OFICIAIS"] {
      min-height: 64px;
    }

    .chipGroup.dirGroup .chip[data-cat="OFICIAIS"] .name,
    .chipGroup.dirGroup .chip[data-cat="OFICIAIS"] .sub {
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
      font-family: 'Manrope', 'Google Sans', sans-serif;
    }

    .chipGroup.dirGroup .chip[data-cat="OFICIAIS"] .name {
      font-size: 11.4px;
      line-height: 1.08;
      font-weight: 800;
      white-space: normal;
      overflow-wrap: anywhere;
      word-break: normal;
      max-width: 10.5em;
      margin-inline: auto;
      text-align: center;
      text-wrap: balance;
    }

    .chipGroup.dirGroup .chip[data-cat="OFICIAIS"] .sub {
      font-size: 10.2px;
      line-height: 1.05;
    }

    .chipGroup.dirGroup .chip:hover {
      transform: translateY(-2px);
      background: color-mix(in srgb, var(--dir-color) 12%, rgba(255, 255, 255, 0.06));
      box-shadow: 0 4px 20px color-mix(in srgb, var(--dir-color) 25%, transparent);
    }

    .chipGroup.dirGroup .chip.active {
      background: color-mix(in srgb, var(--dir-color) 18%, rgba(255, 255, 255, 0.04));
      box-shadow:
        0 0 0 2px color-mix(in srgb, var(--dir-color) 30%, transparent),
        0 4px 24px color-mix(in srgb, var(--dir-color) 30%, transparent);
    }

    .chipGroup.dirGroup .chip.active .dot {
      box-shadow:
        0 0 8px var(--dir-color),
        0 0 20px color-mix(in srgb, var(--dir-color) 60%, transparent);
    }

    .chipGroup.dirGroup .chip:focus-visible {
      outline: none;
      box-shadow:
        0 0 0 3px color-mix(in srgb, var(--dir-color) 35%, transparent),
        0 4px 20px color-mix(in srgb, var(--dir-color) 25%, transparent);
    }

    /* === ROW (Fiscal + Button) === */
    .row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: end;
    }

    .fiscalField {
      gap: 5px;
      min-width: 0;
    }

    .avatarWrap {
      display: none;
      align-items: center;
      justify-content: center;
      margin: 0;
      padding: 4px;
      border-radius: var(--radius-pill);
      background: rgba(74, 144, 255, 0.08);
      border: none;
      box-shadow: 0 0 20px rgba(74, 144, 255, 0.12);
      width: 72px;
      height: 72px;
      align-self: center;
      flex-shrink: 0;
    }

    .avatarWrap img,
    .avatar-fiscal img {
      width: 64px;
      height: 64px;
      object-fit: contain;
      image-rendering: auto;
      display: block;
      border-radius: var(--radius-pill);
    }

    .fiscalActions {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
      align-self: end;
    }

    #fiscalNick {
      height: 40px;
      min-height: 40px;
    }

    /* === PAUSE BUTTON === */
    .pauseBtn {
      border: none;
      border-radius: var(--radius-pill);
      padding: 10px 14px;
      font-weight: 700;
      letter-spacing: .3px;
      text-transform: uppercase;
      cursor: pointer;
      background: rgba(255, 255, 255, 0.06);
      color: var(--text);
      box-shadow: none;
      transition: var(--transition);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      height: 40px;
      white-space: nowrap;
    }

    .pauseBtn .label {
      font-size: 12px;
      letter-spacing: .2px;
      font-weight: 750;
    }

    .pauseBtn i {
      font-size: 16px;
      color: var(--text);
    }

    .pauseBtn:hover {
      transform: translateY(-2px);
      background: rgba(255, 255, 255, 0.10);
      box-shadow: var(--shadow-soft);
    }

    .pauseBtn:active {
      transform: translateY(0px) scale(0.98);
    }

    .pauseBtn:disabled {
      cursor: not-allowed;
      background: rgba(255, 255, 255, 0.03);
      color: var(--muted);
      opacity: 1;
      filter: none;
      transform: none;
    }

    .pauseBtn:disabled i {
      color: var(--muted);
    }

    .pauseBtn.paused {
      background: linear-gradient(135deg, var(--primary), #6366f1);
      box-shadow: 0 4px 20px rgba(74, 144, 255, 0.3);
      color: #fff;
    }

    /* === FISCAL BUTTON === */
    .fiscalBtn {
      border: none;
      border-radius: var(--radius-pill);
      padding: 12px 16px;
      font-weight: 800;
      letter-spacing: .5px;
      text-transform: uppercase;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      min-height: 44px;
      white-space: nowrap;
      box-shadow: none;
      transition: var(--transition);
    }

    .fiscalBtn:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-soft);
    }

    .fiscalBtn:active {
      transform: translateY(0px) scale(0.98);
    }

    .fiscalBtn.stateA {
      background: linear-gradient(135deg, var(--accent), #2ecc71);
      color: #fff;
      box-shadow: 0 4px 20px rgba(56, 217, 138, 0.25);
    }

    .fiscalBtn.stateB {
      background: linear-gradient(135deg, var(--red), #ef4444);
      color: #fff;
      box-shadow: 0 4px 20px rgba(255, 107, 122, 0.25);
    }

    .fiscalBtn .iconWrap {
      width: 20px;
      height: 20px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: relative;
      flex-shrink: 0;
    }

    .fiscalBtn .iconWrap i {
      color: currentColor;
    }

    .fiscalBtn.stateA .iconWrap i {
      color: #fff;
    }

    .fiscalBtn.stateB .iconWrap i {
      color: #fff;
    }

    .fiscalSpinIcon {
      font-size: 18px;
      display: inline-block;
      transform-origin: 50% 50%;
      will-change: transform;
      animation: spin .78s linear infinite, fiscalPulse 1.6s ease-in-out infinite;
    }

    .fiscalBtn:disabled {
      cursor: wait;
      opacity: .88;
      filter: none !important;
      transform: none !important;
      box-shadow: none !important;
    }

    /* === SELECT PILL (Ação/Punição) === */
    .optionWrap {
      position: relative;
      z-index: 10;
    }

    .optionWrap:has(.spoiler.open) {
      z-index: 20;
    }

    .selectPill {
      width: 100%;
      border: 2px solid transparent;
      background: rgba(255, 255, 255, 0.06);
      color: var(--text-secondary);
      border-radius: var(--radius-pill);
      padding: 12px 16px;
      min-height: 48px;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      cursor: pointer;
      box-shadow: none;
      transition: var(--transition);
      will-change: transform;
      position: relative;
      z-index: 2;
    }

    .selectPill:hover {
      transform: translateY(-2px);
      background: rgba(255, 255, 255, 0.08);
      box-shadow: var(--shadow-soft);
    }

    .selectPill:active {
      transform: translateY(0px) scale(0.98);
    }

    .selectPill i {
      color: var(--primary2);
      font-size: 16px;
      flex-shrink: 0;
      transition: transform 0.3s ease-in-out;
    }

    .selectPill.open {
      border-color: var(--primary);
      box-shadow: 0 0 0 4px rgba(74, 144, 255, 0.1);
    }

    .selectPill.open i {
      transform: rotate(180deg);
    }

    .selectPill.locked {
      cursor: not-allowed;
      opacity: .65;
    }

    .selectPill.locked i {
      opacity: .5;
    }

    .selectText {
      color: var(--muted);
      font-weight: 600;
    }

    .selectPill.filled .selectText {
      color: var(--text);
      font-weight: 750;
    }

    /* === SPOILER / DROPDOWN === */
    .spoiler {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      margin-top: 4px;
      border-radius: var(--radius-sm);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      transform: translateY(-8px);
      transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
      background: var(--card-solid);
      border-radius: var(--radius-sm);
      margin-top: 4px;
      display: flex;
      flex-direction: column;
      border: 1px solid var(--border);
      width: 100%;
      z-index: 50;
      box-shadow: var(--shadow-medium);
      pointer-events: none;
      /* Performance */
      will-change: transform, opacity;
      contain: content;
    }

    .spoiler.open {
      max-height: clamp(220px, 68vh, 360px);
      opacity: 1;
      transform: translateY(0);
      overflow: auto;
      pointer-events: auto;
    }

    .spoilerItem {
      width: 100%;
      border: none;
      background: transparent;
      text-align: left;
      padding: 14px 16px;
      cursor: pointer;
      color: var(--text-secondary);
      font-weight: 700;
      letter-spacing: .15px;
      font-family: inherit;
      transition: var(--transition);
    }

    .spoilerItem:hover {
      background: rgba(255, 255, 255, 0.06);
      color: var(--text);
    }

    .spoilerItem+.spoilerItem {
      border-top: none;
    }

    .spoilerItem.is-disabled,
    .spoilerItem:disabled {
      opacity: .4;
      cursor: not-allowed;
      pointer-events: none;
    }


    /* === ANEXOS === */
    .anexosBox {
      height: 44px;
      min-height: 44px;
      max-height: 44px;
      line-height: 1.2;
      padding-right: 44px;
    }

    .anexosBox.is-uploading {
      opacity: .75;
      cursor: progress;
    }

    .fieldAnexos {
      margin-bottom: 0;
      position: relative;
    }

    .anexosInputWrap {
      position: relative;
    }

    .anexosInputWrap.is-dragover .anexosBox {
      border-color: var(--primary);
      box-shadow: 0 0 0 4px rgba(74, 144, 255, 0.16);
      background: rgba(74, 144, 255, 0.08);
    }

    .anexosUploadBtn {
      position: absolute;
      top: 50%;
      right: 8px;
      transform: translateY(-50%);
      width: 30px;
      height: 30px;
      border: none;
      border-radius: 50%;
      background: transparent;
      color: var(--primary2);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: var(--transition);
      z-index: 2;
    }

    .anexosUploadBtn:hover {
      background: rgba(74, 144, 255, 0.12);
      color: #cfe2ff;
    }

    .anexosUploadBtn:disabled {
      opacity: .7;
      cursor: wait;
    }

    .anexosUploadBtn i {
      font-size: 16px;
    }

    .anexosUploadBtn.is-loading i {
      animation: spin .9s linear infinite;
    }

    #acaoWrap {
      margin-top: -4px;
    }

    .fieldAnexos {
      margin-top: -4px;
    }

    #acaoWrap,
    .fieldAnexos {
      gap: 4px;
    }

    /* === ACTION BUTTONS === */
    .actions {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
      gap: 8px;
      margin-top: 8px;
    }

    .btnPrimary {
      border: none;
      border-radius: var(--radius-pill);
      padding: 13px 16px;
      font-weight: 800;
      letter-spacing: .5px;
      text-transform: uppercase;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      background: linear-gradient(135deg, var(--primary) 0%, #6366f1 100%);
      color: #fff;
      box-shadow: 0 4px 24px rgba(74, 144, 255, 0.3);
      transition: var(--transition);
      font-family: inherit;
    }

    .btnPrimary:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 32px rgba(74, 144, 255, 0.4);
    }

    .btnPrimary:active {
      transform: translateY(0px) scale(0.98);
    }

    .btnPrimary:disabled {
      cursor: not-allowed;
      opacity: .6;
      filter: grayscale(.2);
      transform: none;
    }

    .btnPrimary.is-armed {
      box-shadow: 0 0 0 3px rgba(74, 144, 255, 0.2), 0 4px 24px rgba(74, 144, 255, 0.3);
    }

    .btnGhost {
      width: 100%;
      border-radius: var(--radius-pill);
      padding: 13px 14px;
      font-weight: 750;
      letter-spacing: .4px;
      text-transform: uppercase;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      border: 2px solid rgba(255, 255, 255, 0.08);
      background: rgba(255, 255, 255, 0.04);
      color: var(--text-secondary);
      box-shadow: none;
      transition: var(--transition);
      font-family: inherit;
    }

    .btnGhost:hover {
      transform: translateY(-2px);
      background: rgba(255, 255, 255, 0.08);
      box-shadow: var(--shadow-soft);
    }

    .btnGhost:active {
      transform: translateY(0px) scale(0.98);
    }

    .btnGhost:disabled {
      opacity: .5;
      cursor: not-allowed;
      transform: none;
    }

    .btnPrimary.is-loading i,
    .btnGhost.is-loading i {
      animation: spin .9s linear infinite;
    }

    /* === OE SUBTIPO === */
    #oeSubtipoWrap[hidden] {
      display: none !important;
    }

    .oeSubtipoField {
      margin-top: 2px;
      gap: 5px;
    }

    .oeSubtipoGroup {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 4px;
      padding: 5px;
      border-radius: var(--radius-xs);
    }

    .oeSubtipoChip {
      min-height: 30px;
      padding: 6px 10px;
      justify-content: center;
      text-transform: uppercase;
      font-size: 10.5px;
      letter-spacing: .25px;
      font-weight: 750;
      background: rgba(255, 255, 255, 0.04);
      border-radius: var(--radius-xs);
    }

    .oeSubtipoGroup .oeSubtipoChip:not(.active) {
      opacity: .55;
    }

    .oeSubtipoChip:hover {
      background: rgba(255, 159, 67, 0.1);
      box-shadow: 0 4px 16px rgba(255, 159, 67, 0.12);
    }

    .oeSubtipoChip.active {
      background: rgba(255, 159, 67, 0.15);
      box-shadow: 0 0 0 2px rgba(255, 159, 67, 0.2), 0 4px 16px rgba(255, 159, 67, 0.12);
    }

    .oeSubtipoChip:focus-visible {
      outline: none;
      box-shadow: 0 0 0 3px rgba(255, 159, 67, 0.25);
    }

    /* === FORM STATUS === */
    .formStatus {
      grid-column: 1 / -1;
      min-height: 20px;
      font-size: 12px;
      font-weight: 600;
      color: var(--text-secondary);
    }

    .formStatus.error {
      color: var(--red2);
    }

    .formStatus.success {
      color: var(--accent);
    }

    .formStatus.info {
      color: var(--primary2);
    }

    /* === TOASTS === */
    .toastStack {
      position: fixed;
      right: 16px;
      bottom: 16px;
      z-index: 80;
      display: grid;
      gap: 8px;
      width: min(92vw, 340px);
      pointer-events: none;
    }

    .toast {
      border: none;
      background: rgba(255, 255, 255, 0.06);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      color: var(--text);
      border-radius: var(--radius-sm);
      padding: 12px 14px;
      font-size: 13px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 10px;
      opacity: 0;
      transform: translateY(10px);
      transition: opacity .3s var(--ease), transform .3s var(--ease);
      box-shadow: var(--shadow-medium);
    }

    .toast.show {
      opacity: 1;
      transform: translateY(0);
    }

    .toast i {
      font-size: 16px;
      flex-shrink: 0;
    }

    .toast.success {
      background: rgba(56, 217, 138, 0.12);
    }

    .toast.success i {
      color: var(--accent);
    }

    .toast.error {
      background: rgba(255, 107, 122, 0.12);
    }

    .toast.error i {
      color: var(--red);
    }

    .toast.info i {
      color: var(--primary2);
    }

    /* === GEN CARD (Gerador de Listagem) === */
    .genCard .logo img {
      width: 78%;
      height: 78%;
      object-fit: contain;
      display: block;
      image-rendering: auto;
      filter: drop-shadow(0 0 12px rgba(74, 144, 255, 0.2));
    }

    .genCard .header {
      padding-bottom: 12px;
      align-items: center;
    }

    .genDirNow {
      font-size: 12px;
      color: var(--text-secondary);
      line-height: 1.3;
      margin-bottom: 4px;
      padding-left: 2px;
    }

    .genDirNow b {
      font-weight: 800;
    }

    .genBody {
      padding: 12px 14px 12px;
      gap: 10px;
    }

    .genField {
      gap: 6px;
    }

    .genInput {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      line-height: 1.4;
      border-radius: var(--radius-xs);
      padding: 10px 12px;
      font-size: 12.5px;
      min-height: 92px;
      max-height: 130px;
      resize: vertical;
    }

    .genInput:disabled {
      cursor: not-allowed;
      opacity: .6;
    }

    .genCard.is-locked .genInput {
      background: rgba(255, 255, 255, 0.03);
      box-shadow: none;
    }

    .genHelper {
      min-height: 16px;
      font-size: 11px;
      color: var(--muted);
      line-height: 1.4;
    }

    .genHelper.is-muted {
      color: rgba(160, 178, 210, 0.5);
    }

    /* === GEN CORRECT TOGGLE === */
    .genCorrectToggle {
      width: 100%;
      border: none;
      background: rgba(255, 255, 255, 0.05);
      color: var(--text-secondary);
      border-radius: var(--radius-xs);
      min-height: 38px;
      padding: 8px 12px;
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      transition: var(--transition);
      box-shadow: none;
    }

    .genCorrectToggle[aria-expanded="false"] {
      background: rgba(255, 255, 255, 0.04);
    }

    .genCorrectToggle:hover {
      transform: translateY(-1px);
      background: rgba(255, 255, 255, 0.08);
    }

    .genCorrectToggle:active {
      transform: translateY(0) scale(0.99);
    }

    .genCorrectToggle:focus-visible {
      outline: none;
      box-shadow: 0 0 0 3px rgba(74, 144, 255, 0.15);
    }

    .genCorrectToggleLabel {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      flex: 1;
      min-width: 0;
      text-align: left;
      font-size: 11px;
      font-weight: 750;
      letter-spacing: .3px;
      text-transform: uppercase;
      color: var(--text-secondary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .genCorrectToggleClick {
      font-size: 13px;
      color: var(--primary2);
      flex-shrink: 0;
      transform: none !important;
      transition: none !important;
    }

    .genCorrectToggleCount {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 24px;
      min-height: 20px;
      border-radius: var(--radius-pill);
      border: none;
      background: rgba(74, 144, 255, 0.15);
      color: var(--text);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .2px;
      padding: 0 7px;
    }

    .genCorrectToggleCaret {
      font-size: 14px;
      color: var(--muted);
      transition: transform .3s var(--ease);
    }

    .genCorrectToggle[aria-expanded="true"] .genCorrectToggleCaret {
      transform: rotate(180deg);
    }

    .genCorrectSpoiler {
      margin-top: 6px;
      border-radius: var(--radius-xs);
      border: none;
      background: rgba(255, 255, 255, 0.03);
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transition: max-height .25s var(--ease), opacity .2s var(--ease);
      padding: 0 8px;
      will-change: max-height, opacity;
      contain: layout style;
    }

    .genCorrectSpoiler.open {
      max-height: 180px;
      opacity: 1;
      overflow: auto;
      padding: 8px;
    }

    .genCorrectList {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    .genCorrectItem {
      min-height: 32px;
      border-radius: var(--radius-xs);
      border: none;
      background: rgba(255, 255, 255, 0.04);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 7px;
      padding: 6px 10px;
    }

    .genCorrectNick {
      min-width: 0;
      color: var(--text);
      font-size: 11.5px;
      font-weight: 700;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .genCorrectMeta {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
    }

    .genCorrectDays {
      font-size: 10px;
      color: var(--muted);
      font-weight: 600;
      letter-spacing: .15px;
    }

    .genCorrectBadge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 18px;
      border-radius: var(--radius-pill);
      border: none;
      font-size: 9.5px;
      font-weight: 800;
      letter-spacing: .25px;
      text-transform: uppercase;
      padding: 2px 8px;
    }

    .genCorrectBadge.regular {
      background: rgba(56, 217, 138, 0.15);
      color: #a8f5c8;
    }

    .genCorrectBadge.pendente {
      background: rgba(255, 159, 67, 0.15);
      color: #ffd4a8;
    }

    .genCorrectEmpty {
      display: none !important;
    }

    /* === GEN GRID (Tabela Fluida) === */
    .genIncorrectGrid {
      min-height: 112px;
      max-height: 340px;
      overflow: auto;
      border: none;
      border-radius: var(--radius-sm);
      background: rgba(255, 255, 255, 0.02);
      padding: 8px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      transition: var(--transition);
    }

    .genIncorrectGrid.is-empty {
      min-height: 112px;
      max-height: 128px;
      overflow: hidden;
      padding: 6px 8px;
      gap: 0;
      justify-content: center;
    }

    .genIncorrectGrid.has-results {
      min-height: 132px;
      max-height: 340px;
      overflow: auto;
      padding: 8px;
      gap: 6px;
    }

    .genGridHeadRow {
      display: grid;
      grid-template-columns: 2fr 0.6fr 2fr 1.2fr 0.8fr;
      align-items: center;
      gap: 12px;
      min-height: 32px;
      border-radius: var(--radius-xs);
      border: none;
      background: rgba(255, 255, 255, 0.04);
      padding: 10px 16px;
    }

    .genGridHeadCell {
      min-width: 0;
      color: var(--text-secondary);
      font-family: 'Poppins', 'Manrope', sans-serif;
      font-size: 10px;
      letter-spacing: .3px;
      font-weight: 800;
      text-transform: uppercase;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .genGridHeadCell.nick {
      justify-content: flex-start;
    }

    .genGridHeadRow .genGridHeadCell:nth-child(3) {
      justify-content: center;
    }

    /* Each row = floating card */
    .genGridRow {
      display: grid;
      grid-template-columns: 2fr 0.6fr 2fr 1.2fr 0.8fr;
      align-items: center;
      gap: 12px;
      min-height: 42px;
      border-radius: var(--radius-xs);
      border: none;
      background: rgba(255, 255, 255, 0.04);
      padding: 10px 16px 13px;
      overflow: visible;
      margin-bottom: 0;
      transition: background-color .1s linear, box-shadow .1s linear;
    }

    .genGridRow:hover {
      transform: none;
      background: rgba(255, 255, 255, 0.07);
      box-shadow: none;
    }

    .genGridRow.is-applied {
      background: rgba(74, 144, 255, 0.1);
      box-shadow: 0 0 0 2px rgba(74, 144, 255, 0.15), 0 4px 16px rgba(74, 144, 255, 0.1);
    }

    .genGridCell {
      min-width: 0;
      color: var(--text-secondary);
      font-family: 'Poppins', 'Manrope', sans-serif;
      font-size: 11.5px;
      font-weight: 700;
      line-height: 1.3;
      display: flex;
      align-items: center;
      justify-content: center;
      /* FIXED: Absolute centering */
      text-align: center;
    }

    .genGridNick {
      font-weight: 750;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      justify-content: flex-start;
      user-select: text !important;
      -webkit-user-select: text !important;
    }

    .genGridDays,
    .genGridActionCell,
    .genGridCopyCell {
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .genGridActionCell {
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      width: 100%;
      min-height: 34px;
      align-self: center;
      position: relative;
      top: -3px;
    }

    .genGridReason {
      text-align: center;
      justify-content: center;
      padding-left: 8px;
      padding-right: 8px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .genGridDays {
      color: var(--primary2);
      font-weight: 800;
      letter-spacing: .4px;
      background: rgba(74, 144, 255, 0.1);
      border-radius: var(--radius-pill);
      padding: 3px 8px;
      font-size: 11px;
      width: fit-content;
      margin: 0 auto;
    }

    .genGridCopyCell {
      width: 84px;
      min-width: 84px;
      min-height: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      overflow: visible;
      align-self: center;
      position: relative;
      top: -4px;
    }

    /* === STATUS BADGES (Pastel Vibrante + Poppins) === */
    .genGridBadge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 24px;
      border-radius: 10px;
      padding: 3px 10px;
      border: none;
      font-family: 'Poppins', 'Manrope', sans-serif;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .25px;
      text-transform: uppercase;
      white-space: nowrap;
      vertical-align: middle;
      margin: 0 auto;
    }

    .genGridBadgeAction {
      background: rgba(90, 156, 255, 0.15);
      color: #a8c8ff;
      position: relative;
      top: -2px;
    }

    .genGridBadgeRebaixamento {
      background: rgba(255, 170, 85, 0.18);
      color: #ffd4a8;
    }

    .genGridBadgeDemissao {
      background: rgba(255, 123, 138, 0.18);
      color: #ffb8c0;
    }

    /* === COPY / APPLY BUTTONS === */
    .genGridCopyBtn {
      width: 32px;
      height: 32px;
      padding: 0;
      border-radius: var(--radius-pill);
      border: none;
      background: rgba(255, 255, 255, 0.06);
      color: var(--text-secondary);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
      line-height: 1;
      transition: transform .05s linear, background-color .05s linear, color .05s linear, box-shadow .05s linear;
      box-shadow: none;
      position: relative;
      z-index: 1;
      transform-origin: center;
      appearance: none;
      -webkit-appearance: none;
      overflow: visible;
      vertical-align: middle;
      top: 0;
    }

    .genGridCopyBtn i {
      font-size: 13px;
      line-height: 1;
      display: block;
    }

    .genGridCopyBtn:hover {
      transform: scale(1.01);
      background: rgba(255, 255, 255, 0.12);
      box-shadow: 0 0 0 1px rgba(90, 156, 255, 0.26);
      color: var(--text);
    }

    .genGridCopyBtn:active {
      transform: scale(1);
    }

    .genGridApplyBtn {
      background: rgba(56, 217, 138, 0.1);
      color: #a8f5c8;
    }

    .genGridApplyBtn:hover {
      background: rgba(56, 217, 138, 0.18);
      box-shadow: 0 0 0 1px rgba(56, 217, 138, 0.3);
    }

    /* === GEN TABLE TOOLS === */
    .genTableTools {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin: 2px 0 8px;
      padding: 8px 10px;
      border-radius: var(--radius-xs);
      border: none;
      background: rgba(255, 255, 255, 0.03);
      position: static;
    }

    .genTableTools[hidden] {
      display: none !important;
    }

    .genApplyNextBtn {
      width: auto;
      min-height: 34px;
      padding: 8px 12px;
      font-size: 10.5px;
      letter-spacing: .25px;
      background: rgba(255, 255, 255, 0.05) !important;
      color: var(--text-secondary) !important;
      border-color: transparent !important;
      box-shadow: none !important;
    }

    .genApplyNextBtn:hover {
      background: rgba(255, 255, 255, 0.09) !important;
      box-shadow: var(--shadow-soft) !important;
    }

    .genApplyNextBtn:disabled {
      opacity: .45;
      cursor: not-allowed;
      box-shadow: none !important;
      filter: none !important;
    }

    .genGridEmpty {
      grid-column: 1 / -1;
      color: var(--muted);
      font-size: 12px;
      font-weight: 600;
      text-align: center;
      padding: 8px 14px;
      width: fit-content;
      margin: 0 auto;
      border: none;
      border-radius: var(--radius-pill);
      background: rgba(255, 255, 255, 0.04);
    }

    .genGridRow.is-empty-row {
      min-height: auto;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 0;
      background: transparent;
      padding: 0;
      gap: 0;
    }

    .genVerifyLine {
      min-height: 30px;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: 12px;
      color: var(--text-secondary);
      margin-top: 2px;
      padding: 6px 10px;
      border-radius: var(--radius-pill);
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid transparent;
      width: fit-content;
      max-width: 100%;
    }

    .genVerifyLine i {
      display: inline-block;
      font-size: 14px;
      color: var(--primary2);
      opacity: .55;
      transform-origin: 50% 50%;
    }

    .genVerifyLine.is-checking i {
      animation: spin .9s linear infinite;
      opacity: 1;
    }

    .genVerifyLine.is-checking {
      background: rgba(74, 144, 255, 0.12);
      border-color: rgba(74, 144, 255, 0.26);
      box-shadow: 0 0 14px rgba(74, 144, 255, 0.14);
    }

    .genVerifyLine.is-error {
      color: var(--red2);
      background: rgba(255, 107, 122, 0.08);
      border-color: rgba(255, 107, 122, 0.2);
    }

    .genVerifyLine.is-success {
      color: var(--accent);
      background: rgba(56, 217, 138, 0.08);
      border-color: rgba(56, 217, 138, 0.2);
    }

    .genVerifyLine.is-info {
      color: var(--primary2);
      background: rgba(74, 144, 255, 0.08);
      border-color: rgba(74, 144, 255, 0.18);
    }

    /* === GEN STATS === */
    .genStats {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
      gap: 6px;
    }

    .genStat {
      border: none;
      background: rgba(255, 255, 255, 0.04);
      border-radius: var(--radius-xs);
      padding: 6px 8px;
      font-size: 10.5px;
      color: var(--text-secondary);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 5px;
    }

    .genStat b {
      color: var(--text);
      font-size: 12px;
      letter-spacing: .15px;
      white-space: nowrap;
    }

    /* === GEN ACTIONS === */
    .genActions {
      display: grid;
      grid-template-columns: 1fr;
      gap: 6px;
      margin-top: 8px;
      border-top: none;
      padding-top: 10px;
    }

    .genBtn {
      min-height: 40px;
      padding: 10px 10px;
      font-size: 11px;
      letter-spacing: .4px;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .genActions .genBtn {
      background: rgba(255, 255, 255, 0.04);
      color: var(--text-secondary);
      box-shadow: none;
      border: none;
    }

    .genActions .genBtn:hover {
      transform: translateY(-2px);
      background: rgba(255, 255, 255, 0.08);
      box-shadow: var(--shadow-soft);
    }

    .genActions .genBtn:active {
      transform: translateY(0) scale(0.98);
    }

    .genStatus {
      display: none !important;
      min-height: 0;
    }

    /* === FOCUS STATES (Unified) === */
    .input:focus,
    .textarea:focus,
    .selectPill:focus-visible,
    .chip:focus-visible,
    .fiscalBtn:focus-visible,
    .pauseBtn:focus-visible,
    .btnPrimary:focus-visible,
    .btnGhost:focus-visible {
      outline: none;
      box-shadow: 0 0 0 3px rgba(74, 144, 255, 0.2);
    }

    /* === GLOBAL TRANSITION === */
    .chip,
    .btnPrimary,
    .btnGhost,
    .pauseBtn,
    .fiscalBtn,
    .selectPill {
      transition: var(--transition);
      will-change: transform;
    }

    .btnPrimary:hover,
    .btnGhost:hover,
    .pauseBtn:hover,
    .fiscalBtn:hover,
    .selectPill:hover {
      filter: brightness(1.04);
    }

    .input:focus,
    .textarea:focus,
    .selectPill:focus-visible {
      border-color: var(--primary);
      box-shadow: 0 0 0 4px rgba(74, 144, 255, 0.12);
    }

    /* === DEV PANEL === */
    .devWrap {
      grid-column: auto;
      max-width: var(--dev-width, 240px);
      align-self: start;
    }

    .devWrap .card {
      height: auto !important;
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      transform: none !important;
    }

    .devWrap .card:hover,
    .devWrap .card:focus-within {
      box-shadow: none !important;
      transform: none !important;
      background: transparent !important;
    }

    .devPanelCard {
      display: block;
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }

    .devPanelCard::before {
      display: none !important;
    }

    .devPanelCard::after {
      display: none !important;
    }

    .devPanelBody {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: stretch;
      gap: 6px;
      padding: 0 0 2px;
      user-select: none;
      overflow: visible;
    }

    .devHeader {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding: 8px 2px 4px;
      margin-bottom: 2px;
      overflow: visible;
    }

    .devHeaderTitle {
      margin: 0;
      font-family: 'Manrope', 'Google Sans', sans-serif;
      font-size: 17px;
      line-height: 1.8;
      font-weight: 800;
      letter-spacing: 1.2px;
      color: var(--text);
      text-transform: uppercase;
      text-shadow: none;
      padding-top: 2px;
    }

    .devCards {
      display: flex;
      width: 100%;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      gap: 8px;
      flex-wrap: nowrap;
    }

    .devCard {
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 64px;
      padding: 8px 10px;
      border-radius: var(--radius-md);
      border: none;
      background: rgba(255, 255, 255, 0.03);
      box-shadow: none;
      transition: var(--transition);
      width: 100%;
      min-width: 0;
      overflow: hidden;
      position: relative;
      isolation: isolate;
      animation: devCardFloat 8s ease-in-out infinite;
    }

    .devCard:nth-child(2) {
      animation-delay: 1.5s;
    }

    .devCard:hover {
      background: rgba(255, 255, 255, 0.06);
      box-shadow: var(--shadow-soft);
      animation-play-state: paused;
    }

    .devCard:hover .devAvatar {
      animation-play-state: paused;
    }

    .devAvatarFrame {
      width: 42px;
      min-width: 42px;
      height: 44px;
      background: transparent;
      overflow: visible;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      box-shadow: none;
      flex-shrink: 0;
      position: relative;
      z-index: 1;
    }

    .devAvatarFrame::after {
      content: none;
    }

    .devAvatar {
      width: auto;
      height: 72px;
      object-fit: none;
      object-position: center 25%;
      image-rendering: auto;
      display: block;
      position: relative;
      bottom: -9px;
      filter: drop-shadow(0 0 10px rgba(74, 144, 255, 0.15));
      animation: devAvatarFloat 6s ease-in-out infinite;
    }

    .devCard:nth-child(2) .devAvatar {
      animation-delay: .9s;
    }

    .devMeta {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-between;
      gap: 5px;
      padding-top: 0;
      padding-bottom: 0;
      min-width: 0;
      flex: 1;
      min-height: 38px;
      position: relative;
      z-index: 1;
    }

    .devNick {
      font-family: 'Manrope', 'Google Sans', sans-serif;
      font-size: 14px;
      font-weight: 800;
      line-height: 1;
      letter-spacing: .1px;
      color: var(--text);
      white-space: nowrap;
    }

    img,
    button,
    .label,
    .title,
    .statusPill,
    .genStat,
    .genCorrectToggle,
    .chip {
      user-select: none;
      -webkit-user-select: none;
      -webkit-user-drag: none;
    }

    .devBadge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      border-radius: var(--radius-pill);
      background: rgba(255, 255, 255, 0.05);
      color: var(--text-secondary);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .2px;
      border: 1px solid rgba(255, 255, 255, 0.05);
      white-space: nowrap;
    }

    .devBadgeCode {
      color: var(--primary2);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .1px;
    }

    /* === ANIMATIONS === */
    @keyframes orbDrift {
      0% {
        transform: translate3d(0, 0, 0) scale(1);
      }

      50% {
        transform: translate3d(2%, -1.5%, 0) scale(1.05);
      }

      100% {
        transform: translate3d(-1%, 1%, 0) scale(1.02);
      }
    }

    @keyframes orbPulse {
      0% {
        opacity: .6;
        filter: blur(0px);
      }

      50% {
        opacity: .85;
        filter: blur(2px);
      }

      100% {
        opacity: .65;
        filter: blur(0px);
      }
    }

    @keyframes startupCardIn {
      0% {
        opacity: 0;
        transform: translate3d(0, 18px, 0) scale(0.985);
      }

      100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
      }
    }

    @keyframes startupLogoIn {
      0% {
        opacity: 0;
        transform: translate3d(0, 14px, 0) scale(0.9);
        filter: blur(6px);
      }

      100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0);
      }
    }

    @keyframes startupTextIn {
      0% {
        opacity: 0;
        transform: translate3d(0, 10px, 0);
        filter: blur(4px);
      }

      100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
      }
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

    @keyframes fiscalPulse {
      0% {
        filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0));
      }

      50% {
        filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.45));
      }

      100% {
        filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0));
      }
    }

    @keyframes devCardFloat {

      0%,
      100% {
        transform: translateY(0px);
      }

      50% {
        transform: translateY(-3px);
      }
    }

    @keyframes devAuraShift {

      0%,
      100% {
        opacity: .2;
      }

      50% {
        opacity: .35;
      }
    }

    @keyframes devTitleFloat {

      0%,
      100% {
        transform: translateY(0px);
      }

      50% {
        transform: translateY(-2px);
      }
    }

    @keyframes devAvatarFloat {

      0%,
      100% {
        transform: translateY(0px);
      }

      50% {
        transform: translateY(-3px);
      }
    }

    @keyframes dirShake {

      0%,
      100% {
        transform: translateX(0);
      }

      25% {
        transform: translateX(-3px);
      }

      50% {
        transform: translateX(3px);
      }

      75% {
        transform: translateX(-2px);
      }
    }


    @keyframes driftBackground {

      0%,
      100% {
        transform: translate3d(0, 0, 0);
      }

      50% {
        transform: translate3d(1.6%, -1.2%, 0);
      }
    }

    /* === RESPONSIVE === */
    @media (min-width: 2560px) {
      :root {
        --ui-scale: 0.88;
        --card-width: 620px;
        --card-min-width: 470px;
        --dev-width: 280px;
        --grid-gap: 20px;
      }

      body {
        letter-spacing: 0.24px;
        text-rendering: geometricPrecision;
      }

      .title {
        font-size: 24px;
      }

      .genInput {
        min-height: 108px;
        max-height: 168px;
      }

      .genIncorrectGrid,
      .genIncorrectGrid.has-results {
        max-height: 420px;
      }
    }

    @media (max-width: 1180px) {
      :root {
        --ui-scale: 1;
      }

      .pageShell {
        width: min(100%, calc((var(--card-width) * 2) + var(--grid-gap)));
      }

      .gridShell {
        width: min(100%, calc((var(--card-width) * 2) + var(--grid-gap)));
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      }

      .devWrap {
        grid-column: 1 / -1;
        max-width: none;
      }

      .devCard {
        min-height: 72px;
      }
    }

    @media (max-width: 900px) {
      :root {
        --ui-scale: 1;
      }

      .pageShell {
        width: min(100%, var(--card-width));
      }

      .gridShell {
        width: min(100%, var(--card-width));
        grid-template-columns: 1fr;
      }

      .devWrap {
        grid-column: auto;
      }
    }

    @media (max-width: 560px) {
      body {
        padding: 10px 8px 14px;
      }

      .header {
        padding: 14px 16px 12px;
      }

      .body {
        padding: 12px 14px 14px;
      }

      .title {
        font-size: 19px;
      }

      .row {
        grid-template-columns: minmax(0, 1fr) auto;
      }

      .fiscalActions {
        justify-content: flex-end;
      }

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

      .genGridHeadRow,
      .genGridRow {
        grid-template-columns: minmax(0, 1.2fr) 50px minmax(0, .9fr) 104px 82px;
        gap: 5px;
        padding-left: 7px;
        padding-right: 7px;
      }

      .genGridHeadRow .genGridHeadCell:nth-child(3),
      .genGridReason {
        padding-left: 8px;
      }

      .genActions {
        grid-template-columns: 1fr;
      }

      .toastStack {
        right: 8px;
        left: 8px;
        width: auto;
      }

      .devCards {
        gap: 8px;
        flex-direction: column;
        flex-wrap: nowrap;
      }

      .devHeaderTitle {
        font-size: 15px;
        letter-spacing: 1px;
      }

      .devCard {
        min-height: 78px;
        padding: 8px;
        min-width: 0;
        width: 100%;
      }

      .devAvatarFrame {
        width: 52px;
        min-width: 52px;
        height: 54px;
      }

      .devAvatar {
        height: 76px;
        bottom: 5px;
      }

      .devMeta {
        min-height: 42px;
      }

      .devNick {
        font-size: 13px;
      }

      .devBadge {
        font-size: 8px;
        padding: 1px 5px;
      }

      .chipGroup.dirGroup {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      #form {
        gap: 9px;
      }

      .sheetMiniAccess {
        justify-content: center;
      }

      .sheetMiniText {
        font-size: 9px;
      }
    }

    @media (max-width: 520px) {
      body {
        padding: 16px 10px 20px;
      }

      .header {
        padding: 14px 16px;
        gap: 12px;
      }

      .body {
        padding: 14px;
      }
    }

    @media (max-width: 420px) {
      .chipGroup.dirGroup {
        grid-template-columns: 1fr;
      }
    }

    @media (max-height: 780px) {
      body {
        justify-content: flex-start;
      }

      .card {
        margin-top: 6px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      body::before {
        animation: none;
      }

      .toast,
      .fieldError,
      .input,
      .textarea,
      .selectPill,
      .btnPrimary,
      .btnGhost,
      .chip,
      .genCorrectToggle,
      .genCorrectSpoiler,
      .genCorrectItem {
        transition: none !important;
      }

      .interactiveAura,
      .devHeaderTitle,
      .devCard,
      .devAvatar,
      .fiscalSpinIcon,
      .gridShell > .wrap .card,
      .formCard .header .logo,
      .genCard .header .logo,
      .formCard .header .title,
      .genCard .header .title,
      .genVerifyLine.is-checking i {
        animation: none !important;
      }

      .gridShell > .wrap .card,
      .formCard .header .logo,
      .genCard .header .logo,
      .formCard .header .title,
      .genCard .header .title {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
      }

      #dirChips.shake {
        animation: none !important;
      }

      .btnPrimary.is-loading i,
      .btnGhost.is-loading i {
        animation: none;
      }
    }

    /* ========================================
       SISTEMA DE CONFORTO VISUAL
       ======================================== */

    /* --- Toolbar flutuante --- */
    .comfortToolbar {
      position: fixed;
      top: 14px;
      right: 14px;
      z-index: 100;
      display: flex;
      gap: 6px;
      padding: 5px;
      border-radius: var(--radius-pill);
      background: rgba(255, 255, 255, 0.04);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }

    .comfortBtn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: none;
      background: rgba(255, 255, 255, 0.06);
      color: var(--text-secondary);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: var(--transition);
      font-size: 16px;
    }

    .comfortBtn:hover {
      background: rgba(255, 255, 255, 0.12);
      color: var(--text);
      transform: scale(1.08);
    }

    .comfortBtn.is-on {
      background: rgba(90, 156, 255, 0.2);
      color: var(--primary);
      box-shadow: 0 0 12px rgba(90, 156, 255, 0.15);
    }

    body.blueLightFilter #btnBlueLightFilter {
      background: rgba(255, 196, 92, 0.24);
      color: #ffd277;
      box-shadow: 0 0 14px rgba(255, 196, 92, 0.22);
    }

    /* --- Assinatura de rodape --- */
    .appFooter {
      width: 100%;
      text-align: center;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .24px;
      opacity: .9;
      transform: translateY(clamp(54px, 9vh, 118px));
      pointer-events: none;
      user-select: none;
    }

    .appFooterBrand {
      color: var(--text-secondary);
      font-weight: 800;
    }