/* Generated by tools/frontend/build.cjs; edit tools/frontend/src. */
/* base *//* ═══════════════════════════════════════════
       TOKENS
    ═══════════════════════════════════════════ */
    :root {
      --primary:        #4f46e5;
      --primary-d:      #4338ca;
      --primary-rgb:    79,70,229;
      --primary-light:  #eef2ff;
      --success:        #10b981;
      --success-light:  #d1fae5;
      --warning:        #f59e0b;
      --warning-light:  #fef3c7;
      --danger:         #ef4444;
      --danger-light:   #fee2e2;
      --info:           #0ea5e9;
      --info-light:     #e0f2fe;

      --bg:             #f3f4f8;
      --card-bg:        #ffffff;
      --border:         #e5e7eb;
      --border-light:   #f3f4f6;

      --text:           #0f172a;
      --text-2:         #374151;
      --muted:          #6b7280;
      --muted-light:    #9ca3af;

      --sidebar-bg:     #1a1640;
      --sidebar-w:      252px;
      --topbar-h:       62px;

      --r:              12px;
      --r-sm:           8px;
      --r-lg:           18px;
      --shadow:         0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
      --shadow-md:      0 4px 16px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
      --shadow-lg:      0 12px 32px rgba(0,0,0,.1);
    }

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

    body {
      font-family: 'Inter', sans-serif;
      background: var(--bg);
      color: var(--text);
      font-size: 15px;
      line-height: 1.65;
      min-height: 100vh;
    }

    /* ─── SCROLLBAR ─── */
    ::-webkit-scrollbar { width: 5px; height: 5px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }
    ::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

    /* ═══════════════════════════════════════════
       TOP BAR
    ═══════════════════════════════════════════ */
    .topbar {
      height: var(--topbar-h);
      background: #fff;
      border-bottom: 1px solid var(--border);
      position: fixed; top: 0; left: 0; right: 0;
      z-index: 300;
      display: flex; align-items: center;
      padding: 0 1.25rem 0 1.5rem;
      gap: .75rem;
      box-shadow: var(--shadow);
    }

    .sidebar-toggle-btn {
      display: none;
      width: 36px; height: 36px;
      background: none; border: none;
      border-radius: 8px;
      color: var(--muted);
      cursor: pointer;
      align-items: center; justify-content: center;
      font-size: 1.2rem;
      transition: background .15s, color .15s;
    }
    .sidebar-toggle-btn:hover { background: var(--border-light); color: var(--text); }
    @media (max-width: 991px) { .sidebar-toggle-btn { display: flex; } }

    .topbar-brand {
      display: flex; align-items: center; gap: .65rem;
      text-decoration: none; color: var(--text);
      font-weight: 700; font-size: .95rem;
      flex-shrink: 0;
    }
    .brand-icon {
      width: 36px; height: 36px;
      background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
      border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      color: #fff; font-size: 1rem; flex-shrink: 0;
      box-shadow: 0 2px 8px rgba(79,70,229,.35);
    }
    .brand-text { display: flex; flex-direction: column; line-height: 1.15; max-width: 260px; }
    .brand-name { font-size: .88rem; font-weight: 700; }
    .brand-sub  { font-size: .65rem; color: var(--muted); font-weight: 500; letter-spacing: .2px; }

    .topbar-spacer { flex: 1; }
    .topbar > :not(.topbar-spacer) { flex-shrink: 0; }
    .topbar-username { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .topbar-user {
      display: flex; align-items: center; gap: .55rem;
      padding: .35rem .75rem;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: #fafafa;
      font-size: .81rem;
      color: var(--text-2);
      cursor: default;
    }
    .user-avatar {
      width: 28px; height: 28px;
      border-radius: 8px;
      background: linear-gradient(135deg, var(--primary), #7c3aed);
      display: flex; align-items: center; justify-content: center;
      color: #fff; font-size: .72rem; font-weight: 700; flex-shrink: 0;
    }

    .btn-logout {
      display: flex; align-items: center; gap: .4rem;
      padding: .38rem .9rem;
      border: 1px solid var(--border);
      border-radius: 9px;
      background: #fff;
      color: var(--muted);
      font-size: .79rem; font-weight: 500;
      cursor: pointer; text-decoration: none;
      transition: all .15s;
    }
    .btn-logout:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-light); }

    .btn-login-top {
      display: flex; align-items: center; gap: .4rem;
      padding: .4rem 1rem;
      border-radius: 9px;
      background: var(--primary);
      color: #fff; font-size: .82rem; font-weight: 600;
      text-decoration: none;
      transition: background .15s, transform .12s, box-shadow .15s;
      box-shadow: 0 2px 8px rgba(var(--primary-rgb),.3);
    }
    .btn-login-top:hover {
      background: var(--primary-d); color: #fff;
      transform: translateY(-1px);
      box-shadow: 0 4px 14px rgba(var(--primary-rgb),.4);
    }

    @media (max-width: 1199px) {
      .topbar { padding: 0 .75rem; gap: .5rem; }
      .topbar .topbar-action:not(.btn-logout) .topbar-action-label,
      .topbar .topbar-user > span { display: none !important; }
      .topbar .topbar-action:not(.btn-logout) {
        display: inline-flex; align-items: center; justify-content: center;
        width: 36px; height: 36px; padding: 0; gap: 0; margin: 0 !important;
      }
      .topbar .topbar-action i, .topbar .topbar-language { margin: 0 !important; }
      .topbar-user { padding: 3px; }
      .topbar .topbar-brand { min-width: 0; flex-shrink: 1; }
      .topbar .brand-text { min-width: 0; overflow-wrap: anywhere; }
    }
    @media (max-width: 575px) {
      .topbar { padding: 0 .5rem; gap: .25rem; }
      .topbar .topbar-user { display: none; }
      .topbar .topbar-action:not(.btn-logout),
      .topbar .sidebar-toggle-btn { width: 32px; height: 36px; }
      .topbar-brand { gap: .4rem; }
      .topbar .brand-name { font-size: .78rem; }
    }
    @media (max-width: 450px) {
      .topbar .btn-logout {
        width: 32px; height: 36px; padding: 0; gap: 0; justify-content: center;
      }
      .topbar .btn-logout .topbar-action-label { display: none; }
    }
    @media (max-width: 390px) {
      .topbar .brand-text { display: none; }
    }

    /* ═══════════════════════════════════════════
       SIDEBAR
    ═══════════════════════════════════════════ */
    .sidebar {
      width: var(--sidebar-w);
      background: var(--sidebar-bg);
      position: fixed;
      top: var(--topbar-h); bottom: 0; left: 0;
      overflow-y: auto; overflow-x: hidden;
      z-index: 200;
      transition: transform .28s cubic-bezier(.4,0,.2,1);
      scrollbar-width: thin;
      scrollbar-color: rgba(255,255,255,.08) transparent;
    }
    .sidebar::-webkit-scrollbar { width: 3px; }
    .sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); }

    .sidebar-inner { padding: .75rem 0 2rem; }

    .sidebar-section { margin-bottom: .25rem; }
    .sidebar-label {
      font-size: .6rem; font-weight: 700; letter-spacing: 1.2px;
      text-transform: uppercase;
      color: rgba(255,255,255,.3);
      padding: .9rem 1.2rem .3rem;
      display: block;
    }

    .sidebar-link {
      display: flex; align-items: center; gap: .7rem;
      padding: .55rem 1.2rem;
      color: rgba(255,255,255,.65);
      text-decoration: none;
      font-size: .835rem; font-weight: 500;
      position: relative;
      transition: color .15s, background .15s;
      border-left: 3px solid transparent;
    }
    .sidebar-link:hover {
      color: rgba(255,255,255,.9);
      background: rgba(255,255,255,.07);
    }
    .sidebar-link.active {
      color: #fff;
      background: rgba(129,140,248,.15);
      border-left-color: #818cf8;
    }
    .sidebar-link .si {
      width: 18px; text-align: center;
      font-size: .9rem; flex-shrink: 0;
      opacity: .7; transition: opacity .15s;
    }
    .sidebar-link:hover .si, .sidebar-link.active .si { opacity: 1; }

    .sidebar-divider {
      height: 1px;
      background: rgba(255,255,255,.07);
      margin: .5rem 1.2rem;
    }

    /* sidebar overlay (mobile) */
    .sidebar-overlay {
      display: none; position: fixed; inset: 0;
      background: rgba(0,0,0,.45); z-index: 190;
      backdrop-filter: blur(2px);
    }

    @media (max-width: 991px) {
      .sidebar { transform: translateX(-100%); }
      .sidebar.open { transform: translateX(0); }
      .sidebar-overlay.show { display: block; }
    }

    /* ═══════════════════════════════════════════
       MAIN LAYOUT
    ═══════════════════════════════════════════ */
    .main-wrap {
      padding-top: var(--topbar-h);
      min-height: 100vh;
      transition: margin-left .28s cubic-bezier(.4,0,.2,1);
    }
    .has-sidebar .main-wrap { margin-left: var(--sidebar-w); }
    @media (max-width: 991px) { .has-sidebar .main-wrap { margin-left: 0 !important; } }

    .main-inner {
      padding: 1.75rem 1.75rem;
      max-width: 1400px;
      margin: 0 auto;
    }
    @media (max-width: 767px) { .main-inner { padding: 1.25rem 1rem; } }

    /* ═══════════════════════════════════════════
       CARDS
    ═══════════════════════════════════════════ */
    .card {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .card-header-custom {
      background: #fafbff;
      border-bottom: 1px solid var(--border);
      padding: .9rem 1.25rem;
      font-weight: 600; font-size: .875rem;
      color: var(--text);
      display: flex; align-items: center; gap: .5rem;
    }
    .card-header-custom .chc-icon {
      width: 26px; height: 26px;
      border-radius: 7px;
      display: flex; align-items: center; justify-content: center;
      font-size: .8rem; flex-shrink: 0;
    }

    /* stat cards */
    .stat-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      padding: 1.2rem 1.25rem;
      display: flex; align-items: center; gap: 1rem;
      box-shadow: var(--shadow);
      transition: transform .2s, box-shadow .2s;
      text-decoration: none; color: inherit;
    }
    .stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); color: inherit; }
    .stat-icon {
      width: 50px; height: 50px;
      border-radius: 14px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.3rem; flex-shrink: 0;
    }
    .si-indigo  { background: #eef2ff; color: #4f46e5; }
    .si-sky     { background: #e0f2fe; color: #0284c7; }
    .si-emerald { background: #d1fae5; color: #059669; }
    .si-amber   { background: #fef3c7; color: #d97706; }
    .si-rose    { background: #ffe4e6; color: #e11d48; }
    .si-purple  { background: #f3e8ff; color: #7c3aed; }
    .si-teal    { background: #ccfbf1; color: #0d9488; }
    .si-orange  { background: #ffedd5; color: #ea580c; }

    .stat-val   { font-size: 1.8rem; font-weight: 800; line-height: 1.05; color: var(--text); }
    .stat-lbl   { font-size: .76rem; color: var(--muted); margin-top: .1rem; font-weight: 500; overflow-wrap: anywhere; }
    .stat-card > div:last-child { min-width: 0; }
    @media (max-width: 390px) {
      .stat-card:not(.answer-review-stat):not(.server-time-stat) {
        display: grid;
        grid-template-columns: 32px minmax(0, 1fr);
        gap: .5rem;
      }
      .stat-card:not(.answer-review-stat):not(.server-time-stat) > div:last-child { display: contents; }
      .stat-card:not(.answer-review-stat):not(.server-time-stat) .stat-icon { width: 32px; height: 32px; font-size: 1rem; }
      .stat-card:not(.answer-review-stat):not(.server-time-stat) .stat-lbl { grid-column: 1 / -1; }
    }

    /* ═══════════════════════════════════════════
       PAGE HEADER
    ═══════════════════════════════════════════ */
    .page-hdr {
      display: flex; align-items: flex-start;
      justify-content: space-between;
      gap: 1rem; flex-wrap: wrap;
      margin-bottom: 1.5rem;
    }
    .page-title {
      font-size: 1.3rem; font-weight: 800;
      color: var(--text); margin: 0;
      letter-spacing: -.3px;
    }
    .page-sub { font-size: .8rem; color: var(--muted); margin-top: .2rem; }

    /* ═══════════════════════════════════════════
       TABLES
    ═══════════════════════════════════════════ */
    .table { font-size: .855rem; }
    .table thead th {
      font-size: .7rem; font-weight: 700;
      letter-spacing: .6px; text-transform: uppercase;
      color: var(--muted); background: #fafbff;
      border-bottom: 1px solid var(--border);
      padding: .65rem 1rem; white-space: nowrap;
    }
    .table td { padding: .75rem 1rem; vertical-align: middle; border-color: #f3f4f6; }
    .table tbody tr { transition: background .1s; }
    .table-hover tbody tr:hover { background: #f8f9ff; }

    /* ═══════════════════════════════════════════
       FORMS
    ═══════════════════════════════════════════ */
    .form-label { font-size: .8rem; font-weight: 600; color: var(--text-2); margin-bottom: .4rem; }
    .form-control, .form-select {
      border-color: var(--border); border-radius: var(--r-sm);
      font-size: .875rem; padding: .55rem .85rem;
      transition: border-color .18s, box-shadow .18s;
      color: var(--text);
    }
    .form-control:focus, .form-select:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(var(--primary-rgb),.13);
      outline: none;
    }
    .form-control::placeholder { color: var(--muted-light); }
    textarea.form-control { min-height: 160px; resize: vertical; }
    .form-text { font-size: .76rem; color: var(--muted); }

    /* ═══════════════════════════════════════════
       BUTTONS
    ═══════════════════════════════════════════ */
    .btn { font-size: .84rem; font-weight: 500; border-radius: var(--r-sm); transition: all .15s; }
    .btn-primary {
      background: var(--primary); border-color: var(--primary);
      box-shadow: 0 1px 4px rgba(var(--primary-rgb),.25);
    }
    .btn-primary:hover {
      background: var(--primary-d); border-color: var(--primary-d);
      transform: translateY(-1px); box-shadow: 0 4px 14px rgba(var(--primary-rgb),.35);
    }
    .btn-outline-primary { border-color: var(--primary); color: var(--primary); }
    .btn-outline-primary:hover { background: var(--primary); border-color: var(--primary); transform: translateY(-1px); }
    .btn-outline-secondary { border-color: var(--border); color: var(--muted); }
    .btn-outline-secondary:hover { background: var(--border-light); color: var(--text); border-color: #d1d5db; }

    /* ═══════════════════════════════════════════
       ALERTS
    ═══════════════════════════════════════════ */
    .alert {
      border: none; border-radius: var(--r-sm);
      font-size: .85rem; display: flex; align-items: flex-start; gap: .5rem;
      padding: .75rem 1rem;
    }
    .alert-success { background: var(--success-light); color: #064e3b; }
    .alert-danger  { background: var(--danger-light);  color: #7f1d1d; }
    .alert-warning { background: var(--warning-light); color: #78350f; }
    .alert-info    { background: var(--info-light);    color: #0c4a6e; }
    .alert .btn-close { padding: .5rem .5rem; opacity: .5; }

    /* ═══════════════════════════════════════════
       BADGES
    ═══════════════════════════════════════════ */
    .badge { font-size: .68rem; font-weight: 600; border-radius: 6px; padding: .22rem .5rem; letter-spacing: .2px; }

    /* ═══════════════════════════════════════════
       LIST GROUP
    ═══════════════════════════════════════════ */
    .list-group-item { border-color: #f3f4f6; font-size: .855rem; padding: .8rem 1.25rem; transition: background .12s; }
    .list-group-item-action:hover { background: #f8f9ff; }

    /* ═══════════════════════════════════════════
       PAGINATION
    ═══════════════════════════════════════════ */
    .pagination { gap: .2rem; }
    .page-link { border-radius: 8px !important; border-color: var(--border); color: var(--text); font-size: .8rem; min-width: 34px; text-align: center; transition: all .15s; }
    .page-link:hover { background: var(--primary-light); border-color: var(--primary); color: var(--primary); }
    .page-item.active .page-link { background: var(--primary); border-color: var(--primary); }
    .page-item.disabled .page-link { color: var(--muted-light); }

    /* ═══════════════════════════════════════════
       SCORE & CRITERION COMPONENTS
    ═══════════════════════════════════════════ */
    .score-circle {
      width: 56px; height: 56px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-weight: 700; font-size: 1rem; flex-shrink: 0;
    }
    .score-excellent { background: #d1fae5; color: #059669; }
    .score-good { background: #e0e7ff; color: #4f46e5; }
    .score-satisfactory { background: #fef3c7; color: #d97706; }
    .score-poor { background: #fee2e2; color: #dc2626; }
    .score-high   { background: var(--success-light); color: #059669; }
    .score-medium { background: var(--warning-light); color: #d97706; }
    .score-low    { background: var(--danger-light);  color: #dc2626; }

    .criterion-card {
      border: 1px solid var(--border);
      border-left: 3px solid var(--border);
      border-radius: var(--r-sm);
      padding: .9rem 1rem;
      background: #fafbff;
      margin-bottom: .6rem;
      display: flex; gap: .85rem; align-items: flex-start;
      transition: box-shadow .2s;
    }
    .criterion-card:hover { box-shadow: var(--shadow-md); }
    .criterion-card.excellent { border-left-color: #10b981; }
    .criterion-card.good { border-left-color: #6366f1; }
    .criterion-card.satisfactory { border-left-color: #f59e0b; }
    .criterion-card.poor { border-left-color: #ef4444; }
    .criterion-card.high   { border-left-color: var(--success); }
    .criterion-card.medium { border-left-color: var(--warning); }
    .criterion-card.low    { border-left-color: var(--danger); }
    .criterion-info { flex: 1; }
    .criterion-name    { font-weight: 600; font-size: .875rem; margin-bottom: .2rem; }
    .criterion-comment { font-size: .82rem; color: var(--muted); line-height: 1.55; }

    .total-banner {
      background: linear-gradient(135deg, #312e81 0%, var(--primary) 100%);
      color: #fff; border-radius: var(--r);
      padding: 1.2rem 1.5rem;
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 1.25rem;
      box-shadow: 0 4px 16px rgba(var(--primary-rgb),.35);
    }
    .total-banner.excellent { background: linear-gradient(135deg, #047857 0%, #34d399 100%); box-shadow: 0 4px 16px rgba(16,185,129,.28); }
    .total-banner.good { background: linear-gradient(135deg, #4338ca 0%, #818cf8 100%); box-shadow: 0 4px 16px rgba(99,102,241,.28); }
    .total-banner.satisfactory { background: linear-gradient(135deg, #b45309 0%, #fbbf24 100%); box-shadow: 0 4px 16px rgba(245,158,11,.28); }
    .total-banner.poor { background: linear-gradient(135deg, #b91c1c 0%, #f87171 100%); box-shadow: 0 4px 16px rgba(239,68,68,.28); }
    .total-banner .label { font-size: .8rem; opacity: .8; }
    .total-banner .score { font-size: 2.2rem; font-weight: 800; line-height: 1; }
    .total-banner .grade { font-size: .88rem; background: rgba(255,255,255,.2); border-radius: 8px; padding: 3px 10px; }

    .score-bar { height: 5px; border-radius: 3px; background: #e5e7eb; margin-top: 6px; overflow: hidden; }
    .score-bar-fill { height: 100%; border-radius: 3px; transition: width .8s ease; }
    .fill-excellent { background: #34d399; }
    .fill-good { background: #a5b4fc; }
    .fill-satisfactory { background: #fbbf24; }
    .fill-poor { background: #fca5a5; }
    .fill-high   { background: var(--success); }
    .fill-medium { background: var(--warning); }
    .fill-low    { background: var(--danger); }

    /* ═══════════════════════════════════════════
       QUESTION PREVIEW
    ═══════════════════════════════════════════ */
    #question-preview {
      background: #eff6ff; border: 1px solid #bfdbfe;
      border-radius: var(--r-sm); padding: .85rem 1rem;
      font-size: .85rem; color: #1e40af; display: none;
    }
    #question-preview .ref-toggle { cursor: pointer; color: var(--primary); text-decoration: underline; font-size: .79rem; }

    /* ═══════════════════════════════════════════
       LOADING OVERLAY
    ═══════════════════════════════════════════ */
    #loading-overlay {
      display: none; position: fixed; inset: 0;
      background: rgba(255,255,255,.82);
      backdrop-filter: blur(6px);
      z-index: 9999;
      flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
    }
    #loading-overlay.active { display: flex; }
    .spinner-ring {
      width: 52px; height: 52px;
      border: 4px solid #e5e7eb;
      border-top-color: var(--primary);
      border-radius: 50%;
      animation: spin .7s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* ═══════════════════════════════════════════
       EMPTY STATE
    ═══════════════════════════════════════════ */
    .empty-state { text-align: center; padding: 3.5rem 1.5rem; color: var(--muted); }
    .empty-state i { font-size: 2.5rem; opacity: .22; margin-bottom: .75rem; display: block; }
    .empty-state p { font-size: .875rem; margin: 0; }

    /* ═══════════════════════════════════════════
       ANIMATIONS
    ═══════════════════════════════════════════ */
    @keyframes fadeUp {
      from { opacity:0; transform: translateY(14px); }
      to   { opacity:1; transform: translateY(0); }
    }
    .fade-up { animation: fadeUp .4s ease both; }
    .delay-1 { animation-delay:.06s; }
    .delay-2 { animation-delay:.12s; }
    .delay-3 { animation-delay:.18s; }
    .delay-4 { animation-delay:.24s; }
    .delay-5 { animation-delay:.30s; }
    .delay-6 { animation-delay:.36s; }
    #page-messages { scroll-margin-top: 100px; }
    /* landing */
    /* Hero */
    :where(html[data-page="landing"]) .hero {
    background: linear-gradient(135deg, #1a1640 0%, #312e81 45%, #4f46e5 100%);
    color: #fff;
    border-radius: 22px;
    padding: 5rem 2.5rem;
    text-align: center;
    margin-bottom: 2.5rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(79,70,229,.35);
  }
    :where(html[data-page="landing"]) .hero::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at 70% 20%, rgba(129,140,248,.25) 0%, transparent 60%),
                radial-gradient(ellipse at 20% 80%, rgba(167,139,250,.18) 0%, transparent 55%);
  }
    :where(html[data-page="landing"]) .hero-dots { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
    :where(html[data-page="landing"]) .hero-dots::after {
    content: '';
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
    background-size: 28px 28px;
  }
    :where(html[data-page="landing"]) .hero-content { position: relative; z-index: 1; }
    :where(html[data-page="landing"]) .hero-badge {
    display: inline-flex; align-items: center; gap: .4rem;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 30px;
    padding: .35rem 1.1rem;
    font-size: .78rem; font-weight: 600;
    margin-bottom: 1.5rem;
    backdrop-filter: blur(6px);
    letter-spacing: .3px;
  }
    :where(html[data-page="landing"]) .hero h1 {
    font-size: 2.8rem; font-weight: 900;
    margin-bottom: 1.1rem; line-height: 1.17;
    letter-spacing: -.5px;
  }
    :where(html[data-page="landing"]) .hero h1 .accent { color: #a5b4fc; }
    :where(html[data-page="landing"]) .hero p.hero-lead {
    font-size: 1.08rem; opacity: .87;
    max-width: 580px; margin: 0 auto 2.2rem;
    line-height: 1.75;
  }
    :where(html[data-page="landing"]) .btn-hero {
    display: inline-flex; align-items: center; gap: .5rem;
    background: #fff; color: #312e81;
    font-weight: 700; font-size: 1rem;
    padding: .88rem 2.4rem; border-radius: 12px;
    border: none; text-decoration: none;
    transition: transform .18s, box-shadow .18s;
    box-shadow: 0 4px 16px rgba(0,0,0,.2);
  }
    :where(html[data-page="landing"]) .btn-hero:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,.28); color: #312e81; }
    :where(html[data-page="landing"]) .hero-note { font-size: .77rem; opacity: .5; margin-top: 1.3rem; letter-spacing: .2px; }
    /* Stats strip */
    :where(html[data-page="landing"]) .stat-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 1rem;
    margin-bottom: 2.5rem;
  }
    :where(html[data-page="landing"]) .strip-item {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 1.35rem 1rem;
    text-align: center;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    transition: box-shadow .2s, border-color .2s;
  }
    :where(html[data-page="landing"]) .strip-item:hover { box-shadow: 0 4px 16px rgba(79,70,229,.1); border-color: #c7d2fe; }
    :where(html[data-page="landing"]) .strip-item .s-val { font-size: 1.95rem; font-weight: 900; color: #4f46e5; line-height: 1; }
    :where(html[data-page="landing"]) .strip-item .s-lbl { font-size: .75rem; color: #6b7280; margin-top: .3rem; font-weight: 500; }
    /* Section labels */
    :where(html[data-page="landing"]) .section-label {
    font-size: .71rem; font-weight: 700; letter-spacing: 1.2px;
    text-transform: uppercase; color: #4f46e5; margin-bottom: .4rem;
  }
    :where(html[data-page="landing"]) .section-title {
    font-size: 1.5rem; font-weight: 800; color: #111827;
    margin-bottom: .55rem; letter-spacing: -.3px;
  }
    :where(html[data-page="landing"]) .section-sub {
    font-size: .88rem; color: #6b7280; line-height: 1.7; max-width: 520px;
  }
    /* Compare cards */
    :where(html[data-page="landing"]) .compare-card { border-radius: 16px; padding: 1.5rem; height: 100%; }
    :where(html[data-page="landing"]) .compare-old { background: #fef2f2; border: 1px solid #fecaca; }
    :where(html[data-page="landing"]) .compare-new { background: #f0fdf4; border: 1px solid #86efac; }
    :where(html[data-page="landing"]) .compare-card .cc-title {
    font-weight: 700; font-size: .9rem; margin-bottom: 1rem;
    display: flex; align-items: center; gap: .5rem;
  }
    :where(html[data-page="landing"]) .compare-old .cc-title { color: #dc2626; }
    :where(html[data-page="landing"]) .compare-new .cc-title { color: #16a34a; }
    :where(html[data-page="landing"]) .compare-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
    :where(html[data-page="landing"]) .compare-card ul li { font-size: .83rem; display: flex; align-items: flex-start; gap: .5rem; line-height: 1.5; color: #374151; }
    :where(html[data-page="landing"]) .compare-old ul li .ic { color: #ef4444; flex-shrink: 0; margin-top: 1px; }
    :where(html[data-page="landing"]) .compare-new ul li .ic { color: #22c55e; flex-shrink: 0; margin-top: 1px; }
    /* How it works */
    :where(html[data-page="landing"]) .steps-wrap {
    background: #fff; border: 1px solid #e5e7eb;
    border-radius: 18px; padding: 2rem;
  }
    :where(html[data-page="landing"]) .step-row {
    display: flex; gap: 1rem; align-items: flex-start;
    margin-bottom: 1.5rem; position: relative;
  }
    :where(html[data-page="landing"]) .step-row:last-child { margin-bottom: 0; }
    :where(html[data-page="landing"]) .step-row:not(:last-child)::after {
    content: '';
    position: absolute; left: 17px; top: 38px; bottom: -1.5rem;
    width: 2px; background: #e0e7ff;
  }
    :where(html[data-page="landing"]) .step-num {
    width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: #fff; font-weight: 700; font-size: .88rem;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(79,70,229,.3); position: relative; z-index: 1;
  }
    :where(html[data-page="landing"]) .step-row h6 { font-weight: 700; font-size: .9rem; margin-bottom: .2rem; color: #111827; }
    :where(html[data-page="landing"]) .step-row p  { font-size: .8rem; color: #6b7280; margin: 0; line-height: 1.55; }
    :where(html[data-page="landing"]) .step-badge {
    display: inline-block; background: #eef2ff; color: #4f46e5;
    font-size: .67rem; font-weight: 700;
    padding: .15rem .55rem; border-radius: 20px;
    margin-left: .4rem; vertical-align: middle;
  }
    /* Features */
    :where(html[data-page="landing"]) .feature-card {
    background: #fff; border: 1px solid #e5e7eb;
    border-radius: 16px; padding: 1.6rem 1.4rem; height: 100%;
    transition: transform .22s, box-shadow .22s, border-color .22s;
  }
    :where(html[data-page="landing"]) .feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 32px rgba(79,70,229,.13);
    border-color: #c7d2fe;
  }
    :where(html[data-page="landing"]) .feature-icon {
    width: 50px; height: 50px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.35rem; margin-bottom: 1rem;
  }
    :where(html[data-page="landing"]) .feature-card h5 { font-weight: 700; font-size: .95rem; margin-bottom: .45rem; color: #111827; }
    :where(html[data-page="landing"]) .feature-card p  { font-size: .83rem; color: #6b7280; line-height: 1.65; margin: 0; }
    /* Criteria */
    :where(html[data-page="landing"]) .criteria-section {
    background: #fff; border: 1px solid #e5e7eb;
    border-radius: 18px; padding: 1.75rem;
  }
    :where(html[data-page="landing"]) .criteria-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
    @media (max-width: 576px) { :where(html[data-page="landing"]) .criteria-grid { grid-template-columns: 1fr; } }
    :where(html[data-page="landing"]) .crit-badge {
    display: flex; align-items: flex-start; gap: .65rem;
    padding: .85rem 1rem; background: #f8f9ff;
    border: 1px solid #e5e7eb; border-radius: 10px;
    transition: border-color .18s, background .18s;
  }
    :where(html[data-page="landing"]) .crit-badge:hover { border-color: #c7d2fe; background: #eef2ff; }
    :where(html[data-page="landing"]) .crit-num {
    width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: #fff; font-size: .72rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center; margin-top: 1px;
  }
    :where(html[data-page="landing"]) .crit-title { font-weight: 600; font-size: .84rem; line-height: 1.2; color: #111827; }
    :where(html[data-page="landing"]) .crit-desc  { font-size: .75rem; color: #6b7280; margin-top: .15rem; line-height: 1.4; }
    /* Footer */
    :where(html[data-page="landing"]) .landing-footer {
    margin-top: 3rem; padding: 2rem 1rem;
    border-top: 1px solid #e5e7eb;
    text-align: center; color: #6b7280; font-size: .83rem;
  }
    :where(html[data-page="landing"]) .landing-footer .footer-title { font-weight: 700; font-size: .9rem; color: #374151; margin-bottom: .6rem; }
    :where(html[data-page="landing"]) .landing-footer .footer-links {
    display: flex; align-items: center; justify-content: center;
    gap: 1.25rem; flex-wrap: wrap; margin-bottom: .9rem;
  }
    :where(html[data-page="landing"]) .landing-footer .footer-links a {
    display: inline-flex; align-items: center; gap: .35rem;
    color: #4f46e5; text-decoration: none; font-weight: 500; transition: color .15s;
  }
    :where(html[data-page="landing"]) .landing-footer .footer-links a:hover { color: #3730a3; }
    :where(html[data-page="landing"]) .landing-footer .footer-copy { font-size: .77rem; color: #9ca3af; }
    /* login */
    :where(html[data-page="login"]) body { font-family: system-ui, sans-serif !important; }
    /* login */
    :where(html[data-page="login"]) .login-wrap {
    min-height: calc(100vh - var(--topbar-h));
    display: flex; align-items: center; justify-content: center;
    padding: 2rem 1rem;
  }
    :where(html[data-page="login"]) .login-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 22px;
    box-shadow: 0 8px 40px rgba(0,0,0,.09), 0 2px 8px rgba(0,0,0,.05);
    width: 100%; max-width: 400px;
    overflow: hidden;
  }
    :where(html[data-page="login"]) .login-top {
    background: linear-gradient(135deg, #1a1640 0%, #312e81 50%, #4f46e5 100%);
    padding: 2.2rem 2rem 1.8rem;
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
  }
    :where(html[data-page="login"]) .login-top::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(129,140,248,.25) 0%, transparent 70%);
  }
    :where(html[data-page="login"]) .login-top-icon {
    width: 60px; height: 60px;
    background: rgba(255,255,255,.15);
    border: 2px solid rgba(255,255,255,.25);
    border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem;
    margin: 0 auto 1rem;
    backdrop-filter: blur(6px);
    position: relative;
  }
    :where(html[data-page="login"]) .login-top h3 { font-weight: 800; font-size: 1.25rem; margin-bottom: .3rem; position: relative; }
    :where(html[data-page="login"]) .login-top p  { font-size: .8rem; opacity: .7; margin: 0; position: relative; }
    :where(html[data-page="login"]) .login-body { padding: 1.75rem 2rem 2rem; }
    :where(html[data-page="login"]) .input-group-icon {
    position: relative;
  }
    :where(html[data-page="login"]) .input-group-icon .field-icon {
    position: absolute; left: .85rem; top: 50%; transform: translateY(-50%);
    color: #9ca3af; font-size: .95rem; pointer-events: none;
    transition: color .18s;
  }
    :where(html[data-page="login"]) .input-group-icon .form-control {
    padding-left: 2.5rem;
    border-radius: 10px !important;
  }
    :where(html[data-page="login"]) .input-group-icon:focus-within .field-icon { color: #4f46e5; }
    :where(html[data-page="login"]) .btn-signin {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    border: none; color: #fff;
    font-weight: 700; font-size: .92rem;
    padding: .7rem 1rem;
    border-radius: 11px;
    width: 100%;
    transition: opacity .18s, transform .15s, box-shadow .18s;
    box-shadow: 0 4px 16px rgba(79,70,229,.35);
    display: flex; align-items: center; justify-content: center; gap: .45rem;
  }
    :where(html[data-page="login"]) .btn-signin:hover {
    opacity: .9; transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(79,70,229,.45);
  }
    :where(html[data-page="login"]) .login-footer {
    text-align: center;
    padding: 1rem 2rem 1.25rem;
    border-top: 1px solid #f3f4f6;
    font-size: .76rem; color: #9ca3af;
  }
    /* searchable_select_assets */
    .search-select {
    position: relative;
  }
    .search-select-source {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
    .search-select-control {
    display: flex;
    align-items: center;
    gap: .45rem;
    min-height: 42px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    background: #fff;
    padding: .3rem .45rem .3rem .7rem;
    transition: border-color .15s, box-shadow .15s;
  }
    .search-select-control:focus-within {
    border-color: #6366f1;
    box-shadow: 0 0 0 .2rem rgba(99, 102, 241, .14);
  }
    .search-select-input {
    border: 0;
    outline: 0;
    flex: 1;
    min-width: 120px;
    font-size: .9rem;
    background: transparent;
  }
    .search-select-clear {
    border: 0;
    background: #f3f4f6;
    color: #6b7280;
    border-radius: 8px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
    .search-select-clear:hover {
    background: #e5e7eb;
    color: #111827;
  }
    .search-select-menu {
    position: absolute;
    z-index: 2020;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    display: none;
    max-height: 290px;
    overflow: auto;
    border: 1px solid #dbe4f0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .16);
    padding: .35rem;
  }
    .search-select.open .search-select-menu {
    display: block;
  }
    .search-select.open {
    z-index: 2010;
  }
    .card.search-select-open,
  .page-hdr.search-select-open,
  .modal-content.search-select-open {
    overflow: visible;
    position: relative;
    z-index: 2000;
  }
    .search-select-option,
  .search-select-note {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    padding: .56rem .65rem;
    border-radius: 9px;
    font-size: .86rem;
    color: #111827;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
  }
    .search-select-option:hover,
  .search-select-option.active {
    background: #eef2ff;
    color: #3730a3;
  }
    .search-select-note {
    color: #6b7280;
    cursor: default;
    justify-content: flex-start;
  }
    .search-select-check {
    color: #4f46e5;
    font-weight: 800;
    flex-shrink: 0;
  }
    .search-select-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-bottom: .5rem;
  }
    .search-select-tag {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    max-width: 100%;
    background: #eef2ff;
    color: #3730a3;
    border: 1px solid #c7d2fe;
    border-radius: 999px;
    padding: .25rem .55rem;
    font-size: .78rem;
    font-weight: 600;
  }
    .search-select-tag button {
    border: 0;
    background: transparent;
    color: inherit;
    padding: 0;
    line-height: 1;
  }
    /* support_chatbot */
    :where(html[data-page="support_chatbot"]) .support-page {
    max-width: 1180px;
    height: calc(100vh - var(--topbar-h) - 3.5rem);
    height: calc(100dvh - var(--topbar-h) - 3.5rem);
    min-height: 0;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
  }
    :where(html[data-page="support_chatbot"]) .support-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.2rem;
  }
    :where(html[data-page="support_chatbot"]) .support-title {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--text);
  }
    :where(html[data-page="support_chatbot"]) .support-subtitle {
    margin-top: .25rem;
    color: var(--muted);
    font-size: .86rem;
  }
    :where(html[data-page="support_chatbot"]) .support-role {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    color: var(--text-2);
    padding: .38rem .75rem;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
  }
    :where(html[data-page="support_chatbot"]) .support-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-template-rows: minmax(0, 1fr);
    gap: 1rem;
    align-items: stretch;
    flex: 1;
    min-height: 0;
  }
    :where(html[data-page="support_chatbot"]) .support-chat,
  :where(html[data-page="support_chatbot"]) .support-side {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
    min-width: 0;
  }
    :where(html[data-page="support_chatbot"]) .support-chat {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }
    :where(html[data-page="support_chatbot"]) .support-chat-head {
    padding: .9rem 1rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
  }
    :where(html[data-page="support_chatbot"]) .support-chat-name {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 700;
    color: var(--text);
  }
    :where(html[data-page="support_chatbot"]) .support-bot-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-light);
    color: var(--primary);
    flex-shrink: 0;
  }
    :where(html[data-page="support_chatbot"]) .support-chat-count {
    color: var(--muted);
    font-size: .76rem;
  }
    :where(html[data-page="support_chatbot"]) .support-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 1rem;
    background: #f8fafc;
  }
    :where(html[data-page="support_chatbot"]) .chat-message {
    display: flex;
    margin-bottom: .75rem;
  }
    :where(html[data-page="support_chatbot"]) .chat-message.user {
    justify-content: flex-end;
  }
    :where(html[data-page="support_chatbot"]) .chat-bubble {
    max-width: min(720px, 86%);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: .75rem .85rem;
    background: #fff;
    color: var(--text-2);
    font-size: .88rem;
    line-height: 1.55;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
    :where(html[data-page="support_chatbot"]) .support-answer-link {
    font-weight: 600;
  }
    :where(html[data-page="support_chatbot"]) .support-answer-body {
    white-space: normal;
  }
    :where(html[data-page="support_chatbot"]) .support-answer-body p {
    margin: 0;
    white-space: pre-wrap;
  }
    :where(html[data-page="support_chatbot"]) .support-answer-body ol,
  :where(html[data-page="support_chatbot"]) .support-answer-body ul {
    margin: 0;
    padding-left: 1.6rem;
  }
    :where(html[data-page="support_chatbot"]) .support-answer-body > :not(:first-child) {
    margin-top: .65rem;
  }
    :where(html[data-page="support_chatbot"]) .support-answer-body li + li {
    margin-top: .45rem;
  }
    :where(html[data-page="support_chatbot"]) .support-answer-body li::marker {
    color: var(--text);
    font-weight: 600;
  }
    :where(html[data-page="support_chatbot"]) .support-response-section {
    margin-top: .85rem;
    padding-top: .8rem;
    border-top: 1px solid var(--border);
    white-space: normal;
  }
    :where(html[data-page="support_chatbot"]) .support-response-title {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0 0 .55rem;
    color: var(--text);
    font-size: .8rem;
    font-weight: 700;
  }
    :where(html[data-page="support_chatbot"]) .support-response-title i {
    color: var(--muted);
  }
    :where(html[data-page="support_chatbot"]) .support-response-links {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
  }
    :where(html[data-page="support_chatbot"]) .support-response-questions {
    display: grid;
    gap: .4rem;
  }
    :where(html[data-page="support_chatbot"]) .support-followup-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .65rem;
    width: 100%;
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: .5rem .65rem;
    background: #f8fafc;
    color: var(--text-2);
    font-size: .78rem;
    line-height: 1.45;
    text-align: left;
    overflow-wrap: anywhere;
  }
    :where(html[data-page="support_chatbot"]) .support-followup-button i {
    flex-shrink: 0;
  }
    :where(html[data-page="support_chatbot"]) .support-followup-button:hover {
    background: var(--primary-light);
    border-color: var(--primary);
  }
    :where(html[data-page="support_chatbot"]) .support-followup-button:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
  }
    :where(html[data-page="support_chatbot"]) .support-answer-url {
    color: var(--muted);
    font-size: .8rem;
  }
    :where(html[data-page="support_chatbot"]) .chat-pill.support-related-page {
    flex-direction: column;
    align-items: flex-start;
    max-width: 100%;
    border-radius: 6px;
    overflow-wrap: anywhere;
  }
    :where(html[data-page="support_chatbot"]) .support-related-page-name {
    color: var(--text-2);
  }
    :where(html[data-page="support_chatbot"]) .support-related-page-url {
    font-size: .7rem;
    font-weight: 400;
  }
    :where(html[data-page="support_chatbot"]) .chat-message.user .chat-bubble {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
  }
    :where(html[data-page="support_chatbot"]) .chat-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .55rem;
  }
    :where(html[data-page="support_chatbot"]) .chat-pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: .22rem .48rem;
    background: #fff;
    color: var(--muted);
    text-decoration: none;
    font-size: .72rem;
    font-weight: 600;
  }
    :where(html[data-page="support_chatbot"]) .chat-pill[href]:hover {
    color: var(--primary);
    border-color: rgba(var(--primary-rgb), .35);
    background: var(--primary-light);
  }
    :where(html[data-page="support_chatbot"]) .support-form {
    border-top: 1px solid var(--border);
    padding: .85rem;
    background: #fff;
  }
    :where(html[data-page="support_chatbot"]) .support-input-row {
    display: flex;
    gap: .6rem;
  }
    :where(html[data-page="support_chatbot"]) .support-input-row .form-control {
    min-height: 44px;
    resize: none;
  }
    :where(html[data-page="support_chatbot"]) .support-send {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
    :where(html[data-page="support_chatbot"]) .support-side {
    padding: 1rem;
    align-self: stretch;
    min-height: 0;
    overflow-y: auto;
  }
    :where(html[data-page="support_chatbot"]) .support-side-section + .support-side-section {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
  }
    :where(html[data-page="support_chatbot"]) .support-side-title {
    margin: 0 0 .65rem;
    font-size: .82rem;
    font-weight: 800;
    color: var(--text);
  }
    :where(html[data-page="support_chatbot"]) .support-suggestion {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    color: var(--text-2);
    text-align: left;
    padding: .65rem .7rem;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.35;
    transition: border-color .15s, background .15s, transform .15s;
  }
    :where(html[data-page="support_chatbot"]) .support-suggestion + .support-suggestion {
    margin-top: .45rem;
  }
    :where(html[data-page="support_chatbot"]) .support-suggestion:hover {
    border-color: rgba(var(--primary-rgb), .35);
    background: var(--primary-light);
    transform: translateY(-1px);
  }
    :where(html[data-page="support_chatbot"]) .support-suggestion span {
    display: block;
    color: var(--muted);
    font-size: .7rem;
    font-weight: 600;
    margin-top: .25rem;
  }
    :where(html[data-page="support_chatbot"]) .support-page-link {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .55rem 0;
    color: var(--text-2);
    text-decoration: none;
    border-bottom: 1px solid #f3f4f6;
  }
    :where(html[data-page="support_chatbot"]) .support-page-link:last-child {
    border-bottom: 0;
  }
    :where(html[data-page="support_chatbot"]) .support-page-link:hover {
    color: var(--primary);
  }
    :where(html[data-page="support_chatbot"]) .support-page-link i {
    margin-top: .15rem;
    color: var(--muted);
  }
    :where(html[data-page="support_chatbot"]) .support-page-name {
    display: block;
    font-size: .8rem;
    font-weight: 700;
  }
    :where(html[data-page="support_chatbot"]) .support-page-url {
    font-size: .72rem;
    color: var(--muted);
    overflow-wrap: anywhere;
  }
    :where(html[data-page="support_chatbot"]) .typing-dots {
    display: inline-flex;
    align-items: center;
    gap: .22rem;
  }
    :where(html[data-page="support_chatbot"]) .typing-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--muted-light);
    animation: supportTyping 1s infinite ease-in-out;
  }
    :where(html[data-page="support_chatbot"]) .typing-dots span:nth-child(2) { animation-delay: .14s; }
    :where(html[data-page="support_chatbot"]) .typing-dots span:nth-child(3) { animation-delay: .28s; }
    @keyframes supportTyping {
    0%, 80%, 100% { opacity: .35; transform: translateY(0); }
    40% { opacity: 1; transform: translateY(-3px); }
  }
    @media (max-width: 991px) {
    :where(html[data-page="support_chatbot"]) .support-page {
      height: auto;
      min-height: 0;
    }
    :where(html[data-page="support_chatbot"]) .support-layout {
      grid-template-columns: 1fr;
      grid-template-rows: auto auto;
    }
    :where(html[data-page="support_chatbot"]) .support-chat {
      height: calc(100vh - var(--topbar-h) - 9.5rem);
      height: calc(100dvh - var(--topbar-h) - 9.5rem);
      max-height: 720px;
    }
    :where(html[data-page="support_chatbot"]) .support-side {
      max-height: none;
      overflow-y: visible;
    }
  }
    @media (max-width: 575px) {
    :where(html[data-page="support_chatbot"]) .support-header {
      flex-direction: column;
    }
    :where(html[data-page="support_chatbot"]) .support-chat {
      height: calc(100vh - var(--topbar-h) - 10rem);
      height: calc(100dvh - var(--topbar-h) - 10rem);
      border-radius: 12px;
    }
    :where(html[data-page="support_chatbot"]) .chat-bubble {
      max-width: 92%;
    }
    :where(html[data-page="support_chatbot"]) .support-input-row {
      gap: .45rem;
    }
  }