/* Tokens (claro + escuro) em /shared/tokens-admin.css */

    /* ── Acessibilidade: foco visivel por teclado (escopado, nao afeta clique de mouse) ── */
    .btn:focus-visible,
    .nav-item:focus-visible,
    .fab-btn:focus-visible,
    .close-btn:focus-visible,
    .tipo-card:focus-visible,
    .size-btn:focus-visible,
    .rte-btn:focus-visible,
    .settings-tab-btn:focus-visible,
    .toggle:focus-visible,
    [role="button"]:focus-visible {
      outline: 2px solid var(--color-primary);
      outline-offset: 2px;
      box-shadow: var(--shadow-focus);
    }

    /* ── Acessibilidade: respeita preferencia de menos 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;
      }
    }

    /* Tokens do dark mode: ver /shared/tokens-admin.css. Os overrides
       de componente [data-theme="dark"] .classe {} seguem inline abaixo. */

    [data-theme="dark"] input[type="date"],
    [data-theme="dark"] input[type="datetime-local"],
    [data-theme="dark"] input[type="time"] { color-scheme: dark; }

    [data-theme="dark"] .plan-card.selected       { background: #162040; }
    [data-theme="dark"] .plan-card.pro            { background: #1a1230; border-color: #7c3aed; }
    [data-theme="dark"] .plan-card.pro.selected   { background: #1f1538; }
    [data-theme="dark"] .danger-zone              { background: #1a0d0d; }
    [data-theme="dark"] .drawer-sidebar,
    [data-theme="dark"] .drawer-preview           { background: #2a2a2a; }
    [data-theme="dark"] .drawer-sidebar           { border-right-color: rgba(255,255,255,0.06); }
    [data-theme="dark"] .drawer-sidebar-label     { color: rgba(255,255,255,0.2); }
    [data-theme="dark"] .drawer-cat-name          { color: rgba(255,255,255,0.45); }
    [data-theme="dark"] .drawer-cat-btn:hover     { background: rgba(255,255,255,0.06); }
    [data-theme="dark"] .drawer-cat-btn:hover .drawer-cat-name { color: rgba(255,255,255,0.75); }
    [data-theme="dark"] .drawer-cat-btn.active[data-cat="conteudo"]  { background: rgba(43,123,245,0.18); }
    [data-theme="dark"] .drawer-cat-btn.active[data-cat="widget"]    { background: rgba(124,58,237,0.18); }
    [data-theme="dark"] .drawer-cat-btn.active[data-cat="midia"]     { background: rgba(245,158,11,0.18); }
    [data-theme="dark"] .drawer-cat-btn.active[data-cat="interativo"]{ background: rgba(16,185,129,0.18); }
    [data-theme="dark"] .drawer-preview-title     { color: rgba(255,255,255,0.2); }
    [data-theme="dark"] .drawer-preview-tipo-badge{ color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.08); }
    [data-theme="dark"] .dpreview-section-label   { color: rgba(255,255,255,0.25); }
    [data-theme="dark"] .dpreview-placeholder     { color: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); }

    /* ── SCROLLBAR ── */
    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }

    ::-webkit-scrollbar-track {
      background: transparent;
    }

    ::-webkit-scrollbar-thumb {
      background: var(--color-gray-200);
      border-radius: var(--radius-full);
    }

    ::-webkit-scrollbar-thumb:hover {
      background: var(--color-gray-300);
    }

    ::-webkit-scrollbar-corner {
      background: transparent;
    }

    * {
      scrollbar-width: thin;
      scrollbar-color: var(--color-gray-200) transparent;
    }

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

    body {
      font-family: 'Inter', system-ui, sans-serif;
      background: var(--bg);
      color: var(--text);
      min-height: 100vh;
      overflow-x: hidden;
      font-size: 14px;
      line-height: 1.5;
    }

    #app {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }

    .view {
      display: none;
      flex-direction: column;
      min-height: 100vh;
      animation: viewIn .25s var(--ease-enter);
    }

    .view.active {
      display: flex;
    }

    @keyframes viewIn {
      from {
        opacity: 0;
        transform: translateY(8px);
      }

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

    /* ── LOGIN ── */
    #view-login {
      align-items: center;
      justify-content: center;
      background: var(--color-gray-50);
      /*background-image:
        radial-gradient(ellipse 70% 50% at 50% -10%, rgba(43, 123, 245, 0.06) 0%, transparent 60%),
        linear-gradient(var(--color-gray-200) 1px, transparent 1px),
        linear-gradient(90deg, var(--color-gray-200) 1px, transparent 1px);
      background-size: auto, 40px 40px, 40px 40px;*/
    }

    .login-box {
      background: var(--color-white);
      border: 1px solid var(--color-gray-200);
      border-radius: var(--radius-xl);
      padding: 40px 36px;
      width: 384px;
      max-width: 95vw;
      /*box-shadow: var(--shadow-xl);*/
    }

    .login-logo {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 28px;
    }

    .login-logo img {
      height: 36px;
      width: auto;
      display: block;
    }
     .login-logo-panel {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 28px;
    }
    .login-logo-panel img{
      height: 42px;
      width: auto;
      display: block;
    }
    .logo-mark {
      width: 34px;
      height: 34px;
      background: var(--color-primary);
      border-radius: var(--radius-md);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      box-shadow: 0 4px 12px rgba(43, 123, 245, 0.30);
    }

    .login-title {
      font-size: 20px;
      font-weight: 700;
      margin-bottom: 4px;
      color: var(--color-gray-900);
      letter-spacing: -0.3px;
    }

    .login-sub {
      color: var(--color-gray-500);
      font-size: 13px;
      margin-bottom: 24px;
    }

    .form-group {
      margin-bottom: 14px;
    }

    .form-label {
      display: block;
      font-size: 12px;
      color: var(--color-gray-700);
      margin-bottom: 6px;
      font-weight: 500;
    }

    .form-input {
      width: 100%;
      background: var(--color-white);
      border: 1px solid var(--color-gray-300);
      border-radius: var(--radius-md);
      padding: 8px 12px;
      color: var(--color-gray-900);
      font-size: 14px;
      font-family: inherit;
      outline: none;
      transition: border-color 150ms, box-shadow 150ms;
      height: 36px;
    }

    .form-input:focus {
      border-color: var(--color-primary);
      box-shadow: var(--shadow-focus);
    }

    .form-input::placeholder {
      color: var(--color-gray-400);
    }

    .form-input:disabled {
      background: var(--color-gray-100);
      color: var(--color-gray-400);
      cursor: not-allowed;
    }

    /* ── BUTTONS ── */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 0 16px;
      height: 36px;
      border-radius: var(--radius-md);
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      border: none;
      transition: background 150ms, box-shadow 150ms, transform 100ms;
      font-family: inherit;
      white-space: nowrap;
    }

    .btn:active {
      transform: scale(0.98);
    }

    .btn-primary {
      background: var(--color-primary);
      color: #FFFFFF;
      box-shadow: var(--shadow-sm);
    }

    .btn-primary:hover {
      background: var(--color-primary-hover);
      box-shadow: var(--shadow-md);
    }

    #view-login .btn-primary {
      width: 100%;
      height: 40px;
      font-size: 14px;
      font-weight: 600;
    }

    .btn-ghost {
      background: transparent;
      color: var(--color-gray-700);
      border: 1px solid var(--color-gray-300);
    }

    .btn-ghost:hover {
      background: var(--color-gray-100);
    }

    .btn-sm {
      height: 28px;
      padding: 0 12px;
      font-size: 12px;
    }

    .btn-danger {
      background: transparent;
      color: var(--color-error-text);
      border: 1px solid rgba(239, 68, 68, .25);
    }

    .btn-danger:hover {
      background: var(--color-error-light);
    }

    .btn-success {
      background: transparent;
      color: var(--color-success-text);
      border: 1px solid rgba(34, 197, 94, .25);
    }

    .btn-success:hover {
      background: var(--color-success-light);
    }

    .btn-secondary {
      background: transparent;
      color: #7c3aed;
      border: 1px solid rgba(124,58,237,.28);
    }
    .btn-secondary:hover { background: rgba(124,58,237,.07); }
    .btn-secondary.live-active {
      color: var(--color-error-text);
      border-color: rgba(239,68,68,.28);
      background: rgba(239,68,68,.05);
    }
    .btn-secondary.live-active:hover { background: var(--color-error-light); }
    .btn-live-dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: currentColor;
      animation: liveButtonPulse 1.4s ease-in-out infinite;
      flex-shrink: 0;
    }
    @keyframes liveButtonPulse {
      0%,100% { opacity:1; transform:scale(1); }
      50%     { opacity:.3; transform:scale(.65); }
    }

    /* ── FAB ── */
    .fab-wrapper { position:relative; display:inline-block; }
    .fab-btn {
      display:flex; align-items:center; justify-content:center;
      width:38px; height:38px; border-radius:10px;
      background:var(--color-primary); color:#fff;
      border:none; cursor:pointer; outline:none;
      box-shadow:var(--shadow-sm);
      transition:background .2s;
    }
    .fab-btn:hover { background:var(--color-primary-hover); }
    .fab-icon { font-size:22px; transition:transform .3s cubic-bezier(.34,1.56,.64,1); user-select:none; }
    .fab-wrapper.open .fab-icon { transform:rotate(45deg); }
    .fab-menu {
      position:absolute; top:calc(100% + 8px); right:0;
      display:flex; flex-direction:column; gap:2px;
      background:var(--surface); border:1px solid var(--border);
      border-radius:14px; box-shadow:var(--shadow-xl); padding:6px;
      min-width:252px;
      pointer-events:none; opacity:0;
      transform:translateY(-6px) scale(.97); filter:blur(3px);
      transition:opacity .2s ease, transform .25s cubic-bezier(.34,1.56,.64,1), filter .2s ease;
      z-index:120;
    }
    .fab-wrapper.open .fab-menu {
      opacity:1; transform:none; filter:blur(0); pointer-events:auto;
    }
    .fab-item {
      display:flex; align-items:center; gap:10px;
      padding:9px 10px; border-radius:10px; border:none; cursor:pointer;
      font-family:inherit; color:var(--color-gray-900);
      background:transparent; width:100%; text-align:left;
      transition:background .15s;
    }
    .fab-item:hover { background:var(--color-gray-100); }
    .fab-item-icon {
      display:flex; align-items:center; justify-content:center;
      width:34px; height:34px; border-radius:9px; flex-shrink:0;
      background:rgba(43,123,245,.1); color:var(--color-primary);
    }
    .fab-item-icon .material-symbols-outlined { font-size:18px; }
    .fab-item-body { display:flex; flex-direction:column; gap:1px; }
    .fab-item-title { font-size:13px; font-weight:600; color:var(--color-gray-900); line-height:1.2; }
    .fab-item-desc { font-size:11px; font-weight:400; color:var(--color-gray-500); line-height:1.3; }
    .fab-item.live-active .fab-item-icon { background:rgba(239,68,68,.18); color:var(--color-error-text); }
    .fab-item.live-active .fab-item-title { color:var(--color-error-text); }
    .fab-item.live-gated .fab-item-icon { background:rgba(124,58,237,.08); color:#7c3aed; opacity:.7; }
    .fab-live-pro {
      display:inline-flex; align-items:center; gap:2px;
      margin-left:6px; padding:0 5px;
      font-size:9px; font-weight:700; letter-spacing:.3px;
      color:#7c3aed; background:rgba(124,58,237,.1);
      border-radius:5px; line-height:15px; vertical-align:middle;
    }
    .fab-live-pro .material-symbols-outlined { font-size:10px; }
    .fab-item.fab-item-sep { border-bottom:1px solid var(--border); padding-bottom:11px; margin-bottom:1px; }

    /* ── LIVE MODAL ── */
    .live-modal-backdrop {
      position: fixed; inset: 0; z-index: 200;
      background: rgba(0,0,0,.45); backdrop-filter: blur(4px);
      display: flex; align-items: center; justify-content: center; padding: 24px;
    }
    .live-modal {
      background: var(--color-white); border-radius: var(--radius-xl);
      box-shadow: var(--shadow-xl); width: 100%; max-width: 440px;
      animation: slideUp 180ms cubic-bezier(.16,1,.3,1);
    }
    .live-modal-header {
      display: flex; align-items: center; gap: 12px;
      padding: 20px 24px 18px; border-bottom: 1px solid var(--color-gray-200);
    }
    .live-modal-icon {
      width: 36px; height: 36px; border-radius: var(--radius-lg);
      background: rgba(124,58,237,.1);
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .live-modal-title { font-size:15px; font-weight:600; color:var(--color-gray-900); }
    .live-modal-sub   { font-size:12px; color:var(--color-gray-500); margin-top:1px; }
    .live-modal-body  { padding:20px 24px; display:flex; flex-direction:column; gap:16px; }
    .live-modal-footer {
      display:flex; gap:8px; justify-content:flex-end;
      padding:16px 24px; border-top:1px solid var(--color-gray-200);
      background: var(--surface2);
    }
    .live-pill {
      height:30px; padding:0 14px; border-radius:var(--radius-full);
      font-size:12px; font-weight:500; cursor:pointer; transition:all 120ms;
      background:var(--color-gray-100); color:var(--color-gray-600); border:none;
    }
    .live-pill.active { background:#7c3aed; color:#fff; }
    .live-pill:hover:not(.active) { background:var(--color-gray-200); }
    .live-tv-list {
      display:flex; flex-direction:column; gap:2px; max-height:148px; overflow-y:auto;
      border:1px solid var(--border); border-radius:var(--radius-md); padding:6px; margin-top:8px;
    }
    .live-tv-item {
      display:flex; align-items:center; gap:8px;
      padding:5px 8px; border-radius:var(--radius-sm);
      font-size:13px; color:var(--text); cursor:pointer; transition:background 80ms;
    }
    .live-tv-item:hover { background:var(--color-gray-50); }
    .btn-start-live {
      background:#7c3aed; color:#fff; border:none;
      box-shadow:0 2px 8px rgba(124,58,237,.28);
    }
    .btn-start-live:hover { background:#6d28d9; }
    .live-url-hint {
      font-size:11px; color:var(--color-gray-400); margin-top:5px;
      font-family:'JetBrains Mono',monospace;
      overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    }

    .btn-start-screen {
      background:#2B7BF5; color:#fff; border:none;
      box-shadow:0 2px 8px rgba(43,123,245,.28);
    }
    .btn-start-screen:hover { background:#1a68d8; }
    .screen-share-tv-list {
      display:flex; flex-direction:column; gap:2px; max-height:180px; overflow-y:auto;
      border:1px solid var(--border); border-radius:var(--radius-md); padding:6px; margin-top:8px;
    }
    .screen-share-tv-item {
      display:flex; align-items:center; gap:8px;
      padding:6px 8px; border-radius:var(--radius-sm);
      font-size:13px; color:var(--text); cursor:pointer; transition:background 80ms;
    }
    .screen-share-tv-item:hover { background:var(--color-gray-50); }
    .screen-share-tv-item input[type=radio] { accent-color:#2B7BF5; flex-shrink:0; }
    .fab-screen-btn.screen-active { background:#2B7BF5 !important; color:#fff !important; border-color:#2B7BF5 !important; }

    .btn-warning {
      background: transparent;
      color: var(--color-warning-text);
      border: 1px solid rgba(245, 158, 11, .25);
    }

    .btn-warning:hover {
      background: var(--color-warning-light);
    }

    /* ── ADMIN SHELL ── */
    #view-admin {
      flex-direction: row;
      height: 100vh;
      overflow: hidden;
    }

    .sidebar {
      width: 240px;
      min-width: 240px;
      background: var(--color-white);
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      padding: 6px 0;
      overflow: hidden;
      transition: width 260ms var(--ease-default), min-width 260ms var(--ease-default);
      flex-shrink: 0;
    }

    /* ── COLLAPSED (icon-only) ── */
    .sidebar.collapsed {
      width: 56px;
      min-width: 56px;
    }

    .sidebar.collapsed .sidebar-logo {
      justify-content: center;
      padding: 10px 8px 14px;
      gap: 0;
    }

    .sidebar.collapsed .sidebar-logo .logo-full { display: none; }
    .sidebar.collapsed .sidebar-logo .sidebar-toggle-btn { display: none; }
    .sidebar.collapsed .logo-collapsed { display: flex; }

    .sidebar.collapsed .nav-item {
      justify-content: center;
      padding: 9px 0;
      margin: 1px 6px;
      gap: 0;
    }

    .sidebar.collapsed .nav-item .nav-label { display: none; }

    .sidebar.collapsed .nav-item.active::before { display: none; }

    .sidebar.collapsed .sidebar-bottom { padding: 12px 6px; }

    .sidebar.collapsed .user-profile {
      justify-content: center;
      padding: 8px 6px;
    }

    .sidebar.collapsed .user-info,
    .sidebar.collapsed .user-chevron { display: none; }

    .sidebar.collapsed .user-skeleton .sk-lines { display: none; }

    /* ── SIDEBAR LOGO AREA ── */
    .sidebar-logo {
      padding: 10px 12px 14px 16px;
      display: flex;
      align-items: center;
      gap: 9px;
      justify-content: space-between;
      margin-bottom: 8px;
    }

    .sidebar-logo .logo-full {
      height: 30px;
      width: auto;
      display: block;
    }

    /* x-logo shown only when collapsed */
    .logo-collapsed {
      display: none;
      width: 36px;
      height: 36px;
      border-radius: var(--radius-md);
      align-items: center;
      justify-content: center;
      cursor: pointer;
      position: relative;
      transition: background 150ms;
    }

    .logo-collapsed:hover { background: var(--color-gray-100); }

    .logo-collapsed .lc-img {
      width: 26px;
      height: auto;
      transition: opacity 120ms;
    }

    .logo-collapsed .lc-icon {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      color: var(--color-gray-500);
      opacity: 0;
      transition: opacity 120ms;
    }

    .logo-collapsed:hover .lc-img { opacity: 0; }
    .logo-collapsed:hover .lc-icon { opacity: 1; }

    /* ── SIDEBAR TOGGLE BTN ── */
    .sidebar-toggle-btn {
      width: 30px;
      height: 30px;
      border-radius: var(--radius-md);
      border: none;
      background: transparent;
      cursor: pointer;
      color: var(--color-gray-400);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: background 150ms, color 150ms;
    }

    .sidebar-toggle-btn:hover {
      background: var(--color-gray-100);
      color: var(--color-gray-700);
    }

    .sidebar-toggle-btn .material-symbols-outlined { font-size: 20px; }

    .nav-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      font-size: 13.5px;
      color: var(--color-gray-500);
      cursor: pointer;
      transition: all 150ms;
      position: relative;
      margin: 1px 8px;
      border-radius: var(--radius-md);
      font-weight: 500;
    }

    .nav-item:hover {
      color: var(--color-gray-900);
      background: var(--color-gray-100);
    }

    .nav-item.active {
      color: var(--color-primary);
      background: var(--color-primary-light);
    }

    .nav-item.active::before {
      /*content: '';*/
      position: absolute;
      left: -8px;
      top: 6px;
      bottom: 6px;
      width: 3px;
      background: var(--color-primary);
      border-radius: 0 3px 3px 0;
    }

    .nav-icon {
      font-size: 20px;
      width: 22px;
      text-align: center;
      flex-shrink: 0;
      line-height: 1;
    }

    .sidebar-bottom {
      margin-top: auto;
      /* padding-bottom acomoda a barra de gestos quando rodando como app. */
      padding: 12px 10px max(12px, env(safe-area-inset-bottom, 0px));
      border-top: 1px solid var(--color-gray-200);
    }

    /* ── USER PROFILE WIDGET ── */
    .user-profile {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 10px;
      border-radius: 7px;
      cursor: pointer;
      transition: background 150ms;
      position: relative;
      width: 100%;
    }

    .user-profile:hover {
      background: var(--color-gray-100);
    }

    .user-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      flex-shrink: 0;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 600;
      color: #fff;
      overflow: hidden;
      user-select: none;
      position: relative;
    }

    .user-avatar img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%;
    }

    .user-info {
      flex: 1;
      min-width: 0;
    }

    .user-name {
      font-size: 13px;
      font-weight: 600;
      color: var(--color-gray-900);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .user-meta {
      font-size: 11px;
      color: var(--color-gray-500);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .user-chevron {
      font-size: 16px;
      color: var(--color-gray-400);
      flex-shrink: 0;
    }

    .user-skeleton {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 10px;
    }

    .sk-circle {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--color-gray-200);
      animation: sk-pulse 1.4s ease-in-out infinite;
      flex-shrink: 0;
    }

    .sk-lines {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    .sk-line {
      height: 10px;
      border-radius: 4px;
      background: var(--color-gray-200);
      animation: sk-pulse 1.4s ease-in-out infinite;
    }

    .sk-line.short {
      width: 65%;
    }

    @keyframes sk-pulse {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: .4;
      }
    }

    .user-dropdown {
      position: absolute;
      bottom: calc(100% + 6px);
      left: 0;
      right: 0;
      background: var(--color-white);
      border: 1px solid var(--color-gray-200);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-lg);
      overflow: hidden;
      display: none;
      z-index: 200;
    }

    .user-dropdown.open {
      display: block;
      animation: viewIn .12s var(--ease-enter);
    }

    .dd-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 9px 14px;
      font-size: 13px;
      color: var(--color-gray-700);
      cursor: pointer;
      transition: background 120ms;
    }

    .dd-item:hover {
      background: var(--color-gray-100);
    }

    .dd-item .material-symbols-outlined {
      font-size: 17px;
      color: var(--color-gray-500);
    }

    .dd-item.danger {
      color: var(--color-error-text);
    }

    .dd-item.danger .material-symbols-outlined {
      color: var(--color-error-text);
    }

    .dd-divider {
      height: 1px;
      background: var(--color-gray-200);
      margin: 3px 0;
    }

    .plan-badge {
      display: inline-flex;
      align-items: center;
      font-size: 10px;
      font-weight: 600;
      padding: 0 6px;
      height: 18px;
      border-radius: var(--radius-sm);
      border: 1px solid transparent;
      letter-spacing: 0.3px;
      background: var(--color-primary-light);
      color: var(--color-primary);
      border-color: var(--badge-primary-border);
    }

    .plan-badge.free {
      background: var(--color-gray-100);
      color: var(--color-gray-500);
      border-color: var(--badge-neutral-border);
    }

    .plan-days {
      font-size: 10px;
      color: var(--color-gray-400);
      white-space: nowrap;
    }
    .plan-days.urgent {
      color: var(--color-error);
      font-weight: 600;
    }

    .plan-badge.pro {
      background: #ede9fe;
      color: #7c3aed;
      border-color: #ddd6fe;
    }

    .plan-badge.enterprise {
      background: #fef3c7;
      color: #92400e;
      border-color: #fde68a;
    }

    .main-content {
      flex: 1;
      overflow-y: auto;
      background: var(--bg);
    }

    .page {
      display: none;
      padding: 32px 32px;
      animation: viewIn .2s var(--ease-enter);
    }

    .page.active {
      display: block;
    }

    .page-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 24px;
    }

    .page-title {
      font-size: 20px;
      font-weight: 700;
      letter-spacing: -0.3px;
      color: var(--color-gray-900);
    }

    .page-sub {
      font-size: 13px;
      color: var(--color-gray-500);
      margin-top: 2px;
    }

    /* ── STAT CARDS ── */
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      margin-bottom: 24px;
    }

    /* Grid da Dashboard: 4 cards de contexto. 4 colunas no desktop, 2 no
       tablet e 1 empilhado no mobile (evita o caso feio de coluna órfã). */
    .stats-grid.dash-stats {
      grid-template-columns: repeat(4, 1fr);
    }
    @media (max-width: 960px) {
      .stats-grid.dash-stats {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    @media (max-width: 600px) {
      .stats-grid.dash-stats {
        grid-template-columns: 1fr;
      }
    }
    .dash-stats .stat-icon { width: 34px; height: 34px; }
    .dash-stats .stat-icon .material-symbols-outlined { font-size: 19px; }

    /* Mini barra de progresso usada nos cards de uso de IA. */
    .ai-bar { height: 6px; border-radius: 999px; background: var(--color-gray-200); overflow: hidden; margin-top: 2px; }
    .ai-bar-fill { height: 100%; border-radius: 999px; background: var(--accent2, #7C5CFC); transition: width 400ms ease; }
    .ai-bar-fill.warn { background: var(--color-warning, #F59E0B); }

    .stat-card {
      background: var(--color-white);
      border: 1px solid var(--color-gray-200);
      border-radius: var(--radius-xl);
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      transition: border-color 200ms, box-shadow 200ms;
    }

    .stat-card:hover {
      border-color: var(--color-gray-300);
      box-shadow: var(--shadow-md);
    }

    .stat-card-hd {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .stat-label {
      font-size: 11px;
      font-weight: 600;
      color: var(--color-gray-500);
      text-transform: uppercase;
      letter-spacing: 0.6px;
    }

    .stat-icon {
      width: 30px;
      height: 30px;
      border-radius: var(--radius-md);
      background: var(--color-gray-100);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .stat-icon .material-symbols-outlined {
      font-size: 17px;
    }

    .stat-val {
      font-size: 36px;
      font-weight: 800;
      line-height: 1;
      letter-spacing: -1.5px;
      font-variant-numeric: tabular-nums;
    }

    /* ── DASH LOWER GRID ── */
    .dash-lower {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      align-items: start;
    }

    @media (max-width: 960px) {
      .dash-lower {
        grid-template-columns: 1fr;
      }
      #analytics-chart-ranking-grid,
      #analytics-rx-polls-grid {
        grid-template-columns: 1fr !important;
      }
    }

    /* ── SHARED PANEL HEADER (usado em content-table e team-panel) ── */
    .panel-hd {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 20px;
      border-bottom: 1px solid var(--color-gray-200);
      background: var(--surface2);
    }

    .panel-hd-title {
      font-size: 11px;
      font-weight: 600;
      color: var(--color-gray-500);
      text-transform: uppercase;
      letter-spacing: .6px;
    }

    .panel-hd-action {
      font-size: 12px;
      color: var(--color-primary);
      cursor: pointer;
      font-weight: 500;
    }

    .panel-hd-action:hover {
      text-decoration: underline;
    }

    .panel-count-pill {
      font-size: 11px;
      font-weight: 600;
      background: var(--color-primary-light);
      color: var(--color-primary);
      border-radius: var(--radius-sm);
      border: 1px solid var(--badge-primary-border);
      padding: 0 8px;
      height: 20px;
      display: inline-flex;
      align-items: center;
    }

    /* ── TEAM PANEL ── */
    .team-panel {
      background: var(--color-white);
      border: 1px solid var(--color-gray-200);
      border-radius: var(--radius-xl);
      overflow: hidden;
    }

    .team-panel-hd {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 20px;
      border-bottom: 1px solid var(--color-gray-200);
      background: var(--surface2);
    }

    .team-panel-title {
      font-size: 11px;
      font-weight: 600;
      color: var(--color-gray-500);
      text-transform: uppercase;
      letter-spacing: .6px;
    }

    .team-count-pill {
      font-size: 11px;
      font-weight: 600;
      background: var(--color-primary-light);
      color: var(--color-primary);
      border-radius: var(--radius-sm);
      border: 1px solid var(--badge-primary-border);
      padding: 0 8px;
      height: 20px;
      display: inline-flex;
      align-items: center;
    }

    .member-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 11px 18px;
      border-bottom: 1px solid var(--color-gray-100);
      transition: background 120ms;
    }

    .member-row:last-child {
      border-bottom: none;
    }

    .member-row:hover {
      background: var(--color-gray-50);
    }

    .member-av {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 700;
      color: #fff;
      flex-shrink: 0;
      letter-spacing: .5px;
    }

    .member-info {
      flex: 1;
      min-width: 0;
    }

    .member-name {
      font-size: 13px;
      font-weight: 500;
      color: var(--color-gray-900);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .member-email {
      font-size: 11px;
      color: var(--color-gray-500);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .role-pill {
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .5px;
      padding: 0 7px;
      height: 18px;
      display: inline-flex;
      align-items: center;
      border-radius: var(--radius-sm);
      border: 1px solid transparent;
      flex-shrink: 0;
    }

    .role-owner {
      background: var(--color-primary-light);
      color: var(--color-primary-dark);
      border-color: var(--badge-primary-border);
    }

    .role-member {
      background: var(--color-gray-100);
      color: var(--color-gray-500);
      border-color: var(--badge-neutral-border);
    }

    .member-del {
      width: 26px;
      height: 26px;
      border-radius: var(--radius-sm);
      background: transparent;
      border: 1px solid transparent;
      color: var(--color-gray-300);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      transition: all 130ms;
      flex-shrink: 0;
    }

    .member-del:hover {
      background: var(--color-error-light);
      border-color: var(--color-error);
      color: var(--color-error);
    }

    .team-empty {
      padding: 32px 20px;
      text-align: center;
    }

    .team-empty-icon {
      font-size: 28px;
      margin-bottom: 8px;
      opacity: .35;
    }

    .team-empty-text {
      font-size: 13px;
      color: var(--color-gray-500);
      line-height: 1.5;
    }

    /* ── CONTENT TABLE ── */
    .content-table {
      background: var(--color-white);
      border: 1px solid var(--color-gray-200);
      border-radius: var(--radius-xl);
      overflow: hidden;
    }

    /* grade única — fonte de verdade para header e rows */
    .ct-header,
    .ct-row {
      display: grid;
      grid-template-columns: 26px 1fr 90px 130px 192px;
      gap: 12px;
      padding: 10px 20px;
      border-bottom: 1px solid var(--color-gray-200);
      align-items: center;
    }

    .ct-header {
      font-size: 11px;
      color: var(--color-gray-500);
      text-transform: uppercase;
      letter-spacing: .6px;
      font-weight: 600;
      background: var(--surface2);
    }

    .ct-row {
      padding: 12px 20px;
      transition: background 100ms;
    }

    .ct-row:last-child {
      border-bottom: none;
    }

    .ct-row:hover {
      background: var(--color-gray-50);
    }

    .ct-title {
      font-weight: 500;
      font-size: 13.5px;
      color: var(--color-gray-900);
      min-width: 0;
      max-width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* garante que o cell 1fr não expanda além do disponível */
    .ct-row > div:nth-child(2) {
      min-width: 0;
      overflow: hidden;
    }

    .ct-meta {
      font-size: 11.5px;
      color: var(--color-gray-500);
      margin-top: 2px;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 0 7px;
      height: 22px;
      border-radius: var(--radius-sm);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.2px;
      border: 1px solid transparent;
      white-space: nowrap;
    }

    .badge-active,
    .badge-live {
      background: var(--color-success-light);
      color: var(--color-success-text);
      border-color: var(--badge-success-border);
    }

    .badge-created {
      background: var(--color-primary-light);
      color: var(--color-primary);
      border-color: var(--badge-primary-border);
    }

    .badge-draft {
      background: var(--color-gray-100);
      color: var(--color-gray-500);
      border-color: var(--badge-neutral-border);
    }

    .badge-template {
      background: var(--color-primary-light);
      color: var(--color-primary);
      border-color: var(--badge-primary-border);
    }

    .badge-scheduled {
      background: var(--color-warning-light);
      color: var(--color-warning-text);
      border-color: var(--badge-warning-border);
    }

    .badge-expired {
      background: var(--color-gray-100);
      color: var(--color-gray-400);
      border-color: var(--badge-neutral-border);
      text-decoration: line-through;
    }

    .badge-live-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: currentColor;
      opacity: 0.75;
      animation: badgePulse 1.5s infinite;
      flex-shrink: 0;
      display: inline-block;
    }

    @keyframes badgePulse {

      0%,
      100% {
        opacity: 0.75;
      }

      50% {
        opacity: 0.2;
      }
    }

    /* filter chips */
    .filter-chips {
      display: flex;
      gap: 5px;
      flex-wrap: nowrap;
    }

    .filter-chip {
      padding: 5px 11px;
      border-radius: var(--radius-full);
      font-size: 12px;
      font-weight: 500;
      border: 1px solid var(--color-gray-300);
      background: transparent;
      color: var(--color-gray-500);
      cursor: pointer;
      font-family: inherit;
      transition: all 150ms;
      white-space: nowrap;
      width: auto;
    }

    .filter-chip:hover:not(.active) {
      background: var(--color-gray-100);
      color: var(--color-gray-700);
    }

    .filter-chip.active {
      background: var(--color-primary);
      border-color: var(--color-primary);
      color: #fff;
    }

    .header-search-wrap {
      position: relative;
      display: flex;
      align-items: center;
    }
    .header-search-icon {
      position: absolute;
      left: 9px;
      font-size: 17px;
      color: var(--color-gray-400);
      pointer-events: none;
    }
    .header-search-input {
      height: 36px;
      border: 1px solid var(--color-gray-300);
      border-radius: var(--radius-md);
      padding: 0 12px 0 32px;
      font-size: 13px;
      font-family: inherit;
      color: var(--color-gray-900);
      background: var(--color-white);
      outline: none;
      width: 200px;
      transition: border-color 150ms, box-shadow 150ms;
    }
    .header-search-input::placeholder { color: var(--color-gray-400); }
    .header-search-input:focus {
      border-color: var(--color-primary);
      box-shadow: var(--shadow-focus);
    }

    /* tipo description */
    #tipo-desc {
      font-size: 12px;
      color: var(--text2);
      margin: -8px 0 14px;
      min-height: 16px;
      line-height: 1.4;
    }

    .ct-actions {
      display: flex;
      gap: 4px;
      justify-content: flex-end;
    }

    /* Botões de ação quadrados e compactos — largura previsível para não
       transbordar a coluna e colar na coluna de TVs (qa tem até 6 botões). */
    .ct-actions .btn-sm {
      width: 28px;
      padding: 0;
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .ct-header > :last-child {
      text-align: right;
    }

    /* ── DRAWER RESIZE ── */
    .drawer-resizer {
      position: absolute;
      top: 0;
      left: -5px;
      bottom: 0;
      width: 10px;
      cursor: ew-resize;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .drawer-resizer::before {
      content: '';
      width: 2px;
      height: 100%;
      background: var(--color-gray-200);
      transition: background 150ms, width 150ms;
    }

    .drawer-resizer::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 4px;
      height: 40px;
      border-radius: var(--radius-full);
      background: var(--color-gray-300);
      transition: background 150ms, height 150ms;
    }

    .drawer-resizer:hover::before,
    .drawer-resizer.resizing::before {
      background: var(--color-primary);
      width: 3px;
    }

    .drawer-resizer:hover::after,
    .drawer-resizer.resizing::after {
      background: var(--color-primary);
      height: 56px;
    }

    /* ── DRAWER ── */
    .modal-overlay {
      position: fixed;
      inset: 0;
      z-index: 100;
      background: rgba(0, 0, 0, 0);
      pointer-events: none;
      transition: background .25s var(--ease-default);
    }

    .modal-overlay.open {
      background: rgba(0, 0, 0, 0.4);
      pointer-events: all;
    }

    .modal {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      width: 800px;
      max-width: 130vw;
      background: var(--color-white);
      border-left: 1px solid var(--color-gray-200);
      display: flex;
      flex-direction: column;
      transform: translateX(100%);
      transition: transform .35s var(--ease-default);
      box-shadow: var(--shadow-xl);
      overflow: visible;
    }

    .modal-overlay.open .modal {
      transform: translateX(0);
    }

    .modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 24px 16px;
      border-bottom: 1px solid var(--color-gray-200);
      flex-shrink: 0;
    }

    .modal-body {
      flex: 1;
      overflow-y: auto;
      padding: 24px;
    }

    .modal-title {
      font-size: 16px;
      font-weight: 700;
      color: var(--color-gray-900);
      letter-spacing: -0.2px;
    }

    .close-btn {
      background: var(--color-gray-100);
      border: 1px solid var(--color-gray-200);
      border-radius: var(--radius-md);
      width: 32px;
      height: 32px;
      padding: 0;
      color: var(--color-gray-500);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 150ms;
      flex-shrink: 0;
    }

    .close-btn:hover {
      color: var(--color-gray-900);
      background: var(--color-gray-200);
    }

    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }

    .form-textarea {
      resize: vertical;
      min-height: 88px;
      height: auto;
    }

    .form-select {
      width: 100%;
      background: var(--color-white);
      border: 1px solid var(--color-gray-300);
      border-radius: var(--radius-md);
      padding: 0 12px;
      color: var(--color-gray-900);
      height: 36px;
      font-size: 14px;
      font-family: inherit;
      outline: none;
      transition: border-color 150ms, box-shadow 150ms;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7585' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 10px center;
      padding-right: 32px;
    }

    .form-select:focus {
      border-color: var(--color-primary);
      box-shadow: var(--shadow-focus);
    }

    .img-compact-row {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .img-compact-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      height: 32px;
      padding: 0 12px;
      border: 1px dashed var(--color-gray-300);
      border-radius: var(--radius-sm);
      background: transparent;
      color: var(--color-gray-500);
      font-size: 12px;
      cursor: pointer;
      transition: border-color 150ms, color 150ms, background 150ms;
      white-space: nowrap;
    }
    .img-compact-btn:hover {
      border-color: var(--color-primary);
      color: var(--color-primary);
      background: var(--color-primary-light);
    }
    .img-compact-btn:disabled {
      opacity: .6;
      cursor: default;
    }
    .img-compact-thumb {
      width: 46px;
      height: 28px;
      object-fit: cover;
      border-radius: var(--radius-sm);
      border: 1px solid var(--color-gray-200);
      flex-shrink: 0;
    }
    .img-compact-remove {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      border: none;
      background: none;
      color: var(--color-gray-400);
      cursor: pointer;
      border-radius: var(--radius-sm);
      padding: 0;
      transition: color 150ms, background 150ms;
    }
    .img-compact-remove:hover {
      color: var(--color-error);
      background: var(--color-error-light);
    }

    .toggle-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 0;
      border-bottom: 1px solid var(--color-gray-200);
    }

    .toggle-row:last-of-type {
      border-bottom: none;
      padding-bottom: 0;
    }

    .toggle {
      width: 36px;
      height: 20px;
      background: var(--color-gray-300);
      border-radius: var(--radius-full);
      cursor: pointer;
      position: relative;
      transition: background 150ms;
      flex-shrink: 0;
    }

    .toggle.on {
      background: var(--color-primary);
    }

    .toggle::after {
      content: '';
      position: absolute;
      width: 16px;
      height: 16px;
      background: #fff;
      border-radius: 50%;
      top: 2px;
      left: 2px;
      transition: left 150ms;
      box-shadow: var(--shadow-sm);
    }

    .toggle.on::after {
      left: 18px;
    }

    .modal-footer {
      display: flex;
      gap: 8px;
      align-items: center;
      justify-content: space-between;
      padding: 16px 24px;
      border-top: 1px solid var(--color-gray-200);
      flex-shrink: 0;
      background: var(--surface2);
    }

    .modal-footer-end {
      display: flex;
      gap: 8px;
    }

    /* ── CONTENT DRAWER — layout 3 colunas ── */
    #content-drawer-modal {
      width: min(94vw, 1360px);
    }
    #content-drawer-modal .modal-body {
      padding: 0;
      overflow: hidden;
    }
    .drawer-layout {
      display: grid;
      grid-template-columns: 192px 1fr var(--dpreview-w, 296px);
      height: 100%;
      overflow: hidden;
    }

    /* Sidebar */
    .drawer-sidebar {
      background: #ffffff;
      display: flex;
      flex-direction: column;
      padding: 20px 10px;
      gap: 2px;
      border-right: 1px solid #e5e7eb;
      overflow-y: auto;
      flex-shrink: 0;
    }
    .drawer-sidebar-label {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 1.2px;
      color: var(--color-gray-400);
      text-transform: uppercase;
      padding: 0 10px;
      margin-bottom: 10px;
    }
    .drawer-cat-btn {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 0;
      padding: 9px 12px;
      height: auto;
      border-radius: var(--radius-md);
      border: none;
      border-bottom: none;
      background: transparent;
      cursor: pointer;
      text-align: left;
      width: 100%;
      margin-bottom: 0;
      justify-content: flex-start;
      transition: background 150ms;
    }
    .drawer-cat-name {
      font-size: 13px;
      font-weight: 500;
      color: var(--color-gray-600);
      font-family: 'Inter', sans-serif;
      line-height: 1.2;
      transition: color 150ms;
      display: block;
    }
    .drawer-cat-btn:hover { background: rgba(0,0,0,0.05); }
    .drawer-cat-btn:hover .drawer-cat-name { color: var(--color-gray-900); }

    .drawer-cat-btn.active[data-cat="conteudo"]   { background: rgba(43,123,245,0.1); }
    .drawer-cat-btn.active[data-cat="conteudo"] .drawer-cat-name   { color: var(--color-primary); font-weight: 600; }
    .drawer-cat-btn.active[data-cat="widget"]     { background: rgba(124,58,237,0.1); }
    .drawer-cat-btn.active[data-cat="widget"] .drawer-cat-name     { color: #7C3AED; font-weight: 600; }
    .drawer-cat-btn.active[data-cat="midia"]      { background: rgba(245,158,11,0.1); }
    .drawer-cat-btn.active[data-cat="midia"] .drawer-cat-name      { color: #B45309; font-weight: 600; }
    .drawer-cat-btn.active[data-cat="interativo"] { background: rgba(16,185,129,0.1); }
    .drawer-cat-btn.active[data-cat="interativo"] .drawer-cat-name { color: #059669; font-weight: 600; }

    /* Center content */
    .drawer-content {
      overflow-y: auto;
      padding: 24px 28px;
      display: flex;
      flex-direction: column;
      gap: 0;
    }
    .drawer-step { margin-bottom: 28px; }
    .drawer-step-label {
      display: flex;
      align-items: center;
      gap: 9px;
      font-size: 13px;
      font-weight: 700;
      color: var(--color-gray-700);
      margin-bottom: 16px;
      letter-spacing: -0.1px;
    }
    .drawer-step-num {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: var(--color-primary);
      color: #fff;
      font-size: 11px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    /* Type cards */
    .tipo-card-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
      gap: 5px;
    }
    .tipo-card {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 13px 14px;
      border-radius: 12px;
      border: 1.5px solid var(--color-gray-200);
      background: var(--color-white);
      cursor: pointer;
      text-align: left;
      transition: border-color 160ms, box-shadow 160ms, transform 160ms;
      width: 100%;
    }
    .tipo-card:hover {
      border-color: var(--color-gray-300);
      box-shadow: 0 2px 12px rgba(0,0,0,0.07);
      transform: translateY(-1px);
    }
    .tipo-card.active {
      border-color: var(--color-primary);
      background: rgba(43,123,245,0.035);
      box-shadow: 0 0 0 3px rgba(43,123,245,0.1);
    }
    .tipo-card-title {
      font-size: 11px;
      font-weight: 500;
      color: inherit;
      line-height: 1.2;
      font-family: 'Inter', sans-serif;
    }

    /* Distribuição section */
    .drawer-distribuicao {
      margin-top: 4px;
      padding-top: 20px;
      border-top: 1px solid var(--color-gray-100);
    }
    .drawer-distribuicao-label {
      font-size: 10px;
      font-weight: 700;
      color: var(--color-gray-400);
      text-transform: uppercase;
      letter-spacing: .8px;
      margin-bottom: 14px;
    }

    /* Preview panel */
    .drawer-preview {
      background: #ffffff;
      display: flex;
      flex-direction: column;
      overflow: visible;
      border-left: 1px solid rgba(255,255,255,0.06);
      position: relative;
    }
    .drawer-preview-inner-scroll {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
    }
    /* Preview resizer fica na borda esquerda (dentro do painel) */
    #preview-panel-resizer { left: 0; }

    /* Clima mini-card no preview */
    .dpreview-clima-card {
      background: linear-gradient(160deg, #060c1e 0%, #0b1530 100%);
      border-radius: 12px;
      aspect-ratio: 16/9;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      text-align: center;
      padding: 16px;
    }
    .dpreview-clima-icon { font-size: 32px; line-height: 1; }
    .dpreview-clima-temp { font-size: 32px; font-weight: 800; color: #fff; line-height: 1; letter-spacing: -2px; }
    .dpreview-clima-feels { font-size: 11px; color: rgba(255,255,255,.5); }
    .dpreview-clima-city { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.75); margin-top: 2px; }
    .drawer-preview-header {
      padding: 20px 20px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
      margin-bottom: 16px;
    }
    .drawer-preview-title {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 1.2px;
      color: var(--color-gray-400);
      text-transform: uppercase;
    }
    .drawer-preview-tipo-badge {
      font-size: 11px;
      font-weight: 600;
      color: var(--color-gray-600);
      font-family: 'Inter', sans-serif;
      background: var(--color-gray-100);
      padding: 3px 9px;
      border-radius: 20px;
    }
    .drawer-preview-inner {
      padding: 0 20px 24px;
      flex: 1;
    }
    /* ── Análise de conteúdo (Compatibilidade / Acessibilidade / Sentimento) ── */
    .dpa { border-top: 1px solid var(--color-gray-200); margin: 0 20px; padding: 16px 0 22px; font-family: 'Inter', sans-serif; }
    .dpa-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
    .dpa-title { font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--color-gray-400); }
    .dpa-score { font-size: 13px; font-weight: 800; font-family: 'JetBrains Mono', monospace; color: var(--color-gray-500); }
    .dpa-score.dpa-good { color: var(--color-success); }
    .dpa-score.dpa-ok { color: var(--color-warning); }
    .dpa-score.dpa-bad { color: var(--color-error); }
    .dpa-bar { height: 6px; border-radius: 99px; background: var(--color-gray-200); overflow: hidden; margin-bottom: 14px; }
    .dpa-bar-fill { height: 100%; border-radius: 99px; width: 0; transition: width .25s ease, background .25s ease; }
    .dpa-bar-fill.dpa-bar-good { background: var(--color-success); }
    .dpa-bar-fill.dpa-bar-ok { background: var(--color-warning); }
    .dpa-bar-fill.dpa-bar-bad { background: var(--color-error); }
    .dpa-list { display: flex; flex-direction: column; gap: 9px; margin-bottom: 14px; }
    .dpa-item { display: flex; align-items: center; gap: 8px; font-size: 11.5px; }
    .dpa-ic { font-size: 16px; flex-shrink: 0; }
    .dpa-item.ok .dpa-ic { color: var(--color-success); }
    .dpa-item.warn .dpa-ic { color: var(--color-warning); }
    .dpa-item.info .dpa-ic { color: var(--color-gray-400); }
    .dpa-item-label { font-weight: 600; color: var(--color-gray-700); white-space: nowrap; }
    .dpa-item-detail { margin-left: auto; color: var(--color-gray-500); font-size: 10.5px; text-align: right; }
    .dpa-sent { display: flex; align-items: center; gap: 10px; background: var(--color-gray-50); border: 1px solid var(--color-gray-200); border-radius: 10px; padding: 10px 12px; }
    .dpa-sent-emoji { font-size: 20px; line-height: 1; flex-shrink: 0; }
    .dpa-sent-body { display: flex; flex-direction: column; gap: 1px; }
    .dpa-sent-label { font-size: 12px; font-weight: 700; color: var(--color-gray-900); }
    .dpa-sent-detail { font-size: 10.5px; color: var(--color-gray-500); }
    .dpreview-section-label {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .8px;
      color: var(--color-gray-400);
      text-transform: uppercase;
    }
    .dpreview-placeholder {
      aspect-ratio: 16/9;
      background: var(--color-gray-50);
      border: 1.5px dashed var(--color-gray-300);
      border-radius: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      color: var(--color-gray-400);
      font-size: 12px;
      text-align: center;
      line-height: 1.5;
      font-family: 'Inter', sans-serif;
    }

    .preview-card {
      background: #0a0a12;
      border-radius: var(--radius-lg);
      overflow: hidden;
      aspect-ratio: 16/9;
      position: relative;
      min-height: 180px;
    }

    .preview-bg {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      filter: brightness(.48) blur(0px);
      transform: scale(1.06);
    }

    .preview-content {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 18px 28px;
      background: linear-gradient(to right, rgba(0, 0, 0, .8) 55%, transparent 100%);
      text-align: left;
    }

    .preview-title {
      font-size: 17px;
      font-weight: 700;
      color: #fff;
      margin-bottom: 5px;
    }

    .preview-body {
      font-size: 12px;
      color: rgba(255, 255, 255, .72);
      line-height: 1.5;
    }

    /* Fix: preview cards no painel direito do drawer não devem ter altura forçada */
    .drawer-preview .preview-card {
      aspect-ratio: unset;
      min-height: unset;
    }
    .drawer-preview .preview-content {
      position: relative;
      inset: auto;
      padding: 14px 18px;
      justify-content: flex-start;
      background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.8));
    }

    /* ── RICH TEXT EDITOR ── */
    .rte-toolbar {
      display: flex;
      align-items: center;
      gap: 2px;
      padding: 5px 8px;
      background: var(--color-gray-50);
      border: 1px solid var(--color-gray-200);
      border-bottom: none;
      border-radius: var(--radius-sm) var(--radius-sm) 0 0;
      flex-wrap: wrap;
    }
    .rte-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 26px;
      border: none;
      background: transparent;
      border-radius: var(--radius-sm);
      cursor: pointer;
      color: var(--color-gray-600);
      transition: background 120ms, color 120ms;
      padding: 0;
    }
    .rte-btn:hover { background: var(--color-gray-200); color: var(--color-gray-900); }
    .rte-btn.active { background: var(--accent-dim); color: var(--accent); }
    .rte-btn .material-symbols-outlined { font-size: 17px; }
    .rte-sep { width: 1px; height: 18px; background: var(--color-gray-200); margin: 0 3px; flex-shrink: 0; }
    .rte-select {
      height: 26px;
      border: 1px solid var(--color-gray-200);
      border-radius: var(--radius-sm);
      background: var(--surface);
      color: var(--color-gray-700);
      font-size: 11px;
      padding: 0 4px;
      cursor: pointer;
      max-width: 72px;
    }
    .rte-color {
      width: 26px;
      height: 26px;
      border: 1px solid var(--color-gray-200);
      border-radius: var(--radius-sm);
      padding: 2px;
      cursor: pointer;
      background: transparent;
      flex-shrink: 0;
    }
    .rte-editor {
      min-height: 90px;
      border-radius: 0 0 var(--radius-sm) var(--radius-sm) !important;
      cursor: text;
      line-height: 1.5;
      overflow-y: auto;
      position: relative;
    }
    .rte-editor[data-empty="true"]::before {
      content: attr(data-placeholder);
      color: var(--color-gray-400);
      pointer-events: none;
      position: absolute;
      top: 10px;
      left: 12px;
    }
    .rte-editor:focus { outline: none; }

    /* ── STYLE CONTROLS (tamanho e cor do título/mensagem) ── */
    .style-controls-row {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    .size-control {
      display: flex;
      align-items: center;
      gap: 3px;
      font-size: 11px;
      color: var(--color-gray-500);
    }
    .size-btn {
      width: 20px;
      height: 20px;
      border: 1px solid var(--color-gray-200);
      border-radius: var(--radius-sm);
      background: var(--surface);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      line-height: 1;
      color: var(--color-gray-700);
      transition: background 120ms;
      padding: 0;
    }
    .size-btn:hover { background: var(--color-gray-100); }
    .size-val {
      min-width: 22px;
      text-align: center;
      font-size: 11px;
      color: var(--color-gray-900);
      font-weight: 600;
      font-variant-numeric: tabular-nums;
    }
    .color-swatch {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      color: var(--color-gray-500);
    }
    .color-swatch input[type=color] {
      width: 22px;
      height: 22px;
      border: 1px solid var(--color-gray-200);
      border-radius: var(--radius-sm);
      padding: 1px;
      cursor: pointer;
      background: none;
    }

    /* ── PREVIEW TOGGLE ── */
    .preview-opts-row {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 8px;
    }
    .toggle-label {
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      font-size: 12px;
      color: var(--color-gray-600);
      user-select: none;
    }
    .toggle-label input[type=checkbox] { display: none; }
    .toggle-track {
      width: 30px;
      height: 17px;
      background: var(--color-gray-300);
      border-radius: 9px;
      position: relative;
      transition: background 200ms;
      flex-shrink: 0;
    }
    .toggle-track::after {
      content: '';
      position: absolute;
      width: 13px;
      height: 13px;
      background: white;
      border-radius: 50%;
      top: 2px;
      left: 2px;
      transition: transform 200ms;
      box-shadow: 0 1px 3px rgba(0,0,0,.15);
    }
    .toggle-label input:checked ~ .toggle-track { background: var(--accent); }
    .toggle-label input:checked ~ .toggle-track::after { transform: translateX(13px); }

    /* ── TV INFO ALERT ── */
    .tv-info-alert {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      background: #eff6ff;
      border: 1px solid rgba(43, 123, 245, .25);
      border-left: 4px solid var(--color-primary);
      border-radius: var(--radius-lg);
      padding: 12px 14px 12px 16px;
      margin-bottom: 20px;
      font-size: 13px;
      color: #1e40af;
      line-height: 1.5;
    }

    .tv-info-alert-icon {
      font-size: 18px;
      color: var(--color-primary);
      flex-shrink: 0;
      margin-top: 1px;
    }

    .tv-info-alert-text {
      flex: 1;
    }

    .tv-info-alert-close {
      background: none;
      border: none;
      cursor: pointer;
      font-size: 18px;
      color: #60a5fa;
      flex-shrink: 0;
      line-height: 1;
      padding: 0;
      margin-top: 1px;
      transition: color .15s;
    }

    .tv-info-alert-close:hover {
      color: var(--color-primary);
    }

    /* ── TV CARDS ── */
    .tv-list-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
      gap: 16px;
    }

    .tv-card {
      background: var(--color-white);
      border: 1px solid var(--color-gray-200);
      border-radius: var(--radius-xl);
      padding: 18px 20px;
      transition: box-shadow 200ms, border-color 200ms;
    }

    .tv-card:hover {
      border-color: var(--color-gray-300);
      box-shadow: var(--shadow-md);
    }

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

    .tv-card-name {
      font-weight: 600;
      font-size: 14px;
      color: var(--color-gray-900);
    }

    .tv-card-location {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 12px;
      color: var(--color-gray-500);
      margin-top: 8px;
      min-height: 24px;
      cursor: text;
      border-radius: var(--radius-sm);
      padding: 2px 4px;
      transition: background 120ms;
    }

    .tv-card-location:hover {
      background: var(--color-gray-100);
      color: var(--color-gray-700);
    }

    .tv-card-location-placeholder {
      color: var(--color-gray-300);
      font-style: italic;
    }

    .tv-card-location .material-symbols-outlined {
      font-size: 16px;
      line-height: 1;
      flex-shrink: 0;
      color: var(--color-gray-400);
    }

    .indicator {
      width: 7px;
      height: 7px;
      border-radius: 50%;
    }

    .ind-on {
      background: var(--color-success);
    }

    .ind-off {
      background: var(--color-gray-300);
    }

    /* ── DASH TV PANEL ── */
    .dash-tv-panel {
      background: var(--color-white);
      border: 1px solid var(--color-gray-200);
      border-radius: var(--radius-xl);
      overflow: hidden;
      margin-bottom: 24px;
    }

    .dash-tv-body {
      padding: 16px 20px;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 10px;
    }

    .dash-tv-empty {
      padding: 24px;
      text-align: center;
      color: var(--text2);
      font-size: 13px;
    }

    .dash-tv-card {
      border: 1px solid var(--color-gray-200);
      border-radius: var(--radius-xl);
      padding: 14px 16px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      cursor: pointer;
      transition: box-shadow 200ms, border-color 200ms;
    }

    .dash-tv-card:hover {
      border-color: var(--color-gray-300);
      box-shadow: var(--shadow-md);
    }

    .dash-tv-card-icon {
      width: 36px;
      height: 36px;
      border-radius: var(--radius-md);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .dash-tv-card-icon.on {
      background: var(--color-success-light);
    }

    .dash-tv-card-icon.on .material-symbols-outlined {
      color: var(--color-success-text);
    }

    .dash-tv-card-icon.off {
      background: var(--color-gray-100);
    }

    .dash-tv-card-icon.off .material-symbols-outlined {
      color: var(--color-gray-400);
    }

    .dash-tv-card-name {
      font-size: 13px;
      font-weight: 600;
      color: var(--color-gray-900);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .dash-tv-card-loc {
      font-size: 11px;
      color: var(--color-gray-400);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: flex;
      align-items: center;
      gap: 3px;
      min-height: 16px;
    }

    .dash-tv-card-loc .material-symbols-outlined {
      font-size: 12px;
      flex-shrink: 0;
    }

    .dash-tv-card-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 2px;
    }

    .dash-tv-status {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      font-weight: 500;
      padding: 0 8px;
      height: 22px;
      border-radius: var(--radius-sm);
      border: 1px solid transparent;
    }

    .dash-tv-status.on {
      background: var(--color-success-light);
      color: var(--color-success-text);
      border-color: var(--badge-success-border);
    }

    .dash-tv-status.off {
      background: var(--color-gray-100);
      color: var(--color-gray-500);
      border-color: var(--badge-neutral-border);
    }

    .dash-tv-status-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: currentColor;
      display: inline-block;
    }

    .dash-tv-ct {
      font-size: 11px;
      color: var(--color-gray-400);
      display: flex;
      align-items: center;
      gap: 3px;
    }

    .dash-tv-ct .material-symbols-outlined {
      font-size: 12px;
    }

    .priority-badge {
      display: inline-flex;
      align-items: center;
      padding: 0 7px;
      height: 20px;
      border-radius: var(--radius-sm);
      font-size: 11px;
      font-weight: 500;
      border: 1px solid transparent;
    }

    .p1 {
      background: var(--color-error-light);
      color: var(--color-error-text);
      border-color: var(--badge-error-border);
    }

    .p2 {
      background: var(--color-warning-light);
      color: var(--color-warning-text);
      border-color: var(--badge-warning-border);
    }

    .p3 {
      background: var(--color-success-light);
      color: var(--color-success-text);
      border-color: var(--badge-success-border);
    }

    /* ── CITY SEARCH RESULTS ── */
    .city-results {
      border: 1px solid var(--color-gray-200);
      border-radius: var(--radius-md);
      overflow: hidden;
      margin-top: 6px;
    }

    .city-result-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 9px 12px;
      font-size: 13px;
      color: var(--color-gray-700);
      cursor: pointer;
      border-bottom: 1px solid var(--color-gray-100);
      transition: background 100ms;
    }

    .city-result-item:last-child { border-bottom: none; }

    .city-result-item:hover {
      background: var(--color-gray-100);
      color: var(--color-gray-900);
    }

    .city-result-item .material-symbols-outlined {
      font-size: 16px;
      color: var(--color-gray-400);
      flex-shrink: 0;
    }

    /* ── TOAST ── */
    #alert-container {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 9999;
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: 340px;
      max-width: calc(100vw - 40px);
      pointer-events: none;
    }

    .alert-item {
      background: var(--surface);
      border-radius: var(--radius-lg);
      padding: 12px 14px 12px 16px;
      display: flex;
      align-items: center;
      gap: 10px;
      box-shadow: var(--shadow-lg);
      border: 1px solid var(--border);
      pointer-events: all;
      animation: alertIn .22s var(--ease-enter);
    }

    .alert-item.alert-success {
      border-left: 3px solid var(--color-success);
    }

    .alert-item.alert-error {
      border-left: 3px solid var(--color-error);
    }

    .alert-item .alert-icon {
      font-size: 18px;
      flex-shrink: 0;
    }

    .alert-item.alert-success .alert-icon {
      color: var(--color-success-text);
    }

    .alert-item.alert-error .alert-icon {
      color: var(--color-error-text);
    }

    .alert-item .alert-msg {
      font-size: 13px;
      font-weight: 500;
      color: var(--text);
      flex: 1;
      line-height: 1.4;
    }

    .alert-item .alert-close {
      font-size: 16px;
      color: var(--text3);
      cursor: pointer;
      flex-shrink: 0;
      transition: color .15s;
    }

    .alert-item .alert-close:hover {
      color: var(--text);
    }

    .alert-item.alert-leaving {
      animation: alertOut .2s var(--ease-enter) forwards;
    }

    @keyframes alertIn {
      from {
        opacity: 0;
        transform: translateX(16px) scale(.97);
      }

      to {
        opacity: 1;
        transform: translateX(0) scale(1);
      }
    }

    .wave-emoji {
      display: inline-block;
      font-size: 20px;
      transform-origin: 70% 80%;
      animation: wave 2.8s ease-in-out infinite;
      line-height: 1;
      /*vertical-align: middle;*/
    }

    @keyframes wave {
      0%, 60%, 100% { transform: rotate(0deg); }
      10%           { transform: rotate(18deg); }
      30%           { transform: rotate(-8deg); }
      50%           { transform: rotate(16deg); }
    }

    @keyframes alertOut {
      from {
        opacity: 1;
        transform: translateX(0) scale(1);
      }

      to {
        opacity: 0;
        transform: translateX(16px) scale(.97);
      }
    }

    /* ── TV VIEW (mantém dark — é uma tela de exibição) ── */
    #view-tv {
      background: #000;
      position: relative;
      overflow: hidden;
      min-height: 100vh;
    }

    .tv-slide {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      opacity: 0;
      transition: opacity .9s ease;
      pointer-events: none;
    }

    .tv-slide.active {
      opacity: 1;
      pointer-events: auto;
    }

    .tv-bg {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      filter: brightness(.24) blur(3px);
      transform: scale(1.08);
      transition: transform 14s ease-out;
    }

    .tv-slide.active .tv-bg {
      transform: scale(1.0);
    }

    .tv-content {
      position: relative;
      z-index: 2;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      padding: 0 10%;
      text-align: left;
      background: linear-gradient(to right, rgba(0, 0, 0, .85) 50%, rgba(0, 0, 0, .3) 78%, transparent 100%);
    }

    .tv-template-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 14px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1.2px;
      margin-bottom: 18px;
      opacity: 0;
    }

    .tv-slide.active .tv-template-badge {
      animation: revealUp .5s cubic-bezier(.16, 1, .3, 1) .08s forwards;
    }

    .tpl-aviso {
      background: rgba(245, 158, 11, .18);
      color: #F59E0B;
      border: 1px solid rgba(245, 158, 11, .3);
    }

    .tpl-campanha {
      background: rgba(43, 123, 245, .18);
      color: #7EB3FF;
      border: 1px solid rgba(43, 123, 245, .3);
    }

    .tpl-institucional {
      background: rgba(34, 197, 94, .18);
      color: #4ADE80;
      border: 1px solid rgba(34, 197, 94, .3);
    }

    .tv-title {
      font-size: clamp(28px, 4.5vw, 64px);
      font-weight: 800;
      line-height: 1.06;
      letter-spacing: -1.5px;
      margin-bottom: 20px;
      color: #fff;
      max-width: 14em;
      opacity: 0;
    }

    .tv-slide.active .tv-title {
      animation: revealUp .65s cubic-bezier(.16, 1, .3, 1) .22s forwards;
    }

    .tv-body {
      font-size: clamp(14px, 1.7vw, 21px);
      color: rgba(255, 255, 255, .72);
      line-height: 1.65;
      max-width: 540px;
      opacity: 0;
    }

    .tv-slide.active .tv-body {
      animation: revealUp .65s cubic-bezier(.16, 1, .3, 1) .38s forwards;
    }

    @keyframes revealUp {
      from {
        opacity: 0;
        transform: translateY(22px);
      }

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

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

    .tv-progress {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 2px;
      background: #2B7BF5;
      z-index: 10;
      box-shadow: 0 0 10px rgba(43, 123, 245, 0.6);
    }

    .tv-meta {
      position: absolute;
      top: 24px;
      right: 32px;
      z-index: 10;
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .tv-clock {
      font-size: 18px;
      color: rgba(255, 255, 255, .45);
      font-weight: 500;
      font-variant-numeric: tabular-nums;
    }

    .tv-logo {
      font-size: 11px;
      font-weight: 700;
      color: rgba(255, 255, 255, .28);
      letter-spacing: 1.5px;
      text-transform: uppercase;
    }

    .tv-dots {
      position: absolute;
      bottom: 18px;
      right: 32px;
      z-index: 10;
      display: flex;
      gap: 6px;
      align-items: center;
    }

    .tv-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .2);
      transition: all .35s cubic-bezier(.16, 1, .3, 1);
    }

    .tv-dot.active {
      width: 22px;
      border-radius: 3px;
      background: #2B7BF5;
    }

    .tv-controls {
      position: absolute;
      top: 16px;
      left: 32px;
      z-index: 20;
      display: flex;
      gap: 8px;
    }

    .tv-ctrl-btn {
      background: rgba(0, 0, 0, .45);
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 6px;
      padding: 6px 13px;
      color: rgba(255, 255, 255, .5);
      font-size: 12px;
      cursor: pointer;
      backdrop-filter: blur(8px);
      transition: all .2s;
      font-family: inherit;
      font-weight: 500;
    }

    .tv-ctrl-btn:hover {
      background: rgba(255, 255, 255, .1);
      color: #fff;
    }

    .tv-empty {
      color: rgba(255, 255, 255, .22);
      text-align: center;
      font-size: 20px;
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 10px;
    }

    /* ── MOBILE NAV TOPBAR ── */
    .mobile-topbar {
      display: none;
      align-items: center;
      gap: 12px;
      /* viewport-fit=cover: respeita o notch/status bar no topo e as bordas
         arredondadas laterais quando rodando como app (webview/PWA). */
      padding: env(safe-area-inset-top, 0px) max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px));
      height: calc(48px + env(safe-area-inset-top, 0px));
      background: var(--color-white);
      border-bottom: 1px solid var(--border);
      position: sticky;
      top: 0;
      z-index: 50;
      flex-shrink: 0;
    }

    .mobile-topbar-logo {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 1;
    }

    .mobile-topbar-logo img {
      height: 30px;
      width: auto;
      display: block;
    }

    .hamburger-btn {
      width: 36px;
      height: 36px;
      border: 1px solid var(--color-gray-200);
      border-radius: var(--radius-md);
      background: transparent;
      color: var(--color-gray-700);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: background 150ms;
    }

    .hamburger-btn:hover {
      background: var(--color-gray-100);
    }

    .nav-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 200;
      background: rgba(0, 0, 0, 0.5);
      animation: fadeIn .2s ease;
    }

    /* ── RESPONSIVE — Tablet (769px–1024px) ── */
    @media (min-width: 769px) and (max-width: 1024px) {
      .page {
        padding: 24px;
      }

      .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
      }

      .tv-list-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    /* ── RESPONSIVE — Mobile (≤768px) ── */
    @media (max-width: 768px) {

      /* Admin shell */
      #view-admin {
        flex-direction: column;
      }

      .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 201;
        transform: translateX(-100%);
        transition: transform .3s var(--ease-default);
        box-shadow: var(--shadow-xl);
        width: 240px;
        min-width: 240px;
        /* drawer cobre a tela inteira: afasta o logo do notch superior. */
        padding-top: max(6px, env(safe-area-inset-top, 0px));
      }

      .sidebar.open {
        transform: translateX(0);
      }

      .sidebar-toggle-btn,
      .logo-collapsed {
        display: none !important;
      }

      /* Reset icon-only collapsed state on mobile */
      .sidebar.collapsed {
        width: 240px;
        min-width: 240px;
      }

      .sidebar.collapsed .sidebar-logo {
        justify-content: space-between;
        padding: 10px 12px 14px 16px;
        gap: 9px;
      }

      .sidebar.collapsed .sidebar-logo .logo-full { display: block; }

      .sidebar.collapsed .nav-item {
        justify-content: flex-start;
        padding: 8px 12px;
        margin: 1px 8px;
        gap: 8px;
      }

      .sidebar.collapsed .nav-item .nav-label { display: inline; }
      .sidebar.collapsed .nav-item.active::before { display: block; }
      .sidebar.collapsed .sidebar-bottom { padding: 12px 10px; }
      .sidebar.collapsed .user-profile { justify-content: flex-start; padding: 8px 10px; }
      .sidebar.collapsed .user-info,
      .sidebar.collapsed .user-chevron { display: flex; }
      .sidebar.collapsed .user-skeleton .sk-lines { display: flex; }

      .mobile-topbar {
        display: flex;
      }

      .main-content {
        width: 100%;
      }

      /* Pages */
      .page {
        padding: 16px;
      }

      .page-header {
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 16px;
      }

      .page-header>*:last-child {
        width: 100%;
      }

      .page-header > .fab-wrapper {
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }

      /* FAB à direita — Conteúdos (fab-wrapper está dentro de div com filter chips) */
      #contents-fab {
        margin-left: auto;
      }

      /* FAB à direita — TVs (fab-wrapper está dentro de #tv-page-actions) */
      #tv-page-actions {
        justify-content: flex-end;
      }

      /* Stats */
      .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        margin-bottom: 16px;
      }

      .stat-val {
        font-size: 28px;
        letter-spacing: -1px;
      }

      /* Dash lower */
      .dash-lower {
        grid-template-columns: 1fr;
        gap: 12px;
      }

      /* Content table — mobile: Conteúdo + Status na 1ª linha, Ações na 2ª */
      .ct-header,
      .ct-row {
        grid-template-columns: 1fr auto;
        row-gap: 8px;
      }

      .ct-col-hide {
        display: none;
      }

      /* esconde drag (col 1), TVs (col 4) e o rótulo "Ações" do cabeçalho */
      .ct-header > :nth-child(1),
      .ct-row > :nth-child(1),
      .ct-header > :nth-child(4),
      .ct-row > :nth-child(4),
      .ct-header > :nth-child(5) {
        display: none;
      }

      /* ações ocupam a linha inteira, abaixo de Conteúdo/Status */
      .ct-row .ct-actions {
        grid-column: 1 / -1;
        flex-wrap: wrap;
      }

      /* TV cards */
      .tv-list-grid {
        grid-template-columns: 1fr;
      }

      .tv-how-to-steps {
        flex-direction: column !important;
      }

      .tv-how-to-steps>* {
        margin-right: 0 !important;
      }

      /* Content / TV drawers: bottom sheet on mobile */
      .modal {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
        top: auto !important;
        height: 92dvh !important;
        border-left: none !important;
        border-top: 1px solid var(--color-gray-200) !important;
        transform: translateY(100%) !important;
      }

      .modal-overlay.open .modal {
        transform: translateY(0) !important;
      }

      /* Forms */
      .form-row {
        grid-template-columns: 1fr;
      }

      /* Settings */
      .settings-panel {
        max-width: 100%;
      }

      .settings-tab-btn {
        padding: 0 12px;
        font-size: 12px;
      }

      /* TV view */
      .tv-content {
        padding: 0 6%;
      }

      /* Analytics ranking: oculta coluna Engaj. em telas pequenas */
      #page-analytics .ct-header[style],
      #analytics-ranking .ct-row[style] {
        grid-template-columns: 28px 1fr 90px !important;
      }

      #page-analytics .ct-header[style]> :nth-child(3),
      #analytics-ranking .ct-row[style]> :nth-child(3) {
        display: none !important;
      }

      /* Misc modals */
      .tv-preview-backdrop {
        padding: 12px;
        align-items: flex-end;
      }

      .tv-preview-dialog {
        width: 100%;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
      }

      .tv-target-pills {
        flex-wrap: wrap;
      }

      .modal-footer {
        flex-wrap: nowrap;
        /* bottom sheet encosta na base: afasta os botões da barra de gestos. */
        padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
      }

      /* Cards do drawer em mobile */
      .tipo-card-grid { grid-template-columns: repeat(3, 1fr); }

      /* Botões footer icon-only no mobile */
      .btn-icon-only-mobile .btn-txt { display: none; }
      .btn-icon-only-mobile {
        width: 36px;
        min-width: 36px;
        padding: 0;
        justify-content: center;
      }
    }

    /* ── RESPONSIVE — Small (≤480px) ── */
    @media (max-width: 480px) {
      .page {
        padding: 12px;
      }

      .stat-card {
        padding: 14px;
      }

      .stat-val {
        font-size: 22px;
      }

      .page-title {
        font-size: clamp(16px, 4.5vw, 20px);
      }

      .stats-grid {
        gap: 6px;
      }
    }

    /* ── TIPO TABS ── */
    .tipo-tabs {
      display: flex;
      flex-wrap: nowrap !important;
      overflow-x: auto;
      scrollbar-width: none;
      gap: 0;
      margin-bottom: 16px;
      background: var(--surface2);
      border-radius: 0;
      padding: 0 8px;
      border-bottom: 1px solid var(--border);
    }

    .tipo-tab {
      flex: 1;
      padding: 7px 4px;
      border-radius: calc(var(--radius-lg) - 2px);
      border: none;
      background: transparent;
      color: var(--color-gray-500);
      font-family: 'Inter', sans-serif;
      font-size: 12.5px;
      font-weight: 500;
      cursor: pointer;
      transition: all 150ms;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
    }

    .tipo-tab.active {
      background: var(--color-white);
      color: var(--color-gray-900);
      box-shadow: var(--shadow-sm);
    }

    .tipo-tab:hover:not(.active) {
      color: var(--color-gray-700);
    }

    /* Tipo cards — estilo "Tipos de gráfico" */
    .tipo-card {
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12px 6px 10px;
      height: auto;
      min-height: 72px;
      border-radius: var(--radius-md);
      border: 1px solid var(--color-gray-200);
      background: var(--color-white);
      color: var(--color-gray-500);
      font-size: 11.5px;
      font-weight: 500;
      font-family: 'Inter', sans-serif;
      gap: 6px;
      margin-bottom: 0;
      transform: none;
      box-shadow: none;
      transition: all 150ms;
      cursor: pointer;
      width: 100%;
      text-align: center;
    }
    .tipo-card:hover {
      color: var(--color-gray-900);
      background: var(--color-gray-50);
      border-color: var(--color-gray-300);
      transform: none;
      box-shadow: none;
    }
    .tipo-card.active {
      border-color: var(--color-primary);
      background: var(--color-primary-light, #eff6ff);
      color: var(--color-primary);
      box-shadow: none;
    }
    .tipo-card .material-symbols-outlined { font-size: 18px; display: block; }

    .tipo-category-tabs {
      display: flex;
      gap: 0;
      margin-bottom: 0;
      border-bottom: 1px solid var(--border);
      background: var(--surface2);
      padding: 0 8px;
    }
    .tipo-category-tab {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 0 16px;
      height: 40px;
      border-radius: 0;
      border: none;
      border-bottom: 2px solid transparent;
      background: transparent;
      color: var(--color-gray-500);
      font-family: inherit;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: color 150ms, border-color 150ms;
      margin-bottom: -1px;
    }
    .tipo-category-tab.active {
      background: transparent;
      color: var(--color-primary);
      border-bottom-color: var(--color-primary);
      font-weight: 600;
    }
    .tipo-category-tab:hover:not(.active) {
      color: var(--color-gray-900);
      background: transparent;
    }
    .tipo-category-tab .material-symbols-outlined { font-size: 16px; }

    /* ── BANNER / CSV UPLOAD ── */
    .banner-upload-wrapper {
      position: relative;
      aspect-ratio: 16/9;
      min-height: 120px;
      border-radius: var(--radius-lg);
      overflow: hidden;
    }

    .banner-upload-area {
      position: absolute;
      inset: 0;
      border: 1px dashed var(--color-gray-300);
      border-radius: var(--radius-lg);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 8px;
      cursor: pointer;
      transition: border-color 150ms, background 150ms;
      color: var(--color-gray-500);
      font-size: 13px;
      text-align: center;
      padding: 20px;
    }

    .banner-upload-area:hover {
      border-color: var(--color-primary);
      background: var(--color-primary-light);
      color: var(--color-primary);
    }

    .banner-full-preview {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: var(--radius-md);
      display: none;
      cursor: pointer;
    }

    .csv-upload-area {
      border: 1px dashed var(--color-gray-300);
      border-radius: var(--radius-lg);
      padding: 26px 20px;
      text-align: center;
      cursor: pointer;
      transition: border-color 150ms, background 150ms;
      color: var(--color-gray-500);
      font-size: 13px;
    }

    .csv-upload-area:hover {
      border-color: var(--color-primary);
      background: var(--color-primary-light);
      color: var(--color-primary);
    }

    .csv-upload-area.loaded {
      border-color: var(--color-success);
      background: var(--color-success-light);
      border-style: solid;
      color: var(--color-gray-900);
    }

    .csv-meta {
      font-size: 11.5px;
      color: var(--color-gray-500);
      margin-top: 6px;
    }

    .csv-upload-area.drag-over {
      border-color: var(--color-primary) !important;
      background: var(--color-primary-light);
      color: var(--color-primary);
      border-style: solid;
    }

    /* ── CHART TYPE SELECTOR ── */
    .chart-preview-wrap {
      background: var(--color-gray-50);
      border: 1px solid var(--color-gray-200);
      border-radius: var(--radius-lg);
      padding: 16px;
      display: none;
      margin-top: 12px;
    }

    .chart-preview-inner {
      position: relative;
      height: 240px;
    }

    .chart-type-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 5px;
      margin-top: 4px;
    }

    .chart-type-btn {
      padding: 10px 4px 8px;
      border-radius: var(--radius-md);
      border: 1px solid var(--color-gray-200);
      background: var(--color-white);
      color: var(--color-gray-500);
      cursor: pointer;
      font-family: 'Inter', sans-serif;
      font-size: 11px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      transition: all 150ms;
      line-height: 1;
    }

    .chart-type-btn .ct-icon {
      font-size: 16px;
      display: block;
    }

    .chart-type-btn:hover {
      color: var(--color-gray-900);
      background: var(--color-gray-100);
      border-color: var(--color-gray-300);
    }

    .chart-type-btn.active {
      border-color: var(--color-primary);
      background: var(--color-primary-light);
      color: var(--color-primary);
    }
    .quiz-time-btn.active {
      border-color: var(--color-primary);
      background: var(--color-primary-light);
      color: var(--color-primary);
      font-weight: 600;
    }
    .quiz-tv-notice {
      background: var(--color-primary-light);
      border: 1px solid var(--badge-primary-border);
      border-radius: var(--radius-md);
      padding: 14px 15px;
      margin-bottom: 20px;
      font-size: 12.5px;
      line-height: 1.65;
      color: var(--color-primary-dark);
    }
    .quiz-tv-notice-title {
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: 13px;
      font-weight: 700;
      margin-bottom: 8px;
      color: var(--color-primary);
    }
    .quiz-tv-notice-title .material-symbols-outlined { font-size: 17px; }
    .quiz-tv-notice ul {
      margin: 8px 0 0 4px;
      padding-left: 14px;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .quiz-tv-notice li { list-style: disc; }
    [data-theme="dark"] .quiz-tv-notice {
      background: rgba(43,123,245,0.1);
      border-color: rgba(43,123,245,0.25);
      color: rgba(255,255,255,0.75);
    }
    [data-theme="dark"] .quiz-tv-notice-title { color: var(--color-primary); }

    /* ── DRAG SORT ── */
    .drag-handle {
      cursor: grab;
      color: var(--color-gray-400);
      font-size: 15px;
      padding: 0 2px;
      user-select: none;
      opacity: .5;
      transition: opacity .15s;
      line-height: 1;
      display: flex;
      align-items: center;
    }

    .ct-row:hover .drag-handle {
      opacity: 1;
    }

    /* .ct-row-dash — sem override de colunas; herda da grade base */

    .ct-header-dash {
      background: transparent;
    }

    .ct-row.dragging {
      opacity: .3;
    }

    .ct-row.drag-target {
      background: var(--color-primary-light);
      outline: 1px dashed rgba(43, 123, 245, .35);
      outline-offset: -1px;
    }

    /* ── TV TARGETING (drawer) ── */
    .tv-target-section {
      padding-top: 16px;
      margin-top: 4px;
      border-top: 1px solid var(--color-gray-200);
    }

    .tv-target-pills {
      display: flex;
      gap: 6px;
      margin-bottom: 10px;
    }

    .tv-target-pill {
      padding: 6px 16px;
      border-radius: var(--radius-full);
      border: 1px solid var(--color-gray-300);
      background: transparent;
      color: var(--color-gray-500);
      font-size: 12.5px;
      font-weight: 500;
      cursor: pointer;
      font-family: 'Inter', sans-serif;
      transition: all 150ms;
    }

    .tv-target-pill.active {
      background: var(--color-primary);
      border-color: var(--color-primary);
      color: #fff;
    }

    .tv-target-pill:hover:not(.active) {
      background: var(--color-gray-100);
      color: var(--color-gray-700);
    }

    .tv-multiselect-list {
      border: 1px solid var(--color-gray-200);
      border-radius: var(--radius-lg);
      overflow: hidden;
      margin-top: 2px;
    }

    .tv-check-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      border-bottom: 1px solid var(--color-gray-200);
      cursor: pointer;
      transition: background 100ms;
      font-size: 13px;
      color: var(--color-gray-700);
    }

    .tv-check-item:last-child {
      border-bottom: none;
    }

    .tv-check-item:hover {
      background: var(--color-gray-50);
    }

    .tv-check-item.quiz-locked {
      opacity: 0.55;
      cursor: not-allowed;
      pointer-events: none;
    }

    .tv-check-item input[type=checkbox] {
      width: 16px;
      height: 16px;
      accent-color: var(--color-primary);
      cursor: pointer;
      flex-shrink: 0;
    }

    .tv-multiselect-empty {
      padding: 14px;
      text-align: center;
      font-size: 12.5px;
      color: var(--color-gray-400);
    }

    /* TV chips (dashboard grid) */
    .tv-chip {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      padding: 0 8px;
      height: 22px;
      background: var(--color-primary-light);
      color: var(--color-primary);
      border-radius: var(--radius-sm);
      border: 1px solid var(--badge-primary-border);
      font-size: 11px;
      font-weight: 500;
      white-space: nowrap;
      max-width: 149px;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .tv-chip-all {
      background: var(--color-gray-100);
      color: var(--color-gray-500);
    }

    /* TV selector in TV view */
    .tv-ctrl-select {
      background: rgba(0, 0, 0, .45);
      border: 1px solid rgba(255, 255, 255, .15);
      border-radius: 6px;
      padding: 5px 26px 5px 10px;
      color: rgba(255, 255, 255, .7);
      font-size: 12px;
      cursor: pointer;
      backdrop-filter: blur(8px);
      transition: all .2s;
      font-family: inherit;
      outline: none;
      appearance: none;
    }

    .tv-ctrl-select:hover {
      background: rgba(255, 255, 255, .1);
      color: #fff;
    }

    .tv-ctrl-select option {
      background: #1a1d23;
      color: #fff;
    }

    /* ── TV BANNER / DASHBOARD SLIDES ── */
    .tv-bg-full {
      position: absolute;
      inset: 0;
      background-size: contain;
      background-position: center;
    }

    .tv-banner-caption {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 64px 10% 44px;
      background: linear-gradient(to top, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .35) 55%, transparent 100%);
      z-index: 2;
    }

    .tv-banner-caption-top {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      padding: 44px 10% 64px;
      background: linear-gradient(to bottom, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .35) 55%, transparent 100%);
      z-index: 2;
    }

    .tv-dash-content {
      position: relative;
      z-index: 2;
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 40px 5% 28px;
      background: linear-gradient(160deg, #030810 0%, #060c18 100%);
    }

    .tv-dash-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 18px;
      flex-shrink: 0;
    }

    .tv-dash-title {
      font-size: clamp(16px, 2vw, 28px);
      font-weight: 700;
      color: #fff;
      opacity: 0;
    }

    .tv-slide.active .tv-dash-title {
      animation: revealUp .65s cubic-bezier(.16, 1, .3, 1) .22s forwards;
    }

    .tv-dash-chart-wrap {
      flex: 1;
      position: relative;
      min-height: 0;
      opacity: 0;
    }

    .tv-slide.active .tv-dash-chart-wrap {
      animation: revealUp .8s cubic-bezier(.16, 1, .3, 1) .45s forwards;
    }

    /* ── TICKER ── */
    #tv-ticker-bar {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 40px;
      background: rgba(0, 0, 0, .75);
      backdrop-filter: blur(6px);
      overflow: hidden;
      z-index: 15;
      display: flex;
      align-items: center;
      border-top: 1px solid rgba(43, 123, 245, .3);
    }

    .tv-ticker-label {
      background: #2B7BF5;
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      padding: 0 14px;
      height: 100%;
      display: flex;
      align-items: center;
      flex-shrink: 0;
      white-space: nowrap;
    }

    .tv-ticker-track {
      flex: 1;
      overflow: hidden;
      position: relative;
      height: 100%;
    }

    .tv-ticker-text {
      display: inline-block;
      white-space: nowrap;
      font-size: 14px;
      color: #fff;
      font-weight: 500;
      line-height: 40px;
      padding-left: 100%;
      animation: tickerScroll 30s linear infinite;
    }

    @keyframes tickerScroll {
      0% {
        transform: translateX(0);
      }

      100% {
        transform: translateX(-100%);
      }
    }

    /* ── QR CODE SLIDE ── */
    .tv-qr-content {
      position: relative;
      z-index: 2;
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 32px;
      background: linear-gradient(160deg, #050820 0%, #020514 100%);
      padding: 40px;
    }

    .tv-qr-box {
      background: #fff;
      padding: 20px;
      border-radius: 12px;
      box-shadow: 0 0 60px rgba(43, 123, 245, .4);
      opacity: 0;
    }

    .tv-slide.active .tv-qr-box {
      animation: revealUp .6s cubic-bezier(.16, 1, .3, 1) .2s forwards;
    }

    .tv-qr-title {
      font-size: clamp(20px, 3vw, 44px);
      font-weight: 700;
      color: #fff;
      text-align: center;
      max-width: 700px;
      opacity: 0;
    }

    .tv-slide.active .tv-qr-title {
      animation: revealUp .65s cubic-bezier(.16, 1, .3, 1) .5s forwards;
    }

    .tv-qr-url {
      font-size: clamp(11px, 1.2vw, 16px);
      color: rgba(255, 255, 255, .45);
      margin-top: 8px;
      opacity: 0;
    }

    .tv-slide.active .tv-qr-url {
      animation: revealUp .5s cubic-bezier(.16, 1, .3, 1) .7s forwards;
    }

    /* ── CLIMA SLIDE ── */
    .tv-clima-content {
      position: relative;
      z-index: 2;
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: linear-gradient(160deg, #060c1e 0%, #0b1530 100%);
      padding: 60px;
      text-align: center;
      gap: 16px;
    }

    .tv-clima-icon {
      font-size: clamp(64px, 10vw, 140px);
      line-height: 1;
      opacity: 0;
    }

    .tv-slide.active .tv-clima-icon {
      animation: revealUp .5s cubic-bezier(.16, 1, .3, 1) .1s forwards;
    }

    .tv-clima-temp {
      font-size: clamp(80px, 12vw, 160px);
      font-weight: 800;
      color: #fff;
      line-height: 1;
      letter-spacing: -4px;
      opacity: 0;
    }

    .tv-slide.active .tv-clima-temp {
      animation: revealUp .7s cubic-bezier(.16, 1, .3, 1) .25s forwards;
    }

    .tv-clima-feels {
      font-size: clamp(14px, 1.8vw, 22px);
      color: rgba(255, 255, 255, .55);
      opacity: 0;
    }

    .tv-slide.active .tv-clima-feels {
      animation: revealUp .5s cubic-bezier(.16, 1, .3, 1) .45s forwards;
    }

    .tv-clima-city {
      font-size: clamp(18px, 2.5vw, 36px);
      font-weight: 600;
      color: rgba(255, 255, 255, .8);
      opacity: 0;
    }

    .tv-slide.active .tv-clima-city {
      animation: revealUp .5s cubic-bezier(.16, 1, .3, 1) .6s forwards;
    }

    /* ── COUNTDOWN SLIDE ── */
    .tv-countdown-content {
      position: relative;
      z-index: 2;
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: linear-gradient(160deg, #080515 0%, #030210 100%);
      padding: 60px;
      text-align: center;
    }

    .tv-countdown-label {
      font-size: clamp(14px, 1.8vw, 22px);
      color: rgba(255, 255, 255, .55);
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 2px;
      margin-bottom: 32px;
      opacity: 0;
    }

    .tv-slide.active .tv-countdown-label {
      animation: revealUp .5s cubic-bezier(.16, 1, .3, 1) .1s forwards;
    }

    .tv-countdown-digits {
      display: flex;
      gap: clamp(16px, 3vw, 48px);
      align-items: flex-end;
      opacity: 0;
    }

    .tv-slide.active .tv-countdown-digits {
      animation: revealUp .7s cubic-bezier(.16, 1, .3, 1) .3s forwards;
    }

    .tv-cd-unit {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

    .tv-cd-num {
      font-size: clamp(60px, 10vw, 140px);
      font-weight: 800;
      color: #fff;
      line-height: 1;
      letter-spacing: -3px;
      font-variant-numeric: tabular-nums;
      font-family: 'JetBrains Mono', monospace;
    }

    .tv-cd-sep {
      font-size: clamp(40px, 7vw, 100px);
      font-weight: 700;
      color: rgba(255, 255, 255, .25);
      line-height: 1;
      padding-bottom: 14px;
    }

    .tv-cd-lbl {
      font-size: clamp(9px, 1vw, 13px);
      color: rgba(255, 255, 255, .4);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 2px;
    }

    /* ── URGENTE OVERLAY (TV) ── */
    .tv-urgent-overlay {
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: rgba(80, 0, 0, .92);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 24px;
      padding: 60px;
      text-align: center;
      animation: urgentFadeIn .4s ease;
    }

    @keyframes urgentFadeIn {
      from {
        opacity: 0;
        transform: scale(.97);
      }

      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    .tv-urgent-badge {
      background: #EF4444;
      color: #fff;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      padding: 6px 20px;
      border-radius: 99px;
    }

    .tv-urgent-msg {
      font-size: clamp(24px, 4vw, 64px);
      font-weight: 800;
      color: #fff;
      line-height: 1.15;
      max-width: 800px;
    }

    /* ── URGENTE MODAL (admin) ── */
    .urgent-modal-backdrop {
      position: fixed;
      inset: 0;
      z-index: 200;
      background: rgba(0, 0, 0, .45);
      display: flex;
      align-items: center;
      justify-content: center;
      animation: fadeIn .15s ease;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    .urgent-modal {
      background: var(--color-white);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow-xl);
      width: 480px;
      max-width: 95vw;
      overflow: hidden;
      animation: scaleIn .2s cubic-bezier(.16, 1, .3, 1);
    }

    @keyframes scaleIn {
      from {
        opacity: 0;
        transform: scale(.95) translateY(8px);
      }

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

    .urgent-modal-header {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 20px 24px 16px;
      border-bottom: 1px solid var(--color-gray-200);
    }

    .urgent-modal-icon {
      width: 36px;
      height: 36px;
      border-radius: var(--radius-lg);
      background: var(--color-error-light);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      flex-shrink: 0;
    }

    .urgent-modal-title {
      font-size: 15px;
      font-weight: 600;
      color: var(--color-gray-900);
    }

    .urgent-modal-sub {
      font-size: 12px;
      color: var(--color-gray-500);
      margin-top: 1px;
    }

    .urgent-modal-body {
      padding: 20px 24px;
    }

    .urgent-modal-footer {
      display: flex;
      gap: 8px;
      justify-content: flex-end;
      padding: 16px 24px;
      border-top: 1px solid var(--color-gray-200);
      background: var(--surface2);
    }

    /* ── TV PREVIEW MODAL ── */
    .tv-preview-backdrop {
      position: fixed;
      inset: 0;
      z-index: 8000;
      background: rgba(0, 0, 0, .8);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      backdrop-filter: blur(4px);
    }

    .tv-preview-dialog {
      background: var(--color-gray-900);
      border-radius: var(--radius-xl);
      overflow: hidden;
      width: min(900px, 100%);
      box-shadow: var(--shadow-xl);
    }

    .tv-preview-hd {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 18px;
      border-bottom: 1px solid rgba(255, 255, 255, .08);
    }

    .tv-preview-hd-title {
      font-size: 11px;
      font-weight: 600;
      color: rgba(255, 255, 255, .45);
      text-transform: uppercase;
      letter-spacing: .7px;
    }

    .tv-preview-frame-wrap {
      padding: 16px;
    }

    .tv-preview-frame {
      position: relative;
      width: 100%;
      aspect-ratio: 16/9;
      overflow: hidden;
      border-radius: var(--radius-md);
      background: #000;
    }

    .tv-preview-frame .tv-slide {
      position: absolute;
      inset: 0;
    }

    /* ── PREVIEW extras ── */
    .preview-countdown-mini {
      background: #080515;
      border-radius: var(--radius-lg);
      padding: 20px;
      text-align: center;
      margin-top: 8px;
    }

    .preview-countdown-digits {
      display: flex;
      justify-content: center;
      gap: 12px;
      font-size: 28px;
      font-weight: 800;
      color: #fff;
      font-variant-numeric: tabular-nums;
      font-family: 'JetBrains Mono', monospace;
    }

    /* ── MATERIAL SYMBOLS — sizing rules ── */
    .material-symbols-outlined {
      font-size: 18px;
      line-height: 1;
      vertical-align: middle;
      flex-shrink: 0;
      user-select: none;
    }

    .btn .material-symbols-outlined,
    .close-btn .material-symbols-outlined {
      font-size: 15px;
    }

    .btn-sm .material-symbols-outlined {
      font-size: 14px;
    }

    .ct-icon.material-symbols-outlined {
      font-size: 18px;
      display: block;
    }

    .tipo-tab .material-symbols-outlined {
      font-size: 15px;
    }

    .drag-handle .material-symbols-outlined {
      font-size: 18px;
    }

    .team-empty-icon .material-symbols-outlined {
      font-size: 28px;
    }

    .tv-ticker-label .material-symbols-outlined {
      font-size: 13px;
      vertical-align: middle;
    }

    .urgent-modal-icon .material-symbols-outlined {
      font-size: 20px;
    }

    .member-del .material-symbols-outlined {
      font-size: 14px;
    }

    /* ── SETTINGS ── */
    .settings-panel {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow-md);
      overflow: hidden;
      max-width: 600px;
    }

    .settings-tab-bar {
      display: flex;
      border-bottom: 1px solid var(--border);
      background: var(--surface2);
      padding: 0 8px;
    }

    .settings-tab-btn {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 0 20px;
      height: 48px;
      font-size: 13px;
      font-weight: 500;
      color: var(--color-gray-500);
      background: transparent;
      border: none;
      border-bottom: 2px solid transparent;
      cursor: pointer;
      transition: color 150ms, border-color 150ms;
      font-family: inherit;
      margin-bottom: -1px;
    }

    .settings-tab-btn:hover {
      color: var(--color-gray-900);
    }

    .settings-tab-btn.active {
      color: var(--color-primary);
      border-bottom-color: var(--color-primary);
      font-weight: 600;
    }

    .settings-tab-btn .material-symbols-outlined {
      font-size: 16px;
    }

    .settings-tab-panel {
      display: none;
      padding: 28px;
      animation: tabIn .16s var(--ease-enter);
    }

    .settings-tab-panel.active {
      display: block;
    }

    @keyframes tabIn {
      from {
        opacity: 0;
        transform: translateY(5px);
      }

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

    .settings-field-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 14px 0;
      border-bottom: 1px solid var(--color-gray-200);
    }

    .settings-field-row:first-child {
      padding-top: 0;
    }

    .settings-field-row:last-of-type {
      border-bottom: none;
    }

    .settings-field-title {
      font-size: 14px;
      font-weight: 500;
      color: var(--color-gray-900);
      margin-bottom: 2px;
    }

    .settings-field-desc {
      font-size: 12px;
      color: var(--text2);
    }

    .settings-duration-wrap {
      display: flex;
      align-items: center;
      gap: 7px;
      flex-shrink: 0;
    }

    .settings-duration-unit {
      font-size: 12px;
      font-weight: 500;
      color: var(--text2);
    }

    .settings-tab-footer {
      padding-top: 20px;
      border-top: 1px solid var(--color-gray-200);
      margin-top: 20px;
    }

    .settings-sub-block {
      margin-bottom: 24px;
      padding-bottom: 24px;
      border-bottom: 1px solid var(--color-gray-200);
    }

    .settings-sub-block:last-child {
      margin-bottom: 0;
      padding-bottom: 0;
      border-bottom: none;
    }

    .settings-section-title {
      font-size: 11px;
      font-weight: 600;
      color: var(--color-gray-500);
      text-transform: uppercase;
      letter-spacing: .6px;
      margin-bottom: 10px;
    }

    .settings-org-sub {
      font-size: 12px;
      color: var(--color-gray-400);
      margin-bottom: 16px;
    }

    .settings-help-text {
      font-size: 13px;
      color: var(--text2);
      margin-bottom: 12px;
    }

    /* ── TV YOUTUBE ── */
    .tv-youtube-wrap {
      position: absolute;
      inset: 0;
      background: #000;
    }

    .tv-youtube-wrap>div {
      width: 100%;
      height: 100%;
    }

    .tv-youtube-wrap iframe {
      width: 100% !important;
      height: 100% !important;
      border: none;
      display: block;
    }

    .tv-youtube-caption {
      position: absolute;
      bottom: 72px;
      left: 0;
      right: 0;
      text-align: center;
      font-size: 20px;
      color: rgba(255, 255, 255, .85);
      padding: 0 60px;
      text-shadow: 0 2px 10px rgba(0, 0, 0, .7);
      pointer-events: none;
    }

    /* ── TV QR MODAL ── */
    .tv-qr-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .55);
      z-index: 9000;
      display: flex;
      align-items: center;
      justify-content: center;
      animation: viewIn .2s var(--ease-enter);
    }

    .tv-qr-dialog {
      background: var(--surface);
      border-radius: var(--radius-xl);
      padding: 32px 28px 24px;
      width: 360px;
      max-width: 95vw;
      box-shadow: var(--shadow-xl);
      text-align: center;
    }

    .tv-qr-dialog-name {
      font-size: 16px;
      font-weight: 700;
      color: var(--color-gray-900);
      letter-spacing: -.3px;
      margin-bottom: 4px;
    }

    .tv-qr-dialog-sub {
      font-size: 12px;
      color: var(--text2);
      margin-bottom: 20px;
    }

    .tv-qr-code-wrap {
      display: inline-flex;
      padding: 14px;
      background: #fff;
      border-radius: var(--radius-lg);
      border: 1px solid var(--border);
      box-shadow: var(--shadow-sm);
      margin-bottom: 20px;
    }

    .tv-qr-link-row {
      display: flex;
      gap: 8px;
      align-items: center;
      margin-bottom: 16px;
    }

    .tv-qr-link-row .form-input {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      color: var(--color-gray-500);
    }

    /* ── THEME PICKER ── */
    .theme-picker {
      display: inline-flex;
      border: 1px solid var(--color-gray-200);
      border-radius: var(--radius-md);
      overflow: hidden;
    }

    .theme-opt {
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border: none;
      border-right: 1px solid var(--color-gray-200);
      background: transparent;
      color: var(--color-gray-400);
      font-family: inherit;
      transition: background 120ms, color 120ms;
    }

    .theme-opt:last-child {
      border-right: none;
    }

    .theme-opt .material-symbols-outlined {
      font-size: 20px;
    }

    .theme-opt:hover:not(.active) {
      background: var(--color-gray-100);
      color: var(--color-gray-700);
    }

    .theme-opt.active {
      background: var(--color-gray-900);
      color: var(--color-white);
    }

    /* ── PROFILE OVERLAY ── */
    #profile-overlay {
      position: fixed;
      inset: 0;
      z-index: 300;
      background: var(--color-white);
      display: none;
      flex-direction: row;
    }

    #profile-overlay.open {
      display: flex;
      animation: viewIn .18s var(--ease-enter);
    }

    .pf-sidebar {
      width: 248px;
      min-width: 248px;
      background: var(--color-gray-50);
      border-right: 1px solid var(--color-gray-200);
      padding: 14px 0;
      display: flex;
      flex-direction: column;
      overflow-y: auto;
    }

    .pf-close-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 6px 12px 20px;
    }

    .pf-back-btn {
      width: 32px;
      height: 32px;
      border-radius: var(--radius-md);
      background: transparent;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: var(--color-gray-600);
      transition: background 150ms;
      flex-shrink: 0;
    }

    .pf-back-btn:hover {
      background: var(--color-gray-200);
    }

    .pf-back-btn .material-symbols-outlined {
      font-size: 20px;
    }

    .pf-sidebar-title {
      font-size: 14px;
      font-weight: 700;
      color: var(--color-gray-900);
    }

    .pf-nav-group {
      margin-bottom: 4px;
    }

    .pf-nav-label {
      font-size: 11px;
      font-weight: 600;
      color: var(--color-gray-400);
      letter-spacing: .5px;
      text-transform: uppercase;
      padding: 10px 20px 4px;
    }

    .pf-nav-item {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 8px 12px;
      margin: 1px 8px;
      border-radius: var(--radius-md);
      font-size: 13.5px;
      color: var(--color-gray-700);
      cursor: pointer;
      transition: background 120ms;
      user-select: none;
    }

    .pf-nav-item:hover {
      background: var(--color-gray-200);
      color: var(--color-gray-900);
    }

    .pf-nav-item.active {
      background: var(--color-gray-200);
      color: var(--color-gray-900);
      font-weight: 600;
    }

    .pf-nav-item .material-symbols-outlined {
      font-size: 18px;
      color: var(--color-gray-500);
    }

    .pf-main {
      flex: 1;
      overflow-y: auto;
      padding: 52px 60px;
    }

    .pf-section {
      display: none;
      max-width: 660px;
    }

    .pf-section.active {
      display: block;
      animation: viewIn .15s var(--ease-enter);
    }

    .pf-section-title {
      font-size: 21px;
      font-weight: 700;
      letter-spacing: -0.4px;
      color: var(--color-gray-900);
      margin-bottom: 32px;
    }

    .pf-profile-card {
      display: flex;
      align-items: center;
      gap: 20px;
      padding: 24px;
      background: var(--color-gray-50);
      border: 1px solid var(--color-gray-200);
      border-radius: var(--radius-xl);
      margin-bottom: 32px;
    }

    .pf-avatar-lg {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      flex-shrink: 0;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30px;
      font-weight: 700;
      color: #fff;
      overflow: hidden;
      cursor: pointer;
      position: relative;
      border: 3px solid var(--color-white);
      box-shadow: 0 0 0 2px var(--color-gray-200);
    }

    .pf-avatar-lg img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .pf-avatar-hover {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,.45);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 150ms;
    }

    .pf-avatar-lg:hover .pf-avatar-hover { opacity: 1; }

    .pf-avatar-hover .material-symbols-outlined {
      font-size: 22px;
      color: #fff;
    }

    .pf-profile-info { flex: 1; min-width: 0; }

    .pf-profile-name {
      font-size: 16px;
      font-weight: 700;
      color: var(--color-gray-900);
      margin-bottom: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .pf-profile-email {
      font-size: 12px;
      color: var(--color-gray-500);
      margin-bottom: 8px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .pf-section-group {
      margin-bottom: 28px;
    }

    .pf-group-title {
      font-size: 12px;
      font-weight: 700;
      color: var(--color-gray-500);
      text-transform: uppercase;
      letter-spacing: .5px;
      margin-bottom: 14px;
    }

    .pf-field {
      margin-bottom: 20px;
    }

    .pf-label {
      display: block;
      font-size: 13px;
      font-weight: 500;
      color: var(--color-gray-700);
      margin-bottom: 6px;
    }

    .pf-input {
      width: 100%;
      background: var(--color-white);
      border: 1px solid var(--color-gray-300);
      border-radius: var(--radius-md);
      padding: 0 12px;
      height: 38px;
      font-size: 14px;
      font-family: inherit;
      color: var(--color-gray-900);
      outline: none;
      transition: border-color 150ms, box-shadow 150ms;
    }

    .pf-input:focus {
      border-color: var(--color-primary);
      box-shadow: var(--shadow-focus);
    }

    .pf-input:disabled {
      background: var(--color-gray-100);
      color: var(--color-gray-400);
      cursor: not-allowed;
    }

    .pf-divider {
      height: 1px;
      background: var(--color-gray-200);
      margin: 32px 0;
    }

    #pfsec-plano { max-width: 980px; }

    .plan-current-info {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 14px 18px;
      background: var(--color-primary-light);
      border: 1px solid rgba(43,123,245,.2);
      border-radius: var(--radius-lg);
      margin-bottom: 28px;
      font-size: 13px;
      color: var(--color-primary);
      font-weight: 500;
    }

    .plan-current-info .material-symbols-outlined { font-size: 18px; }

    .plan-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
      margin-bottom: 32px;
    }

    .plan-card {
      border: 2px solid var(--color-gray-200);
      border-radius: 18px;
      padding: 24px 20px 20px;
      transition: all 180ms;
      position: relative;
      background: var(--color-white);
      display: flex;
      flex-direction: column;
    }

    .plan-card:hover {
      border-color: var(--color-primary);
      box-shadow: 0 6px 24px rgba(43,123,245,.1);
      transform: translateY(-2px);
    }

    .plan-card.selected {
      border-color: var(--color-primary);
      background: #f0f6ff;
    }

    .plan-card.selected::after { display: none; }

    .plan-card.pro {
      border-color: #7c3aed;
      background: #faf5ff;
    }

    .plan-card.pro:hover {
      border-color: #6d28d9;
      box-shadow: 0 6px 24px rgba(124,58,237,.14);
    }

    .plan-card.pro.selected { background: #f3eeff; }

    .pc-badge {
      display: inline-flex;
      align-items: center;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .5px;
      text-transform: uppercase;
      padding: 0 9px;
      height: 20px;
      border-radius: var(--radius-sm);
      border: 1px solid transparent;
      margin-bottom: 14px;
    }

    .pc-badge.popular { background: #ede9fe; color: #7c3aed; border-color: #ddd6fe; }
    .pc-badge.current { background: rgba(43,123,245,.12); color: var(--color-primary); border-color: var(--badge-primary-border); }

    .plan-card-name {
      font-size: 17px;
      font-weight: 700;
      color: var(--color-gray-900);
      margin-bottom: 6px;
    }

    .plan-card.free .plan-card-name  { color: #059669; }
    .plan-card.pro  .plan-card-name  { color: #7c3aed; }
    .plan-card.enterprise .plan-card-name { color: #b45309; }

    .plan-card-price {
      font-size: 30px;
      font-weight: 800;
      color: var(--color-gray-900);
      letter-spacing: -1px;
      line-height: 1.1;
    }

    .plan-card-price span {
      font-size: 13px;
      font-weight: 500;
      color: var(--color-gray-400);
      letter-spacing: 0;
    }

    .plan-card-tvs {
      font-size: 12px;
      color: var(--color-gray-500);
      font-weight: 500;
      padding: 10px 0 14px;
      border-bottom: 1px solid var(--color-gray-100);
      margin-bottom: 14px;
    }

    .plan-card.pro .plan-card-tvs { border-bottom-color: rgba(124,58,237,.15); }

    .plan-card-features {
      flex: 1;
      margin-bottom: 20px;
    }

    .pc-feat {
      display: flex;
      align-items: flex-start;
      gap: 6px;
      font-size: 12px;
      color: var(--color-gray-600);
      padding: 3px 0;
      line-height: 1.4;
    }

    .pc-feat .material-symbols-outlined {
      font-size: 14px;
      color: #22c55e;
      flex-shrink: 0;
      margin-top: 1px;
    }

    .plan-card.pro .pc-feat .material-symbols-outlined { color: #7c3aed; }

    .danger-zone {
      border: 1px solid rgba(239, 68, 68, .25);
      background: var(--color-error-light);
      border-radius: var(--radius-xl);
      padding: 20px 24px;
    }

    .danger-zone-title {
      font-size: 14px;
      font-weight: 600;
      color: var(--color-error-text);
      margin-bottom: 5px;
    }

    .danger-zone-desc {
      font-size: 13px;
      color: var(--color-gray-500);
      margin-bottom: 16px;
      line-height: 1.5;
    }

    @media (max-width: 640px) {
      .pf-sidebar {
        display: none;
      }

      .pf-main {
        padding: 28px 20px;
      }

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

    /* ── PLAN ONBOARDING ── */
    .plan-ob-overlay {
      position: fixed;
      inset: 0;
      background: var(--bg);
      z-index: 8500;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px 16px;
      overflow-y: auto;
      animation: viewIn .35s var(--ease-enter);
    }

    .plan-ob-inner {
      width: 100%;
      max-width: 1040px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 32px;
      padding: 20px 0 40px;
    }

    .plan-ob-logo {
      margin-bottom: 16px;
    }

    .plan-ob-logo img {
      height: 36px;
      width: auto;
      display: inline-block;
    }

    .plan-ob-title {
      font-size: 26px;
      font-weight: 700;
      color: var(--text);
      letter-spacing: -.5px;
      margin-bottom: 6px;
      text-align: center;
    }

    .plan-ob-sub {
      font-size: 14px;
      color: var(--text2);
      text-align: center;
      line-height: 1.6;
      max-width: 420px;
    }

    .plan-ob-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      width: 100%;
    }

    .plan-ob-card {
      background: var(--surface);
      border: 2px solid var(--border);
      border-radius: var(--radius-xl);
      padding: 28px 24px;
      position: relative;
      transition: border-color .15s, box-shadow .15s;
    }

    .plan-ob-card:hover {
      border-color: var(--color-primary);
      box-shadow: var(--shadow-md);
    }

    .plan-ob-card.free {
      border-color: #02BC77;
    }

    .plan-ob-card.free:hover {
      box-shadow: 0 0 0 4px rgba(2, 188, 119, .1), var(--shadow-md);
    }

    .plan-ob-card.pro {
      border-color: #7c3aed;
    }

    .plan-ob-card.pro:hover {
      box-shadow: 0 0 0 4px rgba(124, 58, 237, .1), var(--shadow-md);
    }

    .plan-ob-badge {
      position: absolute;
      top: -12px;
      left: 50%;
      transform: translateX(-50%);
      background: #7c3aed;
      color: #fff;
      font-size: 11px;
      font-weight: 600;
      padding: 3px 14px;
      border-radius: 999px;
      white-space: nowrap;
      letter-spacing: .3px;
    }

    .plan-ob-name {
      font-size: 17px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 5px;
    }

    .plan-ob-card.free .plan-ob-name {
      color: #02BC77;
    }

    .plan-ob-card.pro .plan-ob-name {
      color: #7c3aed;
    }

    .plan-ob-price {
      font-size: 36px;
      font-weight: 800;
      color: var(--text);
      letter-spacing: -1.5px;
      line-height: 1;
    }

    .plan-ob-price span {
      font-size: 14px;
      font-weight: 400;
      color: var(--text2);
      letter-spacing: 0;
    }

    .plan-ob-tvs {
      font-size: 13px;
      color: var(--text2);
      margin: 8px 0 18px;
      padding-bottom: 18px;
      border-bottom: 1px solid var(--border);
    }

    .plan-ob-feat {
      font-size: 13px;
      color: var(--text2);
      line-height: 1;
      margin-bottom: 24px;
      display: flex;
      flex-direction: column;
      gap: 9px;
    }

    .plan-ob-feat-row {
      display: flex;
      align-items: center;
      gap: 7px;
    }

    .plan-ob-feat-row .material-symbols-outlined {
      font-size: 15px;
      color: var(--color-success);
      flex-shrink: 0;
    }

    .plan-ob-cta {
      width: 100%;
    }

    .plan-ob-cta-free {
      width: 100%;
      background: #02BC77;
    }

    .plan-ob-cta-free:hover {
      background: #029f65;
    }

    .plan-ob-cta-pro {
      width: 100%;
      background: #7c3aed;
    }

    .plan-ob-cta-pro:hover {
      background: #6d28d9;
    }

    .plan-ob-trust {
      font-size: 12px;
      color: var(--text3);
      display: flex;
      align-items: center;
      gap: 6px;
    }

    @media (max-width:580px) {
      .plan-ob-cards {
        grid-template-columns: 1fr;
      }

      .plan-ob-title {
        font-size: 20px;
      }

      .plan-ob-price {
        font-size: 28px;
      }
    }

    /* ── ONBOARDING WIZARD ── */
    .onboard-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .55);
      z-index: 9500;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
    }

    .onboard-overlay[aria-hidden=true] {
      display: none;
    }

    .onboard-box {
      display: grid;
      grid-template-columns: 220px 1fr;
      grid-template-rows: 1fr auto;
      grid-template-areas: "side main" "footer footer";
      width: 80%;
      max-width: 1200px;
      max-height: 92vh;
      background: var(--color-white);
      border-radius: 16px;
      box-shadow: 0 24px 72px rgba(0, 0, 0, .22);
      overflow: hidden;
      animation: wzIn .25s var(--ease-enter);
    }

    @keyframes wzIn {
      from {
        opacity: 0;
        transform: scale(.97) translateY(10px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    .wz-side {
      grid-area: side;
      background: linear-gradient(160deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
      padding: 28px 22px;
      display: flex;
      flex-direction: column;
      color: #fff;
      overflow: hidden;
    }

    .wz-side-brand {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 36px;
      font-size: 14px;
      font-weight: 700;
      color: rgba(255, 255, 255, .9);
    }

    .wz-side-brand .material-symbols-outlined {
      font-size: 22px;
    }

    .wz-side-steps {
      display: flex;
      flex-direction: column;
    }

    .wz-side-step {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 6px 0;
    }

    .wz-side-step-icon {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .12);
      border: 2px solid rgba(255, 255, 255, .2);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 700;
      color: rgba(255, 255, 255, .45);
      flex-shrink: 0;
      transition: all .3s var(--ease-default);
    }

    .wz-side-step.active .wz-side-step-icon {
      background: #fff;
      border-color: #fff;
      color: var(--color-primary);
      box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
    }

    .wz-side-step.done .wz-side-step-icon {
      background: var(--color-success);
      border-color: var(--color-success);
      color: #fff;
    }

    .wz-side-step-title {
      font-size: 13px;
      font-weight: 600;
      color: rgba(255, 255, 255, .4);
      margin-top: 5px;
      transition: color .2s;
    }

    .wz-side-step.active .wz-side-step-title,
    .wz-side-step.done .wz-side-step-title {
      color: rgba(255, 255, 255, .9);
    }

    .wz-side-step-desc {
      font-size: 11px;
      color: rgba(255, 255, 255, .35);
      margin-top: 1px;
      transition: color .2s;
    }

    .wz-side-step.active .wz-side-step-desc {
      color: rgba(255, 255, 255, .6);
    }

    .wz-side-conn {
      width: 2px;
      height: 22px;
      background: rgba(255, 255, 255, .2);
      margin-left: 13px;
      transition: background .3s;
      border-radius: 2px;
    }

    .wz-side-conn.done {
      background: var(--color-success);
    }

    .wz-side-tip {
      margin-top: auto;
      padding: 14px;
      background: rgba(255, 255, 255, .1);
      border-radius: 10px;
      border: 1px solid rgba(255, 255, 255, .12);
    }

    .wz-side-tip-label {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .8px;
      color: rgba(255, 255, 255, .4);
      margin-bottom: 6px;
    }

    .wz-side-tip-text {
      font-size: 12px;
      color: rgba(255, 255, 255, .8);
      line-height: 1.5;
    }

    .wz-main {
      grid-area: main;
      overflow-y: auto;
      padding: 28px;
    }

    .wz-step-title {
      font-size: 20px;
      font-weight: 700;
      color: var(--text);
      letter-spacing: -.4px;
      margin-bottom: 5px;
    }

    .wz-step-sub {
      font-size: 13px;
      color: var(--text2);
      margin-bottom: 22px;
      line-height: 1.55;
    }

    .wz-tipo-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-bottom: 16px;
    }

    .wz-tipo-card {
      border: 1.5px solid var(--border);
      border-radius: 10px;
      padding: 14px 12px;
      cursor: pointer;
      transition: border-color .15s, background .15s, box-shadow .15s;
      display: flex;
      flex-direction: column;
      gap: 5px;
      background: var(--color-white);
    }

    .wz-tipo-card:hover {
      border-color: var(--color-primary);
      background: var(--color-primary-light);
    }

    .wz-tipo-card.active {
      border-color: var(--color-primary);
      background: var(--color-primary-light);
      box-shadow: 0 0 0 3px rgba(43, 123, 245, .12);
    }

    .wzt-icon {
      width: 30px;
      height: 30px;
      border-radius: 8px;
      background: var(--color-gray-100);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background .15s;
      margin-bottom: 2px;
    }

    .wzt-icon .material-symbols-outlined {
      font-size: 16px;
      color: var(--color-gray-500);
      transition: color .15s;
    }

    .wz-tipo-card.active .wzt-icon {
      background: var(--color-primary);
    }

    .wz-tipo-card.active .wzt-icon .material-symbols-outlined {
      color: #fff;
    }

    .wzt-name {
      font-size: 12px;
      font-weight: 600;
      color: var(--text);
    }

    .wzt-desc {
      font-size: 11px;
      color: var(--text2);
      line-height: 1.3;
    }

    .wz-forms-divider {
      height: 1px;
      background: var(--border);
      margin: 16px 0;
    }

    .wz-callout {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      background: var(--color-primary-light);
      border: 1px solid rgba(43, 123, 245, .2);
      border-radius: 8px;
      padding: 10px 12px;
      margin-top: 16px;
    }

    .wz-callout .material-symbols-outlined {
      font-size: 15px;
      color: var(--color-primary);
      flex-shrink: 0;
      margin-top: 1px;
    }

    .wz-callout-text {
      font-size: 12px;
      color: var(--color-primary-dark);
      line-height: 1.4;
    }

    .wz-footer {
      grid-area: footer;
      border-top: 1px solid var(--border);
      padding: 14px 28px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      background: var(--color-gray-50);
    }

    @media(max-width:600px) {
      .onboard-box {
        grid-template-columns: 1fr;
        grid-template-areas: "main" "footer";
      }

      .wz-side {
        display: none;
      }

      .wz-tipo-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    /* ── SUPORTE ── */
    .support-plan-banner {
      margin-bottom: 16px; padding: 12px 18px;
      border-radius: var(--radius-lg);
      display: flex; align-items: center; gap: 10px;
      font-size: 13px; font-weight: 500;
    }
    .support-plan-banner.pro {
      background: #ede9fe; border: 1px solid #ddd6fe; color: #6d28d9;
    }
    .support-plan-banner.free {
      background: var(--color-gray-50); border: 1px solid var(--border); color: var(--text2);
    }
    .support-plan-banner .material-symbols-outlined { font-size: 18px; flex-shrink: 0; }
    .support-plan-banner a {
      margin-left: auto; font-size: 12px; font-weight: 600;
      color: var(--color-primary); text-decoration: none; white-space: nowrap;
    }
    .support-filter-bar { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
    .support-filter-btn {
      padding: 5px 14px; border-radius: var(--radius-full);
      border: 1px solid var(--border); background: var(--surface);
      color: var(--text2); font-size: 12px; font-weight: 500;
      cursor: pointer; transition: all 150ms;
    }
    .support-filter-btn.active {
      background: var(--color-primary); border-color: var(--color-primary); color: #fff;
    }
    .ticket-table {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-sm);
    }
    .ticket-table-header, .ticket-row {
      display: grid;
      grid-template-columns: 88px 1fr 130px 130px 110px;
      padding: 10px 20px; align-items: center;
    }
    .ticket-table-header {
      background: var(--color-gray-50); border-bottom: 1px solid var(--border);
      font-size: 11px; font-weight: 600; text-transform: uppercase;
      letter-spacing: 0.5px; color: var(--text2);
    }
    .ticket-row {
      border-bottom: 1px solid var(--border);
      cursor: pointer; transition: background 150ms; font-size: 13px;
    }
    .ticket-row:last-child { border-bottom: none; }
    .ticket-row:hover { background: var(--color-gray-50); }
    .ticket-id { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text2); }
    .ticket-subject { font-weight: 500; color: var(--text); }
    .ticket-org-label { font-size: 11px; color: var(--text2); margin-top: 2px; }
    .tk-status {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 3px 9px; border-radius: var(--radius-full);
      font-size: 11px; font-weight: 600; white-space: nowrap;
    }
    .tk-status.open       { background:#eff6ff; color:#2563eb; border:1px solid #bfdbfe; }
    .tk-status.in_progress{ background:#fffbeb; color:#b45309; border:1px solid #fde68a; }
    .tk-status.waiting    { background:#f5f3ff; color:#7c3aed; border:1px solid #ddd6fe; }
    .tk-status.resolved   { background:#f0fdf4; color:#15803d; border:1px solid #bbf7d0; }
    .tk-status.closed     { background:var(--color-gray-100); color:var(--text2); border:1px solid var(--border); }
    .tk-priority {
      display: inline-flex; align-items: center; gap: 4px;
      font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: var(--radius-full);
    }
    .tk-priority.high   { background:#ede9fe; color:#7c3aed; border:1px solid #ddd6fe; }
    .tk-priority.normal { background:var(--color-gray-100); color:var(--text2); border:1px solid var(--border); }
    .ticket-empty {
      text-align: center; padding: 56px 24px; color: var(--text2);
    }
    .ticket-empty .material-symbols-outlined { font-size: 40px; display: block; margin-bottom: 10px; opacity: .4; }

    /* ── KANBAN ── */
    .support-view-toggle { display:flex; gap:4px; }
    .support-view-btn {
      display:flex; align-items:center; gap:5px; padding:6px 13px;
      border-radius:var(--radius-md); border:1px solid var(--border);
      background:var(--surface); color:var(--text2); font-size:12px;
      font-weight:500; cursor:pointer; transition:all 150ms;
    }
    .support-view-btn.active { background:var(--color-primary); border-color:var(--color-primary); color:#fff; }
    .support-view-btn .material-symbols-outlined { font-size:16px; }
    .kanban-board {
      display:flex; gap:14px; overflow-x:auto; padding-bottom:16px;
      align-items:flex-start; min-height:calc(100vh - 300px);
    }
    .kanban-board::-webkit-scrollbar { height:6px; }
    .kanban-board::-webkit-scrollbar-thumb { background:var(--color-gray-300); border-radius:99px; }
    .kanban-col {
      flex:1 1 0; min-width:180px; background:var(--color-gray-50); border:1px solid var(--border);
      border-radius:var(--radius-xl); display:flex; flex-direction:column;
      max-height:calc(100vh - 300px); transition:background 150ms, border-color 150ms;
    }
    .kanban-col.drag-over { background:color-mix(in srgb, var(--color-primary) 8%, white); border-color:var(--color-primary); }
    .kanban-col-header {
      padding:11px 14px; border-bottom:1px solid var(--border);
      display:flex; align-items:center; gap:8px;
      font-size:11px; font-weight:700; text-transform:uppercase;
      letter-spacing:.5px; color:var(--text2); flex-shrink:0;
    }
    .kanban-col-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
    .kanban-col-dot.open        { background:#2563eb; }
    .kanban-col-dot.in_progress { background:#b45309; }
    .kanban-col-dot.waiting     { background:#7c3aed; }
    .kanban-col-dot.resolved    { background:#15803d; }
    .kanban-col-dot.closed      { background:var(--color-gray-400); }
    .kanban-count {
      margin-left:auto; background:var(--color-gray-200); color:var(--text2);
      font-size:11px; font-weight:700; border-radius:99px;
      padding:1px 7px; min-width:20px; text-align:center;
    }
    .kanban-cards {
      flex:1; overflow-y:auto; padding:10px;
      display:flex; flex-direction:column; gap:8px;
    }
    .kanban-cards::-webkit-scrollbar { width:4px; }
    .kanban-cards::-webkit-scrollbar-thumb { background:var(--color-gray-300); border-radius:99px; }
    .kanban-card {
      background:var(--surface); border:1px solid var(--border);
      border-radius:var(--radius-lg); padding:12px 14px;
      cursor:pointer; transition:box-shadow 150ms, transform 150ms, opacity 150ms;
      box-shadow:var(--shadow-sm); user-select:none;
    }
    .kanban-card:hover { box-shadow:var(--shadow-md); transform:translateY(-1px); }
    .kanban-card.dragging { opacity:.4; transform:scale(.97); box-shadow:none; }
    .kanban-card-subject { font-size:13px; font-weight:600; color:var(--text); margin-bottom:5px; line-height:1.35; }
    .kanban-card-org { font-size:11px; color:var(--text2); margin-bottom:8px; }
    .kanban-card-badges { display:flex; gap:5px; flex-wrap:wrap; }
    .kanban-empty { color:var(--text2); font-size:12px; text-align:center; padding:24px 12px; opacity:.55; }

    /* Ticket detail */
    .ticket-detail-back {
      display: inline-flex; align-items: center; gap: 5px;
      font-size: 13px; color: var(--color-primary); cursor: pointer; margin-bottom: 16px;
    }
    .ticket-detail-back:hover { text-decoration: underline; }
    .ticket-detail-card {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--radius-xl); padding: 24px;
      margin-bottom: 16px; box-shadow: var(--shadow-sm);
    }
    .ticket-thread { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
    .ticket-message { padding: 14px 18px; border-radius: var(--radius-lg); font-size: 13px; line-height: 1.65; }
    .ticket-message.client {
      background: var(--color-gray-50); border: 1px solid var(--border); border-left: 3px solid var(--color-primary);
    }
    .ticket-message.support {
      background: #f5f3ff; border: 1px solid #ddd6fe; border-left: 3px solid #7c3aed;
    }
    .ticket-message-meta {
      font-size: 11px; color: var(--text2); margin-bottom: 6px;
      font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px;
    }
    .ticket-reply-card {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--radius-xl); padding: 20px; box-shadow: var(--shadow-sm);
    }
    .support-narrow-modal { width: 520px !important; max-width: 95vw !important; }

    /* ── HELP DOC DRAWER ── */
    .hdoc-wrap { display:flex; height:100%; overflow:hidden; }
    .hdoc-nav {
      width:185px; flex-shrink:0;
      overflow-y:auto;
      padding:20px 10px;
      display:flex; flex-direction:column; gap:2px;
      background:#ffffff;
    }
    [data-theme="dark"] .hdoc-nav { background:var(--surface); }
    /* Divisor redimensionável entre nav e conteúdo */
    .hdoc-split {
      flex-shrink:0; width:7px; cursor:ew-resize;
      background:transparent; position:relative;
      display:flex; align-items:center; justify-content:center;
    }
    .hdoc-split::before {
      content:''; width:1px; height:100%;
      background:#e5e7eb; transition:background 150ms, width 150ms;
    }
    [data-theme="dark"] .hdoc-split::before { background:rgba(255,255,255,0.06); }
    .hdoc-split::after {
      content:''; position:absolute; top:50%; left:50%;
      transform:translate(-50%,-50%);
      width:4px; height:38px; border-radius:var(--radius-full);
      background:transparent; transition:background 150ms, height 150ms;
    }
    .hdoc-split:hover::before, .hdoc-split.resizing::before { background:var(--color-primary); width:2px; }
    .hdoc-split:hover::after, .hdoc-split.resizing::after { background:var(--color-primary); height:52px; }
    .hdoc-nav-label {
      font-size:10px; font-weight:700; text-transform:uppercase;
      letter-spacing:1.2px; color:var(--color-gray-400);
      padding:0 10px; margin-top:16px; margin-bottom:6px;
    }
    .hdoc-nav-label:first-child { margin-top:0; }
    .hdoc-nav-item {
      display:flex; align-items:center; gap:8px;
      padding:9px 12px; font-size:13px; font-weight:500;
      color:var(--color-gray-600);
      cursor:pointer; border-radius:var(--radius-md);
      border:none; background:transparent; width:100%; text-align:left;
      transition:background 150ms, color 150ms; line-height:1.3;
    }
    .hdoc-nav-item:hover { background:rgba(0,0,0,0.05); color:var(--color-gray-900); }
    .hdoc-nav-item.active { background:rgba(43,123,245,0.1); color:var(--color-primary); font-weight:600; }
    [data-theme="dark"] .hdoc-nav-item:hover { background:rgba(255,255,255,0.06); color:rgba(255,255,255,0.75); }
    [data-theme="dark"] .hdoc-nav-item.active { background:rgba(77,163,255,0.18); }
    .hdoc-nav-item .material-symbols-outlined { font-size:16px; flex-shrink:0; }
    .hdoc-nav-warn {
      margin-left:auto; width:7px; height:7px; border-radius:50%;
      background:var(--color-warning); flex-shrink:0;
    }
    .hdoc-content { flex:1; overflow-y:auto; padding:28px 28px 56px; }
    .hdoc-section { display:none; }
    .hdoc-section.active { display:block; animation:viewIn .18s var(--ease-enter); }

    /* Section header */
    .hdoc-stitle {
      font-size:16px; font-weight:700; letter-spacing:-0.2px; color:var(--color-gray-900);
      margin-bottom:6px; display:flex; align-items:center; gap:9px;
    }
    .hdoc-stitle-icon {
      width:30px; height:30px; border-radius:var(--radius-md);
      background:var(--color-primary-light); display:flex;
      align-items:center; justify-content:center; flex-shrink:0;
    }
    .hdoc-stitle-icon .material-symbols-outlined { font-size:16px; color:var(--color-primary); }
    .hdoc-ssub {
      font-size:13px; color:var(--color-gray-500); margin-bottom:28px;
      line-height:1.6; padding-left:39px;
    }

    /* Flow diagram */
    .hdoc-flow {
      display:flex; align-items:center; background:var(--color-gray-50);
      border:1px solid var(--color-gray-200); border-radius:var(--radius-xl);
      padding:22px 16px; margin-bottom:28px; gap:4px; overflow-x:auto;
    }
    .hdoc-flow-node {
      display:flex; flex-direction:column; align-items:center;
      gap:8px; text-align:center; flex:1; min-width:90px;
    }
    .hdoc-flow-icon {
      width:52px; height:52px; border-radius:var(--radius-lg);
      display:flex; align-items:center; justify-content:center; font-size:24px;
    }
    .hdoc-flow-label { font-size:12px; font-weight:700; color:var(--color-gray-700); }
    .hdoc-flow-desc { font-size:11px; color:var(--color-gray-500); line-height:1.4; max-width:96px; }
    .hdoc-flow-arrow { color:var(--color-gray-300); font-size:20px; flex-shrink:0; }

    /* Concept cards */
    .hdoc-concepts { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:28px; }
    .hdoc-concept-card {
      background:var(--color-gray-50); border:1px solid var(--color-gray-200);
      border-radius:var(--radius-lg); padding:16px 14px;
    }
    .hdoc-concept-icon { font-size:20px; margin-bottom:8px; }
    .hdoc-concept-title { font-size:12px; font-weight:700; color:var(--color-gray-700); margin-bottom:4px; }
    .hdoc-concept-desc { font-size:12px; color:var(--color-gray-500); line-height:1.45; }
    /* Steps */
    .hdoc-steps { margin-bottom:28px; }
    .hdoc-step {
      display:flex; gap:14px; align-items:flex-start;
      padding:16px 0; border-bottom:1px solid var(--color-gray-200);
    }
    .hdoc-step:last-child { border-bottom:none; }
    .hdoc-step-num {
      width:26px; height:26px; border-radius:50%; background:var(--color-primary); color:#fff;
      font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center;
      flex-shrink:0; margin-top:1px;
    }
    .hdoc-step-body { flex:1; }
    .hdoc-step-title { font-size:13px; font-weight:600; color:var(--color-gray-700); margin-bottom:4px; }
    .hdoc-step-desc { font-size:12.5px; color:var(--color-gray-500); line-height:1.55; }
    .hdoc-chip {
      display:inline-flex; align-items:center; gap:3px; padding:2px 7px;
      border-radius:var(--radius-sm); font-size:10px; font-weight:600;
      margin-top:7px; letter-spacing:0.3px;
    }
    .hdoc-chip.blue { background:var(--color-primary-light); color:var(--color-primary); }
    .hdoc-chip.green { background:var(--color-success-light); color:var(--color-success-text); }
    .hdoc-chip.amber { background:var(--color-warning-light); color:var(--color-warning-text); }
    .hdoc-chip .material-symbols-outlined { font-size:11px; }

    /* Callouts */
    .hdoc-callout {
      border-radius:var(--radius-md); padding:13px 15px; margin-bottom:14px;
      display:flex; gap:10px; font-size:13px; line-height:1.6; align-items:flex-start;
    }
    .hdoc-callout .material-symbols-outlined { font-size:18px; flex-shrink:0; margin-top:1px; }
    .hdoc-callout.info { background:var(--color-primary-light); border:1px solid var(--badge-primary-border); color:var(--color-primary-dark); }
    .hdoc-callout.warning { background:var(--color-warning-light); border:1px solid var(--badge-warning-border); color:var(--color-warning-text); }
    .hdoc-callout.success { background:var(--color-success-light); border:1px solid var(--badge-success-border); color:var(--color-success-text); }
    .hdoc-callout.error { background:var(--color-error-light); border:1px solid var(--badge-error-border); color:var(--color-error-text); }
    .hdoc-callout.neutral { background:var(--color-gray-50); border:1px solid var(--color-gray-200); color:var(--color-gray-600); }

    /* Content type grid */
    .hdoc-tipo-grid {
      display:grid; grid-template-columns:repeat(auto-fill,minmax(175px,1fr));
      gap:10px; margin-bottom:28px;
    }
    .hdoc-tipo-card {
      background:#fff; border:1px solid var(--color-gray-200);
      border-radius:var(--radius-lg); padding:15px;
      transition:all 140ms; box-shadow:var(--shadow-sm);
    }
    .hdoc-tipo-card:hover { border-color:var(--color-primary); transform:translateY(-1px); box-shadow:var(--shadow-md); }
    .hdoc-tipo-icon {
      width:34px; height:34px; border-radius:var(--radius-md);
      display:flex; align-items:center; justify-content:center;
      margin-bottom:9px; font-size:17px;
    }
    .hdoc-tipo-red    { background:rgba(239,68,68,0.1); }
    .hdoc-tipo-purple { background:rgba(139,92,246,0.1); }
    .hdoc-tipo-green  { background:rgba(34,197,94,0.1); }
    .hdoc-tipo-blue   { background:rgba(43,123,245,0.1); }
    .hdoc-tipo-amber  { background:rgba(245,158,11,0.1); }
    .hdoc-tipo-cyan   { background:rgba(6,182,212,0.1); }
    [data-theme="dark"] .hdoc-tipo-red    { background:rgba(239,68,68,0.18); }
    [data-theme="dark"] .hdoc-tipo-purple { background:rgba(139,92,246,0.18); }
    [data-theme="dark"] .hdoc-tipo-green  { background:rgba(34,197,94,0.18); }
    [data-theme="dark"] .hdoc-tipo-blue   { background:rgba(77,163,255,0.18); }
    [data-theme="dark"] .hdoc-tipo-amber  { background:rgba(245,158,11,0.18); }
    [data-theme="dark"] .hdoc-tipo-cyan   { background:rgba(6,182,212,0.18); }
    [data-theme="dark"] .hdoc-tipo-card { background:var(--surface2); border-color:var(--border); }
    [data-theme="dark"] .hdoc-tipo-name { color:var(--text); }
    [data-theme="dark"] .hdoc-tipo-desc { color:var(--text2); }
    .hdoc-tipo-name { font-size:13px; font-weight:600; color:var(--color-gray-700); margin-bottom:5px; }
    .hdoc-tipo-desc { font-size:12px; color:var(--color-gray-500); line-height:1.5; }
    .hdoc-tipo-tags { margin-top:9px; display:flex; flex-wrap:wrap; gap:4px; }
    .hdoc-tipo-tag {
      font-size:10px; padding:1px 5px; border-radius:3px;
      background:var(--color-gray-100); color:var(--color-gray-500);
      border:1px solid var(--color-gray-200);
      font-family:'JetBrains Mono',monospace;
    }

    /* Browser mockup */
    .hdoc-browser { border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--color-gray-200); margin-bottom:10px; box-shadow:var(--shadow-sm); }
    .hdoc-browser-chrome {
      background:var(--color-gray-100); border-bottom:1px solid var(--color-gray-200);
      padding:8px 12px; display:flex; align-items:center; gap:8px;
    }
    .hdoc-browser-dots { display:flex; gap:4px; align-items:center; flex-shrink:0; }
    .hdoc-browser-dot { width:9px; height:9px; border-radius:50%; }
    .hdoc-browser-dot.r { background:#ff5f56; }
    .hdoc-browser-dot.y { background:#ffbd2e; }
    .hdoc-browser-dot.g { background:#27c93f; }
    .hdoc-browser-tabs { display:flex; gap:3px; flex:1; overflow:hidden; }
    .hdoc-browser-tab {
      display:flex; align-items:center; gap:4px; background:#222;
      border:1px solid var(--color-gray-200); border-bottom:none; border-radius:5px 5px 0 0;
      padding:3px 10px 4px; font-size:10.5px; color:var(--color-gray-700); font-weight:500;
      white-space:nowrap; max-width:200px;
    }
    .hdoc-browser-tab .material-symbols-outlined { font-size:11px; color:var(--color-primary); }
    .hdoc-browser-url {
      background:#fff; border:1px solid var(--color-gray-200);
      border-radius:var(--radius-full); padding:2px 11px;
      font-size:10.5px; font-family:'JetBrains Mono',monospace; color:var(--color-gray-400);
      display:flex; align-items:center; gap:4px; flex:1;
    }
    .hdoc-browser-url .material-symbols-outlined { font-size:11px; color:var(--color-success); }
    .hdoc-browser-body { padding:13px 15px; background:#fff; font-size:12.5px; color:var(--color-gray-500); line-height:1.55; }
    .hdoc-browser.incog { border-color:#374151; }
    .hdoc-browser.incog .hdoc-browser-chrome { background:#1f2937; border-color:#374151; }
    .hdoc-browser.incog .hdoc-browser-dot.r { background:#4b5563; }
    .hdoc-browser.incog .hdoc-browser-dot.y { background:#374151; }
    .hdoc-browser.incog .hdoc-browser-dot.g { background:#374151; }
    .hdoc-browser.incog .hdoc-browser-url { background:#111827; border-color:#374151; color:#9ca3af; }
    .hdoc-browser.incog .hdoc-browser-url .material-symbols-outlined { color:#6b7280; }
    .hdoc-browser.incog .hdoc-browser-body { background:#111827; color:#9ca3af; border-top:1px solid #1f2937; }
    .hdoc-incog-badge {
      display:inline-flex; align-items:center; gap:4px; background:#374151; color:#d1d5db;
      border-radius:var(--radius-sm); padding:2px 7px; font-size:10px;
      font-weight:700; letter-spacing:0.5px; text-transform:uppercase; white-space:nowrap;
    }
    kbd.hdoc-key {
      display:inline-block; padding:2px 6px; background:var(--color-gray-100);
      border:1px solid var(--color-gray-300); border-bottom-width:2px; border-radius:4px;
      font-size:11px; font-family:'JetBrains Mono',monospace; color:var(--color-gray-700); line-height:1.4;
    }
    .hdoc-h2 {
      font-size:13px; font-weight:700; color:var(--color-gray-700); margin:28px 0 14px;
      padding-bottom:8px; border-bottom:1px solid var(--color-gray-200);
      display:flex; align-items:center; gap:7px;
    }
    .hdoc-h2 .material-symbols-outlined { font-size:15px; color:var(--color-primary); }
    .hdoc-h2:first-child { margin-top:0; }
    .hdoc-p { font-size:13px; color:var(--color-gray-500); line-height:1.65; margin-bottom:16px; }
    .hdoc-p strong { color:var(--color-gray-700); }
    .hdoc-code {
      background:var(--color-gray-100); border:1px solid var(--color-gray-200);
      padding:1px 5px; border-radius:3px;
      font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--color-gray-700);
    }

    /* Settings */
    .hdoc-setting-row {
      display:flex; gap:14px; align-items:flex-start;
      padding:18px 0; border-bottom:1px solid var(--color-gray-200);
    }
    .hdoc-setting-row:last-child { border-bottom:none; }
    .hdoc-setting-icon {
      width:38px; height:38px; flex-shrink:0; border-radius:var(--radius-md);
      background:var(--color-primary-light); display:flex; align-items:center; justify-content:center;
    }
    .hdoc-setting-icon .material-symbols-outlined { font-size:18px; color:var(--color-primary); }
    .hdoc-setting-title { font-size:13px; font-weight:600; color:var(--color-gray-700); margin-bottom:3px; }
    .hdoc-setting-desc { font-size:12.5px; color:var(--color-gray-500); line-height:1.55; }
    /* ── AUTOCOMPLETE DE CIDADE (drawer de TV) ── */
    .city-ac-field { position: relative; }
    .city-ac-field .form-input { padding-left: 38px; padding-right: 36px; }
    .city-ac-icon {
      position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
      font-size: 18px; color: var(--color-gray-400); pointer-events: none;
    }
    .city-ac-clear {
      position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
      font-size: 17px; color: var(--color-gray-400); cursor: pointer; border-radius: 50%;
    }
    .city-ac-clear:hover { color: var(--color-gray-700); background: var(--color-gray-100); }
    /* Lista em fluxo normal (não absolute): empurra o conteúdo abaixo e evita
       qualquer recorte/hit-test do overflow do drawer. */
    .city-ac-list {
      margin-top: 5px;
      background: var(--color-white); border: 1px solid var(--color-gray-200);
      border-radius: var(--radius-md); box-shadow: var(--shadow-md);
      display: none; max-height: 260px; overflow-y: auto;
    }
    .city-ac-list.open { display: block; }
    .city-ac-item {
      display: flex; align-items: center; gap: 9px; padding: 9px 12px; cursor: pointer;
      font-size: 13px; color: var(--text); border-bottom: 1px solid var(--color-gray-100);
    }
    .city-ac-item:last-child { border-bottom: none; }
    .city-ac-item:hover, .city-ac-item.active { background: var(--color-primary-light, #EEF4FF); }
    .city-ac-item .material-symbols-outlined { font-size: 16px; color: var(--color-gray-400); flex-shrink: 0; }
    .city-ac-item .ci-sub { color: var(--text2); font-size: 11.5px; margin-left: auto; white-space: nowrap; }
    .city-ac-item.is-empty { cursor: default; color: var(--text2); justify-content: center; }
    .city-ac-hint { font-size: 11.5px; color: var(--text2); margin-top: 6px; }
    .city-ac-hint.ok { color: var(--color-success); }

    /* Analytics */
    .hdoc-metric-row { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:24px; }
    .hdoc-metric-card {
      background:var(--color-gray-50); border:1px solid var(--color-gray-200);
      border-radius:var(--radius-lg); padding:18px;
    }
    .hdoc-metric-label { font-size:11px; color:var(--color-gray-500); font-weight:600; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:6px; }
    .hdoc-metric-val { font-size:28px; font-weight:800; color:var(--color-gray-700); letter-spacing:-1.5px; line-height:1; }
    .hdoc-metric-desc { font-size:12px; color:var(--color-gray-500); margin-top:5px; line-height:1.45; }

    /* Analytics: 5 cards-herói (principais) em cima + 5 secundários compactos. */
    #analytics-stats { display: block; margin-bottom: 20px; }
    /* Avisos: ocupam espaço só quando existem (mapa sobe quando não há). */
    #analytics-insights:not(:empty) { margin-bottom: 20px; }
    .stat-sub { font-size:12px; color:var(--color-gray-500); margin-top:7px; font-weight:500; letter-spacing:0; text-transform:none; }
    .analytics-hero { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 16px; }
    .analytics-secondary { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
    .analytics-secondary .stat-card { padding: 14px 15px; gap: 9px; border-radius: var(--radius-lg); }
    .analytics-secondary .stat-card .stat-icon { width: 26px; height: 26px; }
    .analytics-secondary .stat-card .stat-icon .material-symbols-outlined { font-size: 15px; }
    .analytics-secondary .stat-val { font-size: 24px; }
    .analytics-secondary .stat-sub { margin-top: 2px; font-size: 11px; }
    .stat-card.hero .stat-val { font-size: 38px; }
    .stat-spark-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; min-height: 30px; }
    .spark { width: 116px; height: 30px; flex-shrink: 0; }
    .stat-delta { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 700; padding: 2px 8px 2px 5px; border-radius: 999px; }
    .stat-delta .material-symbols-outlined { font-size: 14px; }
    .stat-delta.up   { color: var(--color-success); background: var(--color-success-light, #E7F8EF); }
    .stat-delta.down { color: var(--color-error);   background: var(--color-error-light, #FDECEC); }
    .stat-delta.flat { color: var(--text2);          background: var(--color-gray-100); }
    .fleet-mini-bar { height: 6px; border-radius: 999px; background: var(--color-gray-200); overflow: hidden; margin-top: 4px; }
    .fleet-mini-fill { height: 100%; border-radius: 999px; background: var(--color-success); transition: width 400ms ease; }
    @media (max-width: 1200px) { .analytics-hero, .analytics-secondary { grid-template-columns: repeat(3, 1fr); } }
    @media (max-width: 820px)  { .analytics-hero, .analytics-secondary { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 520px)  { .analytics-hero, .analytics-secondary { grid-template-columns: 1fr; } }

    /* ── HEATMAP (TV × dia da semana) ── */
    .heatmap-scroll { overflow-x: auto; padding: 8px 20px 18px; }
    .heatmap-grid { display: grid; gap: 4px; min-width: 460px; }
    .hm-corner, .hm-col-head, .hm-row-head, .hm-cell { display: flex; align-items: center; }
    .hm-col-head { justify-content: center; font-size: 11px; font-weight: 600; color: var(--color-gray-500); text-transform: uppercase; letter-spacing: .4px; padding-bottom: 2px; }
    .hm-row-head { font-size: 12.5px; font-weight: 500; color: var(--color-gray-700); padding-right: 10px; gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .hm-row-head .material-symbols-outlined { font-size: 14px; color: var(--color-gray-400); flex-shrink: 0; }
    .hm-cell {
      justify-content: center; height: 34px; border-radius: var(--radius-sm);
      font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums;
      background: var(--color-gray-100); color: var(--color-gray-400);
      transition: transform 120ms;
    }
    .hm-cell[data-v]:hover { transform: scale(1.08); outline: 1px solid var(--color-primary); }
    .heatmap-legend { display: flex; align-items: center; gap: 6px; padding: 0 20px 16px; font-size: 11px; color: var(--color-gray-500); }
    .heatmap-legend .hm-swatch { width: 16px; height: 12px; border-radius: 3px; }
    .hm-total-head { justify-content: flex-end !important; }
    .hm-cell.hm-total { background: transparent; color: var(--text); font-weight: 700; justify-content: flex-end; padding-right: 4px; }
    .hm-cell.hm-total:hover { transform: none; outline: none; }

    /* ── FROTA DE TVS (mapa + lista) ── */
    .fleet-grid { display: grid; grid-template-columns: 4fr 1fr; }
    .fleet-map-wrap { position: relative; border-right: 1px solid var(--color-gray-200); }
    #fleet-map { height: 380px; width: 100%; background: var(--color-gray-100); border-bottom-left-radius: var(--radius-xl); }
    /* z-index: 0 isola os panes/controles do Leaflet (z-index 200-800) num
       stacking context proprio, impedindo que vazem por cima do drawer/modal
       (modal-overlay = z-index 100). */
    .leaflet-container { font-family: inherit; background: #aad3df; position: relative; z-index: 0; }
    [data-theme="dark"] .leaflet-container { background: #0e1626; }
    [data-theme="dark"] .leaflet-control-attribution { background: rgba(20,20,20,.75); color: #aaa; }
    [data-theme="dark"] .leaflet-control-attribution a { color: #6ea8ff; }
    /* Neutraliza o reset global (box-sizing/max-width) que desalinha os tiles. */
    .leaflet-container img { max-width: none !important; }
    .leaflet-pane, .leaflet-tile, .leaflet-marker-icon, .leaflet-tile-container { box-sizing: content-box; }
    .fleet-map-empty {
      position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center;
      gap: 8px; text-align: center; padding: 24px; background: var(--color-gray-50);
      color: var(--text2); font-size: 13px; z-index: 5;
    }
    .fleet-map-empty.show { display: flex; }
    .fleet-map-empty .material-symbols-outlined { font-size: 34px; color: var(--color-gray-300); }
    .fleet-list { max-height: 380px; overflow-y: auto; padding: 6px 0; }
    .fleet-item {
      display: flex; align-items: center; gap: 11px; padding: 10px 18px; cursor: pointer;
      border-bottom: 1px solid var(--color-gray-100); transition: background 120ms;
    }
    .fleet-item:hover { background: var(--surface2); }
    .fleet-item:last-child { border-bottom: none; }
    .fleet-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; position: relative; }
    .fleet-dot.on { background: var(--color-success); }
    .fleet-dot.on::after {
      content: ''; position: absolute; inset: -4px; border-radius: 50%;
      border: 2px solid var(--color-success); opacity: .5; animation: fleetPulse 1.6s ease-out infinite;
    }
    .fleet-dot.off { background: var(--color-gray-300); }
    @keyframes fleetPulse { 0% { transform: scale(.6); opacity: .6; } 100% { transform: scale(1.5); opacity: 0; } }
    @keyframes liveDot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
    .fleet-item-body { flex: 1; min-width: 0; }
    .fleet-item-name { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .fleet-item-sub { font-size: 11.5px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 4px; }
    .fleet-item-sub .material-symbols-outlined { font-size: 12px; }
    .fleet-item-status { font-size: 11px; font-weight: 600; flex-shrink: 0; text-align: right; }
    .fleet-item-status.on { color: var(--color-success); }
    .fleet-item-status.off { color: var(--color-gray-400); }
    .fleet-group-label {
      font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
      color: var(--text2); padding: 12px 18px 6px; display: flex; align-items: center; gap: 6px;
    }
    .fleet-add-loc {
      margin: 8px 18px 4px; font-size: 12px; color: var(--color-primary); cursor: pointer;
      font-weight: 600; display: inline-flex; align-items: center; gap: 4px;
    }
    .fleet-add-loc:hover { text-decoration: underline; }
    .fleet-pin {
      width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid #fff;
      box-shadow: 0 1px 4px rgba(0,0,0,.35); position: relative;
    }
    .fleet-pin.on { background: #16a34a; }
    .fleet-pin.off { background: #9ca3af; }
    .fleet-pin.on::after {
      content: ''; position: absolute; inset: -6px; border-radius: 50%;
      border: 2px solid #16a34a; opacity: .55; animation: fleetPulse 1.7s ease-out infinite;
    }
    .fleet-pin-count {
      position: absolute; top: -8px; right: -8px; min-width: 16px; height: 16px; padding: 0 3px;
      background: var(--color-primary); color: #fff; border-radius: 9px; font-size: 10px; font-weight: 700;
      display: flex; align-items: center; justify-content: center; border: 1.5px solid #fff;
    }
    .fleet-pop b { font-size: 13px; } .fleet-pop-row { font-size: 12px; display: flex; align-items: center; gap: 6px; margin-top: 3px; }
    .fleet-pop-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
    @media (max-width: 960px) {
      .fleet-grid { grid-template-columns: 1fr; }
      .fleet-map-wrap { border-right: none; border-bottom: 1px solid var(--color-gray-200); }
      #fleet-map { border-radius: 0; }
      .fleet-list { max-height: 280px; }
    }

    /* ── ABAS DE ANALYTICS ── */
    .analytics-tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--color-gray-200); margin-bottom: 22px; }
    .atab {
      appearance: none; background: none; border: none; cursor: pointer; font-family: inherit;
      padding: 0 16px; height: 42px; font-size: 14px; font-weight: 500; white-space: nowrap;
      color: var(--color-gray-500); border-bottom: 2px solid transparent; margin-bottom: -1px;
      transition: color 150ms, border-color 150ms;
    }
    .atab:hover { color: var(--color-gray-700); }
    .atab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
    .atab-panel { display: none; }
    .atab-panel.active { display: block; animation: viewIn .2s var(--ease-enter); }

    .nav-notif-dot {
      width: 8px; height: 8px; background: var(--color-error);
      border-radius: 50%; margin-left: auto; flex-shrink: 0;
      animation: notif-pulse 1.6s ease-in-out infinite; display: none;
    }
    .nav-notif-dot.visible { display: block; }
    .sidebar.collapsed .nav-notif-dot { position: absolute; top: 7px; right: 7px; margin: 0; }
    @keyframes notif-pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50%       { opacity: .35; transform: scale(.75); }
    }