/*
  DTAFFI — Styles globaux
  - Thèmes clair/sombre via body[data-theme]
  - Layout (sidebar, toolbar, cards, tables, modals)
  - Composants UI (boutons, badges, formulaires)
*/
      :root {
        --bg: #060912;
        --panel: rgba(255, 255, 255, 0.04);
        --panel-2: rgba(255, 255, 255, 0.06);
        --border: rgba(255, 255, 255, 0.06);
        --text: rgba(255, 255, 255, 0.94);
        --muted: rgba(255, 255, 255, 0.55);
        --muted-2: rgba(255, 255, 255, 0.38);
        --shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
        --radius: 16px;
        --radius-lg: 22px;
        --ease: cubic-bezier(0.25, 1, 0.3, 1);
        --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
        --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
        --stroke: rgba(255, 255, 255, 0.07);
        --stroke-strong: rgba(255, 255, 255, 0.14);
        --surface: rgba(255, 255, 255, 0.03);
        --surface-2: rgba(255, 255, 255, 0.02);
        --surface-3: rgba(255, 255, 255, 0.05);
        --shadow-card: 0 12px 40px rgba(0, 0, 0, 0.28);
        --shadow-card-hover: 0 24px 60px rgba(0, 0, 0, 0.38);
        --page-bg: radial-gradient(1400px 800px at 0% 0%, rgba(59, 130, 246, 0.12), transparent 60%),
          radial-gradient(1000px 600px at 100% 0%, rgba(168, 85, 247, 0.1), transparent 60%),
          radial-gradient(1200px 800px at 50% 100%, rgba(34, 197, 94, 0.08), transparent 60%),
          #060912;
        --sidebar-bg: rgba(6, 9, 18, 0.45);
        --ambient-1: radial-gradient(600px 400px at 15% 25%, rgba(59, 130, 246, 0.18), transparent 70%),
          radial-gradient(550px 380px at 85% 15%, rgba(168, 85, 247, 0.14), transparent 70%);
        --ambient-2: radial-gradient(600px 400px at 80% 85%, rgba(34, 197, 94, 0.12), transparent 70%),
          radial-gradient(500px 350px at 20% 75%, rgba(236, 72, 153, 0.08), transparent 70%);
        --ambient-opacity: 0.7;
        --blue: #3b82f6;
        --green: #22c55e;
        --amber: #f59e0b;
        --purple: #a855f7;
        --pink: #ec4899;
        --cyan: #06b6d4;
        --red: #ef4444;
      }

      * {
        box-sizing: border-box;
        -webkit-tap-highlight-color: transparent;
        margin: 0;
        padding: 0;
      }

      svg {
        width: 1em;
        height: 1em;
        flex-shrink: 0;
      }

      html,
      body {
        height: 100%;
        width: 100%;
        font-size: 14px;
      }

      html {
        scroll-behavior: smooth;
      }

      body {
        font-family: 'Inter', system-ui, -apple-system, sans-serif;
        color: var(--text);
        overflow-x: hidden;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        background: var(--page-bg);
        background-attachment: fixed;
        color-scheme: dark;
      }

      body[data-theme="light"] {
        --bg: #f8fafc;
        --panel: rgba(255, 255, 255, 0.9);
        --panel-2: rgba(255, 255, 255, 0.75);
        --border: rgba(15, 23, 42, 0.1);
        --text: #0f172a;
        --muted: #475569;
        --muted-2: #64748b;
        --stroke: rgba(15, 23, 42, 0.1);
        --stroke-strong: rgba(15, 23, 42, 0.16);
        --surface: rgba(255, 255, 255, 0.92);
        --surface-2: rgba(248, 250, 252, 0.98);
        --surface-3: rgba(226, 232, 240, 0.85);
        --shadow-card: 0 10px 24px rgba(15, 23, 42, 0.06);
        --shadow-card-hover: 0 20px 40px rgba(15, 23, 42, 0.12);
        --page-bg: radial-gradient(1400px 800px at 0% 0%, rgba(59, 130, 246, 0.06), transparent 60%),
          radial-gradient(1000px 600px at 100% 0%, rgba(168, 85, 247, 0.05), transparent 60%),
          linear-gradient(180deg, #f8fafc, #eef2f7);
        --sidebar-bg: rgba(248, 250, 252, 0.82);
        --ambient-opacity: 0.3;
        color-scheme: light;
      }

      body[data-theme="light"]::before,
      body[data-theme="light"]::after {
        mix-blend-mode: multiply;
        filter: blur(80px);
      }

      body[data-theme="light"] .nav a {
        color: #334155;
      }

      body[data-theme="light"] .nav a:hover {
        background: rgba(226, 232, 240, 0.75);
        color: var(--text);
      }

      body[data-theme="light"] .nav a.active {
        background: rgba(226, 232, 240, 0.85);
        border-color: var(--stroke);
        box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
      }

      body[data-theme="light"] .sidebar-card {
        background: rgba(255, 255, 255, 0.78);
        border-color: var(--stroke);
      }

      body[data-theme="light"] .chip {
        background: rgba(226, 232, 240, 0.65);
        border-color: var(--stroke);
        color: #334155;
      }

      body[data-theme="light"] .link-danger {
        color: #991b1b;
        background: rgba(239, 68, 68, 0.1);
        border-color: rgba(239, 68, 68, 0.25);
      }

      body[data-theme="light"] .segmented {
        background: rgba(226, 232, 240, 0.65);
      }

      body[data-theme="light"] .seg-btn {
        color: #334155;
      }

      body[data-theme="light"] .seg-btn.active {
        background: rgba(255, 255, 255, 0.95);
        box-shadow: 0 3px 12px rgba(15, 23, 42, 0.08);
      }

      body[data-theme="light"] .collapse {
        background: rgba(255, 255, 255, 0.9);
        color: #334155;
      }

      body[data-theme="light"] .footer-btn {
        background: rgba(255, 255, 255, 0.9);
      }

      body[data-theme="light"] .footer-btn:hover {
        background: rgba(255, 255, 255, 0.98);
      }

      body[data-theme="light"] .btn-secondary {
        background: rgba(226, 232, 240, 0.75);
        border-color: var(--stroke);
        color: var(--text);
      }

      body[data-theme="light"] .btn-secondary:hover {
        background: rgba(226, 232, 240, 0.95);
        color: var(--text);
      }

      body[data-theme="light"] .card::before {
        background: radial-gradient(800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(15, 23, 42, 0.06), transparent 40%);
      }

      body[data-theme="light"] .table th,
      body[data-theme="light"] .table td {
        border-color: rgba(15, 23, 42, 0.08);
      }

      body[data-theme="light"] .table th {
        color: #334155;
      }

      body[data-theme="light"] .empty-state {
        color: var(--muted);
      }

      body[data-theme="light"] .kpi-icon {
        background: rgba(226, 232, 240, 0.55);
        border-color: rgba(15, 23, 42, 0.12);
      }

      body[data-theme="light"] .kpi-icon.blue {
        background: rgba(37, 99, 235, 0.12);
        border-color: rgba(37, 99, 235, 0.24);
      }

      body[data-theme="light"] .kpi-icon.purple {
        background: rgba(147, 51, 234, 0.12);
        border-color: rgba(147, 51, 234, 0.24);
      }

      body[data-theme="light"] .kpi-icon.green {
        background: rgba(22, 163, 74, 0.12);
        border-color: rgba(22, 163, 74, 0.24);
      }

      body[data-theme="light"] .kpi-icon.amber {
        background: rgba(217, 119, 6, 0.12);
        border-color: rgba(217, 119, 6, 0.24);
      }

      body[data-theme="light"] .status-pill.pending {
        background: rgba(255, 237, 213, 0.9);
        color: #9a3412;
        border-color: rgba(154, 52, 18, 0.18);
      }

      body[data-theme="light"] .status-pill.approved {
        background: rgba(220, 252, 231, 0.9);
        color: #166534;
        border-color: rgba(22, 101, 52, 0.18);
      }

      body[data-theme="light"] .status-pill.refused {
        background: rgba(254, 226, 226, 0.92);
        color: #991b1b;
        border-color: rgba(153, 27, 27, 0.18);
      }

      body[data-theme="light"] .modal-backdrop {
        background: rgba(15, 23, 42, 0.32);
      }

      @keyframes ambient-drift {
        0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
        33% { transform: translate3d(2%, 3%, 0) rotate(2deg) scale(1.05); }
        66% { transform: translate3d(-1%, 4%, 0) rotate(-1deg) scale(0.95); }
        100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
      }

      @keyframes ambient-drift-2 {
        0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
        33% { transform: translate3d(-3%, -2%, 0) rotate(-2deg) scale(1.1); }
        66% { transform: translate3d(2%, -3%, 0) rotate(1deg) scale(0.9); }
        100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
      }

      .app {
        min-height: 100vh;
        display: grid;
        grid-template-columns: 260px 1fr;
        transition: grid-template-columns 400ms var(--ease);
      }

      body[data-collapsed="true"] .app {
        grid-template-columns: 88px 1fr;
      }

      .sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
        padding: 24px 16px;
        border-right: 1px solid var(--stroke);
        background: var(--sidebar-bg);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        display: flex;
        flex-direction: column;
        transition: padding 400ms var(--ease);
        z-index: 100;
      }

      body[data-collapsed="true"] .sidebar {
        padding: 24px 12px;
      }

      .brand {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 12px 20px;
        margin-bottom: 20px;
        border-bottom: 1px solid var(--stroke);
      }

      .brand-title {
        display: flex;
        align-items: center;
        gap: 12px;
        font-weight: 800;
        font-size: 18px;
        letter-spacing: -0.5px;
      }

      .brand-title span:last-child {
        transition: opacity 300ms var(--ease), transform 300ms var(--ease);
      }

      body[data-collapsed="true"] .brand-title span:last-child {
        opacity: 0;
        transform: translateX(-10px);
        pointer-events: none;
        position: absolute;
      }

      .collapse {
        width: 32px;
        height: 32px;
        border-radius: 10px;
        border: 1px solid var(--stroke);
        background: var(--surface);
        color: var(--muted);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 200ms var(--ease);
      }

      .collapse:hover {
        background: var(--surface-3);
        color: var(--text);
        border-color: var(--stroke-strong);
        transform: scale(1.05);
      }

      body[data-collapsed="true"] .collapse svg {
        transform: rotate(180deg);
      }

      .nav {
        display: flex;
        flex-direction: column;
        gap: 6px;
        flex: 1;
      }

      .nav a {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 14px;
        border-radius: 14px;
        color: var(--muted);
        text-decoration: none;
        font-size: 14px;
        font-weight: 500;
        transition: all 250ms var(--ease);
        position: relative;
        border: 1px solid transparent;
      }

      .nav a:hover {
        background: var(--surface-3);
        color: var(--text);
        transform: translateX(4px);
      }

      .nav a.active {
        background: var(--surface-3);
        color: var(--text);
        border-color: var(--stroke);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
      }

      .nav a.active::before {
        content: "";
        position: absolute;
        left: -8px;
        top: 12px;
        bottom: 12px;
        width: 4px;
        border-radius: 0 4px 4px 0;
        background: var(--blue);
        box-shadow: 0 0 15px var(--blue);
      }

      body[data-collapsed="true"] .nav a {
        justify-content: center;
        padding: 12px;
      }

      body[data-collapsed="true"] .nav a span {
        display: none;
      }

      body[data-collapsed="true"] .nav a:hover {
        transform: scale(1.1);
      }

      .nav svg {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
      }

      .sidebar-footer {
        padding-top: 20px;
        border-top: 1px solid var(--stroke);
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      .footer-btn {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 14px;
        border-radius: 14px;
        background: var(--surface);
        border: 1px solid var(--stroke);
        color: var(--text);
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: all 200ms var(--ease);
      }

      .footer-btn:hover {
        background: var(--surface-3);
        border-color: var(--stroke-strong);
        transform: translateY(-2px);
      }

      body[data-collapsed="true"] .footer-btn {
        justify-content: center;
        padding: 12px;
      }

      body[data-collapsed="true"] .footer-btn span {
        display: none;
      }

      .sidebar-card {
        border-radius: 14px;
        border: 1px solid var(--border);
        background: rgba(255, 255, 255, 0.04);
        padding: 12px;
      }

      .row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
      }

      .chip {
        padding: 7px 10px;
        border-radius: 999px;
        border: 1px solid var(--border);
        background: rgba(255, 255, 255, 0.04);
        color: var(--muted);
        font-size: 12px;
      }

      .link-danger {
        width: 100%;
        padding: 10px 12px;
        border-radius: 12px;
        border: 1px solid rgba(239, 68, 68, 0.25);
        background: rgba(239, 68, 68, 0.08);
        color: rgba(255, 255, 255, 0.9);
        display: flex;
        gap: 10px;
        align-items: center;
      }

      .main {
        padding: 32px;
        max-width: 1400px;
        margin: 0 auto;
        width: 100%;
      }

      .header {
        margin-bottom: 32px;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
      }

      .title {
        font-size: 24px;
        font-weight: 800;
        letter-spacing: -0.8px;
        margin-bottom: 4px;
      }

      .subtitle {
        color: var(--muted);
        font-size: 13px;
        letter-spacing: -0.1px;
      }

      .card {
        background: var(--surface);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid var(--stroke);
        border-radius: 16px;
        padding: 20px;
        transition: all 400ms var(--ease);
        position: relative;
        overflow: hidden;
      }

      .card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 255, 255, 0.06), transparent 40%);
        opacity: 0;
        transition: opacity 400ms;
        pointer-events: none;
      }

      .card:hover::before {
        opacity: 1;
      }

      .card:hover {
        transform: translateY(-4px) scale(1.01);
        border-color: var(--stroke-strong);
        box-shadow: var(--shadow-card-hover);
        background: var(--surface-3);
      }

      .card-inner {
        display: flex;
        flex-direction: column;
        gap: 12px;
        position: relative;
        z-index: 1;
      }

      .grid-top {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 20px;
        margin-bottom: 32px;
      }

      .grid-top-2 {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
        gap: 20px;
        margin-bottom: 32px;
      }

      @media (max-width: 1200px) {
        .grid-top {
          grid-template-columns: repeat(2, 1fr);
        }
      }

      @media (max-width: 800px) {
        .grid-top-2 {
          grid-template-columns: 1fr;
        }
      }

      @media (max-width: 600px) {
        .grid-top {
          grid-template-columns: 1fr;
        }
      }

      @media (max-width: 720px) {
        .table {
          display: block;
          overflow-x: auto;
          -webkit-overflow-scrolling: touch;
          white-space: nowrap;
        }
        .table th, .table td {
          min-width: 120px;
        }
      }

      .kpi-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
      }

      .kpi-label {
        font-size: 11px;
        font-weight: 700;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.8px;
        margin-bottom: 6px;
      }

      .kpi-value {
        font-size: 24px;
        font-weight: 800;
        letter-spacing: -0.5px;
      }

      .kpi-icon {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--surface-3);
        border: 1px solid var(--stroke);
        flex-shrink: 0;
      }

      .kpi-icon.blue {
        color: var(--blue);
        background: rgba(59, 130, 246, 0.1);
        border-color: rgba(59, 130, 246, 0.2);
      }

      .kpi-icon.purple {
        color: var(--purple);
        background: rgba(168, 85, 247, 0.1);
        border-color: rgba(168, 85, 247, 0.2);
      }

      .kpi-icon.green {
        color: var(--green);
        background: rgba(34, 197, 94, 0.1);
        border-color: rgba(34, 197, 94, 0.2);
      }

      .kpi-icon.amber {
        color: var(--amber);
        background: rgba(245, 158, 11, 0.1);
        border-color: rgba(245, 158, 11, 0.2);
      }

      .kpi-icon svg {
        width: 16px;
        height: 16px;
      }

      .grid-mid {
        display: grid;
        grid-template-columns: 1.2fr 1fr;
        gap: 16px;
        margin-bottom: 24px;
      }

      .big-number {
        font-size: 24px;
        font-weight: 800;
        margin: 4px 0;
      }

      .small-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
      }

      .small-value {
        font-size: 20px;
        font-weight: 800;
        margin: 2px 0;
      }

      .small-stat {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
      }

      .section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 16px;
      }

      .section-left {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .pill-icon {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--surface-3);
        border: 1px solid var(--stroke);
        flex-shrink: 0;
      }

      .stat-card {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }

      .stat-label {
        font-size: 13px;
        font-weight: 600;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 1px;
      }

      .stat-value {
        font-size: 24px;
        font-weight: 800;
        letter-spacing: -0.5px;
      }

      .stat-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--surface-3);
        border: 1px solid var(--stroke);
        margin-bottom: 4px;
      }

      .stat-icon svg {
        width: 20px;
        height: 20px;
      }

      .view-transition {
        animation: slide-up 600ms var(--ease-out) both;
      }

      @keyframes slide-up {
        from {
          opacity: 0;
          transform: translateY(15px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .stagger-item {
        opacity: 0;
        animation: slide-up 600ms var(--ease-out) forwards;
      }
        overflow: hidden;
      }

      ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
      }
      ::-webkit-scrollbar-track {
        background: transparent;
      }
      ::-webkit-scrollbar-thumb {
        background: var(--stroke-strong);
        border-radius: 10px;
      }
      ::-webkit-scrollbar-thumb:hover {
        background: var(--muted-2);
      }

      .toolbar {
        border-radius: var(--radius);
        border: 1px solid var(--stroke);
        background: var(--surface);
        padding: 8px 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 24px;
        backdrop-filter: blur(10px);
      }

      .toolbar-left {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .segmented {
        display: inline-flex;
        background: var(--surface-2);
        padding: 4px;
        border-radius: 12px;
        border: 1px solid var(--stroke);
        position: relative;
      }

      .custom-date-picker {
        position: absolute;
        top: calc(100% + 10px);
        left: 0;
        z-index: 50;
        border-radius: 12px;
        border: 1px solid var(--stroke);
        background: var(--surface-3);
        color: var(--text);
        padding: 8px 10px;
        font: inherit;
        box-shadow: var(--shadow-card);
      }

      .custom-date-picker[data-hidden="true"] {
        display: none;
      }

      .seg-btn {
        padding: 6px 12px;
        border-radius: 8px;
        border: none;
        background: transparent;
        color: var(--muted);
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: all 200ms var(--ease);
      }

      .seg-btn:hover {
        color: var(--text);
        background: var(--surface-2);
      }

      .seg-btn.active {
        background: var(--surface-3);
        color: var(--text);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }

      .btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
        border-radius: 12px;
        border: 1px solid var(--stroke);
        background: var(--surface);
        color: var(--text);
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: all 200ms var(--ease);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        user-select: none;
      }

      .btn:hover {
        background: var(--surface-3);
        border-color: var(--stroke-strong);
        transform: translateY(-1px);
      }
      
      .btn:disabled,
      .btn[disabled] {
        opacity: 0.55;
        cursor: not-allowed;
        transform: none;
      }

      .btn-primary {
        background: var(--blue);
        color: white;
        border: none;
      }

      .btn-primary:hover {
        background: #2563eb;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
      }

      .btn-secondary {
        padding: 6px 12px;
        border-radius: 8px;
        background: var(--surface-2);
        border: 1px solid var(--stroke);
        color: var(--muted);
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        transition: all 200ms var(--ease);
      }

      .btn-secondary:hover {
        background: var(--surface-3);
        color: var(--text);
      }

      .action-row {
        display: inline-flex;
        gap: 10px;
        justify-content: flex-end;
        align-items: center;
        flex-wrap: nowrap;
      }

      .table th.admin-actions-cell,
      .table td.admin-actions-cell {
        width: 220px;
        min-width: 220px;
        white-space: nowrap;
        overflow: visible;
        text-overflow: clip;
      }

      .action-row .btn-secondary {
        padding: 6px 10px;
      }

      .role-select {
        width: 100%;
        padding: 6px 34px 6px 12px;
        border-radius: 10px;
        border: 1px solid var(--stroke);
        background: var(--surface-2);
        color: var(--text);
        color-scheme: dark;
        appearance: none;
        font: inherit;
        font-size: 12px;
        font-weight: 700;
        outline: none;
        transition: border-color 150ms var(--ease), background 150ms var(--ease);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 10l5 5 5-5' stroke='rgba(229,231,235,0.9)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 10px center;
        background-size: 18px 18px;
      }

      .role-select:focus {
        border-color: rgba(59, 130, 246, 0.7);
        background: var(--surface-3);
      }

      .role-select option {
        background: var(--surface-3);
        color: var(--text);
      }

      .role-dropdown {
        position: relative;
        width: 100%;
      }

      .table td.admin-role-cell {
        overflow: visible;
        text-overflow: clip;
      }

      .role-trigger {
        width: 100%;
        padding: 6px 34px 6px 12px;
        border-radius: 10px;
        border: 1px solid var(--stroke);
        background: var(--surface-2);
        color: var(--text);
        font: inherit;
        font-size: 12px;
        font-weight: 800;
        text-align: left;
        cursor: pointer;
        transition: border-color 150ms var(--ease), background 150ms var(--ease), transform 120ms var(--ease);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 10l5 5 5-5' stroke='rgba(229,231,235,0.9)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 10px center;
        background-size: 18px 18px;
      }

      body[data-theme="light"] .role-trigger {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 10l5 5 5-5' stroke='rgba(15,23,42,0.75)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      }

      .role-trigger:hover {
        background: var(--surface-3);
      }

      .role-trigger:active {
        transform: translateY(1px);
      }

      .role-dropdown[data-open="true"] .role-trigger {
        border-color: rgba(59, 130, 246, 0.7);
        background: var(--surface-3);
      }

      .role-menu {
        position: fixed;
        background: var(--surface);
        border: 1px solid var(--stroke);
        border-radius: 14px;
        padding: 6px;
        z-index: 50;
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
        display: flex;
        flex-direction: column;
        gap: 4px;
      }

      body[data-theme="light"] .role-menu {
        box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
      }

      .role-menu[data-hidden="true"] {
        display: none;
      }

      .role-item {
        width: 100%;
        padding: 10px 10px;
        border-radius: 10px;
        border: 1px solid transparent;
        background: transparent;
        color: var(--text);
        font: inherit;
        font-size: 12px;
        font-weight: 800;
        text-align: left;
        cursor: pointer;
        transition: background 150ms var(--ease), border-color 150ms var(--ease);
        display: block;
      }

      .role-item:hover {
        background: var(--surface-3);
        border-color: rgba(59, 130, 246, 0.3);
      }

      .offer-name {
        font-weight: 600;
        font-size: 14px;
        letter-spacing: -0.2px;
      }

      .num-blue { color: var(--blue); font-weight: 600; }
      .num-amber { color: var(--amber); font-weight: 600; }
      .num-green { color: var(--green); font-weight: 600; }
      .num-purple { color: var(--purple); font-weight: 600; }
      .text-right { text-align: right; }

      .status-pill {
        padding: 4px 10px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border: 1px solid transparent;
      }

      .status-pill.approved {
        background: rgba(34, 197, 94, 0.1);
        color: var(--green);
        border-color: rgba(34, 197, 94, 0.2);
        box-shadow: 0 0 10px rgba(34, 197, 94, 0.1);
      }

      .status-pill.pending {
        background: rgba(245, 158, 11, 0.1);
        color: var(--amber);
        border-color: rgba(245, 158, 11, 0.2);
      }

      .status-pill.refused {
        background: rgba(239, 68, 68, 0.1);
        color: var(--red);
        border-color: rgba(239, 68, 68, 0.2);
      }

      .status-pill.maintenance {
        background: rgba(245, 158, 11, 0.1);
        color: var(--amber);
        border-color: rgba(245, 158, 11, 0.22);
      }

      .empty-state {
        padding: 32px;
        text-align: center;
        color: var(--muted-2);
        font-style: italic;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
      }

      .conversion-wrap {
        display: flex;
        align-items: center;
        gap: 80px;
        padding: 32px 0;
        max-width: 900px;
        margin: 0 auto;
      }

      .ring {
        width: 140px;
        height: 140px;
        display: grid;
        place-items: center;
        position: relative;
        flex-shrink: 0;
      }

      .ring svg {
        transform: rotate(-90deg);
        width: 140px;
        height: 140px;
      }

      .ring-center {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        text-align: center;
      }

      .ring-value {
        font-size: 20px;
        font-weight: 800;
        letter-spacing: -0.5px;
      }

      .ring-label {
        margin-top: 1px;
        color: var(--muted);
        font-size: 11px;
      }

      .ring-meta {
        margin-top: 6px;
        color: var(--muted-2);
        font-size: 11px;
        font-weight: 700;
      }

      .offer-payout-card {
        border: 1px solid rgba(34, 197, 94, 0.18);
        background: rgba(34, 197, 94, 0.12);
        border-radius: 16px;
        padding: 16px;
      }

      body[data-theme="light"] .offer-payout-card {
        border-color: rgba(34, 197, 94, 0.16);
        background: rgba(34, 197, 94, 0.08);
      }

      .offer-payout-label {
        font-size: 12px;
        font-weight: 800;
        color: rgba(226, 232, 240, 0.78);
      }

      body[data-theme="light"] .offer-payout-label {
        color: rgba(15, 23, 42, 0.72);
      }

      .offer-payout-value {
        margin-top: 6px;
        font-weight: 900;
        font-size: 26px;
        color: rgba(34, 197, 94, 1);
        letter-spacing: 0.01em;
      }

      .offer-template-card {
        margin-top: 14px;
        border: 1px solid var(--stroke);
        background: var(--surface);
        border-radius: 16px;
        padding: 14px;
      }

      .offer-template-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 12px;
      }

      .offer-template-title {
        font-weight: 900;
        font-size: 13px;
      }

      .offer-template-sub {
        margin-top: 2px;
        font-weight: 700;
        font-size: 12px;
        color: var(--muted);
      }

      .offer-template-body {
        display: grid;
        gap: 12px;
      }

      .offer-template-preview {
        height: 110px;
        border-radius: 14px;
        border: 1px solid var(--stroke);
        background:
          radial-gradient(220px 140px at 35% 40%, rgba(59,130,246,0.22), transparent 60%),
          radial-gradient(220px 140px at 70% 40%, rgba(168,85,247,0.18), transparent 60%),
          linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
        position: relative;
        overflow: hidden;
      }

      body[data-theme="light"] .offer-template-preview {
        background:
          radial-gradient(220px 140px at 35% 40%, rgba(59,130,246,0.12), transparent 60%),
          radial-gradient(220px 140px at 70% 40%, rgba(168,85,247,0.10), transparent 60%),
          linear-gradient(180deg, rgba(15,23,42,0.02), rgba(15,23,42,0.01));
      }

      .offer-template-actions {
        display: flex;
        gap: 10px;
        justify-content: flex-end;
        flex-wrap: wrap;
      }

      .legend {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 16px;
        flex: 1;
      }

      .legend-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        border: 1px solid var(--stroke);
        background: var(--surface-2);
        padding: 12px 16px;
        border-radius: 12px;
        transition: all 200ms var(--ease);
        min-width: 200px;
      }

      .legend-row:hover {
        background: var(--surface-3);
      }

      .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
      }

      .dot.blue { background: var(--blue); box-shadow: 0 0 10px var(--blue); }
      .dot.green { background: var(--green); box-shadow: 0 0 10px var(--green); }

      .legend-left {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 13px;
        font-weight: 500;
      }

      .legend-right {
        font-weight: 700;
        font-variant-numeric: tabular-nums;
      }

      .request-bar {
        border-radius: var(--radius);
        border: 1px solid var(--stroke);
        background: var(--surface);
        padding: 16px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        margin-bottom: 24px;
        backdrop-filter: blur(10px);
      }

      .request-left {
        display: flex;
        flex-direction: column;
        gap: 4px;
      }

      .request-title {
        font-size: 15px;
        font-weight: 700;
      }

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

      .request-right {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .chip {
        padding: 6px 12px;
        border-radius: 10px;
        background: var(--surface-3);
        border: 1px solid var(--stroke);
        font-size: 12px;
        font-weight: 600;
      }

      .empty-state svg {
        display: block;
        width: 32px;
        height: 32px;
        opacity: 0.25;
        margin-bottom: 8px;
      }

      svg {
        max-width: 100%;
        max-height: 100%;
      }

      [data-hidden="true"] {
        display: none !important;
      }

      /* Scaling fixes for other tabs */
      .summary-value {
        font-size: 24px;
        font-weight: 800;
        margin-top: 4px;
      }

      .summary-card {
        max-width: 400px;
      }

      .offer-cell {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .offer-logo {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: -0.5px;
        text-transform: uppercase;
        border: 1px solid var(--stroke);
      }

      .offer-logo[data-color="blue"] { background: rgba(59, 130, 246, 0.15); color: var(--blue); border-color: rgba(59, 130, 246, 0.3); }
      .offer-logo[data-color="pink"] { background: rgba(236, 72, 153, 0.15); color: var(--pink); border-color: rgba(236, 72, 153, 0.3); }
      .offer-logo[data-color="purple"] { background: rgba(168, 85, 247, 0.15); color: var(--purple); border-color: rgba(168, 85, 247, 0.3); }

      .status-pill {
        padding: 4px 10px;
        font-size: 11px;
      }

      .table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 8px;
        table-layout: fixed;
      }

      .table th, .table td {
        padding: 14px 16px;
        font-size: 13px;
        text-align: left;
        border-bottom: 1px solid var(--stroke);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .table th {
        font-size: 11px;
        font-weight: 700;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }

      .table tr:last-child td {
        border-bottom: none;
      }

      .table tbody tr:hover td {
        background: var(--surface-2);
      }

      .pager {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
        margin-top: 12px;
      }

      .pager-info {
        font-size: 12px;
        color: var(--muted);
        font-weight: 700;
      }

      .pager-select {
        padding: 6px 10px;
        border-radius: 10px;
        border: 1px solid var(--stroke);
        background: var(--surface-2);
        color: var(--text);
        font: inherit;
        font-size: 12px;
        font-weight: 700;
        outline: none;
        color-scheme: inherit;
      }

      .tracker-section {
        margin-top: 24px;
      }

      .kpi-meta {
        font-size: 11px;
        color: var(--muted-2);
        margin-top: 2px;
      }

      .btn-small {
        padding: 6px 12px;
        font-size: 12px;
      }

      @keyframes copyPop {
        0% { transform: translateY(0) scale(1); }
        30% { transform: translateY(-1px) scale(1.03); }
        100% { transform: translateY(0) scale(1); }
      }

      @keyframes copyShake {
        0% { transform: translateX(0); }
        25% { transform: translateX(-4px); }
        50% { transform: translateX(4px); }
        75% { transform: translateX(-3px); }
        100% { transform: translateX(0); }
      }

      @keyframes copyGlow {
        0% { box-shadow: 0 0 0 rgba(34,197,94,0); }
        30% { box-shadow: 0 0 0 6px rgba(34,197,94,0.16); }
        100% { box-shadow: 0 0 0 rgba(34,197,94,0); }
      }

      @keyframes savePop {
        0% { transform: translateY(0) scale(1); }
        35% { transform: translateY(-2px) scale(1.04); }
        100% { transform: translateY(0) scale(1); }
      }

      .btn.save-ok {
        background: rgba(34, 197, 94, 0.14);
        border-color: rgba(34, 197, 94, 0.28);
        color: rgba(134, 239, 172, 0.95);
        animation: savePop 340ms var(--ease);
      }

      body[data-theme="light"] .btn.save-ok {
        color: rgba(21, 128, 61, 1);
      }

      .btn.copy-ok {
        background: rgba(34, 197, 94, 0.14);
        border-color: rgba(34, 197, 94, 0.28);
        color: rgba(134, 239, 172, 0.95);
        animation: copyPop 320ms var(--ease);
      }

      body[data-theme="light"] .btn.copy-ok {
        color: rgba(21, 128, 61, 1);
      }

      .btn.copy-err {
        background: rgba(239, 68, 68, 0.12);
        border-color: rgba(239, 68, 68, 0.26);
        color: rgba(252, 165, 165, 0.95);
        animation: copyShake 360ms var(--ease);
      }

      body[data-theme="light"] .btn.copy-err {
        color: rgba(185, 28, 28, 1);
      }

      #offer-aff-link.copy-ok {
        border-color: rgba(34, 197, 94, 0.34);
        background: rgba(34, 197, 94, 0.08);
        animation: copyGlow 900ms var(--ease);
      }

      .modal-backdrop {
        position: fixed;
        inset: 0;
        padding: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.55);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        z-index: 1000;
      }

      .modal {
        width: min(520px, 100%);
        max-height: min(90vh, 680px);
        border-radius: 18px;
        background: rgba(15, 23, 42, 0.92);
        border: 1px solid var(--stroke-strong);
        box-shadow: var(--shadow);
        overflow: auto;
      }

      body[data-theme="light"] .modal {
        background: rgba(255, 255, 255, 0.92);
      }

      .modal-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        padding: 14px 16px;
        border-bottom: 1px solid var(--stroke);
      }

      .modal-title {
        font-size: 15px;
        font-weight: 800;
        letter-spacing: -0.3px;
      }

      .modal-subtitle {
        margin-top: 4px;
        font-size: 12px;
        color: var(--muted);
      }

      .modal-body {
        padding: 16px;
      }

      .modal-actions {
        padding: 14px 16px;
        border-top: 1px solid var(--stroke);
        display: flex;
        justify-content: flex-end;
        gap: 10px;
      }

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

      .field {
        display: grid;
        gap: 6px;
      }

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

      .modal input,
      .modal textarea {
        width: 100%;
        padding: 10px 12px;
        border-radius: 12px;
        border: 1px solid var(--stroke);
        background: var(--surface-2);
        color: var(--text);
        font-family: inherit;
        font-size: 13px;
        outline: none;
        transition: border-color 150ms var(--ease), background 150ms var(--ease);
      }

      body[data-theme="light"] .modal input,
      body[data-theme="light"] .modal textarea {
        background: rgba(15, 23, 42, 0.04);
      }

      .modal input:focus,
      .modal textarea:focus {
        border-color: rgba(59, 130, 246, 0.7);
        background: var(--surface-3);
      }

      .form-error {
        padding: 10px 12px;
        border-radius: 12px;
        border: 1px solid rgba(239, 68, 68, 0.25);
        background: rgba(239, 68, 68, 0.08);
        color: rgba(255, 255, 255, 0.92);
        font-size: 12px;
        font-weight: 600;
      }

      body[data-theme="light"] .form-error {
        color: #7f1d1d;
      }

      body[data-route="home"] .app,
      body[data-route="login"] .app,
      body[data-route="signup"] .app {
        display: none;
      }

      body[data-route]:not([data-route="home"]):not([data-route="login"]):not([data-route="signup"]) #auth-shell {
        display: none;
      }

      #auth-shell {
        min-height: 100vh;
      }

      .auth-page {
        min-height: 100vh;
        display: grid;
        place-items: center;
        padding: 48px 16px;
      }

      .auth-card {
        width: min(420px, 100%);
        border-radius: 18px;
        border: 1px solid var(--stroke);
        background: rgba(255, 255, 255, 0.04);
        box-shadow: var(--shadow-card);
        padding: 20px;
      }

      .auth-head {
        margin-bottom: 14px;
        text-align: center;
      }

      .auth-title {
        font-weight: 900;
        font-size: 18px;
        letter-spacing: -0.4px;
      }

      .auth-sub {
        margin-top: 6px;
        font-size: 12px;
        color: var(--muted);
      }

      .auth-form {
        display: grid;
        gap: 12px;
      }

      .auth-card input,
      .auth-card textarea {
        width: 100%;
        padding: 11px 12px;
        border-radius: 14px;
        border: 1px solid var(--stroke);
        background: rgba(255, 255, 255, 0.04);
        color: var(--text);
        font-family: inherit;
        font-size: 13px;
        outline: none;
        transition: border-color 150ms var(--ease), background 150ms var(--ease), transform 150ms var(--ease);
      }

      body[data-theme="light"] .auth-card input,
      body[data-theme="light"] .auth-card textarea {
        background: rgba(15, 23, 42, 0.04);
      }

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

      .auth-card input:focus,
      .auth-card textarea:focus {
        border-color: rgba(59, 130, 246, 0.7);
        background: rgba(255, 255, 255, 0.06);
        transform: translateY(-1px);
      }

      .auth-form .btn {
        width: 100%;
        justify-content: center;
        padding: 10px 16px;
        border-radius: 12px;
      }

      .auth-foot {
        margin-top: 12px;
        text-align: center;
        font-size: 12px;
        color: var(--muted);
      }

      .auth-foot a {
        color: var(--blue);
        text-decoration: none;
        font-weight: 700;
      }

      .landing {
        width: 100%;
        height: 100vh;
        min-height: 100vh;
        display: block;
        padding: 0;
        margin: 0;
        position: relative;
        overflow: hidden;
      }

      .landing-inner {
        height: 100%;
        max-width: 1400px;
        margin: 0 auto;
        padding: clamp(14px, 2.2vw, 26px) clamp(16px, 3.2vw, 44px) 0;
        display: flex;
        flex-direction: column;
        position: relative;
        z-index: 1;
      }

      body[data-route="home"] {
        --page-bg: radial-gradient(1400px 900px at 0% 0%, rgba(168, 85, 247, 0.35), transparent 60%),
          radial-gradient(1100px 700px at 100% 0%, rgba(236, 72, 153, 0.22), transparent 62%),
          radial-gradient(900px 700px at 60% 85%, rgba(59, 130, 246, 0.18), transparent 62%),
          radial-gradient(1200px 800px at 20% 110%, rgba(34, 197, 94, 0.1), transparent 60%),
          #050714;
        overflow: hidden;
      }

      @keyframes landingGlow {
        0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.55; }
        50% { transform: translate3d(2%, -2%, 0) scale(1.04); opacity: 0.75; }
        100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.55; }
      }

      .landing::before,
      .landing::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        filter: blur(70px);
        opacity: 0.6;
        animation: landingGlow 10s var(--ease) infinite;
        transform: scale(1.22);
      }

      @keyframes gridDrift {
        0% { transform: translate3d(0, 0, 0); opacity: 0.22; }
        50% { transform: translate3d(2%, -1%, 0); opacity: 0.32; }
        100% { transform: translate3d(0, 0, 0); opacity: 0.22; }
      }

      .landing-overlay {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        mask-image: radial-gradient(60% 55% at 45% 40%, rgba(0,0,0,1), transparent 70%);
        -webkit-mask-image: radial-gradient(60% 55% at 45% 40%, rgba(0,0,0,1), transparent 70%);
        animation: gridDrift 12s var(--ease) infinite;
      }

      .landing-overlay::before {
        content: "";
        position: absolute;
        inset: -40px;
        background:
          repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 1px, transparent 1px, transparent 56px),
          repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 56px);
        opacity: 0.22;
        filter: blur(0.2px);
        transform: rotate(-6deg);
      }

      .landing::before {
        background: radial-gradient(700px 420px at 20% 30%, rgba(168, 85, 247, 0.28), transparent 70%),
          radial-gradient(650px 420px at 85% 35%, rgba(236, 72, 153, 0.22), transparent 72%),
          radial-gradient(600px 420px at 70% 85%, rgba(59, 130, 246, 0.16), transparent 70%);
      }

      .landing::after {
        animation-duration: 14s;
        opacity: 0.45;
        background: radial-gradient(800px 520px at 35% 25%, rgba(59, 130, 246, 0.14), transparent 70%),
          radial-gradient(700px 460px at 80% 80%, rgba(168, 85, 247, 0.14), transparent 70%);
      }

      .landing-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 8px 6px 12px;
        position: relative;
        z-index: 2;
      }

      .landing-brand {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-weight: 900;
        letter-spacing: -0.5px;
        font-size: 16px;
        padding: 10px 14px;
        border-radius: 999px;
        border: 1px solid var(--stroke);
        background: rgba(255, 255, 255, 0.04);
        box-shadow: var(--shadow-card);
      }

      .landing-actions {
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .lang-toggle {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 4px;
        border-radius: 999px;
        border: 1px solid var(--stroke);
        background: var(--surface-2);
        box-shadow: var(--shadow-card);
      }

      .lang-chip {
        border: 0;
        background: transparent;
        color: var(--muted);
        font-weight: 900;
        font-size: 11px;
        letter-spacing: -0.2px;
        padding: 6px 10px;
        border-radius: 999px;
        cursor: pointer;
        transition: background 160ms var(--ease), color 160ms var(--ease), transform 160ms var(--ease);
      }

      .lang-chip:hover {
        background: var(--surface-3);
        color: var(--text);
        transform: translateY(-1px);
      }

      .lang-chip.active {
        background: var(--surface-3);
        color: var(--text);
      }

      .landing-actions .btn {
        border-radius: 999px;
        padding: 8px 14px;
        text-decoration: none;
        border: 1px solid var(--stroke);
        background: rgba(255, 255, 255, 0.04);
        box-shadow: var(--shadow-card);
        transition: transform 160ms var(--ease), background 160ms var(--ease), border-color 160ms var(--ease);
      }

      .landing-actions .btn:hover {
        transform: translateY(-1px);
        background: rgba(255, 255, 255, 0.06);
        border-color: var(--stroke-strong);
      }

      .landing-hero {
        display: grid;
        grid-template-columns: 1.15fr 0.85fr;
        gap: 22px;
        align-items: center;
        padding: 10px 6px 6px;
        position: relative;
        z-index: 2;
        min-height: 0;
        flex: 1 1 auto;
      }

      @media (max-width: 980px) {
        .landing-hero {
          grid-template-columns: 1fr;
        }
      }

      .landing-title {
        font-size: clamp(34px, 5vw, 56px);
        line-height: 1.02;
        letter-spacing: -1px;
        font-weight: 900;
      }

      .landing-title span {
        background: linear-gradient(90deg, rgba(236, 72, 153, 0.95), rgba(168, 85, 247, 0.95), rgba(59, 130, 246, 0.9));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }

      .landing-sub {
        margin-top: 14px;
        color: var(--muted);
        font-size: 14px;
        max-width: 52ch;
        line-height: 1.6;
      }

      @keyframes heroIn {
        0% { opacity: 0; transform: translate3d(0, 14px, 0) scale(0.985); filter: blur(6px); }
        100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
      }

      @keyframes heroIn2 {
        0% { opacity: 0; transform: translate3d(0, 16px, 0) scale(0.98); filter: blur(10px); }
        100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
      }

      .landing-copy {
        animation: heroIn 900ms var(--ease-out) both;
      }

      .landing-right {
        animation: heroIn2 1100ms var(--ease-out) both;
        animation-delay: 80ms;
      }

      .landing-cta {
        display: flex;
        gap: 10px;
        margin-top: 18px;
        flex-wrap: wrap;
      }

      .landing-cta .btn {
        text-decoration: none;
        border-radius: 14px;
        padding: 10px 16px;
        border: 1px solid var(--stroke);
        box-shadow: var(--shadow-card);
        transition: transform 180ms var(--ease), filter 180ms var(--ease), border-color 180ms var(--ease), background 180ms var(--ease);
      }

      .landing-cta .btn:hover {
        transform: translateY(-1px);
        border-color: var(--stroke-strong);
        filter: brightness(1.05);
      }

      .landing-bullets {
        margin-top: 18px;
        display: grid;
        gap: 10px;
        color: var(--muted);
        font-size: 13px;
      }

      .landing-bullet {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        border-radius: 14px;
        border: 1px solid var(--stroke);
        background: rgba(255, 255, 255, 0.03);
        transition: transform 180ms var(--ease), background 180ms var(--ease), border-color 180ms var(--ease);
      }

      .landing-bullet:hover {
        transform: translateY(-2px);
        background: rgba(255, 255, 255, 0.05);
        border-color: var(--stroke-strong);
      }

      .landing-visual {
        border-radius: 22px;
        border: 1px solid var(--stroke);
        background: rgba(255, 255, 255, 0.03);
        box-shadow: var(--shadow-card);
        overflow: hidden;
        position: relative;
      }

      .landing-visual::before {
        content: "";
        position: absolute;
        inset: -1px;
        background: linear-gradient(135deg, rgba(168, 85, 247, 0.22), rgba(59, 130, 246, 0.12), rgba(236, 72, 153, 0.18));
        opacity: 0.45;
        filter: blur(18px);
        pointer-events: none;
      }

      .landing-visual-top {
        padding: 14px 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid var(--stroke);
        position: relative;
        z-index: 1;
      }

      .landing-visual-title {
        font-weight: 800;
        letter-spacing: -0.3px;
        font-size: 13px;
      }

      .landing-visual-body {
        padding: 16px;
        display: grid;
        gap: 12px;
        position: relative;
        z-index: 1;
      }

      .landing-preview {
        border-radius: 18px;
        border: 1px solid var(--stroke);
        background: rgba(0, 0, 0, 0.18);
        overflow: hidden;
        position: relative;
        transform: translateZ(0);
        transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), border-color 220ms var(--ease);
      }

      .landing-preview:hover {
        transform: translateZ(0) translateY(-2px) rotateX(2deg) rotateY(-2deg);
        border-color: var(--stroke-strong);
        box-shadow: 0 26px 70px rgba(0, 0, 0, 0.45);
      }

      .landing-preview-inner {
        padding: 14px;
        display: grid;
        gap: 12px;
        position: relative;
        z-index: 1;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
      }

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

      .landing-kpi {
        border-radius: 16px;
        padding: 12px 12px;
        border: 1px solid var(--stroke);
        background: rgba(255, 255, 255, 0.02);
      }

      .landing-kpi .label {
        font-size: 11px;
        color: var(--muted);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.6px;
      }

      .landing-kpi .value {
        margin-top: 6px;
        font-size: 18px;
        font-weight: 900;
        letter-spacing: -0.5px;
      }

      .landing-chart {
        height: 120px;
        border-radius: 16px;
        border: 1px solid var(--stroke);
        background: linear-gradient(180deg, rgba(168, 85, 247, 0.12), rgba(59, 130, 246, 0.08));
        position: relative;
        overflow: hidden;
      }

      @keyframes chartSweep {
        0% { transform: translate3d(-60%, 0, 0) skewX(-18deg); opacity: 0; }
        18% { opacity: 0.9; }
        50% { opacity: 0.4; }
        100% { transform: translate3d(160%, 0, 0) skewX(-18deg); opacity: 0; }
      }

      .landing-chart::after {
        content: "";
        position: absolute;
        top: -20%;
        bottom: -20%;
        width: 40%;
        left: 0;
        background: linear-gradient(90deg, transparent, rgba(236, 72, 153, 0.16), rgba(168, 85, 247, 0.12), transparent);
        animation: chartSweep 3.6s var(--ease) infinite;
      }

      .landing-chart::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
          radial-gradient(800px 240px at 20% 10%, rgba(34, 197, 94, 0.14), transparent 60%),
          radial-gradient(800px 240px at 80% 90%, rgba(59, 130, 246, 0.18), transparent 60%);
        opacity: 0.7;
      }

      @keyframes floatY {
        0% { transform: translate3d(0, 0, 0); }
        50% { transform: translate3d(0, -10px, 0); }
        100% { transform: translate3d(0, 0, 0); }
      }

      @keyframes floatX {
        0% { transform: translate3d(0, 0, 0); }
        50% { transform: translate3d(10px, 0, 0); }
        100% { transform: translate3d(0, 0, 0); }
      }

      .float-card {
        position: absolute;
        border-radius: 16px;
        border: 1px solid var(--stroke);
        background: rgba(255, 255, 255, 0.06);
        box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
        padding: 12px 12px;
        min-width: 140px;
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        z-index: 2;
        animation: floatY 4.5s var(--ease) infinite;
      }

      .float-card .t {
        font-size: 11px;
        color: var(--muted);
        font-weight: 800;
        letter-spacing: 0.6px;
        text-transform: uppercase;
      }

      .float-card .v {
        margin-top: 8px;
        font-size: 18px;
        font-weight: 900;
        letter-spacing: -0.5px;
      }

      .float-card.a {
        top: 48px;
        right: 22px;
        animation-duration: 5.2s;
      }

      .float-card.b {
        top: 140px;
        left: 18px;
        animation-name: floatX;
        animation-duration: 6.2s;
      }

      .float-card.c {
        bottom: 22px;
        right: 20px;
        animation-duration: 5.8s;
      }

      @keyframes contactPulse {
        0% { transform: translate3d(0, 0, 0); filter: brightness(1); }
        50% { transform: translate3d(0, -1px, 0); filter: brightness(1.06); }
        100% { transform: translate3d(0, 0, 0); filter: brightness(1); }
      }

      .btn-contact {
        position: relative;
        border-radius: 999px;
        padding: 10px 16px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        background: linear-gradient(90deg, rgba(236, 72, 153, 0.9), rgba(168, 85, 247, 0.9), rgba(59, 130, 246, 0.85));
        color: rgba(255, 255, 255, 0.98);
        font-weight: 900;
        letter-spacing: -0.2px;
        box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
        overflow: hidden;
        cursor: pointer;
        animation: contactPulse 2.8s var(--ease) infinite;
        transition: transform 180ms var(--ease), box-shadow 180ms var(--ease);
      }

      .btn-contact::before {
        content: "";
        position: absolute;
        inset: -40%;
        background: radial-gradient(closest-side, rgba(255, 255, 255, 0.35), transparent 70%);
        opacity: 0.25;
        transform: translate3d(-30%, 0, 0);
        animation: chartSweep 2.8s var(--ease) infinite;
      }

      .btn-contact:hover {
        transform: translateY(-2px);
        box-shadow: 0 26px 80px rgba(0, 0, 0, 0.48);
      }

      .btn-contact span {
        position: relative;
        z-index: 1;
      }

      .landing-actions .btn-contact {
        animation: none;
        padding: 8px 14px;
        box-shadow: var(--shadow-card);
        background: rgba(255, 255, 255, 0.04);
        border-color: var(--stroke);
        color: var(--text);
      }

      .landing-actions .btn-contact::before {
        display: none;
      }

      .landing-actions .btn-contact:hover {
        transform: translateY(-1px);
        background: rgba(255, 255, 255, 0.06);
        border-color: var(--stroke-strong);
        box-shadow: var(--shadow-card-hover);
      }

      .contact-fab {
        position: fixed;
        right: 18px;
        bottom: 18px;
        z-index: 9999;
        width: 54px;
        height: 54px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        background: rgba(255, 255, 255, 0.06);
        color: rgba(255, 255, 255, 0.96);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        display: grid;
        place-items: center;
        cursor: pointer;
        transition: transform 180ms var(--ease), background 180ms var(--ease), border-color 180ms var(--ease), box-shadow 180ms var(--ease);
      }

      .contact-fab:hover {
        transform: translateY(-2px);
        border-color: var(--stroke-strong);
        background: rgba(255, 255, 255, 0.09);
        box-shadow: 0 28px 80px rgba(0, 0, 0, 0.6);
      }

      .contact-fab::after {
        content: "Contact";
        position: absolute;
        right: 64px;
        top: 50%;
        transform: translate3d(8px, -50%, 0);
        opacity: 0;
        pointer-events: none;
        padding: 8px 10px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        background: rgba(0, 0, 0, 0.22);
        color: rgba(255, 255, 255, 0.92);
        font-size: 12px;
        font-weight: 800;
        letter-spacing: -0.2px;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        transition: opacity 180ms var(--ease), transform 180ms var(--ease);
      }

      .contact-fab:hover::after {
        opacity: 1;
        transform: translate3d(0, -50%, 0);
      }

      body[data-route]:not([data-route="home"]) .contact-fab {
        display: none;
      }