:root {
      --pink: #FF3364;
      --pink2: #ff8aa3;
      --pink3: #ffccd7;
      --bg: #07060a;
      --ink: #f8f4f6;
      --line: rgba(255,255,255,.1);
      --muted: #aaaab5;
      --soft: rgba(255,255,255,.035);
      --panel: rgba(12,12,18,.82);
      --panel2: rgba(19,14,19,.86);
      --green: #34d399;
      --red: #fb7185;
      --yellow: #fbbf24;
      --shadow-pink: 0 0 42px rgba(255,51,100,.34);
      --text-primary: #F7F3F7;
      --text-secondary: #C9BEC8;
      --text-muted: #918795;
      --text-subtle: #6F6673;
      --text-accent: #FF4F8B;
      --text-accent-soft: #FF9ABD;
      --text-success: #36E29A;
      --text-warning: #FFB86B;
      --text-danger: #FF6B9A;
      --font-ui: Manrope, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
      --font-display: Manrope, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    }
    * { box-sizing: border-box; }
    html { width: 100%; background: var(--bg); }
    body {
      width: 100%; max-width: 100vw; margin: 0; min-height: 100vh;
      font-family: var(--font-ui); color: var(--ink); line-height: 1.5;
      -webkit-font-smoothing: antialiased;
      text-rendering: geometricPrecision;
      overflow-x: hidden;
      background:
        radial-gradient(circle at 18% -10%, rgba(255,51,100,.38), transparent 420px),
        radial-gradient(circle at 92% 12%, rgba(255,138,163,.16), transparent 520px),
        radial-gradient(circle at 70% 92%, rgba(255,51,100,.16), transparent 620px),
        linear-gradient(115deg, transparent 0 8%, rgba(255,51,100,.08) 8.2%, transparent 8.7% 28%, rgba(255,51,100,.05) 28.2%, transparent 28.8% 62%),
        repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 1px, transparent 1px 22px),
        var(--bg);
    }
    body::before,
    body::after {
      content: "";
      position: fixed;
      inset: auto;
      pointer-events: none;
      z-index: -1;
      border-radius: 999px;
      filter: blur(12px);
    }
    body::before {
      width: 520px;
      height: 520px;
      left: -180px;
      top: 120px;
      background: radial-gradient(circle, rgba(255,51,100,.18), transparent 68%);
      animation: ambient-float 12s ease-in-out infinite;
    }
    body::after {
      width: 620px;
      height: 620px;
      right: -220px;
      bottom: -120px;
      background: radial-gradient(circle, rgba(255,138,163,.13), transparent 70%);
      animation: ambient-float 15s ease-in-out infinite reverse;
    }
    main { min-height: calc(100vh - 110px); }
    button, input, select { font: inherit; }
    button { cursor: pointer; }
    button:focus-visible, input:focus-visible, select:focus-visible {
      outline: 2px solid rgba(255,122,177,.65);
      outline-offset: 3px;
    }
    .hidden { display: none !important; }

    /* ── Шапка: спокойное стекло под общую тему ── */
    .header {
      position: sticky;
      top: 0;
      z-index: 50;
      padding: 16px 22px 14px;
      background:
        linear-gradient(180deg, rgba(7,6,10,.96), rgba(7,6,10,.72) 68%, rgba(7,6,10,0));
      backdrop-filter: blur(8px);
    }
    .header-inner {
      position: relative;
      max-width: 1180px;
      min-height: 76px;
      margin: 0 auto;
      padding: 12px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      border-radius: 26px;
      border: 1px solid rgba(255,138,163,.18);
      background:
        linear-gradient(90deg, rgba(255,51,100,.12), transparent 28%, rgba(255,138,163,.065)),
        linear-gradient(180deg, rgba(30,20,29,.90), rgba(10,8,13,.96));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.11),
        inset 0 -1px 0 rgba(255,51,100,.10),
        0 18px 42px rgba(0,0,0,.38),
        0 0 0 1px rgba(255,51,100,.04);
      backdrop-filter: blur(12px) saturate(1.08);
      overflow: hidden;
    }
    .header-inner::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      background:
        linear-gradient(120deg, rgba(255,255,255,.08), transparent 24% 80%, rgba(255,51,100,.06)),
        linear-gradient(180deg, rgba(255,255,255,.04), transparent 62%);
      opacity: .72;
      z-index: 0;
    }
    .header-inner::after {
      content: "";
      position: absolute;
      left: 34px;
      right: 34px;
      bottom: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,138,163,.42), rgba(255,51,100,.34), transparent);
      opacity: .72;
      pointer-events: none;
      z-index: 0;
    }
    .header-inner > * { position: relative; z-index: 1; }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      border: 1px solid rgba(255,138,163,.18);
      background:
        linear-gradient(180deg, rgba(255,255,255,.055), transparent),
        rgba(10,8,13,.50);
      color: white;
      padding: 7px 16px 7px 8px;
      cursor: pointer;
      min-width: 0;
      border-radius: 20px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
      transition: .22s ease;
    }
    .brand:hover {
      border-color: rgba(255,138,163,.34);
      background: rgba(255,51,100,.10);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 8px 22px rgba(0,0,0,.18);
      transform: translateY(-1px);
    }
    .brand > span:last-child { min-width: 0; }
    .logo {
      width: 58px;
      height: 44px;
      border-radius: 0;
      display: grid;
      place-items: center;
      overflow: visible;
      flex-shrink: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
    }
    .logo img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: contain;
      object-position: center;
      filter: drop-shadow(0 2px 8px rgba(255,51,100,.34));
      transform: none;
    }
    .brand > span:last-child {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      min-width: 112px;
    }
    .brand-title {
      position: relative;
      display: inline-block;
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 850;
      text-transform: uppercase;
      letter-spacing: .12em;
      line-height: .9;
      color: #fff7fa;
      text-shadow: 0 1px 0 rgba(0,0,0,.50);
    }
    .brand-title::after {
      content: "";
      position: absolute;
      left: 0;
      right: 8px;
      bottom: -6px;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(255,51,100,.90), rgba(255,138,163,.36), rgba(255,51,100,0));
      box-shadow: none;
    }
    .brand-subtitle {
      margin-top: 10px;
      font-size: 9px;
      color: rgba(255,176,194,.86);
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .20em;
      line-height: 1;
      text-shadow: none;
    }
    .nav {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      gap: 6px;
      align-items: center;
      padding: 4px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.095);
      background:
        linear-gradient(180deg, rgba(255,255,255,.045), transparent),
        rgba(5,4,8,.62);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 10px 22px rgba(0,0,0,.22);
      backdrop-filter: blur(6px);
    }
    .nav button {
      border: 0;
      background: transparent;
      color: rgba(255,244,248,.66);
      font-weight: 760;
      transition: .2s;
      padding: 10px 18px;
      border-radius: 999px;
      text-shadow: none;
    }
    .nav button:hover {
      color: #fff3f7;
      background: rgba(255,255,255,.06);
    }
    .nav button.active {
      color: #fff0f5;
      background: linear-gradient(180deg, rgba(255,51,100,.54), rgba(116,24,50,.70));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 10px 20px rgba(255,51,100,.18);
    }
    .user-badge {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      margin-left: auto;
      padding: 9px 10px 9px 14px;
      border: 1px solid rgba(255,138,163,.16);
      border-radius: 20px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.052), transparent),
        rgba(11,8,13,.54);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.065);
    }
    .user-badge > div { min-width: 0; }
    .user-meta {
      min-width: 0;
      padding-right: 4px;
    }
    .user-name {
      font-size: 14px;
      font-weight: 780;
      color: rgba(255,247,250,.92);
      max-width: 220px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: left;
      text-shadow: none;
    }
    #header-role-tag {
      text-align: left;
      margin-top: 4px !important;
    }
    .role-tag {
      --tag-accent: #ff8aa3;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 14px;
      font-size: 11px;
      font-weight: 720;
      text-transform: none;
      letter-spacing: 0;
      line-height: 1;
      padding: 0;
      border-radius: 0;
      white-space: nowrap;
      color: rgba(255,214,225,.82);
      border: 0;
      background: transparent;
      box-shadow: none;
    }
    .role-tag::before {
      content: "";
      width: 5px;
      height: 5px;
      border-radius: 999px;
      background: var(--tag-accent);
      box-shadow: 0 0 10px var(--tag-accent);
      flex-shrink: 0;
    }
    .role-tag.superadmin {
      --tag-accent: #fbbf24;
      color: #fff2c3;
    }
    .role-tag.manager {
      --tag-accent: #ff3364;
      color: #ffdce5;
    }
    .role-tag.staff {
      --tag-accent: #ff8aa3;
      color: #ffe8ee;
    }
    .role-tag.hr {
      --tag-accent: #c4b5fd;
      color: #eee9ff;
    }
    .header .btn {
      min-height: 40px;
      border-radius: 14px;
      padding: 9px 17px;
    }
    .header .btn-primary {
      box-shadow: 0 10px 24px rgba(255,51,100,.20), inset 0 1px 0 rgba(255,255,255,.16);
    }
    .header .btn-muted {
      background: rgba(255,255,255,.04);
      color: rgba(255,244,248,.78);
      border-color: rgba(255,255,255,.12);
    }
    .header .btn-muted:hover {
      color: white;
      background: rgba(255,51,100,.10);
      border-color: rgba(255,138,163,.30);
      box-shadow: 0 8px 18px rgba(0,0,0,.18);
    }

    /* ── Контейнер ── */
    .container { max-width: 1280px; margin: 0 auto; padding: 42px 22px; }

    /* ── Кнопки ── */
    .btn { border: 0; border-radius: 18px; min-height: 48px; padding: 14px 22px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 760; line-height: 1.1; text-align: center; white-space: normal; transition: .2s; }
    .btn:disabled { opacity: .45; cursor: not-allowed; }
    .btn-primary { background: linear-gradient(135deg, var(--pink), #ff5f7f); color: white; box-shadow: 0 18px 38px rgba(255,51,100,.28), inset 0 1px 0 rgba(255,255,255,.16); }
    .btn-primary:hover:not(:disabled) { background: linear-gradient(135deg, #ff4b76, #ff7894); transform: translateY(-1px); }
    .btn-ghost { background: rgba(255,255,255,.055); color: white; border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
    .btn-ghost:hover { border-color: rgba(255,51,100,.5); background: rgba(255,51,100,.08); }
    .btn-muted { background: transparent; color: #aaaab5; border: 1px solid var(--line); }
    .btn-muted:hover { color: white; border-color: rgba(255,51,100,.45); }
    .btn-danger { background: rgba(251,113,133,.15); color: #fecdd3; border: 1px solid rgba(251,113,133,.3); }
    .btn-danger:hover { background: rgba(251,113,133,.25); }
    .btn-sm { min-height: 36px; padding: 8px 14px; font-size: 13px; border-radius: 12px; }
    .btn-success { background: rgba(52,211,153,.15); color: #a7f3d0; border: 1px solid rgba(52,211,153,.3); }
    .btn-success:hover { background: rgba(52,211,153,.25); }

    /* ── Экран входа ── */
    #page-login {
      display: flex; align-items: center; justify-content: center;
      min-height: calc(100vh - 80px); padding: 40px 22px;
    }
    .login-card {
      width: 100%; max-width: min(440px, calc(100vw - 44px)); min-width: 0; flex: 0 1 440px;
      border: 1px solid rgba(255,51,100,.34);
      background: radial-gradient(circle at 30% 15%, rgba(255,51,100,.24), transparent 50%), linear-gradient(145deg, #181018, #08060d);
      border-radius: 40px; padding: 44px 40px;
      box-shadow: 0 40px 100px rgba(0,0,0,.5);
    }
    .login-title { font-family: var(--font-display); font-size: 32px; font-weight: 800; letter-spacing: 0; margin-bottom: 6px; }
    .login-sub { color: var(--muted); font-size: 15px; margin-bottom: 34px; }
    .field { margin-bottom: 18px; }
    .field label { display: block; font-size: 13px; font-weight: 900; color: #aaaab5; text-transform: uppercase; letter-spacing: .14em; margin-bottom: 8px; }
    .field input {
      width: 100%; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
      border-radius: 16px; padding: 14px 18px; color: white; font-size: 16px; outline: none; transition: .2s;
    }
    .field input:focus { border-color: rgba(255,51,100,.5); background: rgba(255,51,100,.06); }
    .field input::placeholder { color: var(--text-muted); }
    .login-error { color: var(--red); font-size: 14px; margin-top: -8px; margin-bottom: 14px; font-weight: 700; }

    /* ── Общие компоненты ── */
    h1, h2, h3 {
      font-family: var(--font-display);
      font-weight: 800;
      letter-spacing: 0;
    }
    h1 { font-size: 68px; line-height: 1.05; margin: 22px 0 0; }
    h2 { margin: 0; font-size: 46px; line-height: 1.1; }
    h3 { margin: 16px 0 10px; line-height: 1.2; }
    .gradient {
      background: linear-gradient(90deg, #ffe0e8 0%, #ff8aa3 34%, #ff3364 68%, #ffc0cf 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      text-shadow: none;
    }
    p, .text, .lead { overflow-wrap: anywhere; }
    h1, h2, h3 { overflow-wrap: normal; word-break: normal; }
    .lead {
      max-width: 670px;
      margin: 26px 0 0;
      color: rgba(248,244,246,.88);
      font-size: 18px;
      font-weight: 680;
      line-height: 1.72;
    }
    .text { color: rgba(198,198,209,.82); font-size: 16px; line-height: 1.78; margin: 0; }
    .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
    .overline { color: var(--pink2); font-size: 13px; font-weight: 760; text-transform: uppercase; letter-spacing: .24em; margin-bottom: 12px; }
    .badge { display: inline-flex; align-items: center; gap: 9px; border: 1px solid rgba(255,51,100,.34); background: rgba(255,51,100,.12); color: var(--pink3); border-radius: 999px; padding: 9px 14px; font-size: 14px; font-weight: 760; }
    .glow-card { position: relative; border-radius: 48px; padding: 24px; border: 1px solid rgba(255,51,100,.34); background: radial-gradient(circle at 30% 15%, rgba(255,51,100,.34), transparent 35%), linear-gradient(145deg, #171017, #08060d); box-shadow: 0 30px 90px rgba(0,0,0,.45), var(--shadow-pink); min-width: 0; }
    .panel { border: 1px solid rgba(255,255,255,.11); background: linear-gradient(145deg, rgba(24,18,24,.84), rgba(10,8,13,.78)); border-radius: 30px; padding: 24px; box-shadow: 0 20px 55px rgba(0,0,0,.28); backdrop-filter: blur(12px); min-width: 0; }
    .card { border: 1px solid rgba(255,255,255,.1); background: linear-gradient(150deg, rgba(22,16,23,.86), rgba(9,8,12,.72)); border-radius: 28px; padding: 24px; min-width: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); transition: .22s ease; }
    .card:hover {
      border-color: rgba(255,51,100,.24);
      transform: translateY(-2px);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 34px rgba(255,51,100,.08), 0 18px 42px rgba(0,0,0,.22);
    }
    .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; align-items: stretch; }
    .cards .card { display: flex; flex-direction: column; gap: 8px; }
    .cards .card .icon-box { margin-bottom: 4px; }
    .icon-box { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.12); color: #d6d6dd; flex-shrink: 0; font-weight: 800; font-size: 13px; letter-spacing: .04em; }
    .small-title { color: #777783; text-transform: uppercase; letter-spacing: .18em; font-weight: 900; font-size: 12px; margin-bottom: 12px; }

    /* ── Прогресс (учёба) ── */
    .progress-head { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-bottom: 16px; }
    .progress-head > div:first-child { min-width: 0; }
    .progress-percent { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 22px; background: rgba(255,51,100,.14); border: 1px solid rgba(255,51,100,.28); color: var(--pink3); font-size: 20px; font-weight: 900; flex-shrink: 0; }
    .bar { height: 12px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.09); }
    .fill { height: 100%; background: linear-gradient(90deg, var(--pink), #ff8aa3); border-radius: 999px; transition: .35s; }
    .next-box { margin-top: 18px; border: 1px solid rgba(255,255,255,.1); background: linear-gradient(145deg, rgba(255,51,100,.08), rgba(255,255,255,.025)); border-radius: 24px; padding: 17px; }
    .glow-card > .panel { height: 100%; }

    /* ── Каталог ── */
    .catalog-head { display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: start; margin-bottom: 26px; }
    .search-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 22px; }
    .search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 18px; padding: 0 18px; height: 52px; }
    .search span { color: var(--text-muted); font-size: 20px; }
    .search input { flex: 1; background: none; border: 0; color: white; outline: none; font-size: 15px; }
    .search input::placeholder { color: var(--text-muted); }
    .accordion { border: 1px solid rgba(255,255,255,.1); background: linear-gradient(145deg, rgba(13,11,16,.82), rgba(8,7,11,.66)); border-radius: 26px; margin-bottom: 12px; overflow: hidden; box-shadow: 0 14px 40px rgba(0,0,0,.18); transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease; }
    .accordion:hover { border-color: rgba(255,51,100,.24); box-shadow: 0 0 36px rgba(255,51,100,.07), 0 18px 46px rgba(0,0,0,.22); transform: translateY(-1px); }
    .section-button { width: 100%; min-height: 78px; display: flex; align-items: center; gap: 16px; padding: 18px 20px; background: transparent; border: 0; color: white; text-align: left; transition: .18s; }
    .section-button:hover { background: rgba(255,51,100,.055); }
    .section-num { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: rgba(255,51,100,.12); border: 1px solid rgba(255,51,100,.34); color: var(--pink3); font-weight: 900; flex-shrink: 0; }
    .section-main { flex: 1; min-width: 0; }
    .section-name { font-weight: 900; font-size: 17px; overflow-wrap: anywhere; }
    .section-desc { color: #777783; font-size: 14px; line-height: 1.35; margin-top: 3px; }
    .section-count { color: #777783; font-size: 14px; font-weight: 700; }
    .chevron { width: 24px; flex-shrink: 0; text-align: center; font-size: 20px; color: #777783; transition: transform .2s; }
    .accordion.open .chevron { transform: rotate(180deg); }
    .lessons { display: none; padding: 0 12px 12px; }
    .accordion.open .lessons { display: block; }
    .lesson-row { width: 100%; min-height: 64px; display: flex; align-items: center; gap: 14px; padding: 14px 12px; background: transparent; border: 0; border-radius: 18px; color: white; text-align: left; transition: .18s; }
    .lesson-row:hover { background: rgba(255,255,255,.04); }
    .lesson-row.done .lesson-title { color: #777783; }
    .status-dot { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,.025); font-size: 12px; color: var(--pink2); flex-shrink: 0; font-weight: 900; }
    .lesson-row.done .status-dot { background: var(--pink); border-color: var(--pink2); }
    .lesson-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.1); font-weight: 800; font-size: 12px; color: #d6d6dd; flex-shrink: 0; }
    .lesson-main { flex: 1; min-width: 0; }
    .lesson-title { font-weight: 800; font-size: 15px; overflow-wrap: anywhere; }
    .lesson-meta { color: #777783; font-size: 13px; line-height: 1.35; margin-top: 2px; }
    .lesson-status { font-size: 13px; font-weight: 700; color: var(--text-muted); }
    .lesson-row.done .lesson-status { color: var(--green); }
    .accordion-list { display: flex; flex-direction: column; }

    /* ── Контент урока/теста ── */
    .content-card { position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.1); background: linear-gradient(145deg, rgba(15,12,17,.86), rgba(8,7,11,.74)); border-radius: 36px; padding: 36px; min-width: 0; box-shadow: 0 24px 70px rgba(0,0,0,.25); }
    .content-card::before {
      content: "";
      position: absolute;
      inset: -1px;
      pointer-events: none;
      background:
        radial-gradient(circle at 12% 0%, rgba(255,51,100,.13), transparent 260px),
        radial-gradient(circle at 92% 16%, rgba(255,138,163,.08), transparent 280px);
      opacity: .9;
    }
    .content-card > * { position: relative; z-index: 1; }
    .page-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
    .admin-top-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
    .content-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 28px; }
    .content-head > div:first-child { min-width: 0; }
    .content-head h1 { font-size: 52px; margin: 0; }
    .pill { display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(255,51,100,.34); background: rgba(255,51,100,.12); color: var(--pink3); border-radius: 999px; padding: 7px 12px; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .15em; margin-bottom: 12px; }
    .status-pill { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; border-radius: 18px; padding: 12px 14px; font-size: 14px; font-weight: 900; border: 1px solid var(--line); background: rgba(255,255,255,.05); color: #d8d8df; white-space: nowrap; }
    .status-pill.done { border-color: rgba(255,47,125,.4); background: var(--pink); color: white; }
    .two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
    .info-box { border: 1px solid rgba(255,255,255,.1); background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,51,100,.035)); border-radius: 24px; padding: 20px; min-width: 0; }
    .box-title { color: var(--pink2); font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: .16em; margin-bottom: 9px; }
    .read-box { border: 1px solid var(--line); background: var(--soft); border-radius: 26px; padding: 24px; min-width: 0; }
    .read-box h2 { font-size: 28px; margin-bottom: 16px; }
    .read-box p { color: #d1d1d8; font-size: 18px; line-height: 1.85; margin: 0 0 16px; }
    .read-box p:last-child { margin-bottom: 0; }
    .coach-stage {
      margin: 22px 0;
      border: 1px solid rgba(255,51,100,.24);
      border-radius: 30px;
      overflow: hidden;
      background: #08060d;
      box-shadow: 0 24px 70px rgba(0,0,0,.36);
    }
    .coach-scene {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
      align-items: end;
      gap: 24px;
      min-height: 430px;
      padding: 30px;
      background:
        linear-gradient(90deg, rgba(8,6,13,.94), rgba(8,6,13,.72) 48%, rgba(8,6,13,.26)),
        linear-gradient(0deg, rgba(8,6,13,.78), transparent 46%),
        url("unicorn-lesson-bg.png.png") center / cover no-repeat;
    }
    .coach-scene::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(circle at 72% 45%, rgba(255,51,100,.24), transparent 260px),
        linear-gradient(115deg, transparent 0 14%, rgba(255,51,100,.1) 14.2%, transparent 14.8% 36%, rgba(255,51,100,.08) 36.2%, transparent 36.7%);
    }
    .coach-speech,
    .coach-guide {
      position: relative;
      z-index: 1;
    }
    .coach-speech {
      align-self: center;
      max-width: 720px;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 28px;
      padding: 24px;
      background: rgba(10,8,16,.86);
      box-shadow: 0 24px 70px rgba(0,0,0,.45);
      backdrop-filter: blur(14px);
    }
    .coach-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 18px;
    }
    .coach-step {
      color: #777783;
      font-size: 13px;
      font-weight: 800;
      margin-top: 4px;
    }
    .coach-text {
      color: #f3f3f7;
      font-size: 19px;
      line-height: 1.8;
      margin: 0;
    }
    .coach-progress {
      height: 8px;
      margin-top: 22px;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(255,255,255,.1);
    }
    .coach-progress-fill {
      width: var(--scene-progress);
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--pink), #f0abfc);
      transition: width .22s ease;
    }
    .coach-controls {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 18px;
    }
    .coach-dots {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin-top: 16px;
    }
    .coach-dot {
      width: 9px;
      height: 9px;
      padding: 0;
      border: 0;
      border-radius: 999px;
      background: rgba(255,255,255,.22);
      transition: .2s;
    }
    .coach-dot.active {
      width: 24px;
      background: var(--pink);
      box-shadow: 0 0 16px rgba(255,47,125,.45);
    }
    .coach-guide {
      --coach-tilt-a: -.6deg;
      --coach-tilt-b: .8deg;
      justify-self: center;
      align-self: end;
      width: min(100%, 310px);
      padding: 0;
      border: 0;
      background: transparent;
      filter: drop-shadow(0 26px 34px rgba(0,0,0,.62));
      transform-origin: 50% 92%;
      animation: coach-idle 4s ease-in-out infinite;
      transition: filter .2s ease;
    }
    .coach-guide::before {
      content: "";
      position: absolute;
      top: 8%;
      right: 14%;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255,204,215,.9), rgba(255,51,100,.55) 42%, transparent 72%);
      filter: blur(.2px);
      opacity: .68;
      animation: coach-emote 2.6s ease-in-out infinite;
    }
    .coach-guide.coach-mood-1 {
      --coach-tilt-a: .9deg;
      --coach-tilt-b: -1deg;
      animation-duration: 3.4s;
    }
    .coach-guide.coach-mood-2 {
      --coach-tilt-a: -1.1deg;
      --coach-tilt-b: .4deg;
      animation-duration: 4.6s;
    }
    .coach-guide.coach-mood-1::before {
      top: 12%;
      right: 20%;
      width: 28px;
      height: 28px;
      opacity: .82;
    }
    .coach-guide.coach-mood-2::before {
      top: 6%;
      right: 10%;
      width: 54px;
      height: 54px;
      opacity: .5;
    }
    .coach-guide:hover {
      animation-play-state: paused, running;
      transform: translateY(-5px) rotate(var(--coach-tilt-a));
      filter: drop-shadow(0 30px 42px rgba(255,51,100,.22)) drop-shadow(0 26px 34px rgba(0,0,0,.62));
    }
    .coach-guide:active { transform: translateY(-1px) scale(.99); }
    .coach-guide img {
      display: block;
      width: 100%;
      max-height: 390px;
      object-fit: contain;
      object-position: bottom center;
      animation: coach-presence .28s ease-out both;
    }
    @keyframes coach-idle {
      0%, 100% { transform: translateY(0) rotate(var(--coach-tilt-a)); }
      45% { transform: translateY(-8px) rotate(var(--coach-tilt-b)); }
      70% { transform: translateY(-3px) rotate(0deg); }
    }
    @keyframes coach-presence {
      0% { opacity: .84; }
      100% { opacity: 1; }
    }
    @keyframes coach-emote {
      0%, 100% { transform: translateY(0) scale(.85); opacity: .42; }
      45% { transform: translateY(-8px) scale(1.08); opacity: .86; }
    }
    @keyframes ambient-float {
      0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .9; }
      50% { transform: translate3d(28px, -22px, 0) scale(1.05); opacity: .68; }
    }
    .lesson-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; margin-top: 20px; }
    .check-item, .phrase { border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.035); border-radius: 18px; padding: 13px; display: flex; align-items: flex-start; gap: 10px; color: #d6d6dd; line-height: 1.55; margin-bottom: 10px; }
    .check-item span:first-child { color: var(--pink2); flex-shrink: 0; font-weight: 900; }
    .result-box { margin-top: 18px; border: 1px solid rgba(255,51,100,.22); background: rgba(255,51,100,.1); border-radius: 24px; padding: 18px; color: #ededf2; }

    /* ── Тест ── */
    .quiz-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; }
    .quiz-grid > div { min-width: 0; }
    .question-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
    .q-nav-btn { width: 44px; height: 44px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255,255,255,.035); color: #777783; font-weight: 900; transition: .2s; }
    .q-nav-btn.active { background: var(--pink); color: white; border-color: var(--pink2); box-shadow: 0 0 20px rgba(255,47,125,.25); }
    .q-nav-btn.answered:not(.active) { border-color: rgba(255,51,100,.45); color: var(--pink3); background: rgba(255,51,100,.1); }
    .q-nav-btn.correct { color: #a7f3d0; border-color: rgba(52,211,153,.55); background: rgba(52,211,153,.12); }
    .q-nav-btn.wrong { color: #fecdd3; border-color: rgba(251,113,133,.55); background: rgba(251,113,133,.12); }
    .question-card { border: 1px solid var(--line); background: rgba(0,0,0,.22); border-radius: 28px; padding: 26px; min-height: 360px; min-width: 0; }
    .question-title { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 20px; }
    .question-title h2 { font-size: 32px; line-height: 1.18; margin: 0; }
    .q-num { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255,51,100,.45); background: rgba(255,51,100,.1); color: var(--pink3); font-weight: 900; flex-shrink: 0; }
    .option { width: 100%; border: 1px solid var(--line); background: rgba(255,255,255,.035); color: #d7d7df; border-radius: 18px; padding: 16px; display: flex; align-items: flex-start; gap: 12px; margin-bottom: 11px; text-align: left; font-weight: 800; line-height: 1.4; transition: .2s; }
    .option:hover:not(:disabled) { border-color: rgba(255,51,100,.38); color: white; }
    .option:disabled { cursor: not-allowed; }
    .option.selected { border-color: var(--pink2); background: rgba(255,51,100,.14); color: white; }
    .letter { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); font-size: 12px; font-weight: 900; flex-shrink: 0; margin-top: -1px; }
    .option.selected .letter { border-color: #ffc4dc; background: var(--pink); color: white; }
    .result-panel { border: 1px solid var(--line); background: rgba(12,12,18,.74); border-radius: 28px; padding: 24px; height: max-content; position: sticky; top: 105px; min-width: 0; }
    .circle {
      width: 120px;
      height: 120px;
      position: relative;
      margin: 20px auto;
    }
    .circle svg {
      width: 100%;
      height: 100%;
      transform: rotate(-90deg);
    }
    .circle-bg {
      stroke: rgba(255,255,255,0.08);
      stroke-width: 10;
      fill: none;
    }
    .circle-progress {
      stroke: url(#progressGradient);
      stroke-width: 10;
      stroke-linecap: round;
      fill: none;
      transition: stroke-dashoffset 0.3s ease;
    }
    .circle-inner {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: #0e0e14;
      display: grid;
      place-items: center;
      text-align: center;
      position: absolute;
      top: 0;
      left: 0;
    }
    .circle-score {
      font-size: 28px;
      font-weight: 900;
      color: var(--pink3);
    }
    .circle-label {
      font-size: 10px;
      color: var(--text-muted);
      margin-top: -4px;
    }
    .notice { padding: 17px; border-radius: 22px; margin-bottom: 18px; font-weight: 900; }
    .notice.good { background: rgba(52,211,153,.12); color: #a7f3d0; border: 1px solid rgba(52,211,153,.35); }
    .notice.bad { background: rgba(251,113,133,.12); color: #fecdd3; border: 1px solid rgba(251,113,133,.35); }
    .result-summary { width: 100%; border: 1px solid var(--line); background: rgba(255,255,255,.035); color: white; border-radius: 18px; padding: 14px; margin-bottom: 10px; text-align: left; line-height: 1.4; white-space: normal; }
    .answer-explanation { margin-top: 10px; padding: 12px; border-radius: 14px; background: rgba(255,51,100,.08); border: 1px solid rgba(255,51,100,.18); color: #d6d6dd; font-size: 14px; line-height: 1.55; }

    /* ── Таймер ── */
    .timer-widget {
      display: inline-flex; align-items: center; gap: 8px;
      background: rgba(255,51,100,.08); border: 1px solid rgba(255,51,100,.25);
      border-radius: 14px; padding: 8px 14px; font-size: 14px; font-weight: 900;
      color: #ffc4dc;
    }
    .timer-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pink); animation: pulse 1s infinite; }
    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

    /* ── Premium donut progress ── */
    .manager-donut-premium {
      position: relative !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 120px !important;
      height: 120px !important;
      background: transparent !important;
      border: none !important;
      border-radius: 50% !important;
      box-shadow: none !important;
      overflow: visible !important;
    }
    .manager-donut-premium .manager-donut-ring {
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 100% !important;
      filter: none !important;
      z-index: 1 !important;
    }
    .manager-donut-premium .manager-donut-track {
      fill: none !important;
      stroke: rgba(255,255,255,0.08) !important;
      stroke-width: 8 !important;
    }
    .manager-donut-premium .manager-donut-progress {
      fill: none !important;
      stroke-width: 8 !important;
      stroke-linecap: round !important;
      filter: none !important;
      transition: stroke-dasharray 0.6s ease !important;
    }
    .manager-donut-premium .manager-donut-center {
      position: relative !important;
      z-index: 2 !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      text-align: center !important;
      width: 80px !important;
      height: 80px !important;
      border-radius: 50% !important;
      background: rgba(10, 10, 14, 0.85) !important;
      border: 1px solid rgba(255,255,255,0.06) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.05) !important;
    }
    .manager-donut-premium .manager-donut-center b {
      font-size: 26px !important;
      font-weight: 800 !important;
      color: #F7F3F7 !important;
      line-height: 1 !important;
      letter-spacing: -0.02em !important;
      text-shadow: none !important;
    }
    .manager-donut-premium .manager-donut-center b small {
      font-size: 12px !important;
      font-weight: 700 !important;
      color: #F7F3F7 !important;
      margin-left: 1px !important;
    }
    .manager-donut-premium .manager-donut-center span {
      font-size: 8.5px !important;
      font-weight: 700 !important;
      color: #C9BEC8 !important;
      text-transform: uppercase !important;
      letter-spacing: 0.1em !important;
      margin-top: 5px !important;
      max-width: 68px !important;
      line-height: 1.15 !important;
      text-shadow: none !important;
    }

    /* ── Дашборд менеджера ── */
    .dash-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 32px; align-items: stretch; }
    .stat-card { border: 1px solid var(--line); background: rgba(12,12,18,.75); border-radius: 24px; padding: 22px; min-height: 118px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
    .stat-num { font-size: 38px; font-weight: 900; line-height: 1; }
    .stat-label { color: var(--muted); font-size: 14px; line-height: 1.35; margin-top: 6px; }
    .club-dashboard-layout { display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); gap: 22px; align-items: start; }
    .club-picker-panel { position: sticky; top: 112px; }
    .club-picker-list { display: flex; flex-direction: column; gap: 10px; }
    .club-picker-card {
      width: 100%;
      min-height: 82px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 16px;
      border: 1px solid rgba(255,255,255,.09);
      border-radius: 18px;
      background: rgba(255,255,255,.025);
      color: white;
      text-align: left;
      transition: .18s ease;
    }
    .club-picker-card:hover {
      border-color: rgba(255,138,163,.28);
      background: rgba(255,51,100,.055);
      transform: translateY(-1px);
    }
    .club-picker-card.active {
      border-color: rgba(255,51,100,.50);
      background:
        linear-gradient(135deg, rgba(255,51,100,.18), rgba(255,255,255,.035));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 16px 34px rgba(255,51,100,.08);
    }
    .club-picker-name { font-size: 15px; font-weight: 900; line-height: 1.25; overflow-wrap: anywhere; }
    .club-picker-meta { color: #777783; font-size: 12px; line-height: 1.35; margin-top: 5px; }
    .club-picker-progress {
      min-width: 56px;
      min-height: 38px;
      display: grid;
      place-items: center;
      border-radius: 14px;
      color: var(--pink3);
      font-size: 16px;
      font-weight: 900;
      background: rgba(255,51,100,.12);
      border: 1px solid rgba(255,51,100,.24);
      flex-shrink: 0;
    }
    .club-dashboard-main { min-width: 0; }
    .club-dashboard-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 22px;
      padding: 22px 24px;
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 26px;
      background:
        radial-gradient(circle at 10% 0%, rgba(255,51,100,.16), transparent 260px),
        linear-gradient(145deg, rgba(20,14,20,.84), rgba(8,7,11,.76));
    }
    .club-dashboard-head h3 { margin: 0; font-size: 30px; }
    .staff-table { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; }
    .staff-table th { text-align: left; color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .14em; font-weight: 900; padding: 0 16px 14px; white-space: nowrap; }
    .staff-table td { padding: 14px 16px; border-top: 1px solid rgba(255,255,255,.06); font-size: 15px; vertical-align: middle; }
    .staff-table th:first-child, .staff-table td:first-child { padding-left: 4px; }
    .staff-table th:last-child, .staff-table td:last-child { padding-right: 4px; }
    .staff-table tr:hover td { background: rgba(255,255,255,.025); }
    .prog-bar-wrap { display: flex; align-items: center; gap: 10px; }
    .prog-bar { flex: 1; height: 8px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; min-width: 80px; }
    .prog-bar-fill { height: 100%; background: linear-gradient(90deg, var(--pink), #f0abfc); border-radius: 999px; }
    .score-badge { display: inline-flex; align-items: center; min-height: 24px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 900; line-height: 1.1; margin: 2px 3px 2px 0; white-space: nowrap; }
    .score-ok { background: rgba(52,211,153,.12); color: #a7f3d0; border: 1px solid rgba(52,211,153,.3); }
    .score-fail { background: rgba(251,113,133,.12); color: #fecdd3; border: 1px solid rgba(251,113,133,.3); }
    .score-none { background: rgba(255,255,255,.05); color: var(--text-muted); border: 1px solid var(--line); }
    .time-chip { font-size: 13px; color: #777783; font-weight: 700; }

    /* ── База знаний менеджера ── */
    .kb-hero {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
      gap: 24px;
      align-items: stretch;
      margin-bottom: 30px;
    }
    .kb-hero-copy,
    .kb-spotlight,
    .kb-card {
      border: 1px solid rgba(255,255,255,.10);
      background:
        radial-gradient(circle at 12% 0%, rgba(255,51,100,.14), transparent 300px),
        linear-gradient(145deg, rgba(18,13,19,.86), rgba(8,7,11,.78));
      border-radius: 30px;
      box-shadow: 0 22px 58px rgba(0,0,0,.24);
      min-width: 0;
    }
    .kb-hero-copy {
      padding: 34px;
    }
    .kb-hero-copy h2 {
      max-width: 720px;
      margin-bottom: 18px;
    }
    .kb-search {
      margin-top: 30px;
      min-height: 56px;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 0 18px;
      border: 1px solid rgba(255,138,163,.20);
      border-radius: 18px;
      background: rgba(255,255,255,.045);
    }
    .kb-search span {
      color: var(--pink2);
      font-size: 21px;
      flex-shrink: 0;
    }
    .kb-search input {
      width: 100%;
      background: transparent;
      border: 0;
      outline: 0;
      color: white;
      font-size: 15px;
    }
    .kb-search input::placeholder {
      color: #676774;
    }
    .kb-spotlight {
      padding: 28px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 20px;
      background:
        radial-gradient(circle at 70% 12%, rgba(255,138,163,.18), transparent 260px),
        linear-gradient(145deg, rgba(31,20,29,.86), rgba(8,7,11,.80));
    }
    .kb-spotlight-title {
      color: #fff5f8;
      font-size: 28px;
      font-weight: 900;
      line-height: 1.15;
    }
    .kb-spotlight-list {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .kb-spotlight-list span,
    .kb-chip-list span {
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      padding: 6px 10px;
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 999px;
      color: #d6d6dd;
      background: rgba(255,255,255,.045);
      font-size: 12px;
      font-weight: 800;
    }
    .kb-section-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 16px;
      margin: 0 0 18px;
    }
    .kb-section-head h3 {
      margin: 0;
      font-size: 30px;
    }
    .kb-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
    }
    .kb-card {
      --kb-accent: var(--pink2);
      padding: 22px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      transition: .2s ease;
    }
    .kb-card:hover {
      border-color: color-mix(in srgb, var(--kb-accent) 46%, transparent);
      transform: translateY(-2px);
      box-shadow: 0 26px 62px rgba(0,0,0,.30), 0 0 30px color-mix(in srgb, var(--kb-accent) 10%, transparent);
    }
    .kb-card-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
    .kb-card-mark {
      width: 42px;
      height: 42px;
      border-radius: 16px;
      background:
        radial-gradient(circle at 35% 25%, rgba(255,255,255,.28), transparent 38%),
        linear-gradient(145deg, color-mix(in srgb, var(--kb-accent) 80%, #09070d), rgba(255,255,255,.035));
      border: 1px solid color-mix(in srgb, var(--kb-accent) 36%, transparent);
      box-shadow: 0 12px 24px color-mix(in srgb, var(--kb-accent) 14%, transparent);
    }
    .kb-card-count {
      color: var(--kb-accent);
      font-size: 22px;
      font-weight: 900;
    }
    .kb-card h4 {
      margin: 0;
      color: #fff5f8;
      font-size: 20px;
      line-height: 1.18;
    }
    .kb-card p {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.65;
    }
    .kb-chip-list {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: auto;
    }

    /* ── Суперадмин панель ── */
    .sa-grid { display: grid; grid-template-columns: minmax(300px, 340px) minmax(0, 1fr); gap: 22px; align-items: start; }
    .sa-sidebar { display: flex; flex-direction: column; gap: 14px; }
    .club-card { border: 1px solid var(--line); background: rgba(12,12,18,.75); border-radius: 22px; padding: 18px; cursor: pointer; transition: .18s; min-width: 0; }
    .club-card:hover, .club-card.active { border-color: rgba(255,51,100,.45); background: rgba(255,51,100,.06); }
    .club-card-name { font-weight: 900; font-size: 16px; overflow-wrap: anywhere; }
    .club-card-meta { color: #777783; font-size: 13px; line-height: 1.35; margin-top: 4px; }
    .club-card .btn { flex-shrink: 0; }
    .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.7); backdrop-filter: blur(8px); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; overflow: auto; }
    .modal-box { background: linear-gradient(145deg, #181018, #0e0e15); border: 1px solid rgba(255,51,100,.3); border-radius: 32px; padding: 36px; width: 100%; max-width: 480px; max-height: calc(100vh - 40px); overflow: auto; min-width: 0; scrollbar-width: thin; scrollbar-color: rgba(255,91,136,.55) rgba(255,255,255,.035); }
    .modal-box::-webkit-scrollbar { width: 8px; }
    .modal-box::-webkit-scrollbar-track { background: rgba(255,255,255,.025); border-radius: 999px; }
    .modal-box::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(255,91,136,.75), rgba(255,154,179,.36)); border-radius: 999px; border: 2px solid rgba(10,8,14,.86); }
    .modal-title { font-size: 24px; font-weight: 900; margin-bottom: 6px; }
    .modal-sub { color: var(--muted); font-size: 15px; margin-bottom: 28px; }
    .field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
    .modal-box input, select.field-select { min-height: 50px; }
    select.field-select { width: 100%; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 14px 18px; color: white; font-size: 16px; outline: none; transition: .2s; appearance: none; }
    select.field-select option { background: #1a1a24; }
    select.field-select:focus { border-color: rgba(255,51,100,.5); }

    /* ── Герой (главная) ── */
    .hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr); gap: 76px; align-items: center; min-height: calc(100vh - 100px); padding: 10px 0 46px; }
    .hero-copy { max-width: 760px; min-width: 0; }
    .hero-title {
      max-width: 720px;
      font-size: 66px;
      line-height: 1.16;
      font-weight: 820;
      margin-bottom: 4px;
      text-wrap: balance;
      color: rgba(255,250,252,.97);
      text-shadow: 0 18px 44px rgba(0,0,0,.34);
    }
    .hero-title > span {
      display: block;
    }
    .hero-brand-line {
      color: rgba(255,230,237,.94);
      padding-bottom: .10em;
    }
    .hero-title .gradient {
      display: inline-block;
      line-height: 1.18;
      padding-bottom: .08em;
      margin-bottom: -.08em;
      font-weight: 840;
      filter: drop-shadow(0 10px 28px rgba(255,51,100,.16));
    }

    /* ── Футер ── */
    .footer { border-top: 1px solid var(--line); background: rgba(0,0,0,.28); padding: 28px 22px; color: #777783; }
    .footer-inner { max-width: 1280px; margin: 0 auto; display: flex; justify-content: space-between; gap: 18px; align-items: center; }
    .footer-inner .brand { flex-shrink: 0; }

    /* ── 2026 visual refresh reverted
    :root {
      --pink: #ff2f68;
      --pink2: #ff8fac;
      --pink3: #ffd6e1;
      --bg: #050406;
      --ink: #faf7f9;
      --line: rgba(255,255,255,.13);
      --muted: #a8a4ae;
      --soft: rgba(255,255,255,.045);
      --panel: rgba(15,13,18,.88);
      --panel2: rgba(24,18,26,.88);
      --green: #37e0a2;
      --red: #ff6f88;
      --yellow: #f7d66a;
      --cyan: #6ee7f9;
      --violet: #c4b5fd;
      --shadow-pink: 0 22px 60px rgba(255,47,104,.18);
      --surface: linear-gradient(150deg, rgba(22,18,25,.90), rgba(8,7,11,.84));
      --surface-strong: linear-gradient(150deg, rgba(31,23,33,.94), rgba(10,8,13,.92));
      --surface-flat: rgba(12,10,15,.82);
      --edge: rgba(255,255,255,.11);
    }
    html { background: var(--bg); }
    body {
      background:
        linear-gradient(115deg, transparent 0 10%, rgba(255,47,104,.10) 10.1%, transparent 10.45% 34%, rgba(110,231,249,.045) 34.1%, transparent 34.5% 74%, rgba(255,143,172,.07) 74.1%, transparent 74.45%),
        repeating-linear-gradient(135deg, rgba(255,255,255,.026) 0 1px, transparent 1px 24px),
        repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 124px),
        linear-gradient(180deg, #060407 0%, #09070c 46%, #040306 100%);
    }
    body::before,
    body::after {
      inset: 0;
      width: auto;
      height: auto;
      border-radius: 0;
      filter: none;
      animation: none;
      opacity: 1;
      z-index: 0;
    }
    body::before {
      background:
        linear-gradient(90deg, transparent, rgba(255,47,104,.08), transparent),
        linear-gradient(0deg, rgba(255,255,255,.035), transparent 18%, transparent 82%, rgba(255,255,255,.025));
      -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.92), transparent 72%);
      mask-image: linear-gradient(180deg, rgba(0,0,0,.92), transparent 72%);
    }
    body::after {
      background:
        linear-gradient(120deg, transparent 0 42%, rgba(255,47,104,.08) 42.1% 42.32%, transparent 42.45%),
        linear-gradient(120deg, transparent 0 62%, rgba(110,231,249,.06) 62.1% 62.28%, transparent 62.42%);
      mix-blend-mode: screen;
    }
    body > * {
      position: relative;
      z-index: 1;
    }

    .header {
      padding: 18px 22px 16px;
      background: linear-gradient(180deg, rgba(5,4,6,.97), rgba(5,4,6,.70) 72%, rgba(5,4,6,0));
      backdrop-filter: blur(14px);
    }
    .header-inner {
      max-width: 1180px;
      min-height: 78px;
      border-radius: 22px;
      border-color: rgba(255,255,255,.13);
      background:
        linear-gradient(90deg, rgba(255,47,104,.17), transparent 30%, rgba(110,231,249,.05) 74%, rgba(255,143,172,.10)),
        var(--surface-strong);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 20px 54px rgba(0,0,0,.42),
        0 0 0 1px rgba(255,47,104,.06);
    }
    .header-inner::before {
      background:
        linear-gradient(90deg, transparent 0 14%, rgba(255,255,255,.11) 14.1% 14.3%, transparent 14.5% 64%, rgba(110,231,249,.16) 64.1% 64.22%, transparent 64.42%),
        linear-gradient(180deg, rgba(255,255,255,.055), transparent 66%);
      opacity: .88;
    }
    .header-inner::after {
      left: 22px;
      right: 22px;
      height: 2px;
      background: linear-gradient(90deg, transparent, rgba(255,47,104,.76), rgba(110,231,249,.42), transparent);
      opacity: .78;
    }
    .brand {
      position: relative;
      border-radius: 18px;
      border-color: rgba(255,255,255,.13);
      background:
        linear-gradient(135deg, rgba(255,255,255,.085), rgba(255,255,255,.018)),
        rgba(7,6,10,.58);
    }
    .brand::before {
      content: "";
      width: 3px;
      align-self: stretch;
      border-radius: 999px;
      background: linear-gradient(180deg, var(--pink), var(--cyan));
      opacity: .75;
      order: -1;
    }
    .brand:hover {
      border-color: rgba(255,143,172,.34);
      background:
        linear-gradient(135deg, rgba(255,47,104,.14), rgba(110,231,249,.04)),
        rgba(7,6,10,.72);
    }
    .brand-title {
      font-weight: 900;
      letter-spacing: .10em;
      color: #fffafd;
    }
    .brand-title::after {
      background: linear-gradient(90deg, rgba(255,47,104,.95), rgba(110,231,249,.42), rgba(255,47,104,0));
    }
    .brand-subtitle {
      color: rgba(255,214,225,.88);
      letter-spacing: .18em;
    }
    .nav {
      border-color: rgba(255,255,255,.12);
      background:
        linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015)),
        rgba(5,4,8,.72);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 30px rgba(0,0,0,.28);
    }
    .nav button {
      color: rgba(255,245,249,.68);
      font-weight: 820;
      padding: 10px 19px;
    }
    .nav button.active {
      color: #fff8fb;
      background: linear-gradient(135deg, rgba(255,47,104,.76), rgba(122,30,58,.84));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 12px 28px rgba(255,47,104,.20);
    }
    .user-badge {
      border-radius: 18px;
      border-color: rgba(255,255,255,.13);
      background:
        linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.018)),
        rgba(7,6,10,.66);
    }
    .role-tag {
      font-weight: 800;
      color: rgba(255,222,231,.90);
    }

    .container { padding-top: 46px; }
    h1, h2, h3 { font-weight: 850; }
    h1 { font-size: 66px; line-height: 1.04; }
    h2 { font-size: 44px; line-height: 1.08; }
    .gradient {
      background: linear-gradient(92deg, #fff4f8 0%, #ff9bb5 32%, #ff2f68 58%, #84f7d2 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    .lead {
      color: rgba(250,247,249,.90);
      font-weight: 700;
    }
    .text {
      color: rgba(205,201,211,.86);
    }
    .overline {
      color: var(--pink2);
      letter-spacing: .22em;
    }
    .badge {
      position: relative;
      border-color: rgba(255,255,255,.13);
      background: linear-gradient(135deg, rgba(255,47,104,.18), rgba(110,231,249,.055));
      color: #ffe7ee;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    }
    .badge::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: var(--cyan);
      box-shadow: 0 0 14px rgba(110,231,249,.62);
      flex-shrink: 0;
    }

    .btn {
      border-radius: 14px;
      font-weight: 820;
      letter-spacing: 0;
      box-shadow: none;
    }
    .btn-primary {
      background: linear-gradient(135deg, #ff2f68, #ff6b82 58%, #ff8f70);
      color: white;
      box-shadow: 0 16px 34px rgba(255,47,104,.24), inset 0 1px 0 rgba(255,255,255,.20);
    }
    .btn-primary:hover:not(:disabled) {
      background: linear-gradient(135deg, #ff477a, #ff7b91 58%, #ffa17e);
      box-shadow: 0 20px 42px rgba(255,47,104,.28), inset 0 1px 0 rgba(255,255,255,.24);
    }
    .btn-ghost,
    .btn-muted {
      background: rgba(255,255,255,.045);
      color: rgba(255,248,251,.88);
      border: 1px solid rgba(255,255,255,.13);
    }
    .btn-ghost:hover,
    .btn-muted:hover {
      border-color: rgba(110,231,249,.32);
      background: rgba(110,231,249,.065);
      color: white;
    }
    .btn-danger {
      background: rgba(255,111,136,.12);
      color: #ffd4dd;
      border-color: rgba(255,111,136,.34);
    }
    .btn-success {
      background: rgba(55,224,162,.12);
      color: #b7f7dc;
      border-color: rgba(55,224,162,.34);
    }
    .btn-sm { border-radius: 12px; }

    .login-card,
    .panel,
    .card,
    .accordion,
    .content-card,
    .question-card,
    .result-panel,
    .stat-card,
    .club-card,
    .kb-hero-copy,
    .kb-spotlight,
    .kb-card,
    .modal-box {
      border-color: var(--edge);
      background: var(--surface);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.075),
        0 18px 54px rgba(0,0,0,.32);
    }
    .login-card,
    .content-card,
    .modal-box {
      border-radius: 26px;
    }
    .panel,
    .accordion,
    .question-card,
    .result-panel,
    .kb-hero-copy,
    .kb-spotlight {
      border-radius: 22px;
    }
    .card,
    .stat-card,
    .club-card,
    .kb-card {
      border-radius: 18px;
    }
    .login-card {
      position: relative;
      overflow: hidden;
      background:
        linear-gradient(120deg, rgba(255,47,104,.16), transparent 32%, rgba(110,231,249,.045) 72%, transparent),
        var(--surface-strong);
    }
    .login-card::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        repeating-linear-gradient(135deg, rgba(255,255,255,.032) 0 1px, transparent 1px 22px),
        linear-gradient(180deg, rgba(255,255,255,.055), transparent 54%);
      opacity: .72;
    }
    .login-card > * { position: relative; z-index: 1; }
    .field input,
    select.field-select,
    .search,
    .kb-search {
      border-color: rgba(255,255,255,.13);
      background: rgba(255,255,255,.055);
      border-radius: 14px;
    }
    .field input:focus,
    select.field-select:focus,
    .search:focus-within,
    .kb-search:focus-within {
      border-color: rgba(110,231,249,.42);
      background: rgba(110,231,249,.055);
      box-shadow: 0 0 0 4px rgba(110,231,249,.055);
    }

    .hero {
      gap: 64px;
      align-items: center;
    }
    .hero-copy {
      position: relative;
      padding-left: 18px;
    }
    .hero-copy::before {
      content: "";
      position: absolute;
      left: 0;
      top: 8px;
      bottom: 12px;
      width: 2px;
      border-radius: 999px;
      background: linear-gradient(180deg, var(--pink), var(--cyan), transparent);
      opacity: .74;
    }
    .hero-title {
      font-size: 64px;
      line-height: 1.13;
      font-weight: 860;
      color: rgba(255,250,252,.98);
      text-shadow: 0 20px 42px rgba(0,0,0,.34);
    }
    .hero-brand-line { color: rgba(255,232,239,.96); }
    .hero-title .gradient {
      padding-bottom: .10em;
      margin-bottom: -.04em;
      filter: drop-shadow(0 12px 28px rgba(255,47,104,.18));
    }
    .glow-card {
      border: 1px solid rgba(255,255,255,.13);
      border-radius: 24px;
      padding: 1px;
      background:
        linear-gradient(135deg, rgba(255,47,104,.62), rgba(110,231,249,.20) 42%, rgba(255,255,255,.10)),
        rgba(255,255,255,.045);
      box-shadow: 0 28px 72px rgba(0,0,0,.42), 0 18px 52px rgba(255,47,104,.12);
    }
    .glow-card > .panel {
      border: 0;
      border-radius: 23px;
      background:
        linear-gradient(150deg, rgba(25,19,28,.95), rgba(7,6,11,.94)),
        rgba(9,7,12,.95);
    }
    .card {
      position: relative;
      overflow: hidden;
    }
    .card::before,
    .stat-card::before,
    .kb-card::before {
      content: "";
      position: absolute;
      left: 18px;
      right: 18px;
      top: 0;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(255,47,104,.82), rgba(110,231,249,.36), transparent);
      opacity: .66;
    }
    .card:hover,
    .accordion:hover,
    .club-card:hover,
    .club-card.active,
    .kb-card:hover {
      border-color: rgba(110,231,249,.24);
      background: linear-gradient(150deg, rgba(26,21,30,.94), rgba(8,7,12,.88));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.09),
        0 22px 58px rgba(0,0,0,.36),
        0 0 34px rgba(110,231,249,.055);
    }
    .icon-box,
    .section-num,
    .lesson-icon,
    .status-dot,
    .progress-percent {
      border-radius: 12px;
      border-color: rgba(255,255,255,.13);
      background: linear-gradient(135deg, rgba(255,47,104,.15), rgba(110,231,249,.055));
      color: #ffe2ea;
    }
    .progress-percent {
      background:
        conic-gradient(from 180deg, rgba(255,47,104,.82), rgba(110,231,249,.46), rgba(255,47,104,.82)),
        rgba(255,255,255,.06);
      color: white;
    }
    .bar,
    .prog-bar,
    .coach-progress {
      background: rgba(255,255,255,.08);
      box-shadow: inset 0 1px 2px rgba(0,0,0,.45);
    }
    .fill,
    .prog-bar-fill,
    .coach-progress-fill {
      background: linear-gradient(90deg, var(--pink), #ff8f70 58%, var(--green));
    }
    .next-box,
    .info-box,
    .read-box,
    .result-box,
    .notice,
    .result-summary,
    .answer-explanation {
      border-radius: 16px;
      border-color: rgba(255,255,255,.12);
      background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.020));
    }
    .notice.good {
      background: rgba(55,224,162,.12);
      color: #b7f7dc;
      border-color: rgba(55,224,162,.34);
    }
    .notice.bad {
      background: rgba(255,111,136,.13);
      color: #ffd4dd;
      border-color: rgba(255,111,136,.34);
    }

    .content-card::before {
      background:
        linear-gradient(115deg, transparent 0 20%, rgba(255,47,104,.10) 20.1%, transparent 20.5% 74%, rgba(110,231,249,.08) 74.1%, transparent 74.45%),
        repeating-linear-gradient(135deg, rgba(255,255,255,.022) 0 1px, transparent 1px 22px);
      opacity: .72;
    }
    .accordion {
      overflow: hidden;
      background: linear-gradient(150deg, rgba(17,14,20,.90), rgba(8,7,11,.80));
    }
    .section-button:hover,
    .lesson-row:hover,
    .staff-table tr:hover td {
      background: rgba(110,231,249,.045);
    }
    .accordion.open {
      border-color: rgba(255,143,172,.24);
    }
    .q-nav-btn,
    .option,
    .score-badge,
    .timer-widget {
      border-color: rgba(255,255,255,.13);
      background: rgba(255,255,255,.045);
    }
    .q-nav-btn.active,
    .option.selected {
      background: linear-gradient(135deg, rgba(255,47,104,.26), rgba(255,143,172,.10));
      border-color: rgba(255,143,172,.46);
    }
    .score-ok {
      background: rgba(55,224,162,.13);
      color: #b7f7dc;
      border-color: rgba(55,224,162,.34);
    }
    .score-fail {
      background: rgba(255,111,136,.13);
      color: #ffd4dd;
      border-color: rgba(255,111,136,.34);
    }
    .score-none {
      background: rgba(255,255,255,.055);
      color: #a8a4ae;
      border-color: rgba(255,255,255,.12);
    }

    .dash-grid { gap: 14px; }
    .stat-card {
      --stat-accent: var(--pink2);
      position: relative;
      overflow: hidden;
      min-height: 126px;
      padding: 24px;
      background:
        linear-gradient(150deg, rgba(21,17,25,.92), rgba(8,7,11,.84)),
        rgba(255,255,255,.02);
    }
    .dash-grid .stat-card:nth-child(2) { --stat-accent: var(--cyan); }
    .dash-grid .stat-card:nth-child(3) { --stat-accent: var(--green); }
    .dash-grid .stat-card:nth-child(4) { --stat-accent: var(--yellow); }
    .stat-card::before {
      background: linear-gradient(90deg, var(--stat-accent), transparent);
      opacity: .82;
    }
    .stat-card::after {
      content: "";
      position: absolute;
      right: 18px;
      top: 18px;
      width: 9px;
      height: 9px;
      border-radius: 999px;
      background: var(--stat-accent);
      box-shadow: 0 0 18px var(--stat-accent);
      opacity: .62;
    }
    .stat-num {
      color: var(--stat-accent);
      font-size: 40px;
    }
    .stat-label {
      color: rgba(218,214,222,.76);
      font-weight: 650;
    }
    .club-dashboard-head {
      border-radius: 20px;
      border-color: rgba(255,255,255,.13);
      background:
        linear-gradient(115deg, rgba(255,47,104,.14), transparent 36%, rgba(110,231,249,.06) 78%, transparent),
        var(--surface-strong);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 48px rgba(0,0,0,.30);
    }
    .club-picker-card {
      position: relative;
      border-radius: 14px;
      border-color: rgba(255,255,255,.11);
      background: rgba(255,255,255,.035);
      overflow: hidden;
    }
    .club-picker-card::before {
      content: "";
      position: absolute;
      left: 0;
      top: 12px;
      bottom: 12px;
      width: 3px;
      border-radius: 999px;
      background: transparent;
      transition: .18s ease;
    }
    .club-picker-card:hover {
      border-color: rgba(110,231,249,.24);
      background: rgba(110,231,249,.05);
    }
    .club-picker-card.active {
      border-color: rgba(255,143,172,.38);
      background: linear-gradient(135deg, rgba(255,47,104,.18), rgba(110,231,249,.055));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 16px 34px rgba(0,0,0,.25);
    }
    .club-picker-card.active::before {
      background: linear-gradient(180deg, var(--pink), var(--cyan));
    }
    .club-picker-progress {
      border-radius: 12px;
      color: #fff2f6;
      background: rgba(255,47,104,.16);
      border-color: rgba(255,143,172,.32);
    }
    .staff-table th {
      color: rgba(168,164,174,.74);
      letter-spacing: .13em;
    }
    .staff-table td {
      border-top-color: rgba(255,255,255,.075);
    }

    .kb-hero {
      gap: 18px;
    }
    .kb-hero-copy,
    .kb-spotlight {
      background:
        linear-gradient(118deg, rgba(255,47,104,.14), transparent 34%, rgba(110,231,249,.055) 76%, transparent),
        var(--surface-strong);
    }
    .kb-spotlight {
      background:
        linear-gradient(135deg, rgba(110,231,249,.10), transparent 45%, rgba(255,47,104,.13)),
        var(--surface-strong);
    }
    .kb-card {
      position: relative;
      overflow: hidden;
      background: linear-gradient(150deg, rgba(19,16,23,.92), rgba(8,7,11,.84));
    }
    .kb-card::before {
      background: linear-gradient(90deg, var(--kb-accent), transparent);
      opacity: .78;
    }
    .kb-card-mark {
      border-radius: 12px;
      background:
        linear-gradient(145deg, color-mix(in srgb, var(--kb-accent) 60%, #141018), rgba(255,255,255,.045));
      box-shadow: 0 12px 26px color-mix(in srgb, var(--kb-accent) 12%, transparent);
    }
    .kb-spotlight-list span,
    .kb-chip-list span {
      border-color: rgba(255,255,255,.12);
      background: rgba(255,255,255,.055);
    }
    .club-card {
      position: relative;
      overflow: hidden;
      background: linear-gradient(150deg, rgba(18,15,22,.90), rgba(8,7,11,.78));
    }
    .club-card::before {
      content: "";
      position: absolute;
      left: 0;
      top: 14px;
      bottom: 14px;
      width: 3px;
      border-radius: 999px;
      background: linear-gradient(180deg, var(--pink), var(--cyan));
      opacity: 0;
      transition: .18s ease;
    }
    .club-card:hover::before,
    .club-card.active::before {
      opacity: .9;
    }
    .modal-overlay {
      background: rgba(0,0,0,.72);
      backdrop-filter: blur(14px);
    }
    .modal-box {
      background:
        linear-gradient(120deg, rgba(255,47,104,.13), transparent 34%, rgba(110,231,249,.05)),
        var(--surface-strong);
    }

    .footer {
      background: rgba(4,3,6,.72);
      border-top-color: rgba(255,255,255,.10);
    }
    .page.container:not(.hidden) {
      animation: page-in .24s ease both;
    }
    @keyframes page-in {
      from { opacity: .92; transform: translateY(6px); }
      to { opacity: 1; transform: translateY(0); }
    }

    */

    /* ── Premium polish: calmer surfaces, stronger typography, less glow ── */
    :root {
      --pink: #ff3b6f;
      --pink2: #ff9ab3;
      --pink3: #ffd9e3;
      --bg: #060508;
      --ink: #fbf7fa;
      --line: rgba(255,255,255,.12);
      --muted: #aaa6b0;
      --soft: rgba(255,255,255,.045);
      --panel: rgba(14,12,17,.86);
      --panel2: rgba(22,17,24,.88);
      --green: #3dd6a4;
      --red: #ff7189;
      --yellow: #f5c85b;
      --premium-line: rgba(255,255,255,.14);
      --premium-surface: linear-gradient(145deg, rgba(20,16,23,.90), rgba(8,7,11,.82));
      --premium-surface-strong: linear-gradient(145deg, rgba(28,21,30,.94), rgba(9,7,12,.92));
      --premium-shadow: 0 22px 56px rgba(0,0,0,.34);
      --shadow-pink: 0 18px 48px rgba(255,59,111,.16);
    }
    body {
      background:
        linear-gradient(115deg, transparent 0 9%, rgba(255,59,111,.075) 9.1%, transparent 9.45% 36%, rgba(255,154,179,.045) 36.1%, transparent 36.45% 72%, rgba(255,255,255,.026) 72.1%, transparent 72.35%),
        repeating-linear-gradient(135deg, rgba(255,255,255,.020) 0 1px, transparent 1px 24px),
        linear-gradient(180deg, #08060a 0%, #050408 42%, #070509 100%);
    }
    body::before,
    body::after {
      inset: 0;
      width: auto;
      height: auto;
      border-radius: 0;
      filter: none;
      animation: none;
      z-index: -1;
    }
    body::before {
      background:
        linear-gradient(90deg, transparent, rgba(255,59,111,.055), transparent),
        linear-gradient(180deg, rgba(255,255,255,.035), transparent 30%);
      -webkit-mask-image: linear-gradient(180deg, #000, transparent 72%);
      mask-image: linear-gradient(180deg, #000, transparent 72%);
    }
    body::after {
      background:
        linear-gradient(125deg, transparent 0 44%, rgba(255,154,179,.07) 44.1% 44.22%, transparent 44.35%),
        linear-gradient(125deg, transparent 0 68%, rgba(255,255,255,.045) 68.1% 68.2%, transparent 68.35%);
    }
    .header {
      padding-top: 18px;
      background: linear-gradient(180deg, rgba(6,5,8,.98), rgba(6,5,8,.74) 72%, rgba(6,5,8,0));
      backdrop-filter: blur(14px);
    }
    .header-inner {
      border-radius: 24px;
      border-color: rgba(255,255,255,.14);
      background:
        linear-gradient(90deg, rgba(255,59,111,.13), transparent 30%, rgba(255,154,179,.055)),
        var(--premium-surface-strong);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        inset 0 -1px 0 rgba(255,255,255,.045),
        0 24px 58px rgba(0,0,0,.42);
    }
    .brand,
    .user-badge,
    .nav {
      border-color: rgba(255,255,255,.13);
      background:
        linear-gradient(180deg, rgba(255,255,255,.06), transparent),
        rgba(7,6,10,.66);
    }
    .nav button {
      color: rgba(255,246,249,.70);
      font-weight: 820;
    }
    .nav button.active {
      background: linear-gradient(180deg, rgba(255,59,111,.62), rgba(113,24,51,.78));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 12px 26px rgba(255,59,111,.18);
    }
    h1, h2, h3 {
      font-weight: 860;
    }
    .hero-title,
    h1 {
      text-shadow: 0 18px 42px rgba(0,0,0,.32);
    }
    .text {
      color: rgba(205,202,211,.88);
    }
    .lead {
      color: rgba(250,247,249,.90);
      font-weight: 700;
    }
    .overline {
      color: var(--pink2);
      font-weight: 850;
      letter-spacing: .22em;
    }
    .gradient {
      background: linear-gradient(90deg, #ffe8ef 0%, #ff9ab3 34%, #ff3b6f 66%, #ffd1dd 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    .btn {
      border-radius: 14px;
      font-weight: 820;
    }
    .btn-primary {
      background: linear-gradient(135deg, #ff3b6f, #ff6f8f);
      box-shadow: 0 14px 32px rgba(255,59,111,.22), inset 0 1px 0 rgba(255,255,255,.18);
    }
    .btn-primary:hover:not(:disabled) {
      background: linear-gradient(135deg, #ff4d7d, #ff809b);
      box-shadow: 0 18px 40px rgba(255,59,111,.25), inset 0 1px 0 rgba(255,255,255,.22);
    }
    .btn-ghost,
    .btn-muted {
      border-color: rgba(255,255,255,.13);
      background: rgba(255,255,255,.045);
      color: rgba(255,248,251,.88);
    }
    .btn-ghost:hover,
    .btn-muted:hover {
      border-color: rgba(255,154,179,.32);
      background: rgba(255,59,111,.075);
      color: white;
    }
    .panel,
    .card,
    .accordion,
    .content-card,
    .login-card,
    .question-card,
    .result-panel,
    .stat-card,
    .club-card,
    .club-dashboard-head,
    .kb-hero-copy,
    .kb-spotlight,
    .kb-card,
    .modal-box {
      border-color: var(--premium-line);
      background: var(--premium-surface);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.07), var(--premium-shadow);
    }
    .panel,
    .accordion,
    .stat-card,
    .club-card,
    .kb-card {
      border-radius: 20px;
    }
    .content-card,
    .login-card,
    .modal-box {
      border-radius: 28px;
    }
    .glow-card {
      border-color: rgba(255,255,255,.14);
      border-radius: 28px;
      background:
        linear-gradient(135deg, rgba(255,59,111,.30), rgba(255,255,255,.08) 52%, rgba(255,154,179,.18)),
        rgba(255,255,255,.04);
      box-shadow: 0 28px 74px rgba(0,0,0,.42), 0 16px 40px rgba(255,59,111,.10);
    }
    .glow-card > .panel {
      border-radius: 25px;
      background: linear-gradient(145deg, rgba(20,16,23,.96), rgba(8,7,11,.94));
    }
    .accordion:hover,
    .card:hover,
    .club-card:hover,
    .club-card.active {
      border-color: rgba(255,154,179,.26);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 24px 58px rgba(0,0,0,.36);
    }
    .section-button:hover,
    .lesson-row:hover,
    .staff-table tr:hover td {
      background: rgba(255,255,255,.035);
    }
    .section-num,
    .progress-percent,
    .q-num {
      border-color: rgba(255,154,179,.34);
      background: rgba(255,59,111,.13);
      color: var(--pink3);
    }
    .bar,
    .prog-bar,
    .coach-progress {
      background: rgba(255,255,255,.075);
      box-shadow: inset 0 1px 2px rgba(0,0,0,.35);
    }
    .fill,
    .prog-bar-fill,
    .coach-progress-fill {
      background: linear-gradient(90deg, #ff3b6f, #ff9ab3);
    }
    .stat-card {
      position: relative;
      overflow: hidden;
    }
    .stat-card::before {
      content: "";
      position: absolute;
      left: 18px;
      right: 18px;
      top: 0;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(255,59,111,.78), rgba(255,154,179,.16), transparent);
    }
    .stat-num {
      font-size: 40px;
      color: var(--pink2);
    }
    .staff-table th {
      color: rgba(170,166,176,.78);
    }
    .staff-table td {
      border-top-color: rgba(255,255,255,.075);
    }
    .score-none {
      color: rgba(170,166,176,.78);
    }
    .search,
    .kb-search,
    .field input,
    select.field-select {
      border-color: rgba(255,255,255,.13);
      background: rgba(255,255,255,.045);
    }
    .search:focus-within,
    .kb-search:focus-within,
    .field input:focus,
    select.field-select:focus {
      border-color: rgba(255,154,179,.38);
      background: rgba(255,59,111,.055);
      box-shadow: 0 0 0 4px rgba(255,59,111,.045);
    }
    .info-box,
    .read-box,
    .next-box,
    .result-box,
    .kb-mini-card,
    .kb-note {
      border-color: rgba(255,255,255,.11);
      background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
      border-radius: 18px;
    }
    .content-card::before {
      background:
        linear-gradient(115deg, transparent 0 22%, rgba(255,59,111,.09) 22.1%, transparent 22.45% 74%, rgba(255,154,179,.055) 74.1%, transparent 74.45%),
        repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 1px, transparent 1px 22px);
      opacity: .86;
    }
    .kb-bullet-list li,
    .kb-step-list li {
      border-color: rgba(255,255,255,.10);
      background: rgba(255,255,255,.032);
    }
    .footer {
      background: rgba(5,4,7,.74);
      border-top-color: rgba(255,255,255,.10);
    }

    /* ── Premium clean: каталог и поиск без лишнего шума ── */
    .search-row {
      display: block;
      margin: 0 0 24px;
    }
    .search-row .search {
      width: 100%;
      min-height: 58px;
      border-radius: 18px;
      border-color: rgba(255,255,255,.105);
      background:
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)),
        rgba(6,5,9,.68);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 18px 44px rgba(0,0,0,.22);
      backdrop-filter: blur(12px);
    }
    .search-row .search span {
      color: rgba(255,154,179,.58);
      font-size: 18px;
    }
    .search-row .search input {
      color: rgba(255,248,251,.94);
      font-size: 15px;
      font-weight: 620;
    }
    .search-row .search input::placeholder {
      color: rgba(170,166,176,.62);
    }
    .search-row .search:focus-within {
      border-color: rgba(255,154,179,.34);
      background:
        linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.020)),
        rgba(8,6,11,.80);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 18px 48px rgba(0,0,0,.28),
        0 0 0 4px rgba(255,59,111,.04);
    }
    .catalog-head > .panel,
    .next-box {
      background:
        linear-gradient(160deg, rgba(255,255,255,.040), rgba(255,255,255,.012)),
        rgba(8,7,11,.70);
    }
    .accordion {
      border-radius: 22px;
      background:
        linear-gradient(145deg, rgba(15,12,18,.76), rgba(7,6,10,.70));
    }
    .section-button {
      min-height: 82px;
    }
    .section-name {
      color: rgba(255,249,251,.96);
    }
    .section-desc,
    .lesson-meta {
      color: rgba(170,166,176,.76);
    }
    .lesson-row {
      border-radius: 16px;
    }
    .lesson-row:hover {
      background: rgba(255,255,255,.035);
    }
    .accordion-list {
      gap: 14px;
    }
    .empty-state {
      padding: 42px 28px;
      text-align: center;
      color: var(--muted);
      border-radius: 20px;
    }
    .empty-title {
      color: rgba(255,249,251,.96);
      font-size: 20px;
      font-weight: 900;
      margin-bottom: 8px;
    }
    .empty-text {
      max-width: 560px;
      margin: 0 auto;
      color: rgba(170,166,176,.78);
      line-height: 1.65;
      font-weight: 650;
    }
    .empty-action {
      margin-top: 18px;
    }
    .insight-board {
      margin: 0 0 26px;
      padding: 22px;
      border: 1px solid rgba(255,255,255,.105);
      border-radius: 26px;
      background:
        linear-gradient(135deg, rgba(255,255,255,.050), rgba(255,255,255,.012) 58%),
        linear-gradient(145deg, rgba(18,13,18,.86), rgba(6,5,9,.82));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        0 28px 70px rgba(0,0,0,.34);
    }
    .insight-board-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 18px;
    }
    .insight-board-title {
      margin-top: 6px;
      color: rgba(255,249,251,.98);
      font-size: 24px;
      font-weight: 900;
      line-height: 1.1;
    }
    .insight-board-meta {
      padding: 9px 13px;
      border: 1px solid rgba(255,255,255,.095);
      border-radius: 14px;
      background: rgba(255,255,255,.035);
      color: rgba(205,202,211,.84);
      font-size: 13px;
      font-weight: 850;
      white-space: nowrap;
    }
    .insight-hero-row {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr);
      gap: 14px;
      align-items: stretch;
      margin-bottom: 14px;
    }
    .insight-command {
      min-height: 190px;
      padding: 24px;
      border: 1px solid rgba(255,154,179,.24);
      border-radius: 22px;
      background:
        linear-gradient(135deg, rgba(255,59,111,.16), rgba(255,154,179,.050) 48%, rgba(255,255,255,.020)),
        rgba(8,7,11,.76);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    }
    .insight-title {
      margin-top: 14px;
      color: rgba(255,249,251,.98);
      font-size: 28px;
      font-weight: 900;
      line-height: 1.12;
      letter-spacing: 0;
    }
    .insight-text {
      max-width: 680px;
      margin-top: 12px;
      color: rgba(205,202,211,.80);
      font-size: 15px;
      line-height: 1.62;
      font-weight: 650;
    }
    .insight-signal-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }
    .insight-signal {
      min-height: 88px;
      padding: 17px;
      border: 1px solid rgba(255,255,255,.095);
      border-radius: 20px;
      background:
        linear-gradient(145deg, rgba(255,255,255,.044), rgba(255,255,255,.014)),
        rgba(8,7,11,.72);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
    }
    .insight-signal.ok .insight-signal-value {
      color: var(--green);
    }
    .insight-signal.warn .insight-signal-value {
      color: #ffc06a;
    }
    .insight-signal.risk .insight-signal-value {
      color: var(--pink2);
    }
    .insight-signal-value {
      color: rgba(255,249,251,.98);
      font-size: 30px;
      font-weight: 900;
      line-height: 1;
    }
    .insight-signal-label {
      margin-top: 8px;
      color: rgba(170,166,176,.76);
      font-size: 12px;
      font-weight: 850;
      text-transform: uppercase;
      letter-spacing: .08em;
    }
    .insight-columns {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
    }
    .insight-column {
      min-height: 238px;
      padding: 18px;
      border: 1px solid rgba(255,255,255,.085);
      border-radius: 22px;
      background:
        linear-gradient(145deg, rgba(255,255,255,.032), rgba(255,255,255,.010)),
        rgba(7,6,10,.64);
    }
    .insight-column-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 16px;
    }
    .insight-column-head span {
      color: rgba(255,249,251,.94);
      font-size: 16px;
      font-weight: 900;
    }
    .insight-column-head b {
      max-width: 48%;
      padding: 7px 10px;
      border-radius: 999px;
      background: rgba(255,59,111,.10);
      color: var(--pink2);
      font-size: 12px;
      font-weight: 900;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .insight-subtitle {
      margin: 16px 0 8px;
      color: rgba(170,166,176,.72);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .10em;
      text-transform: uppercase;
    }
    .insight-subtitle:first-of-type {
      margin-top: 0;
    }
    .insight-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .insight-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-height: 42px;
      padding: 8px 10px;
      border: 1px solid transparent;
      border-radius: 13px;
      background: rgba(255,255,255,.018);
      color: rgba(232,229,236,.90);
      font-size: 14px;
      font-weight: 750;
    }
    .insight-row span {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .insight-row.rank i {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      border-radius: 9px;
      background: rgba(255,255,255,.060);
      color: rgba(255,215,226,.94);
      font-style: normal;
      font-size: 12px;
      font-weight: 900;
      flex: 0 0 auto;
    }
    .insight-row b {
      color: var(--pink2);
      white-space: nowrap;
    }
    .insight-empty {
      min-height: 42px;
      display: flex;
      align-items: center;
      padding: 8px 10px;
      border-radius: 13px;
      background: rgba(255,255,255,.014);
      color: rgba(170,166,176,.70);
      font-size: 14px;
      line-height: 1.5;
      font-weight: 650;
    }
    .analytics-cockpit {
      --score-color: var(--pink2);
      position: relative;
      overflow: hidden;
      margin: 0 0 28px;
      padding: 24px;
      border: 1px solid rgba(255,255,255,.11);
      border-radius: 30px;
      background:
        radial-gradient(circle at 16% 0%, rgba(255,80,128,.16), transparent 34%),
        radial-gradient(circle at 86% 10%, rgba(255,255,255,.07), transparent 28%),
        linear-gradient(145deg, rgba(255,255,255,.052), rgba(255,255,255,.012) 54%),
        rgba(7,6,10,.82);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.09),
        inset 0 -1px 0 rgba(255,255,255,.035),
        0 32px 80px rgba(0,0,0,.38);
    }
    .analytics-cockpit.good { --score-color: var(--green); }
    .analytics-cockpit.steady { --score-color: #ffcf73; }
    .analytics-cockpit.warn { --score-color: #ff9f5a; }
    .analytics-cockpit.risk { --score-color: var(--pink2); }
    .analytics-cockpit.empty { --score-color: rgba(170,166,176,.72); }
    .cockpit-glow {
      position: absolute;
      inset: -40% -20% auto 42%;
      height: 330px;
      pointer-events: none;
      background: radial-gradient(circle, color-mix(in srgb, var(--score-color) 44%, transparent), transparent 68%);
      opacity: .24;
      filter: blur(6px);
    }
    .cockpit-top,
    .cockpit-grid,
    .cockpit-lanes {
      position: relative;
      z-index: 1;
    }
    .cockpit-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 20px;
    }
    .cockpit-title {
      margin-top: 7px;
      color: rgba(255,249,251,.98);
      font-size: 28px;
      line-height: 1.08;
      font-weight: 900;
    }
    .cockpit-subtitle {
      margin-top: 7px;
      color: rgba(170,166,176,.78);
      font-size: 14px;
      font-weight: 750;
    }
    .cockpit-status-pill {
      flex: 0 0 auto;
      padding: 10px 14px;
      border: 1px solid color-mix(in srgb, var(--score-color) 36%, rgba(255,255,255,.12));
      border-radius: 999px;
      background:
        linear-gradient(135deg, color-mix(in srgb, var(--score-color) 16%, transparent), rgba(255,255,255,.035)),
        rgba(6,5,9,.58);
      color: rgba(255,249,251,.94);
      box-shadow: 0 12px 28px color-mix(in srgb, var(--score-color) 12%, transparent);
      font-size: 13px;
      font-weight: 900;
      white-space: nowrap;
    }
    .cockpit-grid {
      display: grid;
      grid-template-columns: minmax(420px, 1.05fr) minmax(360px, .95fr);
      gap: 16px;
      align-items: stretch;
      margin-bottom: 16px;
    }
    .cockpit-command,
    .cockpit-metric,
    .cockpit-lane {
      border: 1px solid rgba(255,255,255,.09);
      background:
        linear-gradient(150deg, rgba(255,255,255,.046), rgba(255,255,255,.012)),
        rgba(8,7,11,.68);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    }
    .cockpit-command {
      display: grid;
      grid-template-rows: auto 1fr;
      gap: 16px;
      min-height: 260px;
      padding: 20px;
      border-radius: 24px;
    }
    .cockpit-score-row {
      display: grid;
      grid-template-columns: 146px minmax(0, 1fr);
      gap: 18px;
      align-items: center;
    }
    .cockpit-score-ring {
      position: relative;
      width: 146px;
      height: 98px;
      display: grid;
      align-content: center;
      padding: 0 18px 22px;
      border: 1px solid color-mix(in srgb, var(--score-color) 30%, rgba(255,255,255,.10));
      border-radius: 24px;
      background:
        radial-gradient(circle at 16% 0%, color-mix(in srgb, var(--score-color) 18%, transparent), transparent 58%),
        linear-gradient(145deg, rgba(255,255,255,.060), rgba(255,255,255,.014)),
        rgba(7,6,10,.62);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 18px 42px rgba(0,0,0,.28),
        0 0 28px color-mix(in srgb, var(--score-color) 12%, transparent);
    }
    .cockpit-score-ring::before {
      content: "";
      position: absolute;
      left: 18px;
      right: 18px;
      bottom: 16px;
      height: 5px;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--score-color), color-mix(in srgb, var(--score-color) 42%, white));
      transform: scaleX(var(--score-scale));
      transform-origin: left center;
      box-shadow: 0 0 18px color-mix(in srgb, var(--score-color) 28%, transparent);
      z-index: 2;
    }
    .cockpit-score-ring::after {
      content: "";
      position: absolute;
      left: 18px;
      right: 18px;
      bottom: 16px;
      height: 5px;
      border-radius: 999px;
      background: rgba(255,255,255,.085);
      pointer-events: none;
      box-shadow: inset 0 1px 2px rgba(0,0,0,.45);
    }
    .cockpit-score-ring span {
      position: relative;
      display: inline-flex;
      align-items: baseline;
      gap: 2px;
      color: rgba(255,249,251,.98);
      font-size: 38px;
      line-height: 1;
      font-weight: 900;
      text-shadow: 0 10px 28px rgba(0,0,0,.36);
      z-index: 3;
    }
    .cockpit-score-ring small {
      color: color-mix(in srgb, var(--score-color) 74%, white);
      font-size: 14px;
      font-weight: 900;
    }
    .cockpit-score-label,
    .cockpit-next-kicker,
    .cockpit-lane-sub {
      color: rgba(170,166,176,.72);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .11em;
      text-transform: uppercase;
    }
    .cockpit-score-title {
      margin-top: 6px;
      color: rgba(255,249,251,.98);
      font-size: 24px;
      font-weight: 900;
      line-height: 1.1;
    }
    .cockpit-score-text,
    .cockpit-next-text,
    .cockpit-metric-hint {
      color: rgba(190,186,197,.76);
      font-weight: 650;
    }
    .cockpit-score-text {
      max-width: 520px;
      margin-top: 8px;
      font-size: 14px;
      line-height: 1.6;
    }
    .cockpit-next {
      min-height: 118px;
      padding: 18px;
      border: 1px solid color-mix(in srgb, var(--score-color) 24%, rgba(255,255,255,.08));
      border-radius: 20px;
      background:
        linear-gradient(135deg, color-mix(in srgb, var(--score-color) 13%, transparent), rgba(255,255,255,.026)),
        rgba(7,6,10,.60);
    }
    .cockpit-next-title {
      margin-top: 9px;
      color: rgba(255,249,251,.98);
      font-size: 21px;
      font-weight: 900;
      line-height: 1.15;
    }
    .cockpit-next-text {
      margin-top: 9px;
      font-size: 14px;
      line-height: 1.58;
    }
    .cockpit-metrics {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }
    .cockpit-metric {
      min-height: 124px;
      padding: 17px;
      border-radius: 22px;
    }
    .cockpit-metric-value {
      color: rgba(255,249,251,.98);
      font-size: 31px;
      font-weight: 900;
      line-height: 1;
    }
    .cockpit-metric.pink .cockpit-metric-value,
    .cockpit-metric.risk .cockpit-metric-value { color: var(--pink2); }
    .cockpit-metric.green .cockpit-metric-value,
    .cockpit-metric.good .cockpit-metric-value { color: var(--green); }
    .cockpit-metric-label {
      margin-top: 12px;
      color: rgba(255,249,251,.90);
      font-size: 14px;
      font-weight: 900;
    }
    .cockpit-metric-hint {
      margin-top: 6px;
      font-size: 12px;
      line-height: 1.45;
    }
    .cockpit-lanes {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
    }
    .cockpit-lane {
      min-height: 248px;
      padding: 18px;
      border-radius: 24px;
    }
    .cockpit-lane-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 15px;
    }
    .cockpit-lane-head span {
      color: rgba(255,249,251,.94);
      font-size: 16px;
      font-weight: 900;
    }
    .cockpit-lane-head b {
      max-width: 50%;
      padding: 7px 10px;
      border-radius: 999px;
      background: rgba(255,255,255,.055);
      color: color-mix(in srgb, var(--score-color) 82%, white);
      font-size: 12px;
      font-weight: 900;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .cockpit-lane-sub {
      margin: 15px 0 8px;
    }
    .cockpit-lane-sub:first-of-type {
      margin-top: 0;
    }
    .cockpit-list {
      display: flex;
      flex-direction: column;
      gap: 7px;
    }
    .cockpit-row,
    .cockpit-empty {
      min-height: 42px;
      display: flex;
      align-items: center;
      border-radius: 14px;
      background: rgba(255,255,255,.020);
      font-size: 14px;
    }
    .cockpit-row {
      justify-content: space-between;
      gap: 12px;
      padding: 8px 10px;
      color: rgba(232,229,236,.91);
      font-weight: 800;
    }
    .cockpit-row span {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .cockpit-row.rank i {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      border-radius: 9px;
      background: color-mix(in srgb, var(--score-color) 20%, rgba(255,255,255,.06));
      color: rgba(255,249,251,.96);
      font-style: normal;
      font-size: 12px;
      font-weight: 900;
      flex: 0 0 auto;
    }
    .cockpit-row b {
      color: color-mix(in srgb, var(--score-color) 82%, white);
      white-space: nowrap;
    }
    .cockpit-empty {
      padding: 8px 10px;
      color: rgba(170,166,176,.70);
      line-height: 1.5;
      font-weight: 650;
    }

    /* ── Analytics: clean premium board ── */
    .analytics-suite {
      --score-color: var(--pink2);
      padding: 0;
      border-radius: 28px;
      background:
        radial-gradient(circle at 16% -10%, color-mix(in srgb, var(--score-color) 18%, transparent), transparent 280px),
        linear-gradient(145deg, rgba(20,16,23,.86), rgba(7,6,10,.90));
      border: 1px solid rgba(255,255,255,.105);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.075),
        0 28px 72px rgba(0,0,0,.34);
    }
    .analytics-suite.good { --score-color: var(--green); }
    .analytics-suite.steady { --score-color: #ffcf73; }
    .analytics-suite.warn { --score-color: #ff9f5a; }
    .analytics-suite.risk { --score-color: var(--pink2); }
    .analytics-suite.empty { --score-color: rgba(170,166,176,.72); }
    .analytics-suite-top {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 20px;
      align-items: center;
      padding: 26px 28px 22px;
      border-bottom: 1px solid rgba(255,255,255,.07);
    }
    .analytics-suite-top::after {
      content: "";
      position: absolute;
      left: 28px;
      right: 28px;
      bottom: -1px;
      height: 1px;
      background: linear-gradient(90deg, var(--score-color), transparent 54%);
      opacity: .45;
    }
    .analytics-kicker {
      color: color-mix(in srgb, var(--score-color) 76%, white);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .14em;
      text-transform: uppercase;
    }
    .analytics-title {
      margin-top: 8px;
      color: rgba(255,249,252,.98);
      font-size: clamp(28px, 3.2vw, 42px);
      line-height: 1.02;
      font-weight: 900;
      letter-spacing: 0;
    }
    .analytics-summary {
      max-width: 780px;
      margin-top: 10px;
      color: rgba(214,210,220,.76);
      font-size: 15px;
      line-height: 1.55;
      font-weight: 650;
    }
    .analytics-score {
      position: relative;
      width: 132px;
      height: 132px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: conic-gradient(var(--score-color) 0 calc(var(--score) * 1%), rgba(255,255,255,.11) calc(var(--score) * 1%) 100%);
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.07),
        0 18px 40px color-mix(in srgb, var(--score-color) 12%, transparent);
    }
    .analytics-score::before {
      content: "";
      position: absolute;
      inset: 14px;
      border-radius: 50%;
      background:
        radial-gradient(circle at 50% 12%, color-mix(in srgb, var(--score-color) 12%, transparent), transparent 48%),
        #08070c;
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.055),
        0 0 24px rgba(0,0,0,.26);
    }
    .analytics-score span {
      position: relative;
      z-index: 1;
      color: rgba(255,249,252,.98);
      font-size: 34px;
      line-height: 1;
      font-weight: 900;
      text-shadow: 0 12px 28px rgba(0,0,0,.34);
    }
    .analytics-score small {
      color: color-mix(in srgb, var(--score-color) 72%, white);
      font-size: 14px;
      font-weight: 900;
    }
    .analytics-score em {
      position: relative;
      z-index: 1;
      margin-top: 5px;
      color: rgba(170,166,176,.72);
      font-size: 11px;
      font-style: normal;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .analytics-kpis {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 1px;
      background: rgba(255,255,255,.065);
      border-bottom: 1px solid rgba(255,255,255,.07);
    }
    .analytics-suite .cockpit-metric {
      min-height: 0;
      padding: 18px 22px;
      border: 0;
      border-radius: 0;
      background: rgba(9,8,13,.64);
      box-shadow: none;
    }
    .analytics-suite .cockpit-metric-value {
      font-size: 29px;
      color: rgba(255,249,252,.98);
    }
    .analytics-suite .cockpit-metric-label {
      margin-top: 9px;
      color: rgba(255,249,252,.90);
    }
    .analytics-suite .cockpit-metric-hint {
      color: rgba(170,166,176,.70);
    }
    .analytics-panels {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
      gap: 18px;
      padding: 22px;
    }
    .analytics-panel {
      min-width: 0;
      padding: 18px;
      border-radius: 22px;
      border: 1px solid rgba(255,255,255,.085);
      background:
        linear-gradient(145deg, rgba(255,255,255,.040), rgba(255,255,255,.014)),
        rgba(7,6,10,.60);
    }
    .analytics-panel.primary {
      border-color: color-mix(in srgb, var(--score-color) 18%, rgba(255,255,255,.09));
      background:
        linear-gradient(135deg, color-mix(in srgb, var(--score-color) 8%, transparent), rgba(255,255,255,.016)),
        rgba(7,6,10,.64);
    }
    .analytics-panel-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 14px;
    }
    .analytics-panel-head span {
      display: block;
      color: rgba(170,166,176,.72);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .12em;
      text-transform: uppercase;
    }
    .analytics-panel-head b {
      display: block;
      max-width: 520px;
      margin-top: 6px;
      color: rgba(255,249,252,.96);
      font-size: 18px;
      line-height: 1.22;
      font-weight: 900;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .analytics-panel-head strong {
      flex: 0 0 auto;
      min-width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      border-radius: 14px;
      background: color-mix(in srgb, var(--score-color) 15%, rgba(255,255,255,.045));
      color: color-mix(in srgb, var(--score-color) 80%, white);
      font-size: 16px;
      font-weight: 900;
    }
    .analytics-focus-list {
      display: grid;
      gap: 14px;
    }
    .analytics-focus-group {
      display: grid;
      gap: 8px;
    }
    .analytics-focus-group-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 0 2px;
    }
    .analytics-focus-group-head span {
      color: rgba(255,249,252,.88);
      font-size: 13px;
      font-weight: 900;
    }
    .analytics-focus-group-head b {
      min-width: 26px;
      height: 26px;
      display: inline-grid;
      place-items: center;
      border-radius: 10px;
      background: rgba(255,255,255,.055);
      color: color-mix(in srgb, var(--score-color) 76%, white);
      font-size: 12px;
      font-weight: 900;
    }
    .analytics-row,
    .analytics-empty {
      min-height: 50px;
      border-radius: 16px;
      background: rgba(255,255,255,.028);
      border: 1px solid rgba(255,255,255,.055);
    }
    .analytics-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 11px 12px;
    }
    .analytics-row.risk {
      border-color: rgba(255,95,135,.18);
      background: rgba(255,61,116,.055);
    }
    .analytics-row.warn {
      border-color: rgba(255,207,115,.16);
      background: rgba(255,207,115,.045);
    }
    .analytics-row span {
      display: flex;
      align-items: center;
      gap: 9px;
      min-width: 0;
      color: rgba(255,249,252,.93);
      font-size: 14px;
      line-height: 1.25;
      font-weight: 900;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .analytics-row small {
      display: block;
      margin-top: 4px;
      color: rgba(170,166,176,.72);
      font-size: 12px;
      line-height: 1.25;
      font-weight: 700;
    }
    .analytics-row b {
      flex: 0 0 auto;
      color: color-mix(in srgb, var(--score-color) 78%, white);
      font-size: 13px;
      font-weight: 900;
      white-space: nowrap;
    }
    .analytics-row.rank i {
      display: inline-grid;
      place-items: center;
      width: 24px;
      height: 24px;
      border-radius: 9px;
      background: color-mix(in srgb, var(--score-color) 16%, rgba(255,255,255,.05));
      color: rgba(255,249,252,.96);
      font-style: normal;
      font-size: 12px;
      font-weight: 900;
    }
    .analytics-empty {
      display: flex;
      align-items: center;
      padding: 12px;
      color: rgba(170,166,176,.74);
      font-size: 14px;
      line-height: 1.45;
      font-weight: 700;
    }
    .analytics-empty.compact {
      min-height: 44px;
      font-size: 13px;
      background: rgba(255,255,255,.018);
    }
    .admin-overview {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(360px, .72fr);
      gap: 1px;
      overflow: hidden;
      margin: 0 0 28px;
      border: 1px solid rgba(255,255,255,.105);
      border-radius: 28px;
      background:
        radial-gradient(circle at 12% -20%, rgba(255,61,116,.16), transparent 300px),
        linear-gradient(145deg, rgba(20,16,23,.86), rgba(7,6,10,.90));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.075), 0 26px 68px rgba(0,0,0,.32);
    }
    .admin-overview-main {
      min-width: 0;
      padding: 26px 28px;
    }
    .admin-overview-title {
      max-width: 720px;
      margin-top: 9px;
      color: rgba(255,249,252,.98);
      font-size: clamp(25px, 2.6vw, 36px);
      line-height: 1.08;
      font-weight: 900;
      letter-spacing: 0;
    }
    .admin-overview-meta {
      margin-top: 11px;
      color: rgba(214,210,220,.72);
      font-size: 14px;
      line-height: 1.5;
      font-weight: 700;
    }
    .admin-overview-kpis {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1px;
      background: rgba(255,255,255,.065);
    }
    .admin-overview-kpis div {
      min-height: 112px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 18px;
      background: rgba(9,8,13,.66);
    }
    .admin-overview-kpis b {
      color: rgba(255,249,252,.98);
      font-size: 31px;
      line-height: 1;
      font-weight: 900;
    }
    .admin-overview-kpis span {
      margin-top: 9px;
      color: rgba(170,166,176,.74);
      font-size: 13px;
      font-weight: 850;
    }

    /* ── Manager premium dashboard ── */
    body.is-manager-dashboard {
      background:
        radial-gradient(circle at 16% 4%, rgba(255,51,100,.18), transparent 420px),
        radial-gradient(circle at 94% 6%, rgba(255,138,163,.11), transparent 520px),
        radial-gradient(circle at 74% 92%, rgba(255,51,100,.12), transparent 620px),
        linear-gradient(115deg, transparent 0 14%, rgba(255,51,100,.050) 14.2%, transparent 14.8% 66%, rgba(255,138,163,.035) 66.2%, transparent 66.8%),
        repeating-linear-gradient(135deg, rgba(255,255,255,.017) 0 1px, transparent 1px 22px),
        #05050a;
    }
    body.is-manager-dashboard .header,
    body.is-manager-dashboard .footer {
      display: none;
    }
    body.is-manager-dashboard main {
      min-height: 100vh;
    }
    #page-dashboard.manager-dashboard-page,
    #page-admin.manager-dashboard-page,
    #page-support.manager-dashboard-page,
    #page-editor.manager-dashboard-page {
      width: 100%;
      max-width: none;
      min-height: 100vh;
      padding: 0;
      margin: 0;
    }
    .manager-shell {
      --dash-line: rgba(255,255,255,.085);
      --dash-card: rgba(13,11,18,.76);
      --dash-card-2: rgba(20,14,24,.74);
      --dash-text: rgba(255,248,252,.96);
      --dash-muted: rgba(186,180,194,.68);
      min-height: 100vh;
      display: grid;
      grid-template-columns: 250px minmax(0, 1fr);
      background:
        radial-gradient(circle at 20% -8%, rgba(255,51,100,.18), transparent 360px),
        radial-gradient(circle at 86% 18%, rgba(255,138,163,.08), transparent 460px);
    }
    .manager-shell svg {
      width: 18px;
      height: 18px;
      fill: currentColor;
      flex: 0 0 auto;
    }
    .manager-shell-sidebar {
      position: sticky;
      top: 0;
      min-height: 100vh;
      padding: 22px 16px;
      border-right: 1px solid rgba(255,255,255,.075);
      background:
        linear-gradient(180deg, rgba(18,16,26,.94), rgba(7,7,13,.96)),
        rgba(5,5,10,.96);
      box-shadow: 22px 0 70px rgba(0,0,0,.24);
    }
    .manager-shell-brand {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 0 4px 22px;
      border: 0;
      border-bottom: 1px solid rgba(255,255,255,.07);
      background: transparent;
      color: white;
      text-align: left;
    }
    .manager-shell-brand span {
      width: 56px;
      height: 48px;
      display: grid;
      place-items: center;
      border-radius: 17px;
      background:
        radial-gradient(circle at 50% 38%, rgba(255,51,100,.24), transparent 64%),
        rgba(255,255,255,.032);
      box-shadow: 0 0 26px rgba(255,51,100,.14);
    }
    .manager-shell-brand img {
      width: 52px;
      height: 42px;
      object-fit: contain;
      filter: drop-shadow(0 0 12px rgba(255,51,100,.34));
    }
    .manager-shell-brand b {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 8px;
      color: #fff8fb;
      font-size: 17px;
      line-height: .86;
      font-weight: 900;
      letter-spacing: .12em;
      text-transform: uppercase;
    }
    .manager-shell-brand b::after {
      content: "";
      position: absolute;
      left: 0;
      right: 12px;
      top: 17px;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--pink), rgba(255,138,163,.38), transparent);
    }
    .manager-shell-brand small {
      color: var(--pink2);
      font-size: 9px;
      letter-spacing: .22em;
    }
    .manager-shell-nav {
      display: grid;
      gap: 6px;
      margin-top: 22px;
    }
    .manager-shell-nav button {
      min-height: 44px;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 0 14px;
      border: 1px solid transparent;
      border-radius: 13px;
      background: transparent;
      color: rgba(228,222,235,.72);
      font-size: 14px;
      font-weight: 820;
      text-align: left;
      transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
    }
    .manager-shell-nav button:hover {
      transform: translateX(2px);
      color: rgba(255,248,252,.94);
      background: rgba(255,255,255,.045);
      border-color: rgba(255,255,255,.07);
    }
    .manager-shell-nav button.active {
      color: #fff8fb;
      background:
        linear-gradient(90deg, rgba(255,51,100,.32), rgba(255,51,100,.10)),
        rgba(255,255,255,.038);
      border-color: rgba(255,138,163,.18);
      box-shadow: inset 3px 0 0 var(--pink), 0 12px 30px rgba(255,51,100,.10);
    }
    .manager-shell-side-card {
      position: absolute;
      left: 16px;
      right: 16px;
      bottom: 22px;
      padding: 18px;
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 18px;
      background:
        radial-gradient(circle at 50% 10%, rgba(255,51,100,.20), transparent 64%),
        linear-gradient(145deg, rgba(255,255,255,.060), rgba(255,255,255,.016)),
        rgba(10,9,15,.88);
      box-shadow: 0 18px 48px rgba(0,0,0,.34);
      text-align: center;
    }
    .manager-shell-side-card i {
      width: 48px;
      height: 48px;
      display: inline-grid;
      place-items: center;
      margin-bottom: 10px;
      border-radius: 18px;
      color: var(--pink2);
      background: rgba(255,51,100,.10);
      box-shadow: 0 0 28px rgba(255,51,100,.16);
    }
    .manager-shell-side-card i svg {
      width: 24px;
      height: 24px;
    }
    .manager-shell-side-card b,
    .manager-shell-side-card span {
      display: block;
    }
    .manager-shell-side-card b {
      color: rgba(255,248,252,.94);
      font-size: 14px;
      font-weight: 900;
    }
    .manager-shell-side-card span {
      margin: 8px 0 14px;
      color: var(--dash-muted);
      font-size: 12px;
      line-height: 1.45;
      font-weight: 700;
    }
    .manager-shell-side-card button,
    .manager-card-link,
    .manager-card-head button,
    .manager-small-btn {
      border: 1px solid rgba(255,255,255,.09);
      border-radius: 12px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.030)),
        rgba(255,255,255,.035);
      color: rgba(255,248,252,.94);
      font-weight: 900;
      transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
    }
    .manager-shell-side-card button {
      width: 100%;
      min-height: 42px;
      font-size: 13px;
    }
    .manager-shell-side-card button:hover,
    .manager-card-link:hover,
    .manager-card-head button:hover,
    .manager-small-btn:hover {
      transform: translateY(-1px);
      border-color: rgba(255,138,163,.22);
      background: rgba(255,51,100,.12);
      box-shadow: 0 14px 32px rgba(255,51,100,.10);
    }
    .manager-shell-main {
      min-width: 0;
      min-height: 100vh;
    }
    .manager-shell-topbar {
      position: sticky;
      top: 0;
      z-index: 35;
      min-height: 72px;
      display: grid;
      grid-template-columns: auto minmax(260px, 620px) auto;
      align-items: center;
      gap: 24px;
      padding: 14px 28px;
      border-bottom: 1px solid rgba(255,255,255,.075);
      background:
        linear-gradient(180deg, rgba(8,7,13,.94), rgba(8,7,13,.78)),
        rgba(8,7,13,.88);
      backdrop-filter: blur(16px) saturate(1.1);
    }
    .manager-shell-tabs {
      display: flex;
      align-items: center;
      gap: 20px;
    }
    .manager-shell-tabs button {
      position: relative;
      min-height: 44px;
      border: 0;
      background: transparent;
      color: rgba(217,211,224,.70);
      font-size: 14px;
      font-weight: 900;
    }
    .manager-shell-tabs button.active {
      color: var(--pink2);
    }
    .manager-shell-tabs button.active::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -15px;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--pink), var(--pink2));
      box-shadow: 0 0 18px rgba(255,51,100,.34);
    }
    .manager-shell-search {
      min-height: 48px;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0 14px;
      border: 1px solid rgba(255,255,255,.09);
      border-radius: 13px;
      background: rgba(4,4,9,.62);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
    }
    .manager-shell-search svg {
      color: rgba(210,204,216,.62);
    }
    .manager-shell-search input {
      width: 100%;
      min-width: 0;
      border: 0;
      outline: 0;
      background: transparent;
      color: var(--dash-text);
      font-size: 14px;
      font-weight: 700;
    }
    .manager-shell-search input::placeholder {
      color: rgba(190,184,198,.52);
    }
    .manager-shell-search span {
      flex: 0 0 auto;
      padding: 3px 7px;
      border-radius: 7px;
      border: 1px solid rgba(255,255,255,.08);
      color: rgba(190,184,198,.56);
      font-size: 11px;
      font-weight: 850;
    }
    .manager-shell-profile {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 12px;
      min-width: 0;
    }
    .manager-notification {
      position: relative;
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 14px;
      background: rgba(255,255,255,.035);
      color: rgba(255,248,252,.78);
    }
    .manager-notification em {
      position: absolute;
      right: -4px;
      top: -6px;
      min-width: 19px;
      height: 19px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      background: var(--pink);
      color: white;
      font-size: 11px;
      font-style: normal;
      font-weight: 900;
      box-shadow: 0 0 18px rgba(255,51,100,.34);
    }
    .manager-profile-avatar,
    .manager-avatar {
      display: inline-grid;
      place-items: center;
      border-radius: 50%;
      color: #fff8fb;
      background:
        radial-gradient(circle at 35% 24%, rgba(255,255,255,.18), transparent 42%),
        linear-gradient(145deg, rgba(255,51,100,.74), rgba(77,22,46,.88));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 20px rgba(255,51,100,.14);
      font-weight: 900;
      text-transform: uppercase;
      flex: 0 0 auto;
    }
    .manager-profile-avatar {
      width: 42px;
      height: 42px;
      font-size: 13px;
    }
    .manager-shell-profile b,
    .manager-shell-profile span {
      display: block;
      max-width: 160px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .manager-shell-profile b {
      color: var(--dash-text);
      font-size: 14px;
      font-weight: 900;
      line-height: 1.15;
    }
    .manager-shell-profile span {
      margin-top: 3px;
      color: var(--dash-muted);
      font-size: 12px;
      font-weight: 750;
    }
    .manager-dashboard-content {
      padding: 30px 28px 76px;
    }
    .manager-hero-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: end;
      gap: 24px;
      margin-bottom: 24px;
    }
    .manager-welcome {
      margin-bottom: 4px;
      color: rgba(232,226,238,.70);
      font-size: 13px;
      font-weight: 750;
    }
    .manager-hero-row h1 {
      margin: 0;
      color: #fff9fc;
      font-size: clamp(32px, 3.7vw, 48px);
      line-height: 1;
      font-weight: 900;
      letter-spacing: 0;
      text-shadow: 0 18px 42px rgba(0,0,0,.32);
    }
    .manager-hero-row p {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 12px 0 0;
      color: rgba(210,204,216,.70);
      font-size: 13px;
      font-weight: 780;
    }
    .manager-hero-row p span {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 16px rgba(52,211,153,.42);
    }
    .manager-quick-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 12px;
      flex-wrap: wrap;
    }
    .manager-quick-actions button {
      min-height: 50px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 0 18px;
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 13px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.070), rgba(255,255,255,.025)),
        rgba(12,10,17,.80);
      color: rgba(255,248,252,.92);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.065), 0 14px 34px rgba(0,0,0,.22);
      font-size: 13px;
      font-weight: 900;
      transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
    }
    .manager-quick-actions button.primary {
      border-color: rgba(255,138,163,.28);
      background: linear-gradient(135deg, #b02a59, #ff477a);
      box-shadow: 0 16px 38px rgba(255,51,100,.25);
    }
    .manager-quick-actions button:hover {
      transform: translateY(-2px);
      border-color: rgba(255,138,163,.30);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.085), 0 22px 48px rgba(0,0,0,.28), 0 0 28px rgba(255,51,100,.08);
    }
    .manager-dashboard-top-grid {
      display: grid;
      grid-template-columns: minmax(520px, 1.7fr) minmax(360px, .9fr);
      gap: 18px;
      margin-bottom: 18px;
    }
    .manager-alert-card,
    .manager-card,
    .manager-metric {
      border: 1px solid var(--dash-line);
      background:
        linear-gradient(145deg, rgba(255,255,255,.052), rgba(255,255,255,.015)),
        var(--dash-card);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.060),
        0 22px 58px rgba(0,0,0,.28);
      backdrop-filter: blur(14px) saturate(1.08);
    }
    .manager-alert-card {
      position: relative;
      overflow: hidden;
      min-height: 174px;
      display: grid;
      grid-template-columns: 96px minmax(0, 1fr) 154px;
      align-items: center;
      gap: 24px;
      padding: 24px 28px;
      border-radius: 22px;
    }
    .manager-alert-card::before {
      content: "";
      position: absolute;
      inset: -45% auto auto 6%;
      width: 420px;
      height: 300px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255,51,100,.18), transparent 68%);
      pointer-events: none;
    }
    .manager-alert-icon {
      position: relative;
      width: 76px;
      height: 76px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      color: var(--pink2);
      background:
        radial-gradient(circle at 50% 50%, rgba(255,51,100,.20), transparent 62%),
        rgba(255,51,100,.08);
      border: 1px solid rgba(255,138,163,.30);
      box-shadow: 0 0 36px rgba(255,51,100,.18);
    }
    .manager-alert-icon svg {
      width: 34px;
      height: 34px;
    }
    .manager-alert-copy {
      position: relative;
      min-width: 0;
    }
    .manager-alert-copy span,
    .manager-card-head span {
      color: var(--pink2);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .16em;
      text-transform: uppercase;
    }
    .manager-alert-copy h3 {
      margin: 9px 0 6px;
      color: var(--dash-text);
      font-size: 24px;
      line-height: 1.14;
      font-weight: 900;
    }
    .manager-alert-copy p {
      max-width: 760px;
      margin: 0 0 14px;
      color: rgba(210,204,216,.72);
      font-size: 13px;
      line-height: 1.55;
      font-weight: 700;
    }
    .manager-small-btn {
      min-height: 36px;
      padding: 0 15px;
      font-size: 13px;
    }
    .manager-donut {
      --score: 0;
      position: relative;
      width: 132px;
      height: 132px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background:
        conic-gradient(var(--pink2) 0 calc(var(--score) * 1%), rgba(255,255,255,.11) calc(var(--score) * 1%) 100%);
      box-shadow: 0 18px 44px rgba(255,51,100,.12);
    }
    .manager-donut::before {
      content: "";
      position: absolute;
      inset: 13px;
      border-radius: 50%;
      background:
        radial-gradient(circle at 50% 10%, rgba(255,138,163,.12), transparent 48%),
        #08070c;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.065);
    }
    .manager-donut div {
      position: relative;
      z-index: 1;
      display: grid;
      place-items: center;
      text-align: center;
    }
    .manager-donut b {
      color: #fff9fc;
      font-size: 36px;
      line-height: .9;
      font-weight: 900;
    }
    .manager-donut small {
      color: var(--pink2);
      font-size: 13px;
    }
    .manager-donut span {
      max-width: 72px;
      margin-top: 8px;
      color: rgba(190,184,198,.68);
      font-size: 9px;
      line-height: 1.2;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .manager-metrics-grid {
      overflow: hidden;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1px;
      border: 1px solid var(--dash-line);
      border-radius: 22px;
      background: rgba(255,255,255,.07);
      box-shadow: 0 22px 58px rgba(0,0,0,.25);
    }
    .manager-metric {
      min-height: 86px;
      display: grid;
      grid-template-columns: 46px minmax(0, 1fr);
      align-items: center;
      gap: 14px;
      padding: 18px;
      border: 0;
      border-radius: 0;
      box-shadow: none;
      background:
        linear-gradient(145deg, rgba(255,255,255,.043), rgba(255,255,255,.012)),
        rgba(10,9,15,.84);
    }
    .manager-metric i {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 15px;
      color: var(--pink2);
      background: rgba(255,51,100,.10);
    }
    .manager-metric.good i {
      color: var(--green);
      background: rgba(52,211,153,.10);
    }
    .manager-metric.risk i {
      color: var(--pink2);
      background: rgba(255,51,100,.12);
    }
    .manager-metric b,
    .manager-metric span,
    .manager-metric small {
      display: block;
      min-width: 0;
    }
    .manager-metric b {
      color: var(--dash-text);
      font-size: 24px;
      line-height: 1;
      font-weight: 900;
    }
    .manager-metric span {
      margin-top: 5px;
      color: rgba(230,224,236,.86);
      font-size: 12px;
      font-weight: 850;
    }
    .manager-metric small {
      margin-top: 3px;
      color: var(--green);
      font-size: 11px;
      font-weight: 850;
    }
    .manager-metric.risk small {
      color: var(--pink2);
    }
    .manager-search-note {
      margin: -2px 0 18px;
      padding: 12px 14px;
      border: 1px solid rgba(255,138,163,.14);
      border-radius: 14px;
      background: rgba(255,51,100,.055);
      color: rgba(230,224,236,.78);
      font-size: 13px;
      font-weight: 750;
    }
    .manager-search-note b {
      color: var(--pink2);
    }
    .manager-dashboard-grid {
      display: grid;
      grid-template-columns: minmax(260px, .95fr) minmax(420px, 1.35fr) minmax(300px, 1fr);
      gap: 18px;
      align-items: start;
    }
    .manager-card {
      min-width: 0;
      border-radius: 20px;
      padding: 18px;
    }
    .manager-activity-card {
      grid-column: span 2;
    }
    .manager-card-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 15px;
    }
    .manager-card-head b {
      display: block;
      margin-top: 5px;
      color: var(--dash-text);
      font-size: 13px;
      font-weight: 900;
    }
    .manager-card-head button {
      min-height: 31px;
      padding: 0 10px;
      color: rgba(224,218,230,.74);
      font-size: 11px;
      white-space: nowrap;
    }
    .manager-stack,
    .manager-course-list,
    .manager-rank-list,
    .manager-activity-list {
      display: grid;
      gap: 9px;
    }
    .manager-person-row,
    .manager-course-row,
    .manager-rank-row {
      width: 100%;
      min-width: 0;
      border: 1px solid rgba(255,255,255,.075);
      border-radius: 15px;
      background: rgba(255,255,255,.030);
      color: var(--dash-text);
      text-align: left;
      transition: transform .18s ease, border-color .18s ease, background .18s ease;
    }
    .manager-person-row:hover,
    .manager-course-row:hover,
    .manager-rank-row:hover {
      transform: translateY(-1px);
      border-color: rgba(255,138,163,.20);
      background: rgba(255,51,100,.060);
    }
    .manager-person-row {
      min-height: 74px;
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      padding: 11px 12px;
    }
    .manager-avatar {
      width: 40px;
      height: 40px;
      font-size: 12px;
    }
    .manager-person-main,
    .manager-rank-main,
    .manager-course-main {
      min-width: 0;
    }
    .manager-person-main b,
    .manager-person-main small,
    .manager-course-main b,
    .manager-course-main small,
    .manager-rank-main b {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .manager-person-main b,
    .manager-course-main b,
    .manager-rank-main b {
      color: var(--dash-text);
      font-size: 13px;
      font-weight: 900;
    }
    .manager-person-main small,
    .manager-course-main small {
      margin-top: 4px;
      color: var(--dash-muted);
      font-size: 11px;
      font-weight: 750;
    }
    .manager-status {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 24px;
      padding: 0 9px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.044);
      color: rgba(230,224,236,.78);
      font-size: 10px;
      font-weight: 900;
      white-space: nowrap;
    }
    .manager-status.risk {
      border-color: rgba(255,95,135,.24);
      background: rgba(255,51,100,.10);
      color: var(--pink2);
    }
    .manager-status.warn {
      border-color: rgba(251,191,36,.24);
      background: rgba(251,191,36,.075);
      color: #ffd27a;
    }
    .manager-status.good,
    .manager-status.progress.good {
      border-color: rgba(52,211,153,.24);
      background: rgba(52,211,153,.085);
      color: var(--green);
    }
    .manager-status.progress {
      border-color: rgba(255,138,163,.20);
      background: rgba(255,51,100,.085);
      color: var(--pink2);
    }
    .manager-card-link {
      width: 100%;
      min-height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-top: 11px;
      color: rgba(230,224,236,.84);
      font-size: 12px;
    }
    .manager-course-row {
      min-height: 74px;
      display: grid;
      grid-template-columns: 58px minmax(0, 1fr) auto auto;
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
    }
    .manager-course-cover {
      width: 54px;
      height: 54px;
      display: grid;
      place-items: center;
      border-radius: 13px;
      color: rgba(255,248,252,.94);
      background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.18), transparent 38%),
        linear-gradient(145deg, #7e244d, #211321);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 12px 28px rgba(0,0,0,.24);
    }
    .manager-course-cover.cover-2 {
      background: linear-gradient(145deg, #204a72, #141b2f);
    }
    .manager-course-cover.cover-3 {
      background: linear-gradient(145deg, #1f6a57, #101d18);
    }
    .manager-course-main em,
    .manager-rank-main em {
      display: block;
      overflow: hidden;
      height: 4px;
      margin-top: 8px;
      border-radius: 999px;
      background: rgba(255,255,255,.075);
    }
    .manager-course-main em i,
    .manager-rank-main em i {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--pink), var(--pink2));
      box-shadow: 0 0 16px rgba(255,51,100,.24);
    }
    .manager-course-progress {
      color: rgba(230,224,236,.84);
      font-size: 12px;
      font-weight: 900;
      white-space: nowrap;
    }
    .manager-rank-row {
      min-height: 54px;
      display: grid;
      grid-template-columns: 30px 38px minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      padding: 8px 10px;
    }
    .manager-rank-place {
      width: 28px;
      height: 28px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: rgba(255,255,255,.060);
      color: rgba(230,224,236,.80);
      font-size: 12px;
      font-weight: 900;
    }
    .manager-rank-place.top-1 { color: #ffd86f; background: rgba(251,191,36,.14); }
    .manager-rank-place.top-2 { color: #dfe5ee; background: rgba(226,232,240,.11); }
    .manager-rank-place.top-3 { color: #ffb17c; background: rgba(251,146,60,.13); }
    .manager-rank-row strong {
      color: var(--green);
      font-size: 13px;
      font-weight: 900;
      white-space: nowrap;
    }
    .manager-activity-row {
      min-height: 48px;
      display: grid;
      grid-template-columns: 36px minmax(120px, .82fr) minmax(120px, .72fr) minmax(160px, 1fr) auto;
      align-items: center;
      gap: 12px;
      padding: 8px 10px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.065);
      background: rgba(255,255,255,.024);
    }
    .manager-activity-row .manager-avatar {
      width: 34px;
      height: 34px;
      font-size: 10px;
    }
    .manager-activity-row b,
    .manager-activity-row span,
    .manager-activity-row small,
    .manager-activity-row em {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-style: normal;
    }
    .manager-activity-row b {
      color: var(--dash-text);
      font-size: 12px;
      font-weight: 900;
    }
    .manager-activity-row span {
      color: rgba(230,224,236,.76);
      font-size: 12px;
      font-weight: 850;
    }
    .manager-activity-row span.good { color: var(--green); }
    .manager-activity-row span.warn { color: #ffd27a; }
    .manager-activity-row span.risk { color: var(--pink2); }
    .manager-activity-row small,
    .manager-activity-row em {
      color: var(--dash-muted);
      font-size: 11px;
      font-weight: 700;
    }
    .manager-signal-row {
      min-height: 62px;
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr);
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
      border: 1px solid rgba(255,255,255,.065);
      border-radius: 15px;
      background: rgba(255,255,255,.026);
    }
    .manager-signal-row i {
      width: 36px;
      height: 36px;
      display: grid;
      place-items: center;
      border-radius: 13px;
      color: var(--pink2);
      background: rgba(255,51,100,.10);
    }
    .manager-signal-row.warn i {
      color: #ffd27a;
      background: rgba(251,191,36,.075);
    }
    .manager-signal-row b,
    .manager-signal-row small {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .manager-signal-row b {
      color: var(--dash-text);
      font-size: 13px;
      font-weight: 900;
    }
    .manager-signal-row small {
      margin-top: 4px;
      color: var(--dash-muted);
      font-size: 11px;
      font-weight: 740;
    }
    .manager-empty {
      min-height: 70px;
      display: flex;
      align-items: center;
      padding: 13px;
      border: 1px dashed rgba(255,255,255,.10);
      border-radius: 15px;
      color: var(--dash-muted);
      background: rgba(255,255,255,.020);
      font-size: 13px;
      line-height: 1.45;
      font-weight: 750;
    }
    @media (max-width: 1180px) {
      .manager-shell {
        grid-template-columns: 86px minmax(0, 1fr);
      }
      .manager-shell-sidebar {
        padding-inline: 12px;
      }
      .manager-shell-brand {
        justify-content: center;
        padding-inline: 0;
      }
      .manager-shell-brand b,
      .manager-shell-nav span,
      .manager-shell-side-card {
        display: none;
      }
      .manager-shell-nav button {
        justify-content: center;
        padding: 0;
      }
      .manager-dashboard-top-grid,
      .manager-dashboard-grid {
        grid-template-columns: 1fr;
      }
      .manager-activity-card {
        grid-column: auto;
      }
    }
    @media (max-width: 880px) {
      .manager-shell {
        display: block;
      }
      .manager-shell-sidebar {
        position: relative;
        min-height: 0;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 12px;
        padding: 12px;
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.075);
      }
      .manager-shell-brand {
        border-bottom: 0;
        padding: 0;
      }
      .manager-shell-nav {
        display: flex;
        gap: 6px;
        margin: 0;
        overflow-x: auto;
        padding-bottom: 3px;
      }
      .manager-shell-nav button {
        min-width: 46px;
        flex: 0 0 auto;
      }
      .manager-shell-topbar {
        position: relative;
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 14px;
      }
      .manager-shell-tabs {
        order: 1;
      }
      .manager-shell-search {
        order: 3;
      }
      .manager-shell-profile {
        order: 2;
        justify-content: flex-start;
      }
      .manager-dashboard-content {
        padding: 20px 14px 82px;
      }
      .manager-hero-row {
        grid-template-columns: 1fr;
        align-items: start;
      }
      .manager-quick-actions {
        justify-content: flex-start;
      }
      .manager-alert-card {
        grid-template-columns: 1fr;
        gap: 16px;
      }
      .manager-alert-icon {
        width: 64px;
        height: 64px;
      }
      .manager-donut {
        width: 118px;
        height: 118px;
      }
      .manager-metrics-grid {
        grid-template-columns: 1fr;
      }
      .manager-course-row,
      .manager-rank-row,
      .manager-activity-row {
        grid-template-columns: 1fr;
        align-items: start;
      }
      .manager-course-cover,
      .manager-rank-place,
      .manager-activity-row .manager-avatar {
        display: none;
      }
      .manager-course-progress,
      .manager-rank-row strong {
        justify-self: start;
      }
    }

    /* ── Manager dashboard: spacious premium pass ── */
    body.is-manager-dashboard {
      background:
        radial-gradient(circle at 18% 2%, rgba(255,51,100,.14), transparent 520px),
        radial-gradient(circle at 88% 18%, rgba(135,72,122,.13), transparent 560px),
        radial-gradient(circle at 66% 92%, rgba(255,51,100,.07), transparent 640px),
        repeating-linear-gradient(135deg, rgba(255,255,255,.014) 0 1px, transparent 1px 24px),
        #050409;
    }
    .manager-shell {
      --dash-line: rgba(255,255,255,.095);
      --dash-card: rgba(12,10,17,.74);
      --dash-card-2: rgba(16,12,21,.78);
      --dash-muted: rgba(206,199,214,.72);
      grid-template-columns: 268px minmax(0, 1fr);
      background:
        radial-gradient(circle at 22% 0%, rgba(255,51,100,.10), transparent 470px),
        radial-gradient(circle at 82% 16%, rgba(255,138,163,.055), transparent 520px);
    }
    .manager-shell svg {
      width: 21px;
      height: 21px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex: 0 0 auto;
    }
    .manager-shell-sidebar {
      padding: 26px 18px;
      background:
        linear-gradient(180deg, rgba(12,11,18,.96), rgba(6,6,11,.98)),
        rgba(5,5,10,.96);
    }
    .manager-shell-nav {
      gap: 8px;
      margin-top: 26px;
    }
    .manager-shell-nav button {
      min-height: 48px;
      border-radius: 16px;
      font-size: 14px;
      color: rgba(226,220,234,.76);
    }
    .manager-shell-nav button.active {
      background:
        linear-gradient(90deg, rgba(255,51,100,.18), rgba(255,51,100,.055)),
        rgba(255,255,255,.032);
      border-color: rgba(255,138,163,.16);
      box-shadow: inset 3px 0 0 var(--pink), 0 16px 34px rgba(255,51,100,.08);
    }
    .manager-shell-topbar {
      min-height: 78px;
      grid-template-columns: auto minmax(280px, 560px) auto;
      padding: 16px 42px;
      gap: 28px;
      background:
        linear-gradient(180deg, rgba(5,5,10,.96), rgba(5,5,10,.82)),
        rgba(5,5,10,.88);
    }
    .manager-shell-tabs button {
      font-size: 15px;
    }
    .manager-shell-search {
      min-height: 46px;
      max-width: 560px;
      border-radius: 14px;
      background: rgba(4,4,9,.50);
      border-color: rgba(255,255,255,.075);
    }
    .manager-dashboard-content {
      max-width: 1760px;
      margin: 0 auto;
      padding: 46px 54px 92px;
    }
    .manager-hero-row {
      gap: 32px;
      margin-bottom: 30px;
    }
    .manager-welcome {
      margin-bottom: 8px;
      color: rgba(226,220,234,.72);
      font-size: 14px;
    }
    .manager-hero-row h1 {
      font-size: clamp(46px, 4vw, 64px);
      letter-spacing: 0;
    }
    .manager-hero-row p {
      margin-top: 15px;
      color: rgba(220,214,226,.78);
      font-size: 14px;
    }
    .manager-quick-actions {
      gap: 14px;
    }
    .manager-quick-actions button {
      min-height: 54px;
      padding: 0 22px;
      border-radius: 16px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.060), rgba(255,255,255,.020)),
        rgba(12,10,17,.70);
      color: rgba(245,240,247,.88);
      font-size: 14px;
    }
    .manager-quick-actions button.primary {
      background: linear-gradient(135deg, #a82653, #ff3f76 58%, #ff6c94);
      border-color: rgba(255,138,163,.38);
      box-shadow: 0 20px 48px rgba(255,51,100,.25), inset 0 1px 0 rgba(255,255,255,.16);
    }
    .manager-dashboard-top-grid {
      grid-template-columns: minmax(680px, 1.58fr) minmax(420px, .82fr);
      gap: 24px;
      margin-bottom: 24px;
      align-items: start;
    }
    .manager-alert-card,
    .manager-card,
    .manager-metric {
      border-color: rgba(255,255,255,.105);
      background:
        radial-gradient(circle at 12% 0%, rgba(255,51,100,.075), transparent 260px),
        linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.014)),
        rgba(10,9,15,.78);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        0 28px 70px rgba(0,0,0,.30);
    }
    .manager-alert-card {
      height: 220px;
      min-height: 220px;
      grid-template-columns: 116px minmax(0, 1fr) 182px;
      gap: 30px;
      padding: 30px 34px;
      border-radius: 28px;
    }
    .manager-alert-card::before {
      width: 560px;
      height: 360px;
      opacity: .72;
      background: radial-gradient(circle, rgba(255,51,100,.16), transparent 70%);
    }
    .manager-alert-icon {
      width: 92px;
      height: 92px;
      border-radius: 50%;
      background:
        radial-gradient(circle at 50% 48%, rgba(255,51,100,.20), transparent 64%),
        rgba(255,51,100,.065);
      border-color: rgba(255,138,163,.28);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 42px rgba(255,51,100,.16);
    }
    .manager-alert-icon svg {
      width: 36px;
      height: 36px;
    }
    .manager-alert-copy span,
    .manager-card-head span {
      font-size: 12px;
      letter-spacing: .18em;
    }
    .manager-alert-copy h3 {
      max-width: 760px;
      margin: 12px 0 9px;
      font-size: clamp(25px, 2vw, 34px);
      line-height: 1.08;
    }
    .manager-alert-copy p {
      max-width: 820px;
      margin-bottom: 20px;
      color: rgba(218,212,224,.78);
      font-size: 15px;
      line-height: 1.62;
      font-weight: 700;
    }
    .manager-small-btn {
      min-height: 42px;
      padding: 0 19px;
      border-radius: 13px;
      font-size: 14px;
      background: rgba(255,255,255,.055);
    }
    .manager-donut {
      width: 158px;
      height: 158px;
      justify-self: end;
      background:
        conic-gradient(var(--pink2) 0 calc(var(--score) * 1%), rgba(255,255,255,.105) calc(var(--score) * 1%) 100%);
      box-shadow: 0 22px 52px rgba(255,51,100,.13), inset 0 0 0 1px rgba(255,255,255,.055);
    }
    .manager-donut::before {
      inset: 16px;
      background:
        radial-gradient(circle at 50% 10%, rgba(255,138,163,.11), transparent 48%),
        #07060b;
    }
    .manager-donut b {
      font-size: 43px;
    }
    .manager-donut span {
      max-width: 92px;
      color: rgba(206,199,214,.72);
      font-size: 10px;
      letter-spacing: .10em;
    }
    .manager-metrics-grid {
      gap: 16px;
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
    }
    .manager-metric {
      min-height: 112px;
      grid-template-columns: 56px minmax(0, 1fr);
      gap: 18px;
      padding: 24px;
      border: 1px solid rgba(255,255,255,.095);
      border-radius: 24px;
      background:
        linear-gradient(145deg, rgba(255,255,255,.052), rgba(255,255,255,.015)),
        rgba(10,9,15,.70);
    }
    .manager-metric i,
    .manager-shell-side-card i,
    .manager-course-cover,
    .manager-signal-row i {
      width: 56px;
      height: 56px;
      border-radius: 18px;
    }
    .manager-metric i {
      color: var(--pink2);
      background:
        radial-gradient(circle at 40% 25%, rgba(255,255,255,.12), transparent 42%),
        rgba(255,51,100,.085);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    }
    .manager-metric.good i {
      background: rgba(52,211,153,.085);
    }
    .manager-metric b {
      font-size: 31px;
    }
    .manager-metric span {
      margin-top: 8px;
      color: rgba(242,237,246,.88);
      font-size: 14px;
    }
    .manager-metric small {
      margin-top: 6px;
      color: rgba(52,211,153,.92);
      font-size: 12px;
    }
    .manager-dashboard-grid {
      grid-template-columns: minmax(320px, .9fr) minmax(480px, 1.22fr) minmax(360px, .96fr);
      gap: 24px;
      align-items: start;
    }
    .manager-card {
      min-height: 356px;
      border-radius: 26px;
      padding: 26px;
    }
    .manager-activity-card,
    .manager-signals-card {
      min-height: 244px;
      margin-top: 0;
    }
    .manager-card-head {
      margin-bottom: 22px;
    }
    .manager-card-head b {
      margin-top: 7px;
      color: rgba(255,248,252,.96);
      font-size: 16px;
    }
    .manager-card-head button {
      min-height: 36px;
      padding: 0 13px;
      border-radius: 12px;
      color: rgba(230,224,236,.78);
      font-size: 12px;
      background: rgba(255,255,255,.035);
    }
    .manager-stack,
    .manager-course-list,
    .manager-rank-list,
    .manager-activity-list {
      gap: 12px;
    }
    .manager-person-row,
    .manager-course-row,
    .manager-rank-row {
      border-radius: 18px;
      background:
        linear-gradient(145deg, rgba(255,255,255,.040), rgba(255,255,255,.012)),
        rgba(255,255,255,.020);
    }
    .manager-person-row {
      min-height: 86px;
      grid-template-columns: 46px minmax(0, 1fr) auto;
      padding: 14px;
    }
    .manager-person-row.is-risk {
      border-color: rgba(255,95,135,.25);
      background:
        linear-gradient(145deg, rgba(255,51,100,.090), rgba(255,255,255,.012)),
        rgba(255,255,255,.018);
      box-shadow: inset 0 0 0 1px rgba(255,51,100,.035);
    }
    .manager-avatar {
      width: 44px;
      height: 44px;
      font-size: 12px;
      background:
        radial-gradient(circle at 35% 24%, rgba(255,255,255,.16), transparent 42%),
        linear-gradient(145deg, rgba(255,51,100,.48), rgba(54,24,43,.92));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 20px rgba(0,0,0,.18);
    }
    .manager-person-main b,
    .manager-course-main b,
    .manager-rank-main b {
      font-size: 15px;
    }
    .manager-person-main small,
    .manager-course-main small {
      color: rgba(206,199,214,.74);
      font-size: 12px;
    }
    .manager-status {
      min-height: 27px;
      padding: 0 10px;
      font-size: 11px;
    }
    .manager-card-link {
      min-height: 42px;
      margin-top: 16px;
      border-radius: 14px;
      color: rgba(230,224,236,.78);
      background: rgba(255,255,255,.030);
      font-size: 13px;
    }
    .manager-course-row {
      min-height: 92px;
      grid-template-columns: 56px minmax(0, 1fr) auto auto;
      gap: 16px;
      padding: 16px;
    }
    .manager-course-cover {
      color: rgba(255,248,252,.92);
      background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.14), transparent 38%),
        linear-gradient(145deg, rgba(255,51,100,.38), rgba(26,16,25,.95));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 14px 30px rgba(0,0,0,.22);
    }
    .manager-course-cover.cover-2 {
      background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.13), transparent 38%),
        linear-gradient(145deg, rgba(93,92,255,.28), rgba(15,16,31,.95));
    }
    .manager-course-cover.cover-3 {
      color: var(--green);
      background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.12), transparent 38%),
        linear-gradient(145deg, rgba(52,211,153,.18), rgba(12,24,21,.96));
    }
    .manager-course-cover svg,
    .manager-metric i svg,
    .manager-signal-row i svg {
      width: 22px;
      height: 22px;
    }
    .manager-course-main em,
    .manager-rank-main em {
      height: 3px;
      margin-top: 10px;
      background: rgba(255,255,255,.085);
    }
    .manager-course-progress {
      font-size: 13px;
    }
    .manager-rank-row {
      min-height: 64px;
      grid-template-columns: 30px 44px minmax(0, 1fr) auto;
      gap: 12px;
      padding: 10px 12px;
      cursor: default;
    }
    button.manager-rank-row {
      cursor: pointer;
    }
    .manager-rank-place {
      width: 29px;
      height: 29px;
      background: rgba(255,255,255,.055);
      font-size: 12px;
    }
    .manager-rank-row strong {
      font-size: 14px;
    }
    .manager-rank-main em i {
      background: linear-gradient(90deg, rgba(255,51,100,.78), rgba(255,138,163,.92));
      box-shadow: none;
    }
    .manager-activity-row {
      min-height: 58px;
      padding: 10px 12px;
      border-radius: 16px;
    }
    .manager-activity-row b,
    .manager-activity-row span {
      font-size: 13px;
    }
    .manager-activity-row small,
    .manager-activity-row em {
      color: rgba(206,199,214,.72);
      font-size: 12px;
    }
    .manager-signal-row {
      min-height: 76px;
      grid-template-columns: 56px minmax(0, 1fr);
      padding: 12px 14px;
      border-radius: 18px;
    }
    .manager-signal-row b {
      font-size: 14px;
    }
    .manager-signal-row small {
      color: rgba(206,199,214,.72);
      font-size: 12px;
    }
    .manager-empty {
      min-height: 86px;
      padding: 16px;
      border-radius: 18px;
      color: rgba(206,199,214,.72);
      font-size: 14px;
    }
    @media (max-width: 1180px) {
      .manager-shell {
        grid-template-columns: 86px minmax(0, 1fr);
      }
      .manager-dashboard-content {
        padding: 34px 24px 86px;
      }
      .manager-dashboard-top-grid,
      .manager-dashboard-grid {
        grid-template-columns: 1fr;
      }
      .manager-card {
        min-height: 0;
      }
    }
    @media (max-width: 880px) {
      .manager-shell {
        display: block;
      }
      .manager-shell-topbar {
        grid-template-columns: 1fr;
        padding: 14px;
      }
      .manager-dashboard-content {
        padding: 22px 14px 82px;
      }
      .manager-hero-row,
      .manager-alert-card {
        grid-template-columns: 1fr;
      }
      .manager-hero-row h1 {
        font-size: 38px;
      }
      .manager-donut {
        justify-self: start;
        width: 132px;
        height: 132px;
      }
      .manager-metrics-grid {
        grid-template-columns: 1fr;
      }
      .manager-course-row,
      .manager-rank-row,
      .manager-activity-row {
        grid-template-columns: 1fr;
      }
      .manager-course-cover,
      .manager-rank-place,
      .manager-activity-row .manager-avatar {
        display: none;
      }
    }

    /* ── Manager dashboard: compact premium scale ── */
    .manager-shell {
      grid-template-columns: 248px minmax(0, 1fr);
    }
    .manager-shell svg {
      width: 19px;
      height: 19px;
      stroke-width: 1.9;
    }
    .manager-shell-sidebar {
      padding: 22px 14px;
    }
    .manager-shell-brand {
      padding-bottom: 18px;
    }
    .manager-shell-brand span {
      width: 52px;
      height: 44px;
      border-radius: 16px;
    }
    .manager-shell-brand img {
      width: 48px;
      height: 38px;
    }
    .manager-shell-brand b {
      font-size: 15px;
      font-weight: 800;
    }
    .manager-shell-brand small {
      font-size: 8px;
      font-weight: 700;
    }
    .manager-shell-nav {
      gap: 6px;
      margin-top: 20px;
    }
    .manager-shell-nav button {
      min-height: 44px;
      padding: 0 12px;
      border-radius: 14px;
      font-size: 14px;
      font-weight: 650;
    }
    .manager-shell-side-card {
      padding: 15px;
      border-radius: 16px;
    }
    .manager-shell-side-card i {
      width: 48px;
      height: 48px;
      border-radius: 16px;
    }
    .manager-shell-side-card b {
      font-size: 13px;
      font-weight: 750;
    }
    .manager-shell-side-card span {
      font-size: 12px;
      font-weight: 450;
    }
    .manager-shell-side-card button,
    .manager-card-link,
    .manager-card-head button,
    .manager-small-btn,
    .manager-quick-actions button {
      font-weight: 700;
    }
    .manager-shell-topbar {
      min-height: 74px;
      grid-template-columns: auto minmax(260px, 500px) auto;
      gap: 22px;
      padding: 14px 34px;
    }
    .manager-shell-tabs button {
      min-height: 40px;
      font-size: 14px;
      font-weight: 700;
    }
    .manager-shell-tabs button.active::after {
      bottom: -15px;
    }
    .manager-shell-search {
      min-height: 42px;
      max-width: 500px;
      border-radius: 13px;
    }
    .manager-shell-search input {
      font-size: 13px;
      font-weight: 500;
    }
    .manager-notification,
    .manager-profile-avatar {
      width: 38px;
      height: 38px;
    }
    .manager-shell-profile {
      gap: 10px;
    }
    .manager-shell-profile b {
      font-size: 13px;
      font-weight: 700;
    }
    .manager-shell-profile span {
      font-size: 11px;
      font-weight: 450;
    }
    .manager-dashboard-content {
      max-width: 1500px;
      padding: 34px 40px 78px;
    }
    .manager-hero-row {
      gap: 24px;
      margin-bottom: 22px;
    }
    .manager-welcome {
      margin-bottom: 5px;
      font-size: 13px;
      font-weight: 500;
    }
    .manager-hero-row h1 {
      font-size: clamp(40px, 3vw, 46px);
      line-height: 1.05;
      font-weight: 800;
    }
    .manager-hero-row p {
      margin-top: 11px;
      font-size: 13px;
      font-weight: 500;
    }
    .manager-quick-actions {
      gap: 10px;
    }
    .manager-quick-actions button {
      min-height: 46px;
      padding: 0 17px;
      border-radius: 14px;
      font-size: 13px;
    }
    .manager-dashboard-top-grid {
      grid-template-columns: minmax(620px, 1.54fr) minmax(390px, .86fr);
      gap: 20px;
      margin-bottom: 20px;
    }
    .manager-alert-card {
      height: 176px;
      min-height: 176px;
      grid-template-columns: 92px minmax(0, 1fr) 138px;
      gap: 24px;
      padding: 26px 30px;
      border-radius: 24px;
    }
    .manager-alert-icon {
      width: 74px;
      height: 74px;
    }
    .manager-alert-icon svg {
      width: 30px;
      height: 30px;
    }
    .manager-alert-copy span,
    .manager-card-head span {
      font-size: 10.5px;
      letter-spacing: .14em;
      font-weight: 750;
      color: rgba(255,138,163,.86);
    }
    .manager-alert-copy h3 {
      margin: 9px 0 7px;
      font-size: clamp(21px, 1.55vw, 27px);
      font-weight: 800;
      line-height: 1.12;
    }
    .manager-alert-copy p {
      margin-bottom: 13px;
      font-size: 13px;
      line-height: 1.52;
      font-weight: 500;
      color: rgba(218,212,224,.74);
    }
    .manager-small-btn {
      min-height: 36px;
      padding: 0 16px;
      border-radius: 12px;
      font-size: 13px;
    }
    .manager-donut {
      width: 122px;
      height: 122px;
    }
    .manager-donut::before {
      inset: 13px;
    }
    .manager-donut b {
      font-size: 34px;
      font-weight: 800;
    }
    .manager-donut span {
      max-width: 78px;
      font-size: 9px;
      font-weight: 650;
      letter-spacing: .10em;
    }
    .manager-metrics-grid {
      gap: 12px;
    }
    .manager-metric {
      min-height: 124px;
      grid-template-columns: 50px minmax(0, 1fr);
      gap: 15px;
      padding: 20px;
      border-radius: 21px;
    }
    .manager-metric i,
    .manager-course-cover,
    .manager-signal-row i {
      width: 50px;
      height: 50px;
      border-radius: 16px;
    }
    .manager-metric i svg,
    .manager-course-cover svg,
    .manager-signal-row i svg {
      width: 20px;
      height: 20px;
    }
    .manager-metric b {
      font-size: 29px;
      font-weight: 800;
    }
    .manager-metric span {
      margin-top: 7px;
      font-size: 13px;
      font-weight: 600;
    }
    .manager-metric small {
      margin-top: 4px;
      font-size: 12px;
      font-weight: 500;
    }
    .manager-dashboard-grid {
      grid-template-columns: minmax(300px, .9fr) minmax(440px, 1.2fr) minmax(340px, .96fr);
      gap: 20px;
    }
    .manager-card {
      min-height: 318px;
      padding: 22px;
      border-radius: 23px;
    }
    .manager-activity-card,
    .manager-signals-card {
      min-height: 218px;
    }
    .manager-card-head {
      margin-bottom: 17px;
    }
    .manager-card-head b {
      margin-top: 5px;
      font-size: 14px;
      font-weight: 700;
    }
    .manager-card-head button {
      min-height: 32px;
      padding: 0 11px;
      font-size: 11.5px;
      font-weight: 600;
    }
    .manager-stack,
    .manager-course-list,
    .manager-rank-list,
    .manager-activity-list {
      gap: 9px;
    }
    .manager-person-row {
      min-height: 76px;
      grid-template-columns: 40px minmax(0, 1fr) auto;
      gap: 11px;
      padding: 12px;
      border-radius: 16px;
    }
    .manager-avatar {
      width: 38px;
      height: 38px;
      font-size: 11px;
      font-weight: 700;
    }
    .manager-person-main b,
    .manager-course-main b,
    .manager-rank-main b {
      font-size: 13.5px;
      font-weight: 700;
    }
    .manager-person-main small,
    .manager-course-main small {
      font-size: 11.5px;
      font-weight: 450;
    }
    .manager-status {
      min-height: 24px;
      padding: 0 9px;
      font-size: 10px;
      font-weight: 700;
    }
    .manager-card-link {
      min-height: 38px;
      margin-top: 12px;
      font-size: 12px;
      font-weight: 600;
    }
    .manager-course-row {
      min-height: 78px;
      grid-template-columns: 50px minmax(0, 1fr) auto auto;
      gap: 13px;
      padding: 13px;
      border-radius: 16px;
    }
    .manager-course-main em,
    .manager-rank-main em {
      height: 3px;
      margin-top: 8px;
    }
    .manager-course-progress {
      font-size: 12px;
      font-weight: 650;
    }
    .manager-rank-row {
      min-height: 54px;
      grid-template-columns: 28px 38px minmax(0, 1fr) auto;
      gap: 10px;
      padding: 8px 10px;
      border-radius: 15px;
    }
    .manager-rank-place {
      width: 26px;
      height: 26px;
      font-size: 11px;
      font-weight: 700;
    }
    .manager-rank-row strong {
      font-size: 13px;
      font-weight: 700;
    }
    .manager-activity-row {
      min-height: 50px;
      gap: 10px;
      padding: 8px 10px;
      border-radius: 15px;
    }
    .manager-activity-row .manager-avatar {
      width: 32px;
      height: 32px;
      font-size: 10px;
    }
    .manager-activity-row b,
    .manager-activity-row span {
      font-size: 12px;
      font-weight: 600;
    }
    .manager-activity-row small,
    .manager-activity-row em {
      font-size: 11px;
      font-weight: 450;
    }
    .manager-signal-row {
      min-height: 64px;
      grid-template-columns: 50px minmax(0, 1fr);
      gap: 12px;
      padding: 10px 12px;
      border-radius: 16px;
    }
    .manager-signal-row b {
      font-size: 13px;
      font-weight: 700;
    }
    .manager-signal-row small {
      font-size: 11.5px;
      font-weight: 450;
    }
    .manager-empty {
      min-height: 74px;
      padding: 13px;
      border-radius: 16px;
      font-size: 13px;
      font-weight: 450;
    }
    .support-fab {
      right: 24px;
      bottom: 18px;
      transform: scale(.94);
      transform-origin: right bottom;
    }
    .support-fab:hover {
      transform: translateY(-2px) scale(.94);
    }
    @media (min-width: 1600px) {
      .manager-dashboard-content {
        padding-left: 44px;
        padding-right: 44px;
      }
    }
    @media (max-width: 1180px) {
      .manager-dashboard-content {
        padding: 30px 22px 82px;
      }
      .manager-card {
        min-height: 0;
      }
    }
    @media (max-width: 880px) {
      .manager-hero-row h1 {
        font-size: 34px;
      }
      .manager-alert-card {
        height: auto;
        min-height: 0;
      }
    }

    /* ── Manager dashboard: truthful data cleanup ── */
    .manager-shell-topbar {
      grid-template-columns: minmax(280px, 520px) auto;
      justify-content: space-between;
    }
    .manager-shell-search {
      width: min(520px, 100%);
    }
    .manager-alert-card {
      height: 176px;
      min-height: 176px;
    }
    .manager-alert-copy p {
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
      line-height: 1.4;
      margin-bottom: 10px;
    }
    .manager-shell-sidebar {
      padding-bottom: 22px;
    }
    .manager-shell-nav {
      margin-bottom: 0;
    }
    @media (max-width: 880px) {
      .manager-shell-topbar {
        grid-template-columns: 1fr;
      }
      .manager-shell-search {
        width: 100%;
      }
    }

    /* ── Manager employees page ── */
    body.is-manager-session .support-fab {
      display: none;
    }
    .manager-employees-page {
      display: block;
    }
    .manager-employees-hero {
      margin-bottom: 20px;
    }
    .manager-employees-panel {
      display: grid;
      gap: 20px;
    }
    .manager-employees-summary {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
    }
    .manager-employees-list {
      min-width: 0;
      padding: 22px;
      border: 1px solid rgba(255,255,255,.105);
      border-radius: 24px;
      background:
        radial-gradient(circle at 12% 0%, rgba(255,51,100,.065), transparent 280px),
        linear-gradient(145deg, rgba(255,255,255,.052), rgba(255,255,255,.014)),
        rgba(10,9,15,.78);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 28px 70px rgba(0,0,0,.30);
    }
    .manager-employees-list-head,
    .manager-employee-row {
      display: grid;
      grid-template-columns: minmax(240px, 1.2fr) minmax(180px, .8fr) minmax(100px, .48fr) minmax(120px, .52fr) minmax(250px, .9fr);
      gap: 16px;
      align-items: center;
    }
    .manager-employees-list-head {
      padding: 0 12px 12px;
      color: rgba(206,199,214,.60);
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
    }
    .manager-employee-row {
      min-height: 76px;
      padding: 12px;
      border: 1px solid rgba(255,255,255,.075);
      border-radius: 18px;
      background:
        linear-gradient(145deg, rgba(255,255,255,.040), rgba(255,255,255,.012)),
        rgba(255,255,255,.020);
    }
    .manager-employee-row + .manager-employee-row {
      margin-top: 10px;
    }
    .manager-employee-person {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .manager-employee-person span:last-child,
    .manager-employee-progress,
    .manager-employee-tests {
      min-width: 0;
    }
    .manager-employee-person b,
    .manager-employee-person small,
    .manager-employee-progress b,
    .manager-employee-progress small,
    .manager-employee-tests b,
    .manager-employee-tests small {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .manager-employee-person b,
    .manager-employee-progress b,
    .manager-employee-tests b {
      color: rgba(255,248,252,.96);
      font-size: 14px;
      font-weight: 700;
    }
    .manager-employee-person small,
    .manager-employee-progress small,
    .manager-employee-tests small {
      margin-top: 4px;
      color: rgba(206,199,214,.70);
      font-size: 11.5px;
      font-weight: 450;
    }
    .manager-employee-progress em {
      display: block;
      overflow: hidden;
      height: 3px;
      margin: 8px 0 0;
      border-radius: 999px;
      background: rgba(255,255,255,.085);
    }
    .manager-employee-progress em i {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, rgba(255,51,100,.78), rgba(255,138,163,.92));
    }
    .manager-employee-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      flex-wrap: wrap;
    }
    .manager-employee-actions button {
      min-height: 34px;
      padding: 0 11px;
      border: 1px solid rgba(255,255,255,.09);
      border-radius: 12px;
      background: rgba(255,255,255,.035);
      color: rgba(255,248,252,.86);
      font-size: 12px;
      font-weight: 650;
    }
    .manager-employee-actions button:hover {
      border-color: rgba(255,138,163,.20);
      background: rgba(255,51,100,.08);
    }
    .manager-employee-actions button.danger {
      border-color: rgba(255,95,135,.20);
      background: rgba(255,51,100,.075);
      color: rgba(255,190,205,.92);
    }
    @media (max-width: 1180px) {
      .manager-employees-summary {
        grid-template-columns: 1fr;
      }
      .manager-employees-list {
        overflow-x: auto;
      }
      .manager-employees-list-head,
      .manager-employee-row {
        min-width: 980px;
      }
    }
    @media (max-width: 880px) {
      .manager-employees-list-head {
        display: none;
      }
      .manager-employee-row {
        min-width: 0;
        grid-template-columns: 1fr;
        align-items: start;
      }
      .manager-employee-actions {
        justify-content: flex-start;
      }
    }

    /* ── Support tickets ── */
    .support-fab {
      position: fixed;
      right: 22px;
      bottom: 22px;
      z-index: 120;
      min-width: 204px;
      height: 48px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      border: 1px solid rgba(70,150,255,.28);
      border-radius: 13px;
      background:
        linear-gradient(135deg, rgba(41,128,255,.22), rgba(20,85,170,.18)),
        rgba(13,25,42,.88);
      color: #56a8ff;
      box-shadow: 0 18px 42px rgba(0,0,0,.34), 0 0 28px rgba(41,128,255,.11);
      font-weight: 900;
      cursor: pointer;
      transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
    }
    .support-fab:hover {
      transform: translateY(-2px);
      border-color: rgba(88,169,255,.48);
      box-shadow: 0 24px 52px rgba(0,0,0,.42), 0 0 36px rgba(41,128,255,.18);
    }
    .support-fab span {
      font-size: 15px;
      color: #80bdff;
    }
    .support-modal-box {
      width: min(620px, calc(100vw - 34px));
      border-color: rgba(88,169,255,.16);
      background:
        radial-gradient(circle at 12% 0%, rgba(41,128,255,.13), transparent 260px),
        linear-gradient(145deg, rgba(18,16,24,.94), rgba(7,6,10,.96));
    }
    .support-modal-head,
    .support-detail-head,
    .support-sidebar-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 16px;
    }
    .support-create-box {
      display: grid;
      gap: 10px;
      padding: 16px;
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 20px;
      background: rgba(255,255,255,.028);
      margin-bottom: 18px;
    }
    .support-create-box label {
      color: rgba(255,249,252,.92);
      font-size: 13px;
      font-weight: 900;
    }
    .support-create-box input,
    .support-create-box textarea,
    .support-reply textarea {
      width: 100%;
      border: 1px solid rgba(255,255,255,.11);
      border-radius: 16px;
      background: rgba(4,4,8,.58);
      color: white;
      padding: 13px 15px;
      font: inherit;
      outline: none;
      resize: vertical;
    }
    .support-create-box input:focus,
    .support-create-box textarea:focus,
    .support-reply textarea:focus {
      border-color: rgba(88,169,255,.42);
      box-shadow: 0 0 0 3px rgba(41,128,255,.10);
    }
    .support-modal-list,
    .support-ticket-list,
    .support-focus-list {
      display: grid;
      gap: 8px;
    }
    .support-load-more,
    .support-history-loader {
      display: flex;
      justify-content: center;
      padding: 8px 0;
    }
    .support-history-loader {
      margin-bottom: 4px;
    }
    .support-load-more .btn,
    .support-history-loader .btn {
      width: 100%;
      justify-content: center;
    }
    .support-ticket-row {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px;
      border: 1px solid rgba(255,255,255,.075);
      border-radius: 16px;
      background: rgba(255,255,255,.026);
      color: white;
      text-align: left;
      cursor: pointer;
    }
    .support-ticket-row:hover,
    .support-ticket-row.active {
      border-color: rgba(88,169,255,.28);
      background: rgba(41,128,255,.08);
    }
    .support-ticket-row span {
      display: block;
      color: rgba(255,249,252,.94);
      font-weight: 900;
      line-height: 1.25;
    }
    .support-ticket-row small {
      display: block;
      margin-top: 4px;
      color: rgba(170,166,176,.72);
      font-size: 12px;
      line-height: 1.3;
    }
    .support-ticket-row b {
      flex: 0 0 auto;
      padding: 6px 9px;
      border-radius: 999px;
      background: rgba(52,211,153,.12);
      color: #a7f3d0;
      font-size: 12px;
      font-weight: 900;
    }
    .support-ticket-row b.closed {
      background: rgba(255,255,255,.055);
      color: rgba(180,176,186,.76);
    }
    .support-chat {
      display: grid;
      gap: 10px;
      max-height: 420px;
      overflow: auto;
      padding: 12px;
      border: 1px solid rgba(255,255,255,.075);
      border-radius: 20px;
      background: rgba(0,0,0,.18);
      margin-bottom: 14px;
    }
    .support-message {
      max-width: 86%;
      justify-self: start;
      padding: 11px 13px;
      border-radius: 16px;
      background: rgba(255,255,255,.055);
      color: rgba(255,249,252,.90);
      line-height: 1.45;
      font-weight: 650;
    }
    .support-message.own {
      justify-self: end;
      background: rgba(41,128,255,.15);
      border: 1px solid rgba(88,169,255,.22);
    }
    .support-message.hr {
      border: 1px solid rgba(255,95,135,.18);
    }
    .support-message-meta {
      margin-bottom: 5px;
      color: rgba(170,166,176,.76);
      font-size: 11px;
      font-weight: 900;
    }
    .support-reply {
      display: grid;
      gap: 10px;
    }
    .support-empty {
      padding: 16px;
      border: 1px solid rgba(255,255,255,.07);
      border-radius: 16px;
      background: rgba(255,255,255,.022);
      color: rgba(170,166,176,.76);
      line-height: 1.45;
      font-weight: 700;
    }
    .support-workspace {
      display: grid;
      grid-template-columns: minmax(290px, 360px) minmax(0, 1fr);
      gap: 18px;
      align-items: start;
    }
    .support-sidebar {
      position: sticky;
      top: 112px;
      min-width: 0;
    }
    .support-count {
      margin-top: 5px;
      color: rgba(255,249,252,.98);
      font-size: 30px;
      font-weight: 900;
      line-height: 1;
    }
    .support-detail {
      min-width: 0;
    }
    .support-detail-title {
      color: rgba(255,249,252,.98);
      font-size: 24px;
      line-height: 1.15;
      font-weight: 900;
    }
    .support-detail-meta {
      margin-top: 6px;
      color: rgba(170,166,176,.76);
      font-size: 13px;
      font-weight: 750;
    }

    /* ── Support messenger premium override ── */
    .modal-overlay.support-overlay {
      align-items: flex-end;
      justify-content: flex-end;
      padding: 0 22px 82px 0;
      overflow: visible;
      background: transparent;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      pointer-events: none;
    }
    .modal-overlay.support-overlay .modal-box {
      pointer-events: auto;
      animation: support-window-in .2s ease both;
    }
    @keyframes support-window-in {
      from { opacity: 0; transform: translate3d(0, 12px, 0) scale(.985); }
      to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
    }
    .support-modal-box {
      width: min(370px, calc(100vw - 26px));
      max-width: min(370px, calc(100vw - 26px));
      height: min(620px, calc(100vh - 110px));
      padding: 0;
      overflow: hidden;
      border-radius: 10px;
      border-color: rgba(255,255,255,.16);
      background: #f4f6f8;
      box-shadow: 0 28px 80px rgba(0,0,0,.56);
    }
    .support-modal-box.support-new-ticket-box {
      height: auto;
      max-height: min(620px, calc(100vh - 110px));
    }
    .support-new-ticket-box .support-chat-shell {
      height: auto;
      max-height: min(620px, calc(100vh - 110px));
    }
    .support-chat-shell {
      height: 100%;
      display: flex;
      flex-direction: column;
      min-height: 0;
      color: #1d2025;
    }
    .support-chat-head {
      min-height: 64px;
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr) auto;
      gap: 11px;
      align-items: center;
      padding: 10px 14px;
      background: linear-gradient(135deg, #444448, #303033);
      color: white;
      box-shadow: 0 1px 0 rgba(255,255,255,.08);
    }
    .support-avatar {
      width: 36px;
      height: 36px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: linear-gradient(135deg, #7a5cff, #5e48d8);
      color: white;
      font-size: 20px;
      font-weight: 900;
      box-shadow: 0 8px 22px rgba(94,72,216,.30);
    }
    .support-chat-title {
      color: white;
      font-size: 14px;
      line-height: 1.2;
      font-weight: 900;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .support-chat-sub {
      margin-top: 3px;
      color: rgba(255,255,255,.70);
      font-size: 12px;
      line-height: 1.25;
      font-weight: 650;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .support-close {
      width: 34px;
      height: 34px;
      border: 0;
      border-radius: 9px;
      background: transparent;
      color: white;
      font-size: 30px;
      line-height: 1;
      cursor: pointer;
      opacity: .88;
    }
    .support-close:hover {
      background: rgba(255,255,255,.10);
      opacity: 1;
    }
    .support-head-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 4px;
    }
    .support-mini-action {
      width: 34px;
      height: 34px;
      border: 0;
      border-radius: 9px;
      background: rgba(255,255,255,.08);
      color: white;
      font-size: 22px;
      line-height: 1;
      font-weight: 800;
      cursor: pointer;
    }
    .support-mini-action:hover {
      background: rgba(255,255,255,.15);
    }
    .support-modal-box .support-chat {
      flex: 1;
      max-height: none;
      margin: 0;
      padding: 14px 12px;
      border: 0;
      border-radius: 0;
      background:
        radial-gradient(circle at 18px 18px, rgba(0,0,0,.025) 0 2px, transparent 2px 16px),
        radial-gradient(circle at 44px 42px, rgba(0,0,0,.020) 0 2px, transparent 2px 18px),
        #f5f7f8;
      overflow-y: auto;
      scrollbar-width: thin;
      scrollbar-color: rgba(90,90,95,.45) transparent;
      align-content: start;
    }
    .support-message {
      width: fit-content;
      max-width: min(268px, 78%);
      min-height: 0;
      padding: 9px 12px;
      border-radius: 8px;
      background: #e8edf2;
      color: #25282d;
      box-shadow: 0 1px 1px rgba(0,0,0,.04);
      font-size: 13px;
      font-weight: 750;
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    .support-message.own {
      background: #3d3d3f;
      border: 0;
      color: white;
    }
    .support-message.hr {
      border: 0;
      background: #e8edf2;
      color: #25282d;
    }
    .support-message.own.hr {
      background: #3d3d3f;
      color: white;
    }
    .support-message-meta {
      color: rgba(120,126,136,.68);
      font-size: 10px;
    }
    .support-message.own .support-message-meta {
      color: rgba(255,255,255,.50);
    }
    .support-attachment {
      display: flex;
      align-items: center;
      gap: 9px;
      margin-top: 8px;
      padding: 9px;
      border-radius: 8px;
      background: rgba(255,255,255,.55);
      color: inherit;
      text-decoration: none;
    }
    .support-message.own .support-attachment {
      background: rgba(255,255,255,.12);
    }
    .support-attachment > span {
      width: 28px;
      height: 28px;
      display: grid;
      place-items: center;
      border-radius: 8px;
      background: rgba(87,116,255,.14);
      color: #4e6dff;
      flex: 0 0 auto;
    }
    .support-attachment b {
      display: block;
      max-width: 160px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 12px;
      font-weight: 900;
    }
    .support-attachment small {
      display: block;
      margin-top: 2px;
      color: rgba(120,126,136,.78);
      font-size: 11px;
    }
    .support-reply {
      padding: 10px 12px 9px;
      background: white;
      border-top: 1px solid rgba(20,24,30,.08);
    }
    .support-composer {
      position: relative;
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr) minmax(38px, max-content);
      align-items: end;
      gap: 6px;
    }
    .support-composer textarea {
      min-height: 38px;
      max-height: 98px;
      padding: 10px 6px;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: #3a3d42;
      resize: none;
      box-shadow: none;
    }
    .support-composer textarea:focus {
      border: 0;
      box-shadow: none;
    }
    .support-icon-btn,
    .support-send-btn {
      height: 38px;
      border: 0;
      border-radius: 10px;
      background: transparent;
      color: #a5adb7;
      cursor: pointer;
      font-size: 20px;
      font-weight: 900;
    }
    .support-send-btn {
      color: #4f8cff;
      font-size: 16px;
      min-width: 38px;
      padding: 0 10px;
      white-space: nowrap;
    }
    .support-icon-btn:hover,
    .support-send-btn:hover {
      background: rgba(79,140,255,.08);
      color: #367cff;
    }
    .support-file-input {
      display: none;
    }
    .support-file-label {
      grid-column: 1 / -1;
      padding: 6px 9px;
      border-radius: 8px;
      background: rgba(79,140,255,.08);
      color: #367cff;
      font-size: 11px;
      font-weight: 850;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .support-chat-foot {
      padding: 0 12px 8px;
      background: white;
      color: rgba(120,126,136,.45);
      text-align: right;
      font-size: 10px;
      font-weight: 700;
    }
    .support-create-box {
      flex: 0 0 auto;
      margin: 0;
      border: 0;
      border-radius: 0;
      padding: 14px;
      background: #f5f7f8;
    }
    .support-create-box label {
      color: #9aa1ad;
    }
    .support-create-box input {
      background: white;
      border-color: rgba(20,24,30,.10);
      color: #25282d;
    }
    .support-modal-list {
      min-height: 0;
      overflow: auto;
      padding: 0 14px 14px;
      background: #f5f7f8;
      max-height: 230px;
    }
    .support-modal-list .small-title {
      color: rgba(90,96,108,.72);
    }
    .support-modal-box .support-ticket-row {
      border-color: rgba(80,120,170,.18);
      background: rgba(255,255,255,.72);
      color: #25282d;
    }
    .support-modal-box .support-ticket-row:hover,
    .support-modal-box .support-ticket-row.active {
      border-color: rgba(88,169,255,.34);
      background: #e8f2ff;
    }
    .support-modal-box .support-ticket-row span {
      color: #2c3138;
    }
    .support-modal-box .support-ticket-row small {
      color: #8a93a1;
    }
    .support-modal-box .support-ticket-row b {
      background: rgba(79,140,255,.10);
      color: #4f8cff;
    }
    .support-modal-box .support-ticket-row b.closed {
      background: rgba(80,86,96,.08);
      color: #9aa1ad;
    }
    .support-premium-workspace {
      min-height: 680px;
      gap: 0;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 28px;
      background: rgba(9,8,13,.72);
      box-shadow: 0 30px 80px rgba(0,0,0,.34);
    }
    .support-premium-workspace .support-sidebar,
    .support-premium-workspace .support-detail {
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }
    .support-premium-workspace .support-sidebar {
      position: relative;
      top: auto;
      border-right: 1px solid rgba(255,255,255,.075);
      background:
        radial-gradient(circle at 10% 0%, rgba(88,169,255,.10), transparent 260px),
        rgba(12,11,17,.86);
    }
    .support-premium-workspace .support-sidebar-head {
      margin: 0;
      padding: 20px;
      border-bottom: 1px solid rgba(255,255,255,.075);
    }
    .support-premium-workspace .support-ticket-list {
      padding: 12px;
      gap: 6px;
    }
    .support-premium-workspace .support-ticket-row {
      border-radius: 16px;
      border-color: transparent;
      background: transparent;
    }
    .support-premium-workspace .support-ticket-row:hover,
    .support-premium-workspace .support-ticket-row.active {
      background: rgba(88,169,255,.11);
      border-color: rgba(88,169,255,.18);
    }
    .support-premium-workspace .support-detail {
      display: flex;
      flex-direction: column;
      min-height: 680px;
    }
    .support-premium-workspace .support-detail-head {
      margin: 0;
      padding: 18px 22px;
      border-bottom: 1px solid rgba(255,255,255,.075);
      background: rgba(12,11,17,.76);
    }
    .support-premium-workspace .support-chat.hr-view {
      flex: 1;
      max-height: none;
      margin: 0;
      border: 0;
      border-radius: 0;
      background:
        radial-gradient(circle at 16px 16px, rgba(255,255,255,.025) 0 2px, transparent 2px 18px),
        linear-gradient(145deg, rgba(10,9,14,.94), rgba(6,5,9,.96));
      align-content: start;
    }
    .support-premium-workspace .support-message {
      max-width: min(440px, 72%);
      width: fit-content;
      min-height: 0;
    }
    .support-premium-workspace .support-reply {
      background: rgba(12,11,17,.92);
      border-top-color: rgba(255,255,255,.075);
    }
    .support-premium-workspace .support-composer textarea {
      color: white;
    }

    /* ── Unicorn support skin ── */
    .support-fab {
      border-color: rgba(255,91,136,.34);
      background:
        linear-gradient(135deg, rgba(255,47,104,.22), rgba(255,143,172,.10)),
        rgba(18,12,22,.92);
      color: #ffc4dc;
      box-shadow: 0 18px 42px rgba(0,0,0,.38), 0 0 30px rgba(255,47,104,.14);
    }
    .support-fab:hover {
      border-color: rgba(255,143,172,.56);
      box-shadow: 0 24px 52px rgba(0,0,0,.44), 0 0 38px rgba(255,47,104,.22);
    }
    .support-fab span {
      color: #ff8fac;
    }
    .support-fab-badge {
      position: absolute;
      right: -7px;
      top: -7px;
      min-width: 22px;
      height: 22px;
      padding: 0 7px;
      display: inline-grid;
      place-items: center;
      border-radius: 999px;
      color: #fff;
      background: linear-gradient(135deg, #ff2f68, #ff8fac);
      border: 2px solid rgba(9,7,12,.96);
      box-shadow: 0 8px 20px rgba(255,47,104,.34);
      font-size: 11px;
      font-style: normal;
      font-weight: 900;
      line-height: 1;
    }
    .support-modal-box,
    .support-modal-box.support-new-ticket-box {
      border: 1px solid rgba(255,143,172,.24);
      background:
        radial-gradient(circle at 18% 0%, rgba(255,47,104,.18), transparent 260px),
        linear-gradient(145deg, rgba(20,14,24,.96), rgba(7,6,10,.98));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 28px 80px rgba(0,0,0,.60),
        0 0 42px rgba(255,47,104,.12);
    }
    .support-chat-shell {
      color: rgba(255,249,252,.94);
    }
    .support-chat-head {
      background:
        linear-gradient(135deg, rgba(61,36,50,.96), rgba(24,17,27,.98)),
        #171119;
      border-bottom: 1px solid rgba(255,143,172,.18);
    }
    .support-avatar {
      background: rgba(255,47,104,.10);
      border: 1px solid rgba(255,143,172,.25);
      box-shadow: 0 0 22px rgba(255,47,104,.18);
      overflow: hidden;
    }
    .support-avatar img {
      width: 30px;
      height: 30px;
      object-fit: contain;
      filter: drop-shadow(0 0 10px rgba(255,91,136,.34));
    }
    .support-mini-action {
      background: rgba(255,91,136,.10);
      color: #ffd1df;
    }
    .support-mini-action:hover,
    .support-close:hover {
      background: rgba(255,91,136,.16);
    }
    .support-modal-box .support-chat {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 12px;
      background:
        radial-gradient(circle at 18px 18px, rgba(255,255,255,.020) 0 2px, transparent 2px 18px),
        linear-gradient(145deg, rgba(10,8,13,.96), rgba(5,5,9,.98));
      overflow-anchor: none;
      scroll-behavior: smooth;
    }
    .support-message {
      box-sizing: border-box;
      align-self: flex-start;
      display: block;
      width: fit-content;
      height: auto;
      min-height: unset;
      max-width: min(292px, 82%);
      padding: 11px 13px 12px;
      background: rgba(255,255,255,.075);
      color: rgba(255,249,252,.92);
      border: 1px solid rgba(255,255,255,.075);
      box-shadow: 0 10px 24px rgba(0,0,0,.18);
      line-height: 1.45;
      white-space: normal;
      overflow: visible;
      overflow-wrap: anywhere;
      word-break: normal;
      will-change: transform, opacity;
    }
    .support-message-text {
      display: block;
      line-height: 1.45;
      white-space: pre-wrap;
    }
    .support-message.is-live-new {
      animation: supportMessageIn .24s cubic-bezier(.2,.8,.2,1) both;
    }
    @keyframes supportMessageIn {
      from {
        opacity: 0;
        transform: translateY(8px) scale(.985);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }
    .support-message.own {
      align-self: flex-end;
      background: linear-gradient(135deg, rgba(255,47,104,.30), rgba(255,143,172,.16));
      border: 1px solid rgba(255,143,172,.32);
      color: white;
    }
    .support-message.hr {
      background: rgba(255,255,255,.075);
      color: rgba(255,249,252,.92);
    }
    .support-message.own.hr {
      background: linear-gradient(135deg, rgba(255,47,104,.30), rgba(255,143,172,.16));
    }
    .support-message.system {
      max-width: min(318px, 92%);
      background:
        linear-gradient(135deg, rgba(255,143,172,.11), rgba(255,255,255,.055));
      border-color: rgba(255,143,172,.20);
      color: rgba(255,249,252,.90);
    }
    .support-message-meta,
    .support-message.own .support-message-meta {
      display: block;
      margin-bottom: 6px;
      line-height: 1.25;
      color: rgba(255,214,226,.58);
      overflow-wrap: anywhere;
    }
    .support-attachment {
      background: rgba(255,255,255,.08);
      border: 0;
      cursor: pointer;
      font-family: inherit;
      text-align: left;
      width: min(100%, 260px);
    }
    .support-attachment > span {
      background: rgba(255,91,136,.14);
      color: #ff9fba;
    }
    .support-attachment small {
      color: rgba(255,214,226,.58);
    }
    .support-reply,
    .support-chat-foot {
      background: rgba(9,7,12,.98);
      border-top-color: rgba(255,143,172,.14);
    }
    .support-composer textarea,
    .support-create-box input {
      color: rgba(255,249,252,.94);
    }
    .support-composer textarea::placeholder,
    .support-create-box input::placeholder {
      color: rgba(190,186,197,.64);
    }
    .support-icon-btn,
    .support-send-btn {
      color: rgba(255,196,220,.70);
    }
    .support-send-btn {
      color: #ff78a1;
    }
    .support-icon-btn:hover,
    .support-send-btn:hover {
      background: rgba(255,91,136,.10);
      color: #ffc4dc;
    }
    .support-file-label {
      background: rgba(255,91,136,.10);
      color: #ffc4dc;
    }
    .support-create-box,
    .support-modal-list {
      background: rgba(8,7,11,.96);
    }
    .support-create-box label,
    .support-modal-list .small-title {
      color: rgba(255,196,220,.72);
    }
    .support-create-box input {
      background: rgba(255,255,255,.045);
      border-color: rgba(255,255,255,.11);
    }
    .support-category-select {
      width: 100%;
      min-height: 48px;
      margin-bottom: 10px;
      padding: 0 14px;
      border-radius: 14px;
      color: rgba(255,249,252,.94);
      background: rgba(255,255,255,.045);
      border: 1px solid rgba(255,255,255,.11);
      outline: none;
      font: inherit;
      font-weight: 850;
    }
    .support-category-select:focus {
      border-color: rgba(255,143,172,.38);
      box-shadow: 0 0 0 4px rgba(255,91,136,.08);
    }
    .support-modal-box .support-ticket-row {
      border-color: rgba(255,143,172,.16);
      background: rgba(255,255,255,.045);
      color: rgba(255,249,252,.94);
      transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
    }
    .support-modal-box .support-ticket-row:hover,
    .support-modal-box .support-ticket-row.active {
      border-color: rgba(255,143,172,.36);
      background: rgba(255,47,104,.12);
    }
    .support-modal-box .support-ticket-row span {
      color: rgba(255,249,252,.96);
    }
    .support-modal-box .support-ticket-row small {
      color: rgba(190,186,197,.68);
    }
    .support-modal-box .support-ticket-row b {
      background: rgba(52,211,153,.12);
      color: #a7f3d0;
    }
    .support-modal-box .support-ticket-row b.closed {
      background: rgba(255,255,255,.07);
      color: rgba(190,186,197,.72);
    }
    .support-ticket-row-side {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      flex: 0 0 auto;
    }
    .support-ticket-row > div:first-child {
      min-width: 0;
    }
    .support-ticket-row span,
    .support-ticket-row small {
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .support-ticket-row-side i {
      min-width: 22px;
      height: 22px;
      display: inline-grid;
      place-items: center;
      padding: 0 7px;
      border-radius: 999px;
      color: #fff;
      background: linear-gradient(135deg, #ff2f68, #ff8fac);
      box-shadow: 0 8px 18px rgba(255,47,104,.24);
      font-size: 11px;
      font-style: normal;
      font-weight: 900;
    }
    .support-modal-box .support-ticket-row b.new {
      background: rgba(255,91,136,.13);
      color: #ffc4dc;
    }
    .support-modal-box .support-ticket-row b.in_progress {
      background: rgba(96,165,250,.12);
      color: #bfdbfe;
    }
    .support-modal-box .support-ticket-row b.waiting {
      background: rgba(251,191,36,.11);
      color: #fde68a;
    }
    .support-ticket-row.has-unread {
      box-shadow: inset 3px 0 0 rgba(255,91,136,.78);
    }
    .support-status-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex-wrap: wrap;
      gap: 8px;
    }
    .support-status-chip {
      min-height: 36px;
      padding: 0 12px;
      border: 1px solid rgba(255,143,172,.16);
      border-radius: 999px;
      color: rgba(255,214,226,.76);
      background: rgba(255,255,255,.045);
      cursor: pointer;
      font: inherit;
      font-size: 12px;
      font-weight: 900;
      transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
    }
    .support-status-chip:hover {
      transform: translateY(-1px);
      color: #fff;
      border-color: rgba(255,143,172,.32);
      background: rgba(255,91,136,.12);
    }
    .support-status-chip.active {
      color: #fff;
      border-color: rgba(255,143,172,.38);
      background: linear-gradient(135deg, rgba(255,47,104,.72), rgba(255,143,172,.34));
      box-shadow: 0 12px 28px rgba(255,47,104,.16);
    }
    .support-status-chip.danger {
      border-color: rgba(255,91,136,.28);
      color: #ffc4dc;
    }
    .support-premium-workspace {
      border-color: rgba(255,143,172,.16);
      background:
        radial-gradient(circle at 12% 0%, rgba(255,47,104,.12), transparent 320px),
        rgba(9,8,13,.84);
    }
    .support-premium-workspace .support-sidebar {
      background:
        radial-gradient(circle at 10% 0%, rgba(255,47,104,.12), transparent 260px),
        rgba(12,10,16,.90);
    }
    .support-premium-workspace .support-ticket-row:hover,
    .support-premium-workspace .support-ticket-row.active {
      background: rgba(255,47,104,.12);
      border-color: rgba(255,143,172,.24);
    }
    .support-premium-workspace .support-chat.hr-view {
      background:
        radial-gradient(circle at 16px 16px, rgba(255,255,255,.022) 0 2px, transparent 2px 18px),
        linear-gradient(145deg, rgba(10,8,13,.96), rgba(5,5,9,.98));
    }
    .support-image-attachment {
      display: block;
      width: min(100%, 260px);
      margin-top: 9px;
      padding: 0;
      overflow: hidden;
      cursor: zoom-in;
      text-align: left;
      color: rgba(255,249,252,.94);
      font-family: inherit;
      border: 1px solid rgba(255,143,172,.18);
      border-radius: 16px;
      background: rgba(255,255,255,.055);
      box-shadow: 0 14px 30px rgba(0,0,0,.18);
    }
    .support-message.own .support-image-attachment {
      border-color: rgba(255,196,220,.28);
      background: rgba(255,255,255,.08);
    }
    .support-image-preview {
      position: relative;
      display: grid;
      place-items: center;
      width: 100%;
      aspect-ratio: 16 / 10;
      min-height: 120px;
      background:
        radial-gradient(circle at 50% 35%, rgba(255,91,136,.18), transparent 56%),
        rgba(7,6,10,.92);
      color: rgba(255,214,226,.66);
      font-size: 12px;
      font-weight: 900;
    }
    .support-image-preview img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .support-image-preview.is-error {
      color: rgba(255,167,167,.84);
    }
    .support-image-caption {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 12px;
      background: rgba(8,7,11,.72);
    }
    .support-image-caption b {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 12px;
      font-weight: 900;
    }
    .support-image-caption small {
      flex: 0 0 auto;
      color: rgba(255,214,226,.58);
      font-size: 11px;
      font-weight: 850;
    }
    .support-image-viewer-box {
      max-width: min(920px, calc(100vw - 34px));
      padding: 0;
      overflow: hidden;
      border-radius: 24px;
      border-color: rgba(255,143,172,.24);
      background:
        radial-gradient(circle at 18% 0%, rgba(255,47,104,.16), transparent 300px),
        rgba(8,7,11,.96);
      box-shadow: 0 34px 90px rgba(0,0,0,.58), 0 0 46px rgba(255,47,104,.12);
    }
    .support-image-viewer-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 16px 18px;
      border-bottom: 1px solid rgba(255,143,172,.14);
    }
    .support-image-full {
      display: block;
      max-width: 100%;
      max-height: calc(100vh - 150px);
      margin: 0 auto;
      object-fit: contain;
      background: rgba(0,0,0,.35);
    }
    .support-rating {
      margin: 0 12px 10px;
      padding: 14px;
      border: 1px solid rgba(255,143,172,.18);
      border-radius: 18px;
      background:
        radial-gradient(circle at 18% 0%, rgba(255,47,104,.14), transparent 220px),
        rgba(255,255,255,.045);
    }
    .support-rating b {
      display: block;
      color: rgba(255,249,252,.96);
      font-size: 14px;
      font-weight: 900;
    }
    .support-rating small,
    .support-rating span {
      display: block;
      margin-top: 4px;
      color: rgba(255,214,226,.62);
      font-size: 12px;
      font-weight: 800;
    }
    .support-stars {
      display: flex;
      gap: 6px;
      margin-top: 12px;
    }
    .support-stars button {
      width: 38px;
      height: 36px;
      border: 1px solid rgba(255,143,172,.22);
      border-radius: 12px;
      cursor: pointer;
      color: rgba(255,196,220,.78);
      background: rgba(255,255,255,.055);
      font-size: 18px;
      line-height: 1;
      transition: transform .18s ease, color .18s ease, background .18s ease, box-shadow .18s ease;
    }
    .support-stars button:hover {
      transform: translateY(-1px);
      color: #fff;
      background: linear-gradient(135deg, rgba(255,47,104,.72), rgba(255,143,172,.58));
      box-shadow: 0 10px 24px rgba(255,47,104,.20);
    }
    .support-rating.is-rated {
      border-color: rgba(52,211,153,.20);
      background: rgba(52,211,153,.08);
    }
    .support-rating-badge {
      display: inline-flex;
      align-items: center;
      margin-left: 8px;
      padding: 4px 8px;
      border-radius: 999px;
      color: #ffd1df;
      background: rgba(255,91,136,.11);
      border: 1px solid rgba(255,143,172,.18);
      white-space: nowrap;
    }
    .modal-box.staff-detail-box {
      max-width: min(920px, calc(100vw - 36px));
      padding: 0;
      overflow: hidden;
      border-color: rgba(255,154,179,.18);
      background:
        radial-gradient(circle at 12% 0%, rgba(255,59,111,.13), transparent 34%),
        linear-gradient(145deg, rgba(18,14,22,.88), rgba(6,5,9,.92));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 34px 90px rgba(0,0,0,.52);
    }
    .staff-detail {
      max-height: calc(100vh - 44px);
      overflow: auto;
      padding: 34px;
      scrollbar-width: thin;
      scrollbar-color: rgba(255,91,136,.55) transparent;
    }
    .staff-detail::-webkit-scrollbar { width: 8px; }
    .staff-detail::-webkit-scrollbar-track { background: transparent; }
    .staff-detail::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, rgba(255,91,136,.72), rgba(255,154,179,.34));
      border-radius: 999px;
      border: 2px solid rgba(8,7,11,.86);
    }
    .staff-detail-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 18px;
      margin-bottom: 22px;
    }
    .staff-detail .modal-title {
      margin: 0 0 8px;
      font-size: 30px;
      line-height: 1.05;
      letter-spacing: 0;
    }
    .staff-detail .modal-sub {
      margin: 0;
      color: rgba(190,186,197,.78);
      font-weight: 700;
    }
    .staff-detail-status {
      flex: 0 0 auto;
      padding: 10px 13px;
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 999px;
      background: rgba(255,255,255,.045);
      color: rgba(255,249,251,.92);
      font-size: 12px;
      font-weight: 900;
      white-space: nowrap;
    }
    .staff-detail-status.good {
      border-color: rgba(55,224,162,.30);
      background: rgba(55,224,162,.10);
      color: #bdf7df;
    }
    .staff-detail-status.warn {
      border-color: rgba(255,192,106,.30);
      background: rgba(255,192,106,.10);
      color: #ffe0ac;
    }
    .staff-detail-status.risk {
      border-color: rgba(255,91,136,.34);
      background: rgba(255,91,136,.12);
      color: #ffd8e2;
    }
    .staff-detail-summary {
      display: grid;
      grid-template-columns: minmax(280px, 1fr) minmax(320px, .95fr);
      gap: 14px;
      margin-bottom: 18px;
    }
    .staff-detail-progress-card,
    .staff-detail-kpi,
    .staff-detail-section {
      border: 1px solid rgba(255,255,255,.09);
      background:
        linear-gradient(150deg, rgba(255,255,255,.046), rgba(255,255,255,.014)),
        rgba(7,6,10,.58);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    }
    .staff-detail-progress-card {
      padding: 20px;
      border-radius: 22px;
    }
    .staff-detail-progress-line {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 14px;
      align-items: center;
      margin-top: 16px;
    }
    .staff-detail-progress-line .prog-bar {
      height: 15px;
      border-radius: 999px;
    }
    .staff-detail-progress-line b {
      color: rgba(255,249,251,.96);
      font-size: 22px;
      font-weight: 900;
    }
    .staff-detail-muted {
      margin-top: 10px;
      color: rgba(170,166,176,.76);
      font-size: 14px;
      font-weight: 700;
    }
    .staff-detail-kpis {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }
    .staff-detail-kpi {
      min-height: 116px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 16px;
      border-radius: 20px;
    }
    .staff-detail-kpi b {
      color: rgba(255,249,251,.98);
      font-size: 24px;
      line-height: 1.05;
      font-weight: 900;
      overflow-wrap: anywhere;
    }
    .staff-detail-kpi span {
      margin-top: 9px;
      color: rgba(170,166,176,.72);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .10em;
      text-transform: uppercase;
    }
    .staff-detail-sections {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 14px;
    }
    .staff-detail-section {
      min-height: 260px;
      padding: 18px;
      border-radius: 24px;
    }
    .staff-detail-section-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 14px;
    }
    .staff-detail-section-head h3 {
      margin: 5px 0 0;
      color: rgba(255,249,251,.96);
      font-size: 18px;
      line-height: 1.15;
      font-weight: 900;
    }
    .staff-detail-section-head > span {
      max-width: 45%;
      padding: 8px 10px;
      border-radius: 999px;
      background: rgba(255,59,111,.10);
      color: var(--pink2);
      font-size: 12px;
      font-weight: 900;
      overflow-wrap: anywhere;
      text-align: right;
    }
    .staff-detail-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      min-height: 58px;
      padding: 11px 0;
      border-top: 1px solid rgba(255,255,255,.055);
    }
    .staff-detail-row-title {
      color: rgba(232,229,236,.92);
      font-size: 14px;
      line-height: 1.35;
      font-weight: 800;
      overflow-wrap: anywhere;
    }
    .staff-detail-row-sub {
      margin-top: 4px;
      color: rgba(145,141,153,.78);
      font-size: 12px;
      line-height: 1.3;
      font-weight: 700;
    }
    .staff-detail-value {
      color: rgba(205,202,211,.88);
      font-size: 13px;
      font-weight: 900;
      text-align: right;
      white-space: normal;
    }
    .staff-detail-empty {
      display: flex;
      align-items: center;
      min-height: 78px;
      padding: 16px;
      border-radius: 18px;
      background: rgba(255,255,255,.026);
      color: rgba(170,166,176,.72);
      font-size: 14px;
      font-weight: 700;
      line-height: 1.5;
    }
    .staff-detail-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 18px;
      padding-top: 18px;
      border-top: 1px solid rgba(255,255,255,.07);
    }
    .kb-editor-layout {
      display: grid;
      grid-template-columns: minmax(260px, 310px) minmax(300px, 420px) minmax(420px, 1fr);
      gap: 18px;
      align-items: start;
    }
    .editor-entry-btn {
      border: 1px solid rgba(255,91,136,.46);
      background:
        linear-gradient(135deg, rgba(255,59,111,.92), rgba(255,118,154,.76)),
        rgba(255,59,111,.18);
      color: white;
      box-shadow:
        0 16px 38px rgba(255,59,111,.22),
        inset 0 1px 0 rgba(255,255,255,.20);
    }
    .editor-entry-btn:hover {
      border-color: rgba(255,154,179,.72);
      box-shadow:
        0 20px 48px rgba(255,59,111,.30),
        0 0 34px rgba(255,91,136,.12),
        inset 0 1px 0 rgba(255,255,255,.24);
    }
    .kb-editor-scope-tabs {
      display: inline-flex;
      padding: 4px;
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 16px;
      background: rgba(255,255,255,.035);
      gap: 4px;
    }
    .kb-editor-scope-tabs button {
      min-height: 36px;
      padding: 8px 12px;
      border: 0;
      border-radius: 12px;
      background: transparent;
      color: rgba(190,186,197,.78);
      font-weight: 900;
      cursor: pointer;
    }
    .kb-editor-scope-tabs button.active {
      background: rgba(255,59,111,.90);
      color: white;
      box-shadow: 0 10px 24px rgba(255,59,111,.20);
    }
    .kb-editor-sidebar,
    .kb-editor-materials,
    .kb-editor-form-panel {
      min-width: 0;
    }
    .kb-editor-panel-head,
    .kb-editor-form-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 16px;
    }
    .kb-editor-panel-head strong,
    .kb-editor-form-head h3 {
      display: block;
      margin: 5px 0 0;
      color: rgba(255,249,251,.96);
      font-size: 20px;
      line-height: 1.18;
      font-weight: 900;
      overflow-wrap: anywhere;
    }
    .kb-editor-section-list,
    .kb-editor-article-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .kb-editor-section,
    .kb-editor-article {
      width: 100%;
      min-height: 74px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 14px;
      border: 1px solid rgba(255,255,255,.09);
      border-radius: 18px;
      background:
        linear-gradient(145deg, rgba(255,255,255,.036), rgba(255,255,255,.010)),
        rgba(7,6,10,.56);
      color: white;
      text-align: left;
      cursor: pointer;
      transition: .18s ease;
    }
    .kb-editor-section:hover,
    .kb-editor-article:hover,
    .kb-editor-section.active,
    .kb-editor-article.active {
      border-color: rgba(255,91,136,.36);
      background:
        linear-gradient(145deg, rgba(255,59,111,.12), rgba(255,255,255,.020)),
        rgba(7,6,10,.70);
      transform: translateY(-1px);
    }
    .kb-editor-section span,
    .kb-editor-article span {
      display: block;
      color: rgba(255,249,251,.94);
      font-size: 15px;
      line-height: 1.25;
      font-weight: 900;
      overflow-wrap: anywhere;
    }
    .kb-editor-section small,
    .kb-editor-article small {
      display: block;
      margin-top: 5px;
      color: rgba(170,166,176,.72);
      font-size: 12px;
      line-height: 1.35;
      font-weight: 750;
    }
    .kb-editor-article b {
      flex: 0 0 auto;
      padding: 7px 9px;
      border-radius: 999px;
      background: rgba(55,224,162,.11);
      color: #a9f7d6;
      font-size: 11px;
      font-weight: 900;
    }
    .kb-editor-article.disabled {
      opacity: .66;
    }
    .kb-editor-article.disabled b {
      background: rgba(255,255,255,.055);
      color: rgba(190,186,197,.74);
    }
    .kb-editor-empty {
      padding: 22px;
      border-radius: 18px;
      background: rgba(255,255,255,.025);
      color: rgba(170,166,176,.76);
      font-size: 14px;
      font-weight: 750;
      line-height: 1.5;
    }
    .kb-editor-form-panel input,
    .kb-editor-form-panel textarea,
    .kb-editor-form-panel select {
      width: 100%;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 16px;
      background: rgba(255,255,255,.045);
      color: white;
      padding: 14px 16px;
      font: inherit;
      outline: none;
      transition: .18s ease;
    }
    .kb-editor-form-panel textarea {
      resize: vertical;
      line-height: 1.55;
    }
    .kb-editor-form-panel input:focus,
    .kb-editor-form-panel textarea:focus,
    .kb-editor-form-panel select:focus {
      border-color: rgba(255,91,136,.48);
      background: rgba(255,91,136,.055);
      box-shadow: 0 0 0 4px rgba(255,91,136,.07);
    }
    .kb-editor-form-panel select option {
      background: #17111a;
      color: white;
    }
    .kb-editor-block-toolbar {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 12px;
    }
    .kb-editor-blocks {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .kb-editor-block {
      padding: 16px;
      border: 1px solid rgba(255,255,255,.09);
      border-radius: 20px;
      background:
        linear-gradient(145deg, rgba(255,255,255,.038), rgba(255,255,255,.012)),
        rgba(7,6,10,.56);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
    }
    .kb-editor-block-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
    }
    .kb-editor-block-head strong {
      display: block;
      margin-top: 5px;
      color: rgba(255,249,251,.94);
      font-size: 17px;
      line-height: 1.2;
      font-weight: 900;
    }
    .kb-editor-block-actions {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    .kb-editor-field-hint {
      margin-top: 7px;
      color: rgba(145,141,153,.78);
      font-size: 12px;
      line-height: 1.45;
      font-weight: 700;
    }
    .kb-editor-toggle {
      min-height: 50px;
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 24px;
      padding: 13px 14px;
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 16px;
      background: rgba(255,255,255,.035);
      color: rgba(255,249,251,.92);
      font-weight: 850;
      cursor: pointer;
    }
    .kb-editor-toggle input {
      width: 18px;
      height: 18px;
      accent-color: var(--pink);
      flex: 0 0 auto;
    }
    .kb-editor-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid rgba(255,255,255,.07);
    }

    /* ── База знаний: рабочий раздел менеджера ── */
    .kb-workspace {
      display: grid;
      grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
      gap: 22px;
      align-items: start;
    }
    .kb-article-menu {
      position: sticky;
      top: 112px;
    }
    .kb-topic-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 12px;
    }
    .kb-topic-button {
      width: 100%;
      min-height: 96px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 6px;
      padding: 16px;
      border: 1px solid rgba(255,255,255,.09);
      border-radius: 18px;
      background: rgba(255,255,255,.025);
      color: white;
      text-align: left;
      transition: .18s ease;
    }
    .kb-topic-button:hover {
      border-color: rgba(255,138,163,.28);
      background: rgba(255,51,100,.055);
      transform: translateY(-1px);
    }
    .kb-topic-button.active {
      border-color: rgba(255,51,100,.48);
      background: linear-gradient(135deg, rgba(255,51,100,.18), rgba(255,255,255,.035));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 16px 34px rgba(255,51,100,.08);
    }
    .kb-topic-button strong {
      font-size: 15px;
      font-weight: 900;
      line-height: 1.25;
      overflow-wrap: anywhere;
    }
    .kb-topic-button span:last-child {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.45;
    }
    .kb-topic-category {
      color: var(--pink2);
      font-size: 11px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .14em;
    }
    .kb-article {
      padding: 30px;
      overflow: hidden;
    }
    .kb-article-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 18px;
      margin-bottom: 18px;
    }
    .kb-article-head h3 {
      margin: 0 0 10px;
      font-size: 34px;
      line-height: 1.1;
    }
    .kb-article-tags {
      margin-bottom: 24px;
    }
    .kb-article-body {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }
    .kb-lead {
      margin: 0;
      color: rgba(248,244,246,.92);
      font-size: 18px;
      font-weight: 700;
      line-height: 1.72;
    }
    .kb-block h4 {
      margin: 0 0 14px;
      color: #fff5f8;
      font-size: 22px;
      line-height: 1.2;
    }
    .kb-mini-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }
    .kb-mini-card {
      min-width: 0;
      padding: 17px;
      border: 1px solid rgba(255,255,255,.09);
      border-radius: 20px;
      background: rgba(255,255,255,.035);
    }
    .kb-mini-card strong {
      display: block;
      color: #fff5f8;
      font-size: 15px;
      font-weight: 900;
      line-height: 1.3;
      margin-bottom: 7px;
    }
    .kb-mini-card p {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.6;
    }
    .kb-bullet-list,
    .kb-step-list {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .kb-bullet-list li,
    .kb-step-list li {
      position: relative;
      min-height: 42px;
      padding: 12px 14px 12px 46px;
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 18px;
      background: rgba(255,255,255,.03);
      color: #d6d6dd;
      line-height: 1.55;
    }
    .kb-bullet-list li::before {
      content: "";
      position: absolute;
      left: 18px;
      top: 20px;
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--pink2);
      box-shadow: 0 0 14px rgba(255,138,163,.45);
    }
    .kb-step-list {
      counter-reset: kb-step;
    }
    .kb-step-list li {
      counter-increment: kb-step;
    }
    .kb-step-list li::before {
      content: counter(kb-step);
      position: absolute;
      left: 13px;
      top: 12px;
      width: 24px;
      height: 24px;
      display: grid;
      place-items: center;
      border-radius: 9px;
      background: rgba(255,51,100,.14);
      border: 1px solid rgba(255,51,100,.28);
      color: var(--pink3);
      font-size: 12px;
      font-weight: 900;
    }
    .kb-note {
      padding: 18px;
      border: 1px solid rgba(255,51,100,.22);
      border-radius: 20px;
      background: linear-gradient(145deg, rgba(255,51,100,.10), rgba(255,255,255,.025));
    }
    .kb-note strong {
      display: block;
      color: var(--pink3);
      font-size: 14px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .12em;
      margin-bottom: 8px;
    }
    .kb-note p {
      margin: 0;
      color: #d6d6dd;
      line-height: 1.65;
    }
    .kb-course-search {
      margin-bottom: 22px;
      align-items: stretch;
    }
    .kb-course-search .search {
      height: 52px;
      border-radius: 18px;
    }
    .kb-course-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .kb-course-section {
      margin: 0;
      border-radius: 26px;
      background: linear-gradient(145deg, rgba(13,11,16,.84), rgba(8,7,11,.70));
    }
    .kb-course-section.open {
      border-color: rgba(255,51,100,.26);
      background: linear-gradient(145deg, rgba(18,12,18,.88), rgba(8,7,11,.74));
    }
    .kb-section-button {
      min-height: 84px;
      padding: 20px;
    }
    .kb-lessons {
      padding: 0 18px 18px 58px;
    }
    .kb-material-row {
      min-height: 68px;
      border-radius: 18px;
      padding: 14px 10px;
    }
    .kb-material-row .status-dot {
      width: 26px;
      height: 26px;
      border-color: rgba(255,51,100,.42);
      background: rgba(255,51,100,.12);
    }
    .kb-material-row:hover .status-dot {
      background: var(--pink);
      border-color: var(--pink2);
    }
    .kb-material-row:hover .status-dot::before {
      content: "›";
      color: white;
      font-weight: 900;
    }
    .modal-box.kb-reader-modal {
      max-width: min(920px, calc(100vw - 40px));
      width: 100%;
    }
    .kb-reader-modal .kb-article-head h3 {
      font-size: 32px;
    }
    .kb-reader-modal .kb-article-body {
      max-height: min(64vh, 680px);
      overflow: auto;
      padding-right: 6px;
    }

    /* ── Premium motion: плавная среда без визуального шума ── */
    :root {
      --motion-fast: 160ms;
      --motion-mid: 260ms;
      --motion-slow: 520ms;
      --ease-premium: cubic-bezier(.2,.8,.2,1);
      --ease-out-premium: cubic-bezier(.16,1,.3,1);
    }
    html {
      scroll-behavior: smooth;
    }
    body::after {
      animation: premium-ambient-drift 18s var(--ease-premium) infinite alternate;
      will-change: opacity, transform;
    }
    @keyframes premium-ambient-drift {
      from { opacity: .72; transform: translate3d(-10px, -6px, 0) scale(1); }
      to { opacity: .96; transform: translate3d(12px, 8px, 0) scale(1.025); }
    }
    .page:not(.hidden),
    #page-login:not(.hidden) {
      animation: premium-page-in var(--motion-slow) var(--ease-out-premium) both;
    }
    @keyframes premium-page-in {
      from {
        opacity: 0;
        transform: translate3d(0, 14px, 0);
        filter: saturate(.92);
      }
      to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: saturate(1);
      }
    }
    .header-inner,
    .brand,
    .nav button,
    .user-badge,
    .btn,
    .search,
    .field input,
    select.field-select,
    .card,
    .panel,
    .accordion,
    .lesson-row,
    .section-button,
    .content-card,
    .question-card,
    .option,
    .stat-card,
    .club-card,
    .club-picker-card,
    .insight-board,
    .insight-command,
    .insight-signal,
    .insight-column,
    .kb-topic-button,
    .kb-material-row,
    .modal-box {
      transition:
        transform var(--motion-mid) var(--ease-premium),
        border-color var(--motion-mid) var(--ease-premium),
        background var(--motion-mid) var(--ease-premium),
        box-shadow var(--motion-mid) var(--ease-premium),
        color var(--motion-fast) ease,
        opacity var(--motion-mid) var(--ease-premium);
    }
    .btn:hover:not(:disabled),
    .nav button:hover,
    .brand:hover,
    .club-picker-card:hover,
    .club-card:hover,
    .kb-topic-button:hover,
    .kb-material-row:hover {
      transform: translate3d(0, -2px, 0);
    }
    .btn:active:not(:disabled),
    .nav button:active,
    .lesson-row:active,
    .club-picker-card:active,
    .kb-material-row:active {
      transform: translate3d(0, 0, 0) scale(.985);
      transition-duration: 90ms;
    }
    .card:hover,
    .stat-card:hover,
    .insight-column:hover,
    .insight-signal:hover {
      transform: translate3d(0, -3px, 0);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 26px 62px rgba(0,0,0,.34);
    }
    .insight-board:hover,
    .content-card:hover,
    .panel:hover {
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.075),
        0 30px 76px rgba(0,0,0,.36);
    }
    .search:focus-within,
    .field input:focus,
    select.field-select:focus {
      transform: translate3d(0, -1px, 0);
    }
    .accordion.open .lessons {
      animation: premium-list-open 280ms var(--ease-out-premium) both;
      transform-origin: top center;
    }
    @keyframes premium-list-open {
      from { opacity: 0; transform: translate3d(0, -6px, 0) scaleY(.985); }
      to { opacity: 1; transform: translate3d(0, 0, 0) scaleY(1); }
    }
    .accordion.open .lesson-row,
    .insight-column .insight-row,
    .staff-table tbody tr,
    .club-picker-card,
    .kb-material-row {
      animation: premium-item-in 360ms var(--ease-out-premium) both;
    }
    .accordion.open .lesson-row:nth-child(2),
    .insight-column .insight-row:nth-child(2),
    .staff-table tbody tr:nth-child(2),
    .club-picker-card:nth-child(2),
    .kb-material-row:nth-child(2) { animation-delay: 28ms; }
    .accordion.open .lesson-row:nth-child(3),
    .insight-column .insight-row:nth-child(3),
    .staff-table tbody tr:nth-child(3),
    .club-picker-card:nth-child(3),
    .kb-material-row:nth-child(3) { animation-delay: 56ms; }
    .accordion.open .lesson-row:nth-child(4),
    .insight-column .insight-row:nth-child(4),
    .staff-table tbody tr:nth-child(4),
    .club-picker-card:nth-child(4),
    .kb-material-row:nth-child(4) { animation-delay: 84ms; }
    .accordion.open .lesson-row:nth-child(n+5),
    .insight-column .insight-row:nth-child(n+5),
    .staff-table tbody tr:nth-child(n+5),
    .club-picker-card:nth-child(n+5),
    .kb-material-row:nth-child(n+5) { animation-delay: 112ms; }
    @keyframes premium-item-in {
      from { opacity: 0; transform: translate3d(0, 8px, 0); }
      to { opacity: 1; transform: translate3d(0, 0, 0); }
    }
    .modal-overlay:not(.hidden) {
      animation: premium-overlay-in 220ms ease both;
    }
    .modal-overlay:not(.hidden) .modal-box {
      animation: premium-modal-in 360ms var(--ease-out-premium) both;
    }
    @keyframes premium-overlay-in {
      from { opacity: 0; backdrop-filter: blur(0); }
      to { opacity: 1; backdrop-filter: blur(14px); }
    }
    @keyframes premium-modal-in {
      from {
        opacity: 0;
        transform: translate3d(0, 16px, 0) scale(.975);
      }
      to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
      }
    }
    .fill,
    .prog-bar-fill,
    .coach-progress-fill {
      position: relative;
      overflow: hidden;
    }
    .fill::after,
    .prog-bar-fill::after,
    .coach-progress-fill::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent);
      transform: translateX(-120%);
      animation: premium-progress-sheen 2.8s var(--ease-premium) infinite;
    }
    @keyframes premium-progress-sheen {
      0%, 38% { transform: translateX(-120%); opacity: 0; }
      50% { opacity: .9; }
      72%, 100% { transform: translateX(120%); opacity: 0; }
    }
    .header-inner::before,
    .insight-command,
    .content-card::before {
      background-size: 180% 180%;
      animation: premium-surface-breathe 9s var(--ease-premium) infinite alternate;
    }
    @keyframes premium-surface-breathe {
      from { background-position: 0% 45%; }
      to { background-position: 100% 55%; }
    }
    .role-tag::before,
    .timer-dot {
      animation-duration: 1.8s;
    }

    /* ── Coach scene: прозрачная речь ближе к персонажу ── */
    .coach-scene {
      grid-template-columns: minmax(0, 1fr) minmax(230px, 330px);
      gap: clamp(6px, 1.4vw, 18px);
      isolation: isolate;
    }
    .coach-scene::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(90deg, rgba(5,4,8,.74), rgba(5,4,8,.34) 52%, rgba(5,4,8,.08)),
        radial-gradient(circle at 70% 42%, rgba(255,51,100,.16), transparent 320px);
      z-index: 0;
    }
    .coach-speech {
      justify-self: end;
      align-self: center;
      width: min(720px, 100%);
      margin-right: clamp(-58px, -3.4vw, -22px);
      border-color: rgba(255,255,255,.18);
      background:
        linear-gradient(135deg, rgba(8,7,13,.64), rgba(8,7,13,.42) 58%, rgba(255,51,100,.055)),
        rgba(8,7,13,.34);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 22px 62px rgba(0,0,0,.35),
        0 0 0 1px rgba(255,51,100,.055);
      backdrop-filter: blur(18px) saturate(1.18);
      -webkit-backdrop-filter: blur(18px) saturate(1.18);
      animation: coach-speech-in 420ms var(--ease-out-premium) both;
      z-index: 3;
    }
    .coach-speech::before {
      content: "";
      position: absolute;
      inset: 1px;
      border-radius: inherit;
      pointer-events: none;
      background:
        linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.010)),
        radial-gradient(circle at 92% 42%, rgba(255,154,179,.13), transparent 190px);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.035);
      z-index: -1;
    }
    .coach-speech::after {
      content: "";
      position: absolute;
      right: -36px;
      top: 45%;
      width: 72px;
      height: 72px;
      pointer-events: none;
      background:
        radial-gradient(circle at 76% 48%, rgba(255,154,179,.34), transparent 0 14px),
        radial-gradient(circle at 44% 50%, rgba(8,7,13,.58), rgba(8,7,13,.20) 46%, transparent 58%);
      filter: blur(.2px);
      opacity: .86;
      transform: rotate(2deg);
    }
    .coach-head,
    .coach-text,
    .coach-progress,
    .coach-controls,
    .coach-dots {
      position: relative;
      z-index: 2;
    }
    .coach-text {
      color: rgba(255,250,252,.98);
      text-shadow: 0 2px 16px rgba(0,0,0,.62);
      animation: coach-text-thought 520ms var(--ease-out-premium) both;
    }
    .coach-head {
      animation: coach-text-thought 460ms var(--ease-out-premium) both;
    }
    .coach-progress,
    .coach-controls,
    .coach-dots {
      animation: coach-tools-in 520ms var(--ease-out-premium) both;
      animation-delay: 90ms;
    }
    .coach-guide {
      justify-self: end;
      margin-right: min(18px, 1vw);
      z-index: 2;
    }
    .coach-guide::before {
      box-shadow:
        0 0 26px rgba(255,51,100,.36),
        0 0 58px rgba(255,154,179,.16);
    }
    .coach-guide::after {
      content: "";
      position: absolute;
      top: 20%;
      left: 14%;
      width: 54px;
      height: 54px;
      border-radius: 999px;
      background: radial-gradient(circle, rgba(255,220,230,.55), rgba(255,51,100,.20) 44%, transparent 70%);
      filter: blur(.4px);
      opacity: .64;
      animation: coach-thought-seed 2.4s var(--ease-premium) infinite;
      pointer-events: none;
    }
    .coach-thought-flow {
      position: absolute;
      right: clamp(250px, 23vw, 330px);
      top: 37%;
      width: clamp(90px, 12vw, 160px);
      height: 92px;
      pointer-events: none;
      z-index: 4;
    }
    .coach-thought-flow span {
      position: absolute;
      display: block;
      width: 13px;
      height: 13px;
      border-radius: 999px;
      background: radial-gradient(circle, rgba(255,235,241,.95), rgba(255,51,100,.55) 48%, transparent 72%);
      box-shadow: 0 0 20px rgba(255,51,100,.34);
      opacity: 0;
      animation: coach-thought-travel 1150ms var(--ease-out-premium) both;
    }
    .coach-thought-flow span:nth-child(1) {
      right: 0;
      top: 48px;
      animation-delay: 30ms;
    }
    .coach-thought-flow span:nth-child(2) {
      right: 38%;
      top: 24px;
      width: 17px;
      height: 17px;
      animation-delay: 110ms;
    }
    .coach-thought-flow span:nth-child(3) {
      left: 4px;
      top: 7px;
      width: 22px;
      height: 22px;
      animation-delay: 190ms;
    }
    @keyframes coach-speech-in {
      from {
        opacity: 0;
        transform: translate3d(32px, 10px, 0) scale(.982);
        filter: blur(5px);
      }
      to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0);
      }
    }
    @keyframes coach-text-thought {
      from {
        opacity: 0;
        transform: translate3d(24px, 8px, 0);
        filter: blur(6px);
      }
      to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
      }
    }
    @keyframes coach-tools-in {
      from { opacity: 0; transform: translate3d(0, 8px, 0); }
      to { opacity: 1; transform: translate3d(0, 0, 0); }
    }
    @keyframes coach-thought-seed {
      0%, 100% { transform: translate3d(0, 0, 0) scale(.72); opacity: .28; }
      48% { transform: translate3d(-8px, -10px, 0) scale(1.05); opacity: .74; }
    }
    @keyframes coach-thought-travel {
      0% {
        opacity: 0;
        transform: translate3d(42px, 32px, 0) scale(.55);
        filter: blur(5px);
      }
      28% {
        opacity: .86;
      }
      100% {
        opacity: 0;
        transform: translate3d(-18px, -18px, 0) scale(1.28);
        filter: blur(0);
      }
    }

    /* ── Coach scene: presentation layout ── */
    .coach-stage {
      border: 0;
      border-radius: 0;
      background: #070608;
      box-shadow: 0 26px 76px rgba(0,0,0,.40);
    }
    .coach-scene {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
      grid-template-rows: 1fr auto;
      min-height: 520px;
      padding: 34px 38px 0;
      gap: 18px;
      align-items: end;
      background:
        linear-gradient(90deg, rgba(0,0,0,.54), rgba(0,0,0,.26) 50%, rgba(0,0,0,.44)),
        linear-gradient(0deg, rgba(0,0,0,.70), transparent 34%),
        url("unicorn-lesson-bg.png.png") center / cover no-repeat;
      isolation: isolate;
    }
    .coach-scene::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 50% 43%, rgba(255,59,111,.10), transparent 290px),
        linear-gradient(90deg, rgba(0,0,0,.50), transparent 40%, rgba(0,0,0,.30));
      pointer-events: none;
      z-index: 0;
    }
    .coach-scene::after {
      content: "UNICORN";
      position: absolute;
      left: 50%;
      top: 45%;
      transform: translate(-50%, -50%);
      color: rgba(255,255,255,.20);
      font-size: clamp(50px, 8vw, 106px);
      line-height: 1;
      font-weight: 900;
      letter-spacing: .13em;
      text-transform: uppercase;
      text-shadow: 0 12px 36px rgba(0,0,0,.50);
      pointer-events: none;
      z-index: 0;
    }
    .coach-brand-mini {
      position: absolute;
      left: 18px;
      top: 16px;
      z-index: 5;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: rgba(255,249,251,.94);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .13em;
      text-transform: uppercase;
      text-shadow: 0 2px 14px rgba(0,0,0,.62);
    }
    .coach-brand-mini img {
      width: 22px;
      height: 22px;
      object-fit: contain;
      filter: drop-shadow(0 0 10px rgba(255,59,111,.34));
    }
    .coach-speech {
      align-self: start;
      justify-self: center;
      width: min(680px, 100%);
      margin: 70px -58px 0 0;
      padding: 18px 28px;
      border: 0;
      border-radius: 12px;
      background: rgba(255,255,255,.96);
      color: #121216;
      box-shadow:
        0 18px 38px rgba(0,0,0,.34),
        inset 0 1px 0 rgba(255,255,255,.88);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      z-index: 3;
    }
    .coach-speech::before {
      display: none;
    }
    .coach-speech::after {
      content: "";
      position: absolute;
      right: -48px;
      top: 54%;
      width: 0;
      height: 0;
      background: none;
      border-style: solid;
      border-width: 16px 0 0 54px;
      border-color: transparent transparent transparent rgba(255,255,255,.96);
      filter: drop-shadow(0 10px 10px rgba(0,0,0,.18));
      transform: rotate(13deg);
      opacity: 1;
    }
    .coach-head {
      display: none;
    }
    .coach-text {
      color: #111116;
      margin: 0;
      text-align: center;
      font-size: clamp(15px, 1.35vw, 19px);
      line-height: 1.38;
      font-weight: 760;
      text-shadow: none;
      animation: coach-speech-in 360ms var(--ease-out-premium) both;
    }
    .coach-guide {
      grid-column: 2;
      grid-row: 1 / 3;
      justify-self: center;
      align-self: end;
      width: min(100%, 340px);
      margin: 0 18px -2px 0;
      z-index: 2;
      filter: drop-shadow(0 18px 26px rgba(0,0,0,.64));
      animation: coach-idle 4.6s ease-in-out infinite;
    }
    .coach-guide::before,
    .coach-guide::after,
    .coach-thought-flow {
      display: none;
    }
    .coach-guide img {
      max-height: 455px;
      object-position: bottom center;
    }
    .coach-bottom-bar {
      grid-column: 1 / -1;
      position: relative;
      z-index: 4;
      align-self: end;
      display: grid;
      gap: 10px;
      padding: 0 0 14px;
    }
    .coach-progress {
      width: 100%;
      height: 4px;
      margin: 0;
      border-radius: 0;
      background: rgba(255,255,255,.16);
      box-shadow: none;
    }
    .coach-progress-fill {
      width: var(--scene-progress);
      background: linear-gradient(90deg, #ffe94d, #ff5f87);
      box-shadow: 0 0 18px rgba(255,233,77,.32);
    }
    .coach-bottom-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
    }
    .coach-controls {
      display: flex;
      gap: 8px;
      margin: 0;
    }
    .coach-dots {
      display: flex;
      gap: 8px;
      margin: 0;
    }
    .coach-dot {
      width: 8px;
      height: 8px;
      background: rgba(255,255,255,.42);
    }
    .coach-dot.active {
      width: 28px;
      background: #ffe94d;
      box-shadow: 0 0 16px rgba(255,233,77,.52);
    }

    /* ── Premium quiz room ── */
    .quiz-premium-card {
      padding: 0;
      overflow: hidden;
      background: linear-gradient(145deg, rgba(16,12,19,.92), rgba(6,5,9,.96)), var(--panel);
    }
    .quiz-content-head {
      padding: 30px 32px 22px;
      margin: 0;
      border-bottom: 1px solid rgba(255,255,255,.06);
      background:
        radial-gradient(circle at 15% 0%, rgba(255,61,116,.13), transparent 260px),
        linear-gradient(90deg, rgba(255,255,255,.035), transparent);
    }
    .quiz-stage {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 300px;
      min-height: 560px;
      gap: 24px;
      padding: 30px 32px 34px;
      overflow: hidden;
      isolation: isolate;
      background:
        linear-gradient(90deg, rgba(4,4,8,.88), rgba(8,5,11,.54) 50%, rgba(6,4,8,.86)),
        linear-gradient(0deg, rgba(0,0,0,.72), transparent 45%),
        url("unicorn-lesson-bg.png.png") center / cover no-repeat;
    }
    .quiz-stage::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 78% 30%, rgba(255,61,116,.20), transparent 260px),
        radial-gradient(circle at 24% 62%, rgba(255,190,215,.10), transparent 330px),
        linear-gradient(115deg, rgba(255,255,255,.035), transparent 36%, rgba(255,61,116,.055));
      pointer-events: none;
      z-index: 0;
    }
    .quiz-stage::after {
      content: "";
      position: absolute;
      left: 32px;
      right: 32px;
      bottom: 0;
      height: 4px;
      background: linear-gradient(90deg, #ff3d78 0 var(--quiz-progress), rgba(255,255,255,.14) var(--quiz-progress) 100%);
      box-shadow: 0 0 26px rgba(255,61,116,.28);
      z-index: 3;
    }
    .quiz-stage-brand {
      position: absolute;
      z-index: 4;
      left: 32px;
      top: 24px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: rgba(255,245,249,.92);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .16em;
      text-transform: uppercase;
      text-shadow: 0 8px 24px rgba(0,0,0,.48);
    }
    .quiz-stage-brand img {
      width: 22px;
      height: 22px;
      object-fit: contain;
      filter: drop-shadow(0 0 14px rgba(255,61,116,.42));
    }
    .quiz-stage-main {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      min-width: 0;
      padding-top: 54px;
    }
    .quiz-stage-nav {
      margin: 0 0 16px;
      gap: 9px;
    }
    .quiz-stage .q-nav-btn {
      width: 42px;
      height: 42px;
      border-radius: 14px;
      background: rgba(255,255,255,.045);
      border-color: rgba(255,255,255,.12);
      color: rgba(255,245,249,.54);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
    }
    .quiz-stage .q-nav-btn.active {
      background: linear-gradient(135deg, #ff2f75, #ff7fa7);
      border-color: rgba(255,195,218,.68);
      color: white;
      box-shadow: 0 16px 34px rgba(255,47,117,.25);
    }
    .quiz-stage .q-nav-btn.answered:not(.active) {
      background: rgba(255,61,116,.13);
      border-color: rgba(255,61,116,.44);
      color: #ffc3da;
    }
    .quiz-case-card {
      flex: 1;
      min-height: 0;
      padding: 28px;
      border-radius: 30px;
      background: linear-gradient(145deg, rgba(17,14,22,.82), rgba(5,5,9,.72)), rgba(10,8,14,.76);
      border: 1px solid rgba(255,255,255,.12);
      box-shadow: 0 26px 70px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.05);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }
    .quiz-case-card .question-title {
      align-items: flex-start;
      margin-bottom: 22px;
    }
    .quiz-case-card .question-title h2 {
      max-width: 860px;
      color: #fff8fb;
      font-size: clamp(26px, 3vw, 42px);
      line-height: 1.12;
      text-wrap: balance;
      text-shadow: 0 16px 34px rgba(0,0,0,.34);
    }
    .quiz-case-card .q-num {
      width: 50px;
      height: 50px;
      border-radius: 18px;
      background: rgba(255,61,116,.16);
      border-color: rgba(255,129,170,.38);
      color: #ffd1df;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    }
    .quiz-options { display: grid; gap: 12px; }
    .quiz-option-card.option {
      position: relative;
      margin: 0;
      min-height: 66px;
      padding: 16px 18px;
      border-radius: 20px;
      align-items: center;
      background: linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.022)), rgba(8,7,12,.68);
      border-color: rgba(255,255,255,.12);
      color: rgba(255,249,252,.84);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 12px 28px rgba(0,0,0,.18);
    }
    .quiz-option-card.option::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(90deg, rgba(255,61,116,.18), transparent 48%);
      opacity: 0;
      transition: opacity .24s var(--ease-out-premium);
      pointer-events: none;
    }
    .quiz-option-card.option:hover:not(:disabled) {
      transform: translateY(-2px);
      border-color: rgba(255,129,170,.46);
      color: white;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 38px rgba(0,0,0,.24);
    }
    .quiz-option-card.option:hover:not(:disabled)::after,
    .quiz-option-card.option.selected::after { opacity: 1; }
    .quiz-option-card.option.selected {
      background: linear-gradient(135deg, rgba(255,61,116,.24), rgba(255,148,186,.10)), rgba(16,10,17,.82);
      border-color: rgba(255,148,186,.62);
      color: white;
      box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 18px 44px rgba(255,61,116,.16);
    }
    .quiz-option-card.option.correct-opt {
      background: linear-gradient(135deg, rgba(52,211,153,.18), rgba(52,211,153,.06)), rgba(7,15,13,.86);
      border-color: rgba(52,211,153,.50);
      color: #baf7dd;
    }
    .quiz-option-card.option.wrong-opt {
      background: linear-gradient(135deg, rgba(251,113,133,.18), rgba(251,113,133,.06)), rgba(18,8,12,.86);
      border-color: rgba(251,113,133,.52);
      color: #ffd3dc;
    }
    .quiz-option-text {
      position: relative;
      z-index: 1;
      min-width: 0;
      font-size: 15px;
      line-height: 1.45;
    }
    .quiz-stage .letter {
      position: relative;
      z-index: 1;
      width: 31px;
      height: 31px;
      background: rgba(255,255,255,.055);
      border-color: rgba(255,255,255,.18);
      color: rgba(255,245,249,.82);
    }
    .quiz-stage .option.selected .letter {
      background: linear-gradient(135deg, #ff2f75, #ff8caf);
      border-color: rgba(255,224,235,.78);
      color: white;
    }
    .quiz-feedback {
      margin-top: 18px;
      padding: 14px 16px;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.045);
      color: rgba(255,249,252,.78);
      line-height: 1.55;
    }
    .quiz-feedback span,
    .quiz-feedback b {
      display: block;
      color: white;
      font-weight: 900;
    }
    .quiz-feedback p {
      margin: 8px 0 0;
      color: rgba(255,249,252,.72);
    }
    .quiz-feedback.good {
      border-color: rgba(52,211,153,.32);
      background: rgba(52,211,153,.10);
      color: #baf7dd;
    }
    .quiz-feedback.bad {
      border-color: rgba(251,113,133,.34);
      background: rgba(251,113,133,.10);
    }
    .quiz-feedback.pending {
      border-color: rgba(255,129,170,.30);
      background: rgba(255,61,116,.09);
    }
    .quiz-result-panel {
      position: relative;
      z-index: 3;
      top: auto;
      align-self: start;
      margin-top: 54px;
      padding: 22px;
      border-radius: 28px;
      background: linear-gradient(145deg, rgba(18,14,22,.84), rgba(7,6,10,.76)), rgba(10,8,14,.76);
      border-color: rgba(255,255,255,.12);
      box-shadow: 0 24px 58px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.06);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }
    .quiz-circle {
      width: 150px;
      height: 150px;
      margin: 18px auto;
      background: conic-gradient(#ff7ea8 0 var(--score), rgba(255,255,255,.12) var(--score) 100%);
      box-shadow: 0 0 34px rgba(255,61,116,.18), inset 0 0 0 1px rgba(255,255,255,.08);
    }
    .quiz-circle .circle-inner {
      background: radial-gradient(circle at 50% 20%, rgba(255,61,116,.08), transparent 54%), #09080d;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
    }
    .quiz-circle .circle-score {
      color: #fff8fb;
      font-size: 34px;
      line-height: 1;
      text-shadow: 0 0 18px rgba(255,61,116,.20);
    }
    .quiz-circle-caption {
      margin-top: 5px;
      color: rgba(255,245,249,.45);
      font-size: 11px;
      font-weight: 850;
      text-transform: uppercase;
      letter-spacing: .08em;
    }
    .quiz-result-lines { display: grid; gap: 10px; }
    .quiz-result-lines div {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 0;
      border-top: 1px solid rgba(255,255,255,.07);
      color: rgba(255,245,249,.52);
      font-size: 13px;
    }
    .quiz-result-lines b {
      color: white;
      font-size: 14px;
      text-align: right;
    }
    .quiz-review { padding: 26px 32px 0; }
    .quiz-review .notice { margin-bottom: 16px; }
    .quiz-review .result-summary {
      border-radius: 20px;
      background: rgba(255,255,255,.035);
      border-color: rgba(255,255,255,.10);
    }
    .quiz-stage-actions {
      padding: 26px 32px 32px;
      margin: 0;
      border-top: 1px solid rgba(255,255,255,.06);
      background: rgba(0,0,0,.16);
    }

    /* ── Premium login: мягкий брендовый вход с пульсом логотипа ── */
    #page-login {
      position: relative;
      min-height: calc(100vh - 84px);
    }
    body.is-login-page .header {
      display: none;
    }
    body.is-login-page main {
      min-height: 100vh;
    }
    body.is-login-page #page-login {
      min-height: 100vh;
      padding-top: 40px;
      padding-bottom: 40px;
      justify-content: flex-start;
      padding-left: clamp(90px, 15vw, 260px);
      padding-right: clamp(320px, 39vw, 660px);
    }
    #page-login::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(circle at 50% 42%, rgba(255,59,111,.13), transparent 300px),
        radial-gradient(circle at 50% 58%, rgba(255,154,179,.075), transparent 460px);
      opacity: .9;
    }
    #page-login::after {
      content: "";
      position: fixed;
      left: min(78vw, calc(100vw - 300px));
      top: 50%;
      width: clamp(460px, 40vw, 720px);
      height: clamp(460px, 40vw, 720px);
      pointer-events: none;
      background: url("unicorn-mark.png") center / contain no-repeat;
      opacity: .18;
      transform: translate(-50%, -50%) scale(.96);
      filter:
        drop-shadow(0 0 20px rgba(255,59,111,.26))
        drop-shadow(0 0 58px rgba(255,59,111,.15))
        drop-shadow(0 0 108px rgba(255,154,179,.10));
      animation: login-logo-breathe 7s var(--ease-premium) infinite;
      z-index: 0;
    }
    .login-card {
      position: relative;
      max-width: min(486px, calc(100vw - 44px));
      padding: 46px 42px 40px;
      border-radius: 34px;
      border-color: rgba(255,255,255,.14);
      background:
        linear-gradient(145deg, rgba(18,14,21,.76), rgba(7,6,10,.58)),
        rgba(7,6,10,.54);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        inset 0 -1px 0 rgba(255,59,111,.08),
        0 30px 86px rgba(0,0,0,.46),
        0 0 0 1px rgba(255,59,111,.055);
      backdrop-filter: blur(20px) saturate(1.18);
      -webkit-backdrop-filter: blur(20px) saturate(1.18);
      isolation: isolate;
      z-index: 1;
    }
    .login-card::before {
      content: "";
      position: absolute;
      inset: 1px;
      border-radius: inherit;
      pointer-events: none;
      background:
        linear-gradient(180deg, rgba(255,255,255,.060), transparent 34%),
        radial-gradient(circle at 16% 0%, rgba(255,154,179,.11), transparent 230px),
        radial-gradient(circle at 84% 100%, rgba(255,59,111,.07), transparent 260px),
        repeating-linear-gradient(135deg, rgba(255,255,255,.014) 0 1px, transparent 1px 30px);
      opacity: .72;
      z-index: 0;
    }
    .login-card::after {
      content: "";
      position: absolute;
      left: 28px;
      right: 28px;
      top: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,154,179,.54), rgba(255,59,111,.28), transparent);
      pointer-events: none;
      z-index: 1;
    }
    .login-wordmark {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      margin-bottom: 28px;
      text-transform: uppercase;
      text-align: center;
    }
    .login-wordmark-title {
      position: relative;
      display: inline-block;
      color: #fff7fa;
      font-size: clamp(30px, 4.2vw, 46px);
      font-weight: 900;
      line-height: .90;
      letter-spacing: .10em;
      text-shadow:
        0 1px 0 rgba(0,0,0,.55),
        0 18px 42px rgba(255,59,111,.14);
    }
    .login-wordmark-title::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: -10px;
      width: min(100%, 238px);
      height: 2px;
      border-radius: 999px;
      transform: translateX(-50%);
      background: linear-gradient(90deg, rgba(255,59,111,.95), rgba(255,154,179,.38), rgba(255,59,111,0));
    }
    .login-wordmark-subtitle {
      margin-top: 18px;
      color: rgba(255,176,194,.88);
      font-size: 13px;
      font-weight: 900;
      line-height: 1;
      letter-spacing: .34em;
    }
    .login-title {
      max-width: 360px;
      margin: 0 auto 10px;
      font-size: clamp(32px, 3.4vw, 42px);
      font-weight: 900;
      line-height: 1.02;
      letter-spacing: 0;
      text-align: center;
      text-wrap: balance;
      background: linear-gradient(100deg, #fff8fb 0%, #ffd9e3 21%, #ff5f87 42%, #ff9ab3 58%, #fff3f7 78%, #ff3b6f 100%);
      background-size: 240% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      text-shadow: 0 18px 42px rgba(0,0,0,.34);
      animation: login-title-red-flow 4.4s var(--ease-premium) infinite alternate;
    }
    .login-sub {
      width: fit-content;
      max-width: 100%;
      margin: 0 auto 34px;
      padding: 8px 13px;
      border: 1px solid rgba(255,255,255,.075);
      border-radius: 999px;
      background: rgba(255,255,255,.030);
      color: rgba(205,202,211,.82);
      font-size: 14px;
      font-weight: 760;
      line-height: 1.35;
      text-align: center;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
    }
    .login-form-panel {
      position: relative;
      margin-top: 0;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }
    .login-form-panel::before {
      content: none;
    }
    .login-card .field {
      margin-bottom: 18px;
    }
    .login-card .field label {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: rgba(190,184,196,.74);
      letter-spacing: .18em;
      margin-bottom: 10px;
      font-size: 12px;
    }
    .login-input-wrap {
      position: relative;
      min-height: 62px;
      display: flex;
      align-items: center;
      padding: 0 20px;
      border: 1px solid rgba(255,255,255,.115);
      border-radius: 20px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.044), rgba(255,255,255,.012)),
        rgba(4,3,7,.58);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.055),
        0 16px 38px rgba(0,0,0,.18);
      transition:
        transform var(--motion-mid) var(--ease-premium),
        border-color var(--motion-mid) var(--ease-premium),
        background var(--motion-mid) var(--ease-premium),
        box-shadow var(--motion-mid) var(--ease-premium);
    }
    .login-input-wrap::after {
      content: "";
      position: absolute;
      left: 16px;
      right: 16px;
      bottom: -1px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,59,111,.42), transparent);
      opacity: 0;
      transition: opacity var(--motion-mid) var(--ease-premium);
      pointer-events: none;
    }
    .login-card .login-input-wrap input {
      flex: 1;
      min-width: 0;
      min-height: 60px;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      background-color: transparent;
      color: rgba(255,249,251,.96);
      box-shadow: none;
      font-size: 16px;
      font-weight: 720;
      appearance: none;
      -webkit-appearance: none;
    }
    .login-card .login-input-wrap input:focus {
      background: transparent;
      box-shadow: none;
    }
    .login-input-wrap:focus-within {
      transform: translateY(-1px);
      border-color: rgba(255,154,179,.42);
      background:
        linear-gradient(180deg, rgba(255,255,255,.056), rgba(255,255,255,.016)),
        rgba(5,4,8,.72);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 16px 34px rgba(0,0,0,.22),
        0 0 0 4px rgba(255,59,111,.045);
    }
    .login-input-wrap:focus-within::after {
      opacity: 1;
    }
    .login-card .field input:-webkit-autofill,
    .login-card .field input:-webkit-autofill:hover,
    .login-card .field input:-webkit-autofill:focus {
      -webkit-text-fill-color: rgba(255,249,251,.96);
      background-color: transparent !important;
      box-shadow: 0 0 0 1000px rgba(0,0,0,0) inset !important;
      -webkit-box-shadow: 0 0 0 1000px rgba(0,0,0,0) inset !important;
      background-clip: text;
      -webkit-background-clip: text;
      caret-color: white;
      transition: background-color 9999s ease-out;
    }
    #btn-do-login {
      width: 100%;
      min-height: 58px;
      margin-top: 4px;
      border-radius: 20px;
      position: relative;
      overflow: hidden;
      box-shadow:
        0 18px 44px rgba(255,59,111,.26),
        inset 0 1px 0 rgba(255,255,255,.18);
    }
    #btn-do-login::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
      transform: translateX(-120%);
      transition: transform 520ms var(--ease-premium);
      pointer-events: none;
    }
    #btn-do-login:hover::after {
      transform: translateX(120%);
    }
    .login-submit-arrow {
      font-weight: 900;
      transition: transform var(--motion-mid) var(--ease-premium);
    }
    #btn-do-login:hover .login-submit-arrow {
      transform: translateX(3px);
    }
    .login-support {
      margin-top: 22px;
      padding: 18px 12px 0;
      border-top: 1px solid rgba(255,255,255,.075);
      color: rgba(170,166,176,.62);
      font-size: 13px;
      line-height: 1.45;
      text-align: center;
    }
    @keyframes login-logo-breathe {
      0%, 100% {
        opacity: .10;
        transform: translate(-50%, -50%) scale(.91) rotate(-1.2deg);
        filter:
          drop-shadow(0 0 14px rgba(255,59,111,.16))
          drop-shadow(0 0 36px rgba(255,59,111,.09))
          drop-shadow(0 0 72px rgba(255,154,179,.06));
      }
      14% {
        opacity: .12;
      }
      44%, 58% {
        opacity: .36;
        transform: translate(-50%, -50%) scale(1.055) rotate(.55deg);
        filter:
          drop-shadow(0 0 24px rgba(255,59,111,.58))
          drop-shadow(0 0 68px rgba(255,59,111,.34))
          drop-shadow(0 0 130px rgba(255,154,179,.18));
      }
      74% {
        opacity: .18;
      }
    }
    @keyframes login-title-red-flow {
      from { background-position: 0% 50%; }
      to { background-position: 100% 50%; }
    }

    /* ── Unified premium typography system ── */
    :root {
      --type-h1: clamp(40px, 3.05vw, 46px);
      --type-h2: clamp(28px, 2.15vw, 32px);
      --type-card-title: 19px;
      --type-body: 15px;
      --type-small: 13px;
      --type-caption: 12px;
      --type-label: 10.5px;
    }
    body {
      font-family: var(--font-ui);
      color: var(--text-secondary);
      font-size: var(--type-body);
      font-weight: 500;
      line-height: 1.56;
      letter-spacing: 0;
    }
    h1,
    h2,
    h3,
    .hero-title,
    .login-title,
    .modal-title,
    .content-head h1,
    .manager-hero-row h1,
    .manager-employees-hero h1,
    .kb-hero-copy h2,
    .kb-section-head h3,
    .question-title h2 {
      font-family: var(--font-display);
      color: var(--text-primary);
      letter-spacing: -0.035em;
      text-wrap: balance;
    }
    h1,
    .hero-title,
    .content-head h1,
    .manager-hero-row h1,
    .manager-employees-hero h1 {
      font-size: var(--type-h1);
      font-weight: 800;
      line-height: 1.05;
    }
    h2,
    .kb-hero-copy h2,
    .kb-section-head h3 {
      font-size: var(--type-h2);
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: -0.025em;
    }
    h3,
    .modal-title,
    .read-box h2,
    .lesson-title,
    .box-title + h3,
    .manager-alert-copy h3,
    .manager-card-head b,
    .manager-person-main b,
    .manager-course-main b,
    .manager-rank-main b,
    .manager-activity-row b,
    .manager-signal-row b,
    .manager-employee-person b,
    .kb-article-head h3,
    .kb-reader-modal .kb-article-head h3,
    .support-chat-title,
    .support-detail-title,
    .support-ticket-row span {
      color: var(--text-primary);
      font-weight: 700;
      line-height: 1.25;
      letter-spacing: -0.015em;
    }
    p,
    .lead,
    .login-sub,
    .modal-sub,
    .lesson-meta,
    .read-box,
    .read-box p,
    .manager-alert-copy p,
    .manager-person-main small,
    .manager-course-main small,
    .manager-employee-person small,
    .manager-employee-progress small,
    .manager-employee-tests small,
    .kb-article-body,
    .kb-reader-modal .kb-article-body,
    .support-message-text,
    .support-chat-sub,
    .support-detail-meta,
    .support-ticket-row small {
      color: var(--text-secondary);
      font-size: var(--type-body);
      font-weight: 500;
      line-height: 1.56;
    }
    small,
    .muted,
    .lesson-status,
    .manager-shell-profile span,
    .manager-hero-row p,
    .manager-empty,
    .manager-activity-row small,
    .manager-activity-row em,
    .manager-signal-row small,
    .support-message-meta,
    .support-chat-foot,
    .login-support,
    .modal-sub {
      color: var(--text-muted);
      font-size: var(--type-small);
      font-weight: 500;
      line-height: 1.43;
    }
    .overline,
    .small-title,
    .pill,
    .box-title,
    .field label,
    .login-card .field label,
    .staff-table th,
    .manager-welcome,
    .manager-alert-copy span,
    .manager-card-head span,
    .manager-employees-list-head,
    .support-create-box label,
    .support-modal-list .small-title,
    .kb-editor-sidebar h3,
    .kb-editor-panel h3,
    .kb-article-meta,
    .kb-lessons-title {
      color: var(--text-accent-soft);
      font-size: var(--type-label);
      font-weight: 700;
      line-height: 1.35;
      letter-spacing: .15em;
      text-transform: uppercase;
    }
    .btn,
    button,
    .manager-quick-actions button,
    .manager-card-head button,
    .manager-small-btn,
    .manager-card-link,
    .manager-employee-actions button,
    .support-icon-btn,
    .support-send-btn,
    .support-mini-action,
    .support-status-chip {
      font-weight: 700;
      letter-spacing: 0;
    }
    input,
    select,
    textarea,
    .login-card .login-input-wrap input,
    .manager-shell-search input,
    .support-composer textarea,
    .support-create-box input,
    .support-create-box textarea {
      color: var(--text-primary);
      font-family: var(--font-ui);
      font-size: 15px;
      font-weight: 500;
      line-height: 1.45;
    }
    input::placeholder,
    textarea::placeholder,
    .manager-shell-search input::placeholder,
    .support-composer textarea::placeholder,
    .support-create-box input::placeholder {
      color: rgba(201,190,200,.56);
      font-weight: 500;
    }

    /* Typography normalization. */
    [style*="font-weight:900"],
    [style*="font-weight: 900"],
    [style*="font-weight:950"],
    [style*="font-weight: 950"] {
      font-weight: 700 !important;
    }
    [style*="color:var(--text-muted)"],
    [style*="color: var(--text-muted)"],
    [style*="color:#777783"],
    [style*="color: #777783"] {
      color: var(--text-muted) !important;
    }

    /* Login */
    .login-wordmark-title {
      color: var(--text-primary);
      font-size: clamp(28px, 3.5vw, 42px);
      font-weight: 800;
      line-height: .96;
      letter-spacing: .095em;
    }
    .login-wordmark-subtitle {
      color: var(--text-accent-soft);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .28em;
    }
    .login-title {
      font-size: clamp(34px, 3.1vw, 44px);
      font-weight: 800;
      line-height: 1.05;
      letter-spacing: -0.035em;
    }
    .login-sub {
      color: var(--text-secondary);
      font-size: 14px;
      font-weight: 500;
      line-height: 1.45;
    }
    .login-support {
      color: var(--text-muted);
      font-size: 13px;
      font-weight: 500;
    }
    #btn-do-login {
      font-size: 15px;
      font-weight: 700;
    }

    /* Employee learning pages */
    .hero .lead,
    .content-head p,
    .catalog-head p,
    .accordion-sub,
    .next-box,
    .read-box p,
    .coach-copy,
    .scenario-text,
    .lesson-card p {
      color: var(--text-secondary);
      font-weight: 500;
      line-height: 1.62;
    }
    .accordion-title,
    .lesson-title {
      color: var(--text-primary);
      font-size: 15px;
      font-weight: 700;
      line-height: 1.32;
    }
    .lesson-meta,
    .accordion-meta {
      color: var(--text-muted);
      font-size: 13px;
      font-weight: 500;
      line-height: 1.42;
    }
    .read-box h2,
    .question-title h2 {
      color: var(--text-primary);
      font-size: clamp(26px, 2.05vw, 32px);
      font-weight: 700;
      line-height: 1.17;
      letter-spacing: -0.025em;
    }

    /* Tests */
    .quiz-case-card .question-title h2,
    .question-title h2 {
      font-weight: 750;
      line-height: 1.15;
    }
    .answer-option,
    .option,
    .quiz-option {
      color: var(--text-secondary);
      font-size: 15px;
      font-weight: 500;
      line-height: 1.48;
    }
    .answer-option b,
    .option b,
    .quiz-option b {
      color: var(--text-primary);
      font-weight: 700;
    }
    .quiz-result,
    .quiz-explain,
    .result-note {
      color: var(--text-secondary);
      font-weight: 500;
      line-height: 1.55;
    }

    /* Manager dashboard shell */
    .manager-shell {
      color: var(--text-secondary);
      font-family: var(--font-ui);
    }
    .manager-shell-brand b,
    .brand-title {
      color: var(--text-primary);
      font-weight: 800;
      letter-spacing: .10em;
    }
    .manager-shell-brand small,
    .brand-subtitle {
      color: var(--text-accent-soft);
      font-weight: 700;
      letter-spacing: .18em;
    }
    .manager-shell-nav button {
      color: var(--text-muted);
      font-size: 14px;
      font-weight: 600;
      line-height: 1.25;
    }
    .manager-shell-nav button.active,
    .manager-shell-nav button:hover {
      color: var(--text-primary);
      font-weight: 700;
    }
    .manager-shell-search input {
      font-size: 14px;
    }
    .manager-shell-profile b {
      color: var(--text-primary);
      font-size: 14px;
      font-weight: 700;
      line-height: 1.2;
    }
    .manager-hero-row h1 {
      font-size: clamp(40px, 2.7vw, 46px);
      font-weight: 800;
    }
    .manager-hero-row p {
      color: var(--text-secondary);
      font-size: 13px;
    }
    .manager-hero-row p span {
      background: var(--text-success);
    }
    .manager-alert-copy h3 {
      font-size: clamp(22px, 1.7vw, 28px);
      font-weight: 750;
      line-height: 1.16;
    }
    .manager-alert-copy p {
      max-width: 560px;
      color: var(--text-secondary);
      font-size: 14px;
      line-height: 1.55;
    }
    .manager-donut b,
    .manager-metric b,
    .stat-num,
    .staff-detail-value {
      color: var(--text-primary);
      font-size: clamp(26px, 1.9vw, 30px);
      font-weight: 800 !important;
      line-height: 1;
      letter-spacing: -0.03em;
    }
    .manager-donut span {
      color: var(--text-accent-soft);
      font-weight: 700;
    }
    .manager-donut small,
    .manager-metric span,
    .manager-metric small {
      color: var(--text-muted);
      font-size: 13px;
      font-weight: 500;
      line-height: 1.35;
    }
    .manager-metric.good b,
    .manager-rank-row strong,
    .manager-activity-row span.good {
      color: var(--text-success);
    }
    .manager-metric.risk b,
    .manager-activity-row span.risk,
    .manager-status.risk {
      color: var(--text-danger);
    }
    .manager-card-head b {
      font-size: 18px;
    }
    .manager-person-main b,
    .manager-course-main b,
    .manager-rank-main b,
    .manager-employee-person b {
      font-size: 14.5px;
    }
    .manager-person-main small,
    .manager-course-main small,
    .manager-employee-person small {
      color: var(--text-muted);
      font-size: 13px;
    }
    .manager-status {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .01em;
    }
    .manager-card-link,
    .manager-card-head button,
    .manager-small-btn {
      color: var(--text-secondary);
      font-size: 13px;
    }

    /* Manager employees page */
    .manager-employees-hero h1 {
      font-size: clamp(40px, 2.65vw, 46px);
      font-weight: 800;
    }
    .manager-employees-list-head {
      color: var(--text-subtle);
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: .15em;
    }
    .manager-employee-progress b,
    .manager-employee-tests b {
      color: var(--text-primary);
      font-size: 15px;
      font-weight: 700 !important;
      letter-spacing: -0.01em;
    }
    .manager-employee-actions button {
      color: var(--text-secondary);
      font-size: 12.5px;
      font-weight: 700;
    }
    .manager-employee-actions button.danger {
      color: var(--text-danger);
    }

    /* Tables, modals, support, knowledge */
    .staff-table th,
    .staff-table td {
      font-size: 13px;
      line-height: 1.42;
    }
    .staff-table td {
      color: var(--text-secondary);
      font-weight: 500;
    }
    .modal-title,
    .staff-detail .modal-title {
      color: var(--text-primary);
      font-size: 24px;
      font-weight: 750;
      line-height: 1.18;
      letter-spacing: -0.02em;
    }
    .support-message {
      font-size: 14px;
      font-weight: 500;
      line-height: 1.48;
    }
    .support-message-meta {
      color: rgba(201,190,200,.68);
      font-size: 11px;
      font-weight: 600;
    }
    .support-ticket-row b,
    .support-status-chip,
    .support-rating b {
      font-weight: 700;
    }
    .support-rating small,
    .support-rating span,
    .support-image-caption small {
      color: var(--text-muted);
      font-size: 12px;
    }
    .kb-article-body,
    .kb-reader-modal .kb-article-body {
      color: var(--text-secondary);
      font-size: 15px;
      font-weight: 500;
      line-height: 1.65;
    }
    .kb-article-body b,
    .kb-reader-modal .kb-article-body b {
      color: var(--text-primary);
      font-weight: 700;
    }
    .kb-article-body small,
    .kb-reader-modal .kb-article-body small {
      color: var(--text-muted);
    }
    /* ── Адаптив ── */
    @media (max-width: 1180px) {
      body.is-login-page #page-login {
        justify-content: center;
        padding-left: 22px;
        padding-right: 22px;
      }
      #page-login::after {
        left: calc(50% + 260px);
        width: clamp(420px, 54vw, 620px);
        height: clamp(420px, 54vw, 620px);
        opacity: .15;
      }
    }
    @media (max-width: 980px) {
      .kb-workspace { grid-template-columns: 1fr; }
      .kb-article-menu { position: static; }
      .kb-topic-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .hero, .catalog-head, .quiz-grid, .lesson-grid, .two-cols, .cards, .dash-grid, .sa-grid, .club-dashboard-layout, .kb-hero { grid-template-columns: 1fr; }
      .insight-hero-row { grid-template-columns: 1fr; }
      .insight-columns { grid-template-columns: 1fr; }
      .cockpit-grid { grid-template-columns: 1fr; }
      .cockpit-lanes { grid-template-columns: 1fr; }
      .analytics-suite-top,
      .analytics-panels,
      .support-workspace,
      .admin-overview { grid-template-columns: 1fr; }
      .analytics-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .analytics-score { justify-self: start; }
      .kb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .hero { min-height: auto; gap: 28px; padding-top: 20px; }
      .club-picker-panel { position: static; }
      .club-picker-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
      h1 { font-size: 54px; }
      h2 { font-size: 40px; }
      .hero-title { font-size: 54px; }
      .content-head h1 { font-size: 44px; }
      .question-title h2 { font-size: 28px; }
      .nav { display: none; }
      .section-count, .lesson-status { display: none; }
      .content-head { flex-direction: column; }
      .status-pill { white-space: normal; }
      .coach-scene {
        grid-template-columns: 1fr;
        min-height: 0;
        padding: 22px;
        background:
          linear-gradient(0deg, rgba(8,6,13,.9), rgba(8,6,13,.46)),
          url("unicorn-lesson-bg.png.png") center / cover no-repeat;
      }
      .coach-speech {
        justify-self: stretch;
        margin-right: 0;
        width: 100%;
      }
      .coach-speech::after,
      .coach-thought-flow {
        display: none;
      }
      .coach-guide {
        justify-self: center;
        margin-right: 0;
      }
      .coach-guide {
        width: min(260px, 72vw);
        margin-top: -8px;
      }
      .coach-guide img { max-height: 310px; }
      .coach-bottom-bar { grid-column: 1; }
      .quiz-stage {
        grid-template-columns: 1fr;
        min-height: 0;
        padding: 24px;
        background:
          linear-gradient(0deg, rgba(8,6,13,.90), rgba(8,6,13,.48)),
          url("unicorn-lesson-bg.png.png") center / cover no-repeat;
      }
      .quiz-stage-main { padding-top: 50px; }
      .quiz-result-panel {
        margin-top: 0;
        position: relative;
      }
      .result-panel { position: static; }
      .footer-inner { align-items: flex-start; flex-direction: column; }
    }
    @media (max-width: 640px) {
      .container { padding: 28px 14px; }
      .header, main, #page-login { width: 100vw; max-width: 100vw; overflow-x: hidden; }
      .header { padding: 12px 10px; }
      #page-login { padding: 32px 14px; }
      body.is-login-page #page-login {
        justify-content: center;
        padding-left: 14px;
        padding-right: 14px;
      }
      .header-inner { width: 100%; max-width: 100%; min-height: 64px; padding: 10px 12px; border-radius: 22px; }
      .brand { gap: 8px; padding: 5px 8px 5px 5px; border-radius: 16px; }
      .logo { width: 52px; height: 40px; border-radius: 0; }
      .brand > span:last-child { min-width: 92px; }
      .brand-title { font-size: 14px; letter-spacing: .07em; }
      .brand-subtitle { font-size: 8px; letter-spacing: .14em; margin-top: 9px; }
      .user-name { max-width: 130px; }
      .header .btn { width: auto; min-width: 86px; padding-inline: 16px; }
      #btn-login-header { display: none !important; }
      .login-card { width: auto; max-width: 100%; flex: 1 1 0; padding: 32px 22px; border-radius: 28px; }
      #page-login::after {
        left: 50%;
        top: 42%;
        width: min(84vw, 390px);
        height: min(84vw, 390px);
        opacity: .13;
      }
      .login-title { font-size: 30px; }
      .login-form-panel { padding: 0; border-radius: 0; }
      .login-input-wrap { min-height: 54px; }
      .login-card .login-input-wrap input { min-height: 52px; }
      .login-support { max-width: 280px; margin-left: auto; margin-right: auto; line-height: 1.45; }
      .glow-card { padding: 1px; border-radius: 22px; }
      .content-card, .panel { padding: 18px; border-radius: 24px; }
      .card, .info-box, .read-box, .question-card, .result-panel, .stat-card, .club-card { padding: 18px; border-radius: 22px; }
      .coach-stage { border-radius: 24px; }
      .coach-scene { padding: 16px; }
      .coach-speech { padding: 16px 18px; border-radius: 12px; background: rgba(255,255,255,.96); }
      .coach-head { align-items: center; }
      .coach-text { font-size: 16px; line-height: 1.7; }
      .coach-controls .btn { width: auto; flex: 1 1 120px; }
      .coach-guide { width: min(230px, 78vw); }
      .coach-guide img { max-height: 280px; }
      .quiz-content-head { padding: 22px 18px 18px; }
      .quiz-stage {
        padding: 18px;
        border-radius: 0;
      }
      .quiz-stage::after {
        left: 18px;
        right: 18px;
      }
      .quiz-stage-brand {
        left: 18px;
        top: 18px;
        max-width: calc(100% - 36px);
      }
      .quiz-stage-main { padding-top: 46px; }
      .quiz-case-card {
        padding: 18px;
        border-radius: 24px;
      }
      .quiz-case-card .question-title h2 {
        font-size: 24px;
        line-height: 1.18;
      }
      .quiz-case-card .q-num {
        width: 42px;
        height: 42px;
        border-radius: 15px;
      }
      .quiz-option-card.option {
        min-height: 60px;
        padding: 14px;
      }
      .quiz-result-panel,
      .quiz-review {
        padding-left: 18px;
        padding-right: 18px;
      }
      .quiz-stage-actions {
        padding: 20px 18px 22px;
      }
      .page-top { align-items: flex-start; flex-direction: column; }
      .search-row { align-items: stretch; flex-direction: column; }
      .kb-course-search .btn { width: 100%; }
      .section-button { align-items: flex-start; gap: 12px; padding: 16px; }
      .section-num { width: 38px; height: 38px; border-radius: 13px; }
      .lesson-row { align-items: flex-start; gap: 10px; padding: 13px 10px; }
      .question-title { gap: 12px; }
      .q-num { width: 40px; height: 40px; }
      .question-nav { gap: 6px; }
      .q-nav-btn { width: 40px; height: 40px; border-radius: 14px; }
      .field-row { grid-template-columns: 1fr; }
      .modal-overlay { align-items: flex-start; padding: 14px; }
      .modal-overlay.support-overlay {
        align-items: flex-end;
        justify-content: center;
        padding: 0 10px 76px;
      }
      .modal-box { padding: 24px 18px; border-radius: 24px; }
      .support-modal-box {
        width: min(370px, calc(100vw - 20px));
        max-width: min(370px, calc(100vw - 20px));
        height: min(600px, calc(100vh - 96px));
        padding: 0;
        border-radius: 10px;
      }
      .support-modal-box.support-new-ticket-box {
        height: auto;
        max-height: min(600px, calc(100vh - 96px));
      }
      .actions { flex-direction: column; }
      .btn { width: 100%; }
      .staff-table { min-width: 680px; }
      .support-sidebar { position: static; }
      .support-fab {
        right: 14px;
        bottom: 14px;
        min-width: 176px;
        height: 46px;
      }
      .analytics-cockpit { padding: 18px; border-radius: 24px; }
      .analytics-suite { padding: 0; border-radius: 24px; }
      .analytics-suite-top { padding: 20px; }
      .analytics-panels { padding: 16px; gap: 12px; }
      .analytics-title { font-size: 27px; }
      .analytics-summary { font-size: 14px; }
      .analytics-score { width: 112px; height: 112px; border-radius: 50%; }
      .analytics-score span { font-size: 29px; }
      .cockpit-top { flex-direction: column; margin-bottom: 16px; }
      .cockpit-title { font-size: 24px; }
      .cockpit-command { min-height: 0; padding: 16px; border-radius: 20px; }
      .cockpit-score-row { grid-template-columns: 132px minmax(0, 1fr); gap: 14px; }
      .cockpit-score-ring { width: 132px; height: 90px; border-radius: 21px; }
      .cockpit-score-ring span { font-size: 28px; }
      .cockpit-score-title { font-size: 21px; }
      .cockpit-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
      .cockpit-metric { min-height: 112px; padding: 14px; border-radius: 18px; }
      .cockpit-metric-value { font-size: 26px; }
      .cockpit-lane { min-height: 0; padding: 16px; border-radius: 20px; }
      .modal-box.staff-detail-box { max-width: 100%; }
      .staff-detail { padding: 22px; }
      .staff-detail-head { flex-direction: column; }
      .staff-detail-summary,
      .staff-detail-sections { grid-template-columns: 1fr; }
      .staff-detail-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .staff-detail .modal-title { font-size: 26px; }
      .kb-editor-layout { grid-template-columns: 1fr; }
      .kb-editor-section-list,
      .kb-editor-article-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .insight-board { padding: 16px; border-radius: 22px; }
      .insight-board-head { flex-direction: column; margin-bottom: 14px; }
      .insight-board-title { font-size: 21px; }
      .insight-command { min-height: 0; padding: 18px; border-radius: 18px; }
      .insight-title { font-size: 23px; }
      .insight-signal-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
      .insight-signal { min-height: 78px; padding: 14px; border-radius: 16px; }
      .insight-signal-value { font-size: 25px; }
      .insight-column { min-height: 0; padding: 16px; border-radius: 18px; }
      .club-picker-list { grid-template-columns: 1fr; }
      .club-dashboard-head { flex-direction: column; padding: 18px; border-radius: 22px; }
      .club-dashboard-head h3 { font-size: 24px; }
      .kb-hero-copy, .kb-spotlight { padding: 22px; border-radius: 24px; }
      .kb-article { padding: 22px; }
      .kb-article-head { flex-direction: column; }
      .kb-article-head h3 { font-size: 25px; }
      .kb-lessons { padding: 0 12px 12px; }
      .modal-box.kb-reader-modal { max-width: 100%; }
      .kb-reader-modal .kb-article-body { max-height: none; overflow: visible; padding-right: 0; }
      .kb-topic-list, .kb-mini-grid { grid-template-columns: 1fr; }
      .kb-grid { grid-template-columns: 1fr; }
      .kb-section-head { align-items: flex-start; flex-direction: column; }
      .kb-section-head h3 { font-size: 24px; }
      h1 { font-size: 40px; line-height: 1.08; }
      h2 { font-size: 32px; line-height: 1.12; }
      .hero-title { font-size: 40px; line-height: 1.16; }
      .lead { font-size: 16px; line-height: 1.68; }
      .content-head h1 { font-size: 34px; }
      .question-title h2 { font-size: 24px; }
    }
    @media (max-width: 420px) {
      h1 { font-size: 36px; }
      h2 { font-size: 29px; }
      .hero-title { font-size: 36px; }
      .header-inner { gap: 10px; }
      .role-tag { padding-inline: 0; }
      .btn-sm { padding-inline: 10px; }
      .cockpit-metrics { grid-template-columns: 1fr; }
      .analytics-kpis { grid-template-columns: 1fr; }
      .analytics-panel-head { flex-direction: column; }
      .analytics-panel-head b { white-space: normal; }
      .analytics-row { align-items: flex-start; flex-direction: column; }
      .analytics-row b { align-self: flex-start; }
      .admin-overview-main { padding: 20px; }
      .admin-overview-kpis { grid-template-columns: 1fr 1fr; }
      .admin-overview-kpis div { min-height: 92px; padding: 15px; }
      .admin-overview-kpis b { font-size: 26px; }
      .support-modal-head,
      .support-detail-head {
        flex-direction: column;
      }
      .support-message { max-width: 100%; }
      .cockpit-score-row { grid-template-columns: 1fr; }
      .cockpit-score-ring { width: 100%; max-width: 170px; height: 92px; }
      .staff-detail { padding: 18px; }
      .staff-detail-kpis { grid-template-columns: 1fr; }
      .staff-detail-row { grid-template-columns: 1fr; }
      .staff-detail-value { text-align: left; }
      .staff-detail-actions .btn { width: 100%; }
      .kb-editor-section-list,
      .kb-editor-article-list { grid-template-columns: 1fr; }
      .kb-editor-actions .btn { width: 100%; }
    }
    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }
      *,
      *::before,
      *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
      }
      .coach-guide,
      .coach-guide::before,
      .coach-guide img,
      .page.container:not(.hidden) {
        animation: none !important;
      }
    }

    /* ── Typography hard pass: final override after legacy premium blocks ── */
    html,
    body,
    button,
    input,
    select,
    textarea,
    .manager-shell,
    .modal-box,
    .support-modal-box,
    .kb-reader-modal {
      font-family: var(--font-ui) !important;
    }
    body {
      color: var(--text-secondary) !important;
      font-size: 15px;
      font-weight: 500;
      line-height: 1.56;
      letter-spacing: 0;
    }

    h1,
    .hero-title,
    .content-head h1,
    .manager-hero-row h1,
    .manager-employees-hero h1 {
      color: var(--text-primary) !important;
      font-size: clamp(40px, 2.2vw, 42px) !important;
      font-weight: 750 !important;
      line-height: 1.05 !important;
      letter-spacing: -0.03em !important;
    }
    h2,
    .kb-hero-copy h2,
    .kb-section-head h3,
    .read-box h2,
    .question-title h2 {
      color: var(--text-primary) !important;
      font-size: clamp(27px, 1.75vw, 32px) !important;
      font-weight: 700 !important;
      line-height: 1.15 !important;
      letter-spacing: -0.024em !important;
    }
    h3,
    .modal-title,
    .manager-alert-copy h3,
    .manager-card-head b,
    .manager-person-main b,
    .manager-course-main b,
    .manager-rank-main b,
    .manager-activity-row b,
    .manager-signal-row b,
    .manager-employee-person b,
    .section-name,
    .lesson-title,
    .accordion-title,
    .kb-article-head h3,
    .support-chat-title,
    .support-detail-title,
    .support-ticket-row span,
    .club-card-name,
    .club-picker-name {
      color: var(--text-primary) !important;
      font-weight: 700 !important;
      line-height: 1.24 !important;
      letter-spacing: -0.014em !important;
    }

    p,
    .lead,
    .content-head p,
    .catalog-head p,
    .manager-alert-copy p,
    .manager-hero-row p,
    .section-desc,
    .lesson-meta,
    .accordion-meta,
    .read-box,
    .read-box p,
    .kb-article-body,
    .kb-reader-modal .kb-article-body,
    .support-message,
    .support-message-text,
    .support-chat-sub,
    .support-detail-meta,
    .modal-sub,
    .login-sub {
      color: var(--text-secondary) !important;
      font-size: 14.5px !important;
      font-weight: 500 !important;
      line-height: 1.58 !important;
    }
    small,
    .manager-person-main small,
    .manager-course-main small,
    .manager-employee-person small,
    .manager-employee-progress small,
    .manager-employee-tests small,
    .manager-shell-profile span,
    .manager-activity-row small,
    .manager-activity-row em,
    .manager-signal-row small,
    .support-message-meta,
    .support-chat-foot,
    .support-ticket-row small,
    .login-support,
    .club-card-meta,
    .club-picker-meta,
    .time-chip,
    .section-count,
    .lesson-status {
      color: var(--text-muted) !important;
      font-size: 13px !important;
      font-weight: 450 !important;
      line-height: 1.42 !important;
    }

    .overline,
    .small-title,
    .pill,
    .box-title,
    .field label,
    .login-card .field label,
    .staff-table th,
    .manager-welcome,
    .manager-alert-copy span,
    .manager-card-head span,
    .manager-employees-list-head,
    .support-create-box label,
    .support-modal-list .small-title,
    .kb-article-meta,
    .kb-lessons-title,
    .kb-editor-sidebar h3,
    .kb-editor-panel h3 {
      color: rgba(255,154,189,.78) !important;
      font-size: 10px !important;
      font-weight: 700 !important;
      line-height: 1.35 !important;
      letter-spacing: .14em !important;
      text-transform: uppercase !important;
      margin-bottom: 12px;
    }
    .manager-alert-copy span,
    .manager-card-head span,
    .box-title,
    .small-title {
      display: inline-block;
      margin-bottom: 10px !important;
    }

    .btn,
    button,
    .manager-quick-actions button,
    .manager-card-head button,
    .manager-small-btn,
    .manager-card-link,
    .manager-employee-actions button,
    .support-icon-btn,
    .support-send-btn,
    .support-mini-action,
    .support-status-chip,
    .score-badge,
    .status-pill,
    .manager-status {
      font-size: 13px !important;
      font-weight: 650 !important;
      line-height: 1.25 !important;
      letter-spacing: 0 !important;
    }

    input,
    textarea,
    select,
    .login-card .login-input-wrap input,
    .manager-shell-search input,
    .support-composer textarea,
    .support-create-box input,
    .support-create-box textarea,
    .support-category-select {
      color: var(--text-primary) !important;
      font-size: 14.5px !important;
      font-weight: 500 !important;
      line-height: 1.45 !important;
    }
    input::placeholder,
    textarea::placeholder,
    .field input::placeholder,
    .search input::placeholder,
    .manager-shell-search input::placeholder,
    .support-composer textarea::placeholder,
    .support-create-box input::placeholder,
    .support-create-box textarea::placeholder {
      color: rgba(201,190,200,.62) !important;
      font-weight: 450 !important;
    }

    .manager-shell-nav button {
      color: var(--text-muted) !important;
      font-size: 14px !important;
      font-weight: 500 !important;
      line-height: 1.24 !important;
    }
    .manager-shell-nav button.active {
      color: var(--text-primary) !important;
      font-weight: 600 !important;
    }
    .manager-shell-nav button:hover {
      color: var(--text-primary) !important;
      font-weight: 600 !important;
    }
    .manager-shell-profile b {
      color: var(--text-primary) !important;
      font-size: 14px !important;
      font-weight: 650 !important;
      line-height: 1.22 !important;
    }
    .manager-shell-search span,
    .search span {
      color: var(--text-muted) !important;
    }

    .manager-alert-copy p {
      max-width: 640px !important;
      overflow: visible !important;
      display: block !important;
      -webkit-line-clamp: unset !important;
    }
    .manager-person-main,
    .manager-rank-main,
    .manager-course-main,
    .manager-employee-person span:last-child,
    .support-ticket-row > div:first-child {
      min-width: 0;
    }
    .manager-person-main b,
    .manager-course-main b,
    .manager-rank-main b,
    .manager-employee-person b,
    .support-ticket-row span,
    .lesson-title,
    .section-name {
      white-space: normal !important;
      overflow: visible !important;
      text-overflow: clip !important;
    }

    .manager-metric b,
    .manager-donut b,
    .stat-num,
    .circle-score,
    .progress-percent,
    .admin-overview-kpis b {
      color: var(--text-primary) !important;
      font-size: clamp(26px, 1.65vw, 30px) !important;
      font-weight: 780 !important;
      line-height: 1 !important;
      letter-spacing: -0.03em !important;
    }
    .manager-metric span,
    .manager-metric small,
    .manager-donut small,
    .manager-donut span {
      color: var(--text-muted) !important;
      font-size: 13px !important;
      font-weight: 450 !important;
      line-height: 1.35 !important;
      letter-spacing: 0 !important;
    }
    .manager-metric.good b,
    .score-badge.ok,
    .manager-activity-row span.good,
    .lesson-row.done .lesson-status {
      color: var(--text-success) !important;
    }
    .manager-metric.risk b,
    .manager-status.risk,
    .score-badge.bad,
    .manager-activity-row span.risk {
      color: var(--text-danger) !important;
    }

    .manager-card,
    .manager-alert-card,
    .manager-metric {
      text-rendering: geometricPrecision;
    }
    .manager-person-row,
    .manager-course-row,
    .manager-rank-row,
    .manager-activity-row,
    .manager-employee-row,
    .support-ticket-row {
      line-height: 1.38;
    }

    .option,
    .answer-option,
    .quiz-option {
      color: var(--text-secondary) !important;
      font-size: 14.5px !important;
      font-weight: 500 !important;
      line-height: 1.5 !important;
    }
    .letter,
    .q-num,
    .section-num,
    .lesson-icon,
    .status-dot,
    .manager-avatar,
    .manager-rank-place {
      font-weight: 700 !important;
    }

    .login-wordmark-title {
      font-size: clamp(30px, 3.1vw, 42px) !important;
      font-weight: 800 !important;
      line-height: .96 !important;
      letter-spacing: .09em !important;
    }
    .login-wordmark-subtitle {
      color: rgba(255,154,189,.82) !important;
      font-size: 10.5px !important;
      font-weight: 700 !important;
      letter-spacing: .24em !important;
    }
    .login-title {
      font-size: clamp(34px, 2.65vw, 42px) !important;
      font-weight: 750 !important;
      line-height: 1.05 !important;
      letter-spacing: -0.03em !important;
    }

    [style*="color:var(--text-muted)"],
    [style*="color: var(--text-muted)"],
    [style*="color:#777783"],
    [style*="color: #777783"],
    [style*="color:#aaaab5"],
    [style*="color: #aaaab5"] {
      color: var(--text-muted) !important;
    }
    [style*="font-weight:900"],
    [style*="font-weight: 900"],
    [style*="font-weight:950"],
    [style*="font-weight: 950"],
    [style*="font-weight:850"],
    [style*="font-weight: 850"] {
      font-weight: 700 !important;
    }
    [style*="font-size:38px"],
    [style*="font-size: 38px"],
    [style*="font-size:40px"],
    [style*="font-size: 40px"] {
      font-size: 30px !important;
      line-height: 1.05 !important;
    }

    /* ── Final visual polish: premium dark SaaS depth ── */
    :root {
      --glass-bg: rgba(22, 20, 28, .78);
      --glass-bg-strong: rgba(18, 16, 24, .86);
      --glass-border: rgba(255,255,255,.075);
      --glass-border-hover: rgba(255,154,189,.20);
      --glass-shadow: 0 18px 54px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.055);
      --glass-shadow-hover: 0 24px 72px rgba(0,0,0,.42), 0 0 34px rgba(255,79,139,.055), inset 0 1px 0 rgba(255,255,255,.075);
      --polish-ease: cubic-bezier(.2,.8,.2,1);
    }
    body {
      background:
        radial-gradient(circle at 54% 10%, rgba(255,79,139,.115), transparent 420px),
        radial-gradient(circle at 82% 34%, rgba(112,74,144,.10), transparent 520px),
        radial-gradient(circle at 16% 72%, rgba(255,79,139,.070), transparent 520px),
        linear-gradient(90deg, rgba(0,0,0,.48), transparent 18% 82%, rgba(0,0,0,.52)),
        linear-gradient(180deg, rgba(0,0,0,.36), transparent 22% 74%, rgba(0,0,0,.54)),
        repeating-linear-gradient(135deg, rgba(255,255,255,.013) 0 1px, transparent 1px 24px),
        #050409 !important;
    }
    body::before {
      width: 680px !important;
      height: 680px !important;
      left: 22vw !important;
      top: 6vh !important;
      background: radial-gradient(circle, rgba(255,79,139,.115), transparent 68%) !important;
      filter: blur(18px) !important;
      opacity: .88 !important;
    }
    body::after {
      width: 760px !important;
      height: 760px !important;
      right: -260px !important;
      bottom: -220px !important;
      background: radial-gradient(circle, rgba(88,54,112,.15), transparent 72%) !important;
      filter: blur(18px) !important;
      opacity: .82 !important;
    }
    main::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: -1;
      background:
        radial-gradient(ellipse at center, transparent 0 48%, rgba(0,0,0,.20) 78%, rgba(0,0,0,.42) 100%);
    }

    .panel,
    .card,
    .accordion,
    .read-box,
    .next-box,
    .quiz-card,
    .quiz-case-card,
    .staff-table-wrap,
    .modal-box,
    .kb-article,
    .kb-spotlight,
    .kb-hero-copy,
    .kb-reader-modal,
    .support-modal-box,
    .support-premium-workspace .support-sidebar,
    .support-premium-workspace .support-detail,
    .manager-alert-card,
    .manager-card,
    .manager-metric,
    .manager-employees-panel,
    .manager-employee-row {
      background:
        linear-gradient(180deg, rgba(255,255,255,.034), rgba(255,255,255,.010)),
        var(--glass-bg) !important;
      border: 1px solid var(--glass-border) !important;
      box-shadow: var(--glass-shadow) !important;
      backdrop-filter: blur(18px) saturate(1.08);
      -webkit-backdrop-filter: blur(18px) saturate(1.08);
      transition:
        transform 190ms var(--polish-ease),
        border-color 190ms var(--polish-ease),
        box-shadow 190ms var(--polish-ease),
        background 190ms var(--polish-ease);
    }
    .manager-alert-card,
    .manager-card,
    .manager-metric,
    .manager-employees-panel,
    .support-modal-box,
    .modal-box {
      border-radius: 24px !important;
    }
    .manager-card:hover,
    .manager-metric:hover,
    .manager-employee-row:hover,
    .accordion:hover,
    .kb-article:hover,
    .support-modal-box .support-ticket-row:hover {
      transform: translateY(-1.5px);
      border-color: var(--glass-border-hover) !important;
      box-shadow: var(--glass-shadow-hover) !important;
    }

    .manager-alert-card {
      min-height: 172px !important;
      height: auto !important;
      background:
        radial-gradient(circle at 11% 50%, rgba(255,79,139,.14), transparent 260px),
        linear-gradient(100deg, rgba(33,21,34,.84), rgba(16,15,22,.82) 58%, rgba(12,11,17,.88)),
        var(--glass-bg-strong) !important;
      border-color: rgba(255,154,189,.14) !important;
      box-shadow:
        0 24px 82px rgba(0,0,0,.42),
        0 0 54px rgba(255,79,139,.065),
        inset 0 1px 0 rgba(255,255,255,.07) !important;
    }
    .manager-alert-card::before {
      opacity: .52 !important;
    }
    .manager-alert-icon {
      width: 70px !important;
      height: 70px !important;
      border-radius: 22px !important;
      background:
        radial-gradient(circle at 50% 38%, rgba(255,154,189,.20), transparent 58%),
        rgba(255,79,139,.085) !important;
      border: 1px solid rgba(255,154,189,.24) !important;
      box-shadow: 0 0 30px rgba(255,79,139,.13), inset 0 1px 0 rgba(255,255,255,.06) !important;
    }
    .manager-alert-icon svg {
      width: 28px !important;
      height: 28px !important;
      stroke-width: 1.85 !important;
    }
    .manager-alert-copy p {
      display: block !important;
      max-width: 640px !important;
      margin-bottom: 14px !important;
      overflow: visible !important;
      color: rgba(201,190,200,.88) !important;
    }
    .manager-small-btn,
    .manager-card-head button,
    .manager-card-link {
      background:
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)),
        rgba(255,255,255,.030) !important;
      border: 1px solid rgba(255,255,255,.10) !important;
      color: var(--text-secondary) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.045) !important;
    }
    .manager-small-btn:hover,
    .manager-card-head button:hover,
    .manager-card-link:hover {
      border-color: rgba(255,154,189,.22) !important;
      color: var(--text-primary) !important;
      box-shadow: 0 10px 28px rgba(255,79,139,.075), inset 0 1px 0 rgba(255,255,255,.07) !important;
    }

    .manager-donut {
      width: 112px !important;
      height: 112px !important;
      background:
        conic-gradient(var(--text-accent-soft) calc(var(--score) * 1%), rgba(255,255,255,.10) 0),
        rgba(255,255,255,.03) !important;
      box-shadow: 0 16px 38px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.045) !important;
    }
    .manager-donut::before {
      inset: 11px !important;
      background: linear-gradient(180deg, #07060b, #0d0a11) !important;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.045) !important;
    }

    .manager-metrics-grid {
      gap: 14px !important;
    }
    .manager-metric {
      min-height: 118px !important;
      grid-template-columns: 48px minmax(0,1fr) !important;
      align-items: center !important;
      gap: 15px !important;
      padding: 18px !important;
      border-radius: 22px !important;
    }
    .manager-metric i,
    .manager-course-cover,
    .manager-signal-row i,
    .support-avatar {
      width: 46px !important;
      height: 46px !important;
      border-radius: 16px !important;
      display: grid !important;
      place-items: center !important;
      background:
        radial-gradient(circle at 50% 35%, rgba(255,154,189,.18), transparent 60%),
        rgba(255,79,139,.075) !important;
      border: 1px solid rgba(255,154,189,.15) !important;
      box-shadow: 0 0 28px rgba(255,79,139,.07), inset 0 1px 0 rgba(255,255,255,.055) !important;
    }
    .manager-metric.good i,
    .manager-course-row.good .manager-course-cover {
      background:
        radial-gradient(circle at 50% 35%, rgba(54,226,154,.16), transparent 60%),
        rgba(54,226,154,.070) !important;
      border-color: rgba(54,226,154,.14) !important;
      box-shadow: 0 0 28px rgba(54,226,154,.06), inset 0 1px 0 rgba(255,255,255,.05) !important;
    }
    .manager-metric svg,
    .manager-course-cover svg,
    .manager-signal-row svg,
    .manager-shell svg {
      width: 19px !important;
      height: 19px !important;
      stroke-width: 1.85 !important;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .manager-metric b {
      margin-bottom: 5px;
    }

    .manager-dashboard-grid {
      gap: 20px !important;
      align-items: start !important;
    }
    .manager-card {
      padding: 22px !important;
      min-height: 312px !important;
    }
    .manager-card-head {
      align-items: center !important;
      min-height: 34px;
      margin-bottom: 18px !important;
    }
    .manager-card-head b {
      margin-top: 4px !important;
    }
    .manager-person-row,
    .manager-course-row,
    .manager-rank-row,
    .manager-activity-row,
    .manager-signal-row {
      background:
        linear-gradient(180deg, rgba(255,255,255,.030), rgba(255,255,255,.012)),
        rgba(255,255,255,.024) !important;
      border: 1px solid rgba(255,255,255,.065) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
      transition:
        transform 180ms var(--polish-ease),
        border-color 180ms var(--polish-ease),
        background 180ms var(--polish-ease),
        box-shadow 180ms var(--polish-ease);
    }
    .manager-person-row:hover,
    .manager-course-row:hover,
    .manager-rank-row:hover,
    .manager-activity-row:hover,
    .manager-signal-row:hover {
      transform: translateY(-1px);
      border-color: rgba(255,154,189,.15) !important;
      background:
        linear-gradient(180deg, rgba(255,255,255,.044), rgba(255,255,255,.016)),
        rgba(255,255,255,.032) !important;
    }
    .manager-person-row.is-risk {
      border-color: rgba(255,107,154,.22) !important;
      background:
        linear-gradient(180deg, rgba(255,79,139,.075), rgba(255,255,255,.012)),
        rgba(255,255,255,.022) !important;
    }
    .manager-course-main em,
    .manager-rank-main em,
    .manager-employee-progress em,
    .prog-bar,
    .coach-progress {
      height: 3px !important;
      border-radius: 999px !important;
      background: rgba(255,255,255,.085) !important;
      overflow: hidden;
    }
    .manager-course-main em i,
    .manager-rank-main em i,
    .manager-employee-progress em i,
    .prog-fill,
    .coach-progress-fill {
      border-radius: inherit !important;
      background: linear-gradient(90deg, rgba(255,79,139,.92), rgba(255,154,189,.86)) !important;
      box-shadow: 0 0 14px rgba(255,79,139,.16) !important;
      transition: width 220ms var(--polish-ease), transform 220ms var(--polish-ease) !important;
    }

    .manager-shell-sidebar {
      background:
        linear-gradient(180deg, rgba(10,8,15,.94), rgba(5,4,9,.98)),
        rgba(5,4,9,.96) !important;
      border-right: 1px solid rgba(255,255,255,.055) !important;
      box-shadow: inset -1px 0 0 rgba(255,79,139,.035) !important;
      padding-top: 26px !important;
    }
    .manager-shell-brand {
      padding: 0 10px 24px !important;
      margin-bottom: 6px !important;
      border-bottom: 1px solid rgba(255,255,255,.065) !important;
    }
    .manager-shell-brand span {
      box-shadow: 0 0 28px rgba(255,79,139,.105) !important;
    }
    .manager-shell-nav {
      gap: 7px !important;
      margin-top: 22px !important;
    }
    .manager-shell-nav button {
      position: relative;
      min-height: 44px !important;
      padding-left: 14px !important;
      border: 1px solid transparent !important;
      border-radius: 15px !important;
      transition:
        background 180ms var(--polish-ease),
        color 180ms var(--polish-ease),
        border-color 180ms var(--polish-ease),
        transform 180ms var(--polish-ease),
        box-shadow 180ms var(--polish-ease);
    }
    .manager-shell-nav button::before {
      content: "";
      position: absolute;
      left: 0;
      top: 12px;
      bottom: 12px;
      width: 2px;
      border-radius: 999px;
      background: transparent;
      transition: background 180ms var(--polish-ease), box-shadow 180ms var(--polish-ease);
    }
    .manager-shell-nav button:hover {
      background: rgba(255,255,255,.035) !important;
      border-color: rgba(255,255,255,.055) !important;
      transform: translateX(1px);
    }
    .manager-shell-nav button.active {
      background:
        linear-gradient(90deg, rgba(255,79,139,.13), rgba(255,255,255,.030)) !important;
      border-color: rgba(255,154,189,.18) !important;
      box-shadow: 0 12px 30px rgba(255,79,139,.065), inset 0 1px 0 rgba(255,255,255,.045) !important;
    }
    .manager-shell-nav button.active::before {
      background: var(--text-accent) !important;
      box-shadow: 0 0 16px rgba(255,79,139,.38);
    }

    .manager-shell-topbar {
      min-height: 72px !important;
      background:
        linear-gradient(180deg, rgba(14,12,18,.86), rgba(7,6,10,.78)) !important;
      border-bottom: 1px solid rgba(255,255,255,.06) !important;
      box-shadow: 0 10px 34px rgba(0,0,0,.22) !important;
      backdrop-filter: blur(16px) saturate(1.08);
    }
    .manager-shell-search {
      min-height: 42px !important;
      background:
        linear-gradient(180deg, rgba(255,255,255,.036), rgba(255,255,255,.012)),
        rgba(255,255,255,.018) !important;
      border: 1px solid rgba(255,255,255,.080) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
      transition: border-color 180ms var(--polish-ease), box-shadow 180ms var(--polish-ease), background 180ms var(--polish-ease);
    }
    .manager-shell-search:focus-within {
      border-color: rgba(255,154,189,.24) !important;
      box-shadow: 0 0 0 4px rgba(255,79,139,.035), inset 0 1px 0 rgba(255,255,255,.055) !important;
      background: rgba(255,255,255,.030) !important;
    }
    .manager-notification,
    .manager-profile-avatar,
    .manager-avatar,
    .manager-rank-place {
      box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
    }
    .manager-shell-profile {
      padding: 6px 8px !important;
      border-radius: 16px !important;
      background: rgba(255,255,255,.020) !important;
      border: 1px solid rgba(255,255,255,.055) !important;
    }

    .support-fab {
      min-height: 46px !important;
      padding: 0 16px 0 10px !important;
      border-radius: 18px !important;
      background:
        linear-gradient(180deg, rgba(255,79,139,.22), rgba(255,79,139,.12)),
        rgba(22,20,28,.86) !important;
      border: 1px solid rgba(255,154,189,.24) !important;
      box-shadow: 0 16px 42px rgba(0,0,0,.34), 0 0 28px rgba(255,79,139,.10) !important;
    }
    .support-fab span {
      width: 30px !important;
      height: 30px !important;
      border-radius: 12px !important;
      background: rgba(255,255,255,.09) !important;
    }
    .support-fab:hover {
      box-shadow: 0 20px 54px rgba(0,0,0,.42), 0 0 34px rgba(255,79,139,.15) !important;
    }
    .support-modal-box .support-chat,
    .support-premium-workspace .support-chat.hr-view {
      background:
        radial-gradient(circle at 50% 0%, rgba(255,79,139,.055), transparent 260px),
        rgba(6,5,10,.72) !important;
    }
    .support-message {
      border-radius: 15px !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
    }

    @media (prefers-reduced-motion: reduce) {
      .manager-card,
      .manager-metric,
      .manager-alert-card,
      .manager-person-row,
      .manager-course-row,
      .manager-rank-row,
      .manager-activity-row,
      .manager-signal-row,
      .manager-shell-nav button,
      .manager-shell-search,
      .support-fab,
      .btn,
      button {
        transition: none !important;
        transform: none !important;
      }
    }

    /* ── Premium circular progress system ── */
    .manager-donut,
    .analytics-score,
    .circle.quiz-circle {
      --ring-track: rgba(43, 42, 50, .94);
      --ring-inner: #06050a;
      position: relative !important;
      width: clamp(120px, 7.1vw, 132px) !important;
      height: clamp(120px, 7.1vw, 132px) !important;
      flex: 0 0 auto !important;
      display: grid !important;
      place-items: center !important;
      border-radius: 50% !important;
      isolation: isolate;
      background:
        conic-gradient(
          from -90deg,
          #FF6AA8 0%,
          #FF4F8B calc(var(--score) * .62%),
          #F7C2D9 calc(var(--score) * 1%),
          var(--ring-track) 0 100%
        ) !important;
      border: 1px solid rgba(255,255,255,.075) !important;
      box-shadow:
        0 18px 44px rgba(0,0,0,.34),
        0 0 38px rgba(255,79,139,.085),
        inset 0 1px 0 rgba(255,255,255,.055),
        inset 0 -10px 24px rgba(0,0,0,.28) !important;
      overflow: visible !important;
      transform: translateZ(0);
      transition:
        filter 680ms var(--polish-ease),
        box-shadow 680ms var(--polish-ease),
        transform 220ms var(--polish-ease) !important;
    }
    .circle.quiz-circle {
      background:
        conic-gradient(
          from -90deg,
          #FF6AA8 0%,
          #FF4F8B calc(var(--score) * .62),
          #F7C2D9 var(--score),
          var(--ring-track) 0 100%
        ) !important;
      padding: 0 !important;
      margin: 18px auto !important;
    }
    .manager-donut::after,
    .analytics-score::after,
    .circle.quiz-circle::after {
      content: "";
      position: absolute;
      inset: -8px;
      border-radius: inherit;
      background:
        conic-gradient(
          from -90deg,
          rgba(255,106,168,.86) 0%,
          rgba(255,79,139,.82) calc(var(--score) * .62%),
          rgba(247,194,217,.72) calc(var(--score) * 1%),
          transparent 0 100%
        );
      filter: blur(9px);
      opacity: .34;
      z-index: 0;
      pointer-events: none;
    }
    .circle.quiz-circle::after {
      background:
        conic-gradient(
          from -90deg,
          rgba(255,106,168,.86) 0%,
          rgba(255,79,139,.82) calc(var(--score) * .62),
          rgba(247,194,217,.72) var(--score),
          transparent 0 100%
        );
    }
    .manager-donut::before,
    .analytics-score::before,
    .circle.quiz-circle .circle-inner {
      content: "";
      position: absolute !important;
      inset: 11px !important;
      width: auto !important;
      height: auto !important;
      border-radius: 50% !important;
      background:
        radial-gradient(circle at 50% 16%, rgba(255,255,255,.050), transparent 42%),
        linear-gradient(180deg, rgba(13,11,18,.98), rgba(4,3,8,.98)) !important;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.065),
        inset 0 -16px 30px rgba(0,0,0,.50),
        inset 0 0 0 1px rgba(255,255,255,.045),
        0 0 0 1px rgba(0,0,0,.18) !important;
      z-index: 1 !important;
    }
    .manager-donut div,
    .analytics-score span,
    .analytics-score em,
    .circle.quiz-circle .circle-inner > div {
      position: relative !important;
      z-index: 2 !important;
      text-align: center !important;
    }
    .manager-donut div,
    .circle.quiz-circle .circle-inner {
      display: grid !important;
      place-items: center !important;
    }
    .analytics-score {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
    }
    .manager-donut b,
    .analytics-score span,
    .circle-score {
      color: #FFF8FB !important;
      font-size: clamp(30px, 1.9vw, 34px) !important;
      font-weight: 800 !important;
      line-height: 1 !important;
      letter-spacing: -0.04em !important;
      text-shadow: 0 14px 32px rgba(0,0,0,.42) !important;
    }
    .manager-donut b small,
    .analytics-score span small {
      color: #F7C2D9 !important;
      font-size: .42em !important;
      font-weight: 800 !important;
      margin-left: 1px;
      vertical-align: .12em;
      letter-spacing: -0.02em !important;
    }
    .manager-donut span,
    .analytics-score em,
    .quiz-circle-caption {
      max-width: 78px !important;
      margin-top: 7px !important;
      color: rgba(224,203,215,.72) !important;
      font-size: 10px !important;
      font-style: normal !important;
      font-weight: 700 !important;
      line-height: 1.18 !important;
      letter-spacing: .13em !important;
      text-transform: uppercase !important;
    }
    .manager-donut:hover,
    .analytics-score:hover,
    .circle.quiz-circle:hover {
      transform: translateY(-1px) translateZ(0);
      box-shadow:
        0 22px 54px rgba(0,0,0,.40),
        0 0 44px rgba(255,79,139,.12),
        inset 0 1px 0 rgba(255,255,255,.070),
        inset 0 -10px 24px rgba(0,0,0,.30) !important;
    }

    @keyframes premium-ring-settle {
      from {
        opacity: .68;
        filter: saturate(.86) brightness(.88);
        transform: scale(.985);
      }
      to {
        opacity: 1;
        filter: saturate(1) brightness(1);
        transform: scale(1);
      }
    }
    .manager-donut,
    .analytics-score,
    .circle.quiz-circle {
      animation: premium-ring-settle 720ms var(--polish-ease) both;
    }

    .progress-percent {
      width: 64px !important;
      height: 64px !important;
      border-radius: 50% !important;
      display: grid !important;
      place-items: center !important;
      color: #FFF8FB !important;
      background:
        radial-gradient(circle at 50% 38%, rgba(255,154,189,.13), transparent 58%),
        linear-gradient(180deg, rgba(17,15,23,.96), rgba(6,5,10,.98)) !important;
      border: 1px solid rgba(255,154,189,.16) !important;
      box-shadow:
        0 14px 34px rgba(0,0,0,.30),
        0 0 24px rgba(255,79,139,.075),
        inset 0 1px 0 rgba(255,255,255,.055),
        inset 0 -12px 24px rgba(0,0,0,.42) !important;
      font-size: 19px !important;
      font-weight: 800 !important;
      letter-spacing: -0.035em !important;
    }
    .cockpit-score-ring {
      border-radius: 24px !important;
      background:
        radial-gradient(circle at 18% 12%, rgba(255,154,189,.13), transparent 58%),
        linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)),
        rgba(18,16,24,.82) !important;
      border: 1px solid rgba(255,255,255,.075) !important;
      box-shadow:
        0 18px 44px rgba(0,0,0,.32),
        0 0 30px rgba(255,79,139,.065),
        inset 0 1px 0 rgba(255,255,255,.060) !important;
    }
    .cockpit-score-ring::before {
      height: 4px !important;
      background: linear-gradient(90deg, #FF6AA8, #FF4F8B 58%, #F7C2D9) !important;
      box-shadow: 0 0 16px rgba(255,79,139,.18) !important;
    }
    .cockpit-score-ring::after {
      height: 4px !important;
      background: rgba(255,255,255,.080) !important;
      box-shadow: inset 0 1px 2px rgba(0,0,0,.44) !important;
    }
    .cockpit-score-ring span {
      color: #FFF8FB !important;
      font-size: 30px !important;
      font-weight: 800 !important;
      letter-spacing: -0.035em !important;
    }
    .cockpit-score-ring small {
      color: #F7C2D9 !important;
      font-weight: 800 !important;
    }
    @media (prefers-reduced-motion: reduce) {
      .manager-donut,
      .analytics-score,
      .circle.quiz-circle {
        animation: none !important;
        transition: none !important;
      }
      .manager-donut:hover,
      .analytics-score:hover,
      .circle.quiz-circle:hover {
        transform: none !important;
      }
    }

    /* ── Clean SVG donut for hero average progress only ── */
    .manager-donut.manager-donut-svg {
      position: relative !important;
      width: 124px !important;
      height: 124px !important;
      display: grid !important;
      place-items: center !important;
      border: 0 !important;
      border-radius: 50% !important;
      background: transparent !important;
      box-shadow: none !important;
      overflow: visible !important;
      isolation: isolate;
      animation: none !important;
      transition: none !important;
    }
    .manager-donut.manager-donut-svg::before,
    .manager-donut.manager-donut-svg::after {
      content: none !important;
      display: none !important;
    }
    .manager-donut-ring {
      position: absolute;
      inset: 0;
      width: 100% !important;
      height: 100% !important;
      max-width: none !important;
      max-height: none !important;
      overflow: visible;
      filter: drop-shadow(0 8px 18px rgba(0,0,0,.22));
      z-index: 1;
    }
    .manager-shell .manager-donut-ring {
      width: 100% !important;
      height: 100% !important;
    }
    .manager-donut-track,
    .manager-donut-progress {
      fill: none;
      stroke-width: 9;
    }
    .manager-donut-track {
      stroke: rgba(255,255,255,.085);
    }
    .manager-donut-progress {
      stroke-linecap: round;
      filter: drop-shadow(0 0 5px rgba(255,79,139,.16));
      transition: stroke-dasharray 680ms cubic-bezier(.2,.8,.2,1);
    }
    .manager-donut-center {
      position: relative !important;
      z-index: 2 !important;
      width: 88px;
      height: 88px;
      display: flex !important;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      border-radius: 50%;
      background: rgba(10, 10, 14, .72) !important;
      border: 1px solid rgba(255,255,255,.06);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.045),
        inset 0 -14px 26px rgba(0,0,0,.26);
    }
    .manager-donut.manager-donut-svg b {
      color: #F7F3F7 !important;
      font-size: 30px !important;
      font-weight: 800 !important;
      line-height: 1 !important;
      letter-spacing: -0.035em !important;
      text-shadow: none !important;
    }
    .manager-donut.manager-donut-svg b small {
      color: #F7F3F7 !important;
      font-size: .42em !important;
      font-weight: 800 !important;
      margin-left: 1px;
      vertical-align: .12em;
    }
    .manager-donut.manager-donut-svg span {
      max-width: 74px !important;
      margin-top: 6px !important;
      color: #C9BEC8 !important;
      font-size: 9.5px !important;
      font-weight: 700 !important;
      line-height: 1.16 !important;
      letter-spacing: .12em !important;
      text-transform: uppercase !important;
      text-shadow: none !important;
    }
    .manager-donut.manager-donut-svg:hover {
      transform: none !important;
      box-shadow: none !important;
    }
    @media (max-width: 880px) {
      .manager-donut.manager-donut-svg {
        width: 116px !important;
        height: 116px !important;
      }
      .manager-donut-center {
        width: 82px;
        height: 82px;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .manager-donut-progress {
        transition: none !important;
      }
    }

    /* ── Reference-style clean hero donut: compact, readable, no dirty glow ── */
    .manager-alert-card .manager-donut.manager-donut-svg {
      width: 116px !important;
      height: 116px !important;
      min-width: 116px !important;
      min-height: 116px !important;
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
      filter: none !important;
      transform: none !important;
    }
    .manager-alert-card .manager-donut.manager-donut-svg::before,
    .manager-alert-card .manager-donut.manager-donut-svg::after {
      content: none !important;
      display: none !important;
    }
    .manager-alert-card .manager-donut-ring,
    .manager-shell .manager-alert-card .manager-donut-ring {
      position: absolute !important;
      inset: 0 !important;
      width: 116px !important;
      height: 116px !important;
      max-width: 116px !important;
      max-height: 116px !important;
      filter: none !important;
      overflow: visible !important;
      z-index: 1 !important;
    }
    .manager-shell .manager-alert-card .manager-donut-ring .manager-donut-track,
    .manager-alert-card .manager-donut-ring .manager-donut-track {
      fill: none !important;
      stroke: rgba(255,255,255,.082) !important;
      stroke-width: 11px !important;
      filter: drop-shadow(0 1px 1px rgba(0,0,0,.34)) !important;
    }
    .manager-shell .manager-alert-card .manager-donut-ring .manager-donut-progress,
    .manager-alert-card .manager-donut-ring .manager-donut-progress {
      fill: none !important;
      stroke-width: 11px !important;
      stroke-linecap: round !important;
      filter: drop-shadow(0 0 4px rgba(255,79,139,.22)) !important;
    }
    .manager-alert-card .manager-donut-center {
      width: 74px !important;
      height: 74px !important;
      border-radius: 50% !important;
      background: rgba(10,10,14,.72) !important;
      border: 1px solid rgba(255,255,255,.06) !important;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.045),
        inset 0 -12px 22px rgba(0,0,0,.32) !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      flex-direction: column !important;
      text-align: center !important;
      z-index: 2 !important;
    }
    .manager-alert-card .manager-donut.manager-donut-svg b {
      color: #F7F3F7 !important;
      font-size: 28px !important;
      font-weight: 800 !important;
      line-height: 1 !important;
      letter-spacing: -0.035em !important;
      text-shadow: none !important;
    }
    .manager-alert-card .manager-donut.manager-donut-svg b small {
      color: #F7F3F7 !important;
      font-size: .42em !important;
      font-weight: 800 !important;
      margin-left: 1px !important;
      vertical-align: .12em !important;
    }
    .manager-alert-card .manager-donut.manager-donut-svg span {
      max-width: 64px !important;
      margin-top: 7px !important;
      color: #C9BEC8 !important;
      font-size: 8.8px !important;
      font-weight: 700 !important;
      line-height: 1.18 !important;
      letter-spacing: .12em !important;
      text-transform: uppercase !important;
      text-shadow: none !important;
    }
    @media (max-width: 880px) {
      .manager-alert-card .manager-donut.manager-donut-svg {
        width: 108px !important;
        height: 108px !important;
        min-width: 108px !important;
        min-height: 108px !important;
      }
      .manager-alert-card .manager-donut-ring,
      .manager-shell .manager-alert-card .manager-donut-ring {
        width: 108px !important;
        height: 108px !important;
        max-width: 108px !important;
        max-height: 108px !important;
      }
      .manager-alert-card .manager-donut-center {
        width: 70px !important;
        height: 70px !important;
      }
    }



    /* ── Final UX fixes: modal inputs, dropdowns, scroll lock ── */
    body.modal-open {
      overflow: hidden !important;
      touch-action: none;
    }
    .modal-input {
      width: 100%;
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 16px;
      padding: 14px 18px;
      color: var(--text-primary);
      font-size: 15px;
      outline: none;
      transition: border-color .18s var(--polish-ease, ease), box-shadow .18s var(--polish-ease, ease), background .18s var(--polish-ease, ease);
    }
    .modal-input::placeholder { color: rgba(201,190,200,.52); }
    .modal-input:focus {
      border-color: rgba(255,154,189,.44);
      background: rgba(255,255,255,.065);
      box-shadow: 0 0 0 3px rgba(255,79,139,.10);
    }
    .floating-dropdown {
      position: fixed;
      z-index: 500;
      width: min(380px, calc(100vw - 24px));
      max-height: min(72vh, 560px);
      overflow: auto;
      padding: 10px;
      border-radius: 20px;
      border: 1px solid rgba(255,255,255,.10);
      background:
        linear-gradient(180deg, rgba(27,24,32,.96), rgba(12,11,16,.98));
      box-shadow:
        0 24px 70px rgba(0,0,0,.52),
        0 0 0 1px rgba(255,79,139,.045),
        inset 0 1px 0 rgba(255,255,255,.06);
      backdrop-filter: blur(16px) saturate(1.08);
      color: var(--text-secondary);
    }
    .floating-dropdown.hidden { display: none !important; }
    .dropdown-head {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 10px 12px;
      border-bottom: 1px solid rgba(255,255,255,.07);
      margin-bottom: 8px;
    }
    .dropdown-title {
      color: var(--text-primary);
      font-size: 15px;
      font-weight: 800;
      line-height: 1.2;
    }
    .dropdown-sub {
      margin-top: 2px;
      color: var(--text-muted);
      font-size: 12px;
      font-weight: 500;
    }
    .dropdown-action,
    .dropdown-row-button {
      width: 100%;
      border: 0;
      background: transparent;
      color: inherit;
      text-align: left;
      font: inherit;
      cursor: pointer;
    }
    .dropdown-action {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 11px 12px;
      border-radius: 14px;
      color: var(--text-secondary);
      transition: background .18s var(--polish-ease, ease), color .18s var(--polish-ease, ease), transform .18s var(--polish-ease, ease);
    }
    .dropdown-action:hover {
      background: rgba(255,255,255,.055);
      color: var(--text-primary);
      transform: translateY(-1px);
    }
    .dropdown-action.danger { color: var(--text-danger); }
    .dropdown-action small { color: var(--text-muted); font-size: 12px; }
    .dropdown-divider {
      height: 1px;
      margin: 8px 4px;
      background: rgba(255,255,255,.075);
    }
    .dropdown-empty {
      padding: 18px 12px;
      color: var(--text-muted);
      font-size: 13px;
      line-height: 1.45;
    }
    .notification-dropdown-list {
      display: grid;
      gap: 8px;
    }
    .notification-dropdown-list .notification-row {
      grid-template-columns: 38px minmax(0, 1fr);
      padding: 10px;
      border-radius: 15px;
    }
    .notification-dropdown-list .notification-icon {
      width: 38px;
      height: 38px;
      border-radius: 14px;
    }
    .notification-dropdown-footer {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      padding: 10px 2px 0;
      margin-top: 8px;
      border-top: 1px solid rgba(255,255,255,.07);
    }
    @media (max-width: 560px) {
      .floating-dropdown {
        left: 12px !important;
        right: 12px !important;
        top: 72px !important;
        width: auto;
        max-height: calc(100vh - 92px);
      }
    }

    /* ── Functional polish: notifications, assignments, course analytics ── */
    .header-notification-btn,
    .user-meta-button,
    .manager-profile-button {
      border: 0;
      background: transparent;
      color: inherit;
      font: inherit;
    }
    .header-notification-btn {
      position: relative;
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.09);
      background: rgba(255,255,255,.035);
      color: var(--text-secondary);
    }
    .header-notification-btn svg {
      width: 18px;
      height: 18px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .header-notification-btn em,
    .manager-notification em {
      position: absolute;
      min-width: 18px;
      height: 18px;
      right: -5px;
      top: -5px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      background: var(--text-accent);
      color: white;
      font-size: 10px;
      font-style: normal;
      font-weight: 800;
      box-shadow: 0 0 18px rgba(255,79,139,.28);
    }
    .user-meta-button {
      text-align: left;
      padding: 0;
      cursor: pointer;
    }
    .manager-profile-button {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      min-height: 42px;
      padding: 4px 8px 4px 4px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.055);
      background: rgba(255,255,255,.020);
      text-align: left;
      cursor: pointer;
    }
    .manager-profile-button small {
      display: block;
      margin-top: 2px;
      color: var(--text-muted) !important;
      font-size: 12px !important;
      font-weight: 500 !important;
    }
    .manager-beta-action {
      cursor: default !important;
      opacity: .86;
    }
    .manager-beta-action em {
      margin-left: 4px;
      padding: 2px 6px;
      border-radius: 999px;
      background: rgba(255,154,189,.10);
      border: 1px solid rgba(255,154,189,.18);
      color: var(--text-accent-soft);
      font-size: 10px;
      font-style: normal;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .modal-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 20px;
    }
    .notification-list,
    .assignment-staff-list,
    .course-analytics-list {
      display: grid;
      gap: 10px;
      max-height: min(54vh, 520px);
      overflow: auto;
      padding-right: 4px;
    }
    .notification-row,
    .assignment-staff-row,
    .course-analytics-row,
    .course-analytics-person {
      width: 100%;
      display: grid;
      align-items: center;
      gap: 12px;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,.075);
      background: rgba(255,255,255,.030);
      color: var(--text-secondary);
      text-align: left;
      padding: 12px;
      transition: border-color .18s var(--polish-ease), background .18s var(--polish-ease), transform .18s var(--polish-ease);
    }
    .notification-row {
      grid-template-columns: 42px minmax(0, 1fr);
    }
    .notification-row.unread {
      border-color: rgba(255,154,189,.20);
      background: rgba(255,79,139,.050);
    }
    .notification-row:hover,
    .assignment-staff-row:hover,
    .course-analytics-row:hover,
    .course-analytics-person:hover {
      transform: translateY(-1px);
      border-color: rgba(255,154,189,.18);
      background: rgba(255,255,255,.042);
    }
    .notification-icon {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 15px;
      background: rgba(255,79,139,.08);
      border: 1px solid rgba(255,154,189,.15);
    }
    .notification-icon svg {
      width: 19px;
      height: 19px;
      fill: none;
      stroke: var(--text-accent-soft);
      stroke-width: 1.8;
    }
    .notification-row b,
    .assignment-staff-row b,
    .course-analytics-person b {
      display: block;
      color: var(--text-primary);
      font-weight: 700;
    }
    .notification-row small,
    .assignment-staff-row small,
    .course-analytics-person small {
      display: block;
      margin-top: 3px;
      color: var(--text-muted) !important;
      font-size: 12.5px !important;
    }
    .notification-row em {
      display: block;
      margin-top: 5px;
      color: var(--text-subtle);
      font-size: 11px;
      font-style: normal;
    }
    .account-menu-head {
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .assignment-layout {
      display: grid;
      grid-template-columns: minmax(260px, .9fr) minmax(280px, 1fr);
      gap: 16px;
      margin-top: 18px;
    }
    .assignment-panel,
    .course-analytics-section {
      border: 1px solid rgba(255,255,255,.075);
      border-radius: 22px;
      background: rgba(255,255,255,.026);
      padding: 16px;
    }
    .assignment-toolbar {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 12px;
    }
    .assignment-staff-row {
      grid-template-columns: 18px 38px minmax(0, 1fr);
      cursor: pointer;
    }
    .assignment-staff-row input {
      accent-color: var(--text-accent);
    }
    .assignment-message {
      width: 100%;
      resize: vertical;
      min-height: 118px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.035);
      color: var(--text-primary);
      padding: 13px 15px;
      outline: none;
    }
    .course-analytics-box {
      max-width: min(1080px, calc(100vw - 32px)) !important;
    }
    .course-analytics-modal {
      display: grid;
      gap: 14px;
      margin-top: 18px;
      max-height: min(62vh, 650px);
      overflow: auto;
      padding-right: 4px;
    }
    .course-analytics-head {
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr) auto;
      gap: 14px;
      align-items: center;
      margin-bottom: 14px;
    }
    .course-analytics-head h3 {
      margin: 2px 0 4px;
      font-size: 20px;
    }
    .course-analytics-head p {
      margin: 0;
      color: var(--text-muted) !important;
      font-size: 13px !important;
    }
    .course-analytics-head strong {
      color: var(--text-primary);
      font-size: 28px;
      font-weight: 800;
      letter-spacing: -0.03em;
    }
    .course-analytics-kpis {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 12px;
    }
    .course-analytics-kpis div {
      border: 1px solid rgba(255,255,255,.065);
      border-radius: 16px;
      background: rgba(255,255,255,.026);
      padding: 12px;
    }
    .course-analytics-kpis b {
      display: block;
      color: var(--text-primary);
      font-size: 20px;
      font-weight: 800;
    }
    .course-analytics-kpis span {
      color: var(--text-muted);
      font-size: 12px;
    }
    .course-analytics-person {
      grid-template-columns: 38px minmax(0, 1fr) auto;
    }
    .course-analytics-person em {
      display: block;
      height: 3px;
      margin-top: 8px;
      border-radius: 999px;
      background: rgba(255,255,255,.085);
      overflow: hidden;
    }
    .course-analytics-person em i {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--text-accent), var(--text-accent-soft));
    }
    .course-analytics-person strong {
      color: var(--text-success);
      font-weight: 800;
    }

    /* ── Bugfix polish: assignment modal and compact topbar profile ── */
    .modal-box.assignment-modal {
      width: min(940px, calc(100vw - 32px)) !important;
      max-width: min(940px, calc(100vw - 32px)) !important;
      overflow-x: hidden !important;
      padding: 32px !important;
    }
    .modal-box.assignment-modal .modal-title {
      font-size: 25px !important;
      line-height: 1.16 !important;
    }
    .modal-box.assignment-modal .modal-sub {
      max-width: 640px;
      margin-bottom: 22px !important;
      color: var(--text-secondary) !important;
      line-height: 1.55 !important;
    }
    .modal-box.assignment-modal .assignment-layout {
      grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr) !important;
      gap: 16px !important;
      align-items: stretch;
      min-width: 0;
    }
    .modal-box.assignment-modal .assignment-panel {
      min-width: 0;
      overflow: hidden;
      border-radius: 22px;
    }
    .modal-box.assignment-modal .assignment-staff-list {
      display: grid;
      gap: 10px;
      max-height: min(46vh, 430px);
      overflow: auto;
      padding-right: 2px;
      scrollbar-width: thin;
      scrollbar-color: rgba(255,91,136,.45) rgba(255,255,255,.035);
    }
    .modal-box.assignment-modal .assignment-staff-row {
      display: grid;
      grid-template-columns: 18px 38px minmax(0, 1fr) !important;
      align-items: center;
      gap: 12px;
      min-width: 0;
      width: 100%;
      padding: 14px;
      border-radius: 18px;
      box-sizing: border-box;
    }
    .modal-box.assignment-modal .assignment-staff-row > span:last-child,
    .modal-box.assignment-modal .assignment-staff-row b,
    .modal-box.assignment-modal .assignment-staff-row small {
      min-width: 0;
      max-width: 100%;
      overflow-wrap: anywhere;
    }
    .modal-box.assignment-modal .assignment-staff-row b {
      line-height: 1.25;
    }
    .modal-box.assignment-modal .assignment-staff-row small {
      line-height: 1.35;
    }
    .modal-box.assignment-modal .field {
      min-width: 0;
      margin-bottom: 14px;
    }
    .modal-box.assignment-modal .field-select,
    .modal-box.assignment-modal .assignment-message {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      box-sizing: border-box;
    }
    .modal-box.assignment-modal .field-select {
      height: 50px;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .modal-box.assignment-modal .assignment-message {
      min-height: 128px;
      line-height: 1.48;
    }
    .modal-box.assignment-modal .modal-actions {
      justify-content: flex-end;
      align-items: center;
      gap: 12px;
      padding-top: 2px;
    }
    .modal-box.assignment-modal .modal-actions .btn {
      min-width: 0;
      user-select: none;
    }
    .manager-shell-topbar .manager-shell-profile {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      min-width: max-content;
    }
    .manager-shell-topbar .manager-profile-button {
      height: 52px;
      min-height: 52px;
      min-width: 196px;
      max-width: 256px;
      justify-content: flex-start;
      flex: 0 0 auto;
      gap: 11px;
      padding: 5px 13px 5px 6px;
      box-sizing: border-box;
      border-radius: 18px;
      background:
        linear-gradient(145deg, rgba(255,255,255,.050), rgba(255,255,255,.018)),
        rgba(10,9,14,.42);
      border-color: rgba(255,255,255,.075);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.055),
        0 12px 28px rgba(0,0,0,.18);
    }
    .manager-shell-topbar .manager-profile-button > span:last-child {
      display: grid;
      gap: 1px;
      min-width: 0;
    }
    .manager-shell-topbar .manager-profile-button b {
      display: block;
      max-width: 152px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 1.18;
    }
    .manager-shell-topbar .manager-profile-button small {
      display: block;
      white-space: nowrap;
      line-height: 1.2;
    }
    .manager-shell-topbar .manager-profile-avatar {
      width: 40px !important;
      height: 40px !important;
      min-width: 40px !important;
      max-width: 40px !important;
      flex: 0 0 40px !important;
      display: grid !important;
      place-items: center !important;
      margin: 0 !important;
      overflow: hidden !important;
      border-radius: 50% !important;
      color: #fff8fb !important;
      font-size: 11.5px !important;
      font-weight: 800 !important;
      line-height: 1 !important;
      letter-spacing: .01em !important;
      text-align: center !important;
      text-overflow: clip !important;
      white-space: nowrap !important;
    }
    .manager-shell-topbar .manager-notification {
      width: 44px;
      height: 44px;
      flex: 0 0 44px;
      border-radius: 16px;
      box-sizing: border-box;
      background:
        linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.018)),
        rgba(10,9,14,.38);
      border-color: rgba(255,255,255,.075);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.052);
    }

    /* ── HR support compact workspace ── */
    .role-hr.manager-shell {
      height: 100vh;
      min-height: 100vh;
      overflow: hidden;
    }
    .role-hr .manager-shell-main {
      height: 100vh;
      min-height: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .role-hr .manager-shell-topbar {
      position: relative;
      flex: 0 0 72px;
    }
    .support-shell-content {
      flex: 1 1 auto;
      height: calc(100dvh - 72px) !important;
      min-height: 0;
      max-height: calc(100dvh - 72px) !important;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      padding: 18px 28px 18px !important;
    }
    .support-shell-content .page-top {
      flex: 0 0 auto;
      margin-bottom: 12px !important;
    }
    .support-shell-content .page-top h2 {
      font-size: 28px !important;
      line-height: 1.05 !important;
    }
    .support-shell-content .support-premium-workspace {
      flex: 1 1 0;
      min-height: 0 !important;
      height: 100% !important;
      max-height: none !important;
      display: grid;
      grid-template-columns: minmax(278px, 360px) minmax(0, 1fr);
      grid-template-rows: minmax(0, 1fr);
      overflow: hidden;
      border-radius: 24px;
      box-sizing: border-box;
    }
    .support-shell-content .support-sidebar,
    .support-shell-content .support-detail {
      min-height: 0 !important;
      height: 100% !important;
      overflow: hidden;
    }
    .support-shell-content .support-sidebar {
      display: flex;
      flex-direction: column;
    }
    .support-shell-content .support-sidebar-head {
      flex: 0 0 auto;
      padding: 15px 18px !important;
    }
    .support-shell-content .support-ticket-list {
      flex: 1 1 auto;
      min-height: 0;
      overflow: auto;
      padding: 10px !important;
      gap: 5px !important;
    }
    .support-shell-content .support-ticket-row {
      min-height: 0;
      padding: 12px !important;
      border-radius: 15px !important;
    }
    .support-shell-content .support-ticket-row span {
      font-size: 13px !important;
      line-height: 1.25 !important;
    }
    .support-shell-content .support-ticket-row small {
      margin-top: 3px;
      font-size: 12px !important;
      line-height: 1.32 !important;
    }
    .support-shell-content .support-detail {
      display: grid !important;
      grid-template-rows: auto minmax(0, 1fr) auto;
      min-width: 0;
      min-height: 0 !important;
      overflow: hidden !important;
    }
    .support-shell-content .support-detail-head {
      grid-row: 1;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 14px;
      align-items: start;
      padding: 14px 18px !important;
    }
    .support-shell-content .support-detail-title {
      font-size: 23px !important;
      line-height: 1.12 !important;
    }
    .support-shell-content .support-detail-meta {
      margin-top: 4px;
      font-size: 13px !important;
      line-height: 1.35 !important;
    }
    .support-shell-content .support-status-actions {
      justify-content: flex-end;
      gap: 7px;
      max-width: 390px;
    }
    .support-shell-content .support-status-chip {
      min-height: 34px;
      padding: 0 12px;
      border-radius: 14px;
      font-size: 12px !important;
    }
    .support-shell-content .support-chat.hr-view {
      grid-row: 2;
      display: flex !important;
      flex-direction: column;
      align-items: stretch;
      min-height: 0 !important;
      height: 100% !important;
      max-height: 100% !important;
      overflow-y: auto !important;
      overflow-x: hidden !important;
      padding: 14px !important;
      gap: 10px !important;
      align-content: start;
      margin: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
    }
    .support-shell-content .support-message {
      max-width: min(390px, 68%) !important;
      width: fit-content !important;
      flex: 0 0 auto;
      padding: 10px 12px !important;
      border-radius: 14px !important;
      font-size: 13px !important;
      line-height: 1.42 !important;
    }
    .support-shell-content .support-message.own {
      align-self: flex-end !important;
    }
    .support-shell-content .support-message:not(.own) {
      align-self: flex-start !important;
    }
    .support-shell-content .support-message-meta {
      margin-bottom: 4px;
      font-size: 10.5px !important;
      line-height: 1.25 !important;
    }
    .support-shell-content .support-reply {
      grid-row: 3;
      display: block !important;
      min-height: 58px;
      padding: 10px 12px !important;
      margin: 0 !important;
      border-radius: 0 !important;
      border-top: 1px solid rgba(255,255,255,.075) !important;
      background: rgba(12,11,17,.94) !important;
      position: relative;
      z-index: 10;
    }
    .support-shell-content .support-composer {
      min-height: 44px;
      gap: 8px;
    }
    .support-shell-content .support-composer textarea {
      min-height: 40px !important;
      max-height: 94px;
      padding-block: 10px !important;
      font-size: 13px !important;
    }
    .support-shell-content .support-icon-btn,
    .support-shell-content .support-send-btn {
      width: 36px;
      height: 36px;
      min-width: 36px;
    }
    @media (max-width: 760px) {
      .modal-box.assignment-modal {
        width: min(100%, calc(100vw - 24px)) !important;
        padding: 24px 18px !important;
      }
      .assignment-layout,
      .course-analytics-head,
      .course-analytics-kpis,
      .course-analytics-person {
        grid-template-columns: 1fr;
      }
      .modal-box.assignment-modal .assignment-layout {
        grid-template-columns: 1fr !important;
      }
      .manager-shell-topbar .manager-shell-profile {
        min-width: 0;
      }
      .manager-shell-topbar .manager-profile-button {
        min-width: 0;
        max-width: 180px;
      }
      .support-shell-content {
        height: auto;
        overflow: visible;
        padding: 18px 14px 76px !important;
      }
      .support-shell-content .support-premium-workspace {
        display: grid;
        grid-template-columns: 1fr;
        min-height: 620px !important;
      }
      .support-shell-content .support-detail-head {
        grid-template-columns: 1fr;
      }
      .support-shell-content .support-message {
        max-width: 88% !important;
      }
    }
  
    /* ── Final premium polish overrides ── */
    .manager-shell {
      --premium-edge: rgba(255,255,255,.085);
    }
    .manager-alert-card,
    .manager-card,
    .manager-metric-card {
      backdrop-filter: blur(14px) saturate(1.06);
      box-shadow:
        0 18px 48px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.035);
    }
    .manager-alert-card {
      grid-template-columns: 88px minmax(0, 1fr) 148px !important;
      gap: 22px !important;
      min-height: 206px;
    }
    .manager-alert-copy p {
      max-width: 62ch;
      color: var(--text-secondary);
      line-height: 1.55;
    }
    .manager-donut-premium {
      width: 128px !important;
      height: 128px !important;
      filter: drop-shadow(0 10px 26px rgba(0,0,0,.22));
    }
    .manager-donut-premium .manager-donut-track {
      stroke: rgba(255,255,255,.075) !important;
      stroke-width: 9 !important;
    }
    .manager-donut-premium .manager-donut-progress {
      stroke-width: 9 !important;
    }
    .manager-donut-premium .manager-donut-center {
      width: 88px !important;
      height: 88px !important;
      background:
        radial-gradient(circle at 30% 26%, rgba(255,255,255,.05), transparent 40%),
        linear-gradient(180deg, rgba(16,15,22,.96), rgba(7,7,12,.98)) !important;
      border: 1px solid rgba(255,255,255,.07) !important;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 12px 24px rgba(0,0,0,.18) !important;
    }
    .manager-donut-premium .manager-donut-center b {
      font-size: 28px !important;
    }
    .manager-donut-premium .manager-donut-center span {
      font-size: 8px !important;
      letter-spacing: .12em !important;
      max-width: 72px !important;
    }
    .beta-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 40px;
      height: 20px;
      margin-left: 8px;
      padding: 0 8px;
      border-radius: 999px;
      border: 1px solid rgba(255,154,189,.16);
      background: rgba(255,154,189,.085);
      color: rgba(255,220,231,.92);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .11em;
      text-transform: uppercase;
      line-height: 1;
    }
    .manager-quick-actions button,
    .manager-card-head button,
    .manager-small-btn,
    .manager-card-link {
      transition:
        transform .18s var(--polish-ease),
        box-shadow .18s var(--polish-ease),
        border-color .18s var(--polish-ease),
        background .18s var(--polish-ease);
    }
    .manager-quick-actions button:hover,
    .manager-card-head button:hover,
    .manager-small-btn:hover,
    .manager-card-link:hover {
      transform: translateY(-1px);
      box-shadow: 0 12px 24px rgba(0,0,0,.16);
    }
    .manager-alert-copy p {
      text-overflow: clip !important;
    }
    .manager-rank-note {
      margin-top: 4px;
      padding: 12px 14px;
      border-radius: 16px;
      border: 1px dashed rgba(255,255,255,.09);
      background: rgba(255,255,255,.018);
      color: var(--text-muted);
      font-size: 13px;
      line-height: 1.45;
    }
    .account-dropdown-compact {
      width: 240px !important;
      max-height: none;
      padding: 8px;
    }
    .dropdown-logout-only {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 2px;
      padding: 12px 14px;
      border-radius: 16px;
      background: linear-gradient(180deg, rgba(255,89,136,.08), rgba(255,255,255,.02));
      border: 1px solid rgba(255,95,145,.14);
    }
    .dropdown-logout-only span {
      font-weight: 700;
    }
    .dropdown-logout-only small {
      color: rgba(214,196,204,.68) !important;
    }

    /* ── Final alignment fixes ── */
    .manager-donut-premium {
      position: relative !important;
      display: grid !important;
      place-items: center !important;
      width: 124px !important;
      height: 124px !important;
      min-width: 124px !important;
      min-height: 124px !important;
      overflow: visible !important;
      border: 0 !important;
      background: transparent !important;
    }
    .manager-donut-premium .manager-donut-ring,
    .manager-shell .manager-donut-premium .manager-donut-ring {
      position: absolute !important;
      inset: 0 !important;
      width: 124px !important;
      height: 124px !important;
      max-width: 124px !important;
      max-height: 124px !important;
      display: block !important;
      overflow: visible !important;
      transform: none !important;
    }
    .manager-donut-premium .manager-donut-track,
    .manager-donut-premium .manager-donut-progress {
      stroke-width: 9 !important;
      fill: none !important;
      transform-box: fill-box !important;
      transform-origin: center !important;
    }
    .manager-donut-premium .manager-donut-progress {
      stroke-linecap: round !important;
      filter: drop-shadow(0 0 5px rgba(255,79,139,.2)) !important;
    }
    .manager-donut-premium .manager-donut-center {
      position: absolute !important;
      left: 50% !important;
      top: 50% !important;
      transform: translate(-50%, -50%) !important;
      width: 82px !important;
      height: 82px !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      text-align: center !important;
      padding: 0 !important;
      margin: 0 !important;
      border-radius: 50% !important;
      box-sizing: border-box !important;
    }
    .manager-donut-premium .manager-donut-center b {
      display: flex !important;
      align-items: flex-start !important;
      justify-content: center !important;
      margin: 0 !important;
      color: #F7F3F7 !important;
      font-size: 29px !important;
      font-weight: 800 !important;
      line-height: .92 !important;
      letter-spacing: -0.04em !important;
      text-align: center !important;
    }
    .manager-donut-premium .manager-donut-center b small {
      margin-left: 2px !important;
      margin-top: 4px !important;
      color: #F7F3F7 !important;
      font-size: 12px !important;
      line-height: 1 !important;
    }
    .manager-donut-premium .manager-donut-center span {
      display: block !important;
      max-width: 66px !important;
      margin: 6px auto 0 !important;
      color: #C9BEC8 !important;
      font-size: 8px !important;
      font-weight: 700 !important;
      line-height: 1.16 !important;
      letter-spacing: .12em !important;
      text-align: center !important;
      text-transform: uppercase !important;
    }

    /* ── Final premium dashboard polish ── */
    .manager-dashboard-page {
      background:
        radial-gradient(820px 520px at 33% 16%, rgba(255,79,139,.10), transparent 62%),
        radial-gradient(620px 440px at 82% 4%, rgba(123,66,255,.055), transparent 68%),
        linear-gradient(180deg, rgba(4,4,8,.98), rgba(7,5,10,.99)) !important;
    }
    .manager-dashboard-page::before {
      opacity: .28 !important;
    }
    .manager-shell {
      position: relative;
      isolation: isolate;
      background:
        radial-gradient(720px 420px at 43% 18%, rgba(255,79,139,.075), transparent 64%),
        radial-gradient(540px 360px at 92% 24%, rgba(255,138,182,.045), transparent 68%),
        linear-gradient(135deg, rgba(255,255,255,.018), transparent 38%) !important;
    }
    .manager-shell::after {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: -1;
      background:
        radial-gradient(circle at center, transparent 46%, rgba(0,0,0,.34) 100%),
        repeating-linear-gradient(135deg, rgba(255,255,255,.022) 0 1px, transparent 1px 24px);
      opacity: .58;
    }

    .manager-alert-card,
    .manager-card,
    .manager-metric {
      background:
        linear-gradient(180deg, rgba(255,255,255,.045), transparent 1px),
        radial-gradient(520px 220px at 8% 0%, rgba(255,79,139,.065), transparent 62%),
        rgba(22,20,28,.80) !important;
      border: 1px solid rgba(255,255,255,.082) !important;
      border-radius: 24px !important;
      box-shadow:
        0 22px 62px rgba(0,0,0,.32),
        inset 0 1px 0 rgba(255,255,255,.045) !important;
      transition:
        transform .18s cubic-bezier(.2,.8,.2,1),
        border-color .18s cubic-bezier(.2,.8,.2,1),
        box-shadow .18s cubic-bezier(.2,.8,.2,1),
        background .18s cubic-bezier(.2,.8,.2,1) !important;
    }
    .manager-alert-card:hover,
    .manager-card:hover,
    .manager-metric:hover {
      transform: translateY(-1px);
      border-color: rgba(255,154,189,.145) !important;
      box-shadow:
        0 24px 70px rgba(0,0,0,.36),
        0 0 34px rgba(255,79,139,.055),
        inset 0 1px 0 rgba(255,255,255,.06) !important;
    }

    .manager-alert-card {
      min-height: 178px !important;
      grid-template-columns: 86px minmax(0, 1fr) 144px !important;
      align-items: center !important;
      background:
        linear-gradient(180deg, rgba(255,255,255,.055), transparent 1px),
        radial-gradient(360px 220px at 7% 50%, rgba(255,79,139,.22), transparent 66%),
        radial-gradient(420px 230px at 78% 18%, rgba(255,138,182,.07), transparent 68%),
        linear-gradient(135deg, rgba(56,22,39,.72), rgba(15,14,22,.86) 48%, rgba(11,10,16,.92)) !important;
      border-color: rgba(255,110,166,.18) !important;
    }
    .manager-alert-card::before {
      opacity: .68 !important;
      background:
        radial-gradient(circle at 8% 52%, rgba(255,79,139,.18), transparent 27%),
        linear-gradient(90deg, rgba(255,255,255,.035), transparent 58%) !important;
    }
    .manager-alert-icon {
      width: 62px !important;
      height: 62px !important;
      border-radius: 20px !important;
      background:
        radial-gradient(circle at 35% 20%, rgba(255,255,255,.12), transparent 36%),
        linear-gradient(145deg, rgba(255,79,139,.19), rgba(255,79,139,.055)) !important;
      border: 1px solid rgba(255,122,174,.22) !important;
      color: rgba(255,154,189,.96) !important;
      box-shadow:
        0 0 30px rgba(255,79,139,.16),
        inset 0 1px 0 rgba(255,255,255,.07) !important;
    }
    .manager-alert-icon svg {
      width: 22px !important;
      height: 22px !important;
      stroke-width: 1.85 !important;
    }
    .manager-alert-copy span,
    .manager-card-head span {
      color: rgba(255,154,189,.86) !important;
      font-size: 10px !important;
      font-weight: 700 !important;
      letter-spacing: .145em !important;
      text-transform: uppercase !important;
    }
    .manager-alert-copy h3 {
      margin-top: 10px !important;
      margin-bottom: 8px !important;
      font-size: 26px !important;
      line-height: 1.14 !important;
      font-weight: 800 !important;
      letter-spacing: -.025em !important;
    }
    .manager-alert-copy p {
      max-width: 66ch !important;
      white-space: normal !important;
      overflow: visible !important;
      display: block !important;
      color: rgba(211,200,211,.84) !important;
      font-size: 14px !important;
      line-height: 1.55 !important;
    }
    .manager-small-btn,
    .manager-card-head button,
    .manager-card-link {
      min-height: 34px !important;
      padding: 0 14px !important;
      border-radius: 12px !important;
      border: 1px solid rgba(255,255,255,.10) !important;
      background: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.028)) !important;
      color: rgba(247,243,247,.9) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.045) !important;
    }

    .manager-donut-premium {
      width: 132px !important;
      height: 132px !important;
      min-width: 132px !important;
      min-height: 132px !important;
      filter: none !important;
    }
    .manager-donut-premium::before {
      content: "";
      position: absolute;
      inset: 10px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255,79,139,.08), transparent 64%);
      pointer-events: none;
    }
    .manager-donut-premium .manager-donut-ring,
    .manager-shell .manager-donut-premium .manager-donut-ring {
      width: 132px !important;
      height: 132px !important;
      max-width: 132px !important;
      max-height: 132px !important;
    }
    .manager-donut-premium .manager-donut-track {
      stroke: rgba(255,255,255,.085) !important;
      stroke-width: 9 !important;
    }
    .manager-donut-premium .manager-donut-progress {
      stroke-width: 9 !important;
      stroke-linecap: round !important;
      filter: drop-shadow(0 0 4px rgba(255,79,139,.18)) !important;
      transition: stroke-dasharray .72s cubic-bezier(.2,.8,.2,1) !important;
    }
    .manager-donut-premium .manager-donut-center {
      width: 86px !important;
      height: 86px !important;
      background:
        radial-gradient(circle at 35% 18%, rgba(255,255,255,.055), transparent 36%),
        rgba(10,10,14,.80) !important;
      border: 1px solid rgba(255,255,255,.07) !important;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.055),
        inset 0 -16px 28px rgba(0,0,0,.22) !important;
    }
    .manager-donut-premium .manager-donut-center b {
      font-size: 30px !important;
      line-height: .94 !important;
    }
    .manager-donut-premium .manager-donut-center span {
      max-width: 72px !important;
      font-size: 8.5px !important;
      line-height: 1.16 !important;
      color: rgba(201,190,200,.92) !important;
    }

    .manager-metrics-grid {
      gap: 16px !important;
    }
    .manager-metric {
      min-height: 120px !important;
      padding: 22px !important;
      align-items: center !important;
    }
    .manager-metric i,
    .manager-course-cover,
    .manager-signal-row i {
      width: 46px !important;
      height: 46px !important;
      border-radius: 16px !important;
      display: grid !important;
      place-items: center !important;
      background:
        radial-gradient(circle at 35% 18%, rgba(255,255,255,.12), transparent 34%),
        rgba(255,79,139,.10) !important;
      border: 1px solid rgba(255,154,189,.13) !important;
      box-shadow: 0 0 22px rgba(255,79,139,.08), inset 0 1px 0 rgba(255,255,255,.045) !important;
    }
    .manager-metric.good i {
      background:
        radial-gradient(circle at 35% 18%, rgba(255,255,255,.10), transparent 34%),
        rgba(54,226,154,.10) !important;
      border-color: rgba(54,226,154,.16) !important;
      box-shadow: 0 0 22px rgba(54,226,154,.08), inset 0 1px 0 rgba(255,255,255,.04) !important;
    }
    .manager-metric i svg,
    .manager-course-cover svg,
    .manager-signal-row i svg,
    .manager-shell-nav svg {
      width: 19px !important;
      height: 19px !important;
      stroke-width: 1.85 !important;
    }
    .manager-metric b {
      font-size: 29px !important;
      font-weight: 800 !important;
      letter-spacing: -.03em !important;
    }
    .manager-metric span {
      font-size: 13.5px !important;
      font-weight: 500 !important;
      color: rgba(201,190,200,.92) !important;
    }
    .manager-metric small {
      color: rgba(145,135,149,.9) !important;
      font-weight: 500 !important;
    }

    .manager-dashboard-grid {
      gap: 18px !important;
      align-items: start !important;
    }
    .manager-card {
      padding: 22px !important;
    }
    .manager-card-head {
      margin-bottom: 14px !important;
    }
    .manager-card-head b {
      margin-top: 10px !important;
      font-size: 19px !important;
      color: rgba(247,243,247,.96) !important;
    }
    .manager-card-hint {
      margin: -4px 0 14px;
      padding-bottom: 12px;
      border-bottom: 1px solid rgba(255,255,255,.055);
      color: rgba(201,190,200,.72);
      font-size: 12.5px;
      font-weight: 500;
      line-height: 1.35;
    }
    .manager-person-row,
    .manager-course-row,
    .manager-rank-row,
    .manager-activity-row,
    .manager-signal-row {
      border-radius: 16px !important;
      border-color: rgba(255,255,255,.075) !important;
      background:
        linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.016)) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
      transition:
        transform .18s cubic-bezier(.2,.8,.2,1),
        border-color .18s cubic-bezier(.2,.8,.2,1),
        background .18s cubic-bezier(.2,.8,.2,1) !important;
    }
    .manager-person-row:hover,
    .manager-course-row:hover,
    .manager-rank-row:hover,
    .manager-activity-row:hover {
      transform: translateY(-1px);
      border-color: rgba(255,154,189,.16) !important;
      background:
        linear-gradient(180deg, rgba(255,255,255,.052), rgba(255,255,255,.022)) !important;
    }
    .manager-person-row.is-risk {
      border-color: rgba(255,79,139,.25) !important;
      background:
        radial-gradient(240px 120px at 0% 50%, rgba(255,79,139,.105), transparent 64%),
        linear-gradient(180deg, rgba(255,79,139,.055), rgba(255,255,255,.018)) !important;
    }
    .manager-avatar {
      background:
        radial-gradient(circle at 35% 18%, rgba(255,255,255,.13), transparent 34%),
        linear-gradient(145deg, rgba(255,79,139,.48), rgba(120,29,67,.62)) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 22px rgba(255,79,139,.08) !important;
    }
    .manager-course-main em,
    .manager-rank-main em {
      height: 3px !important;
      border-radius: 999px !important;
      background: rgba(255,255,255,.095) !important;
    }
    .manager-course-main em i,
    .manager-rank-main em i {
      border-radius: inherit !important;
      background: linear-gradient(90deg, #FF4F8B, #FF8AB6) !important;
      box-shadow: 0 0 10px rgba(255,79,139,.22) !important;
    }
    .manager-rank-note {
      margin-top: 10px !important;
      padding: 13px 14px !important;
      border-style: solid !important;
      border-color: rgba(255,154,189,.12) !important;
      background:
        radial-gradient(220px 90px at 0% 0%, rgba(255,79,139,.10), transparent 64%),
        rgba(255,255,255,.026) !important;
      color: rgba(201,190,200,.86) !important;
    }
    .manager-rank-note b {
      color: rgba(247,243,247,.95);
    }

    .manager-shell-sidebar {
      background:
        linear-gradient(180deg, rgba(255,255,255,.018), transparent),
        rgba(5,5,10,.84) !important;
      border-right: 1px solid rgba(255,255,255,.055) !important;
    }
    .manager-shell-brand {
      padding: 22px 18px !important;
    }
    .manager-shell-nav button {
      min-height: 46px !important;
      border-radius: 15px !important;
      color: rgba(201,190,200,.78) !important;
      transition:
        transform .18s cubic-bezier(.2,.8,.2,1),
        color .18s cubic-bezier(.2,.8,.2,1),
        background .18s cubic-bezier(.2,.8,.2,1),
        border-color .18s cubic-bezier(.2,.8,.2,1) !important;
    }
    .manager-shell-nav button:hover {
      color: rgba(247,243,247,.9) !important;
      background: rgba(255,255,255,.035) !important;
      transform: translateX(1px);
    }
    .manager-shell-nav button.active {
      color: rgba(247,243,247,.98) !important;
      background:
        linear-gradient(90deg, rgba(255,79,139,.16), rgba(255,79,139,.055)) !important;
      border-color: rgba(255,79,139,.30) !important;
      box-shadow: 0 0 24px rgba(255,79,139,.075), inset 3px 0 0 rgba(255,79,139,.92) !important;
    }

    .manager-shell-topbar {
      background:
        linear-gradient(180deg, rgba(255,255,255,.024), rgba(255,255,255,.006)),
        rgba(8,7,12,.72) !important;
      border-bottom: 1px solid rgba(255,255,255,.055) !important;
      backdrop-filter: blur(16px);
    }
    .manager-shell-search {
      background: rgba(255,255,255,.028) !important;
      border-color: rgba(255,255,255,.085) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
    }
    .manager-shell-search:focus-within {
      border-color: rgba(255,154,189,.26) !important;
      box-shadow: 0 0 0 4px rgba(255,79,139,.055), inset 0 1px 0 rgba(255,255,255,.045) !important;
    }
    .manager-shell-search span {
      background: rgba(255,255,255,.045) !important;
      border: 1px solid rgba(255,255,255,.075) !important;
      color: rgba(201,190,200,.78) !important;
    }
    .manager-notification,
    .manager-profile-button,
    .user-meta-button {
      background:
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)) !important;
      border-color: rgba(255,255,255,.085) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
    }
    .manager-profile-button:hover,
    .manager-notification:hover {
      border-color: rgba(255,154,189,.18) !important;
      box-shadow: 0 0 22px rgba(255,79,139,.055), inset 0 1px 0 rgba(255,255,255,.05) !important;
    }
    .floating-dropdown.account-dropdown {
      border-radius: 20px !important;
      border: 1px solid rgba(255,154,189,.16) !important;
      background:
        linear-gradient(180deg, rgba(255,255,255,.052), rgba(255,255,255,.02)),
        rgba(18,16,24,.94) !important;
      box-shadow: 0 24px 60px rgba(0,0,0,.44), 0 0 26px rgba(255,79,139,.07) !important;
      backdrop-filter: blur(18px);
    }
    .dropdown-logout-only {
      min-height: 64px;
      justify-content: center;
      background:
        radial-gradient(220px 90px at 0% 0%, rgba(255,79,139,.11), transparent 64%),
        rgba(255,255,255,.025) !important;
      border-color: rgba(255,154,189,.14) !important;
    }

    .manager-quick-actions button {
      min-height: 44px !important;
      border-radius: 15px !important;
      border: 1px solid rgba(255,255,255,.10) !important;
      background:
        linear-gradient(180deg, rgba(255,255,255,.052), rgba(255,255,255,.02)) !important;
      color: rgba(247,243,247,.92) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
    }
    .manager-quick-actions button.primary {
      border-color: rgba(255,154,189,.24) !important;
      background: linear-gradient(135deg, #E93372, #FF6798) !important;
      box-shadow: 0 14px 30px rgba(255,79,139,.19), inset 0 1px 0 rgba(255,255,255,.18) !important;
    }
    .manager-quick-actions button:hover {
      transform: translateY(-1px);
      border-color: rgba(255,154,189,.20) !important;
      box-shadow: 0 16px 32px rgba(0,0,0,.18), 0 0 22px rgba(255,79,139,.06) !important;
    }
    .beta-badge {
      height: 18px !important;
      min-width: 35px !important;
      padding: 0 7px !important;
      margin-left: 7px !important;
      border-color: rgba(255,154,189,.14) !important;
      background: rgba(255,154,189,.06) !important;
      color: rgba(255,220,231,.76) !important;
      font-size: 9px !important;
      letter-spacing: .105em !important;
    }

    @media (prefers-reduced-motion: reduce) {
      .manager-alert-card,
      .manager-card,
      .manager-metric,
      .manager-shell-nav button,
      .manager-quick-actions button,
      .manager-person-row,
      .manager-course-row,
      .manager-rank-row,
      .manager-activity-row,
      .manager-donut-premium .manager-donut-progress {
        transition: none !important;
        transform: none !important;
      }
    }

    /* ── Clean SVG donut: no decorative arcs ── */
    .manager-alert-card .manager-donut-premium,
    .manager-donut-premium {
      position: relative !important;
      width: 122px !important;
      height: 122px !important;
      min-width: 122px !important;
      min-height: 122px !important;
      display: grid !important;
      place-items: center !important;
      overflow: visible !important;
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
      filter: none !important;
      transform: none !important;
    }
    .manager-alert-card .manager-donut-premium::before,
    .manager-alert-card .manager-donut-premium::after,
    .manager-donut-premium::before,
    .manager-donut-premium::after {
      content: none !important;
      display: none !important;
      background: none !important;
      box-shadow: none !important;
      mask: none !important;
      -webkit-mask: none !important;
    }
    .manager-donut-premium .manager-donut-ring,
    .manager-shell .manager-donut-premium .manager-donut-ring,
    .manager-alert-card .manager-donut-premium .manager-donut-ring {
      position: absolute !important;
      inset: 0 !important;
      width: 122px !important;
      height: 122px !important;
      max-width: 122px !important;
      max-height: 122px !important;
      display: block !important;
      overflow: visible !important;
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
      filter: none !important;
      transform: none !important;
    }
    .manager-donut-premium .manager-donut-track,
    .manager-shell .manager-donut-premium .manager-donut-track,
    .manager-alert-card .manager-donut-premium .manager-donut-track {
      fill: none !important;
      stroke: rgba(255,255,255,.08) !important;
      stroke-width: 8 !important;
      filter: none !important;
    }
    .manager-donut-premium .manager-donut-progress,
    .manager-shell .manager-donut-premium .manager-donut-progress,
    .manager-alert-card .manager-donut-premium .manager-donut-progress {
      fill: none !important;
      stroke-width: 8 !important;
      stroke-linecap: round !important;
      filter: none !important;
      transform: none !important;
      transform-box: view-box !important;
      transform-origin: 0 0 !important;
      transition: stroke-dasharray .62s cubic-bezier(.2,.8,.2,1) !important;
    }
    .manager-donut-premium .manager-donut-center,
    .manager-shell .manager-donut-premium .manager-donut-center,
    .manager-alert-card .manager-donut-premium .manager-donut-center {
      position: absolute !important;
      left: 50% !important;
      top: 50% !important;
      transform: translate(-50%, -50%) !important;
      width: 80px !important;
      height: 80px !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 0 !important;
      margin: 0 !important;
      border-radius: 50% !important;
      text-align: center !important;
      background: rgba(10,10,14,.78) !important;
      border: 1px solid rgba(255,255,255,.06) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 -12px 22px rgba(0,0,0,.18) !important;
    }
    .manager-donut-premium .manager-donut-center b {
      display: flex !important;
      align-items: flex-start !important;
      justify-content: center !important;
      margin: 0 !important;
      color: #F7F3F7 !important;
      font-size: 28px !important;
      font-weight: 800 !important;
      line-height: .94 !important;
      letter-spacing: -.035em !important;
      text-align: center !important;
    }
    .manager-donut-premium .manager-donut-center b small {
      margin-left: 2px !important;
      margin-top: 4px !important;
      color: #F7F3F7 !important;
      font-size: 11px !important;
      line-height: 1 !important;
    }
    .manager-donut-premium .manager-donut-center span {
      display: block !important;
      max-width: 68px !important;
      margin: 6px auto 0 !important;
      color: rgba(201,190,200,.9) !important;
      font-size: 8px !important;
      font-weight: 700 !important;
      line-height: 1.14 !important;
      letter-spacing: .12em !important;
      text-align: center !important;
      text-transform: uppercase !important;
    }

    /* ── Unified premium icon system ── */
    .manager-shell svg,
    .floating-dropdown svg,
    .support-modal-box svg,
    .support-fab svg,
    .support-shell-content svg,
    .header-notification-btn svg {
      width: 19px;
      height: 19px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.85;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex: 0 0 auto;
      display: block;
    }
    .manager-alert-icon,
    .manager-metric i,
    .manager-course-cover,
    .manager-signal-row i,
    .notification-icon,
    .support-icon-btn,
    .support-send-btn,
    .support-mini-action,
    .support-close,
    .dropdown-action-icon {
      display: grid !important;
      place-items: center !important;
      width: 46px !important;
      height: 46px !important;
      min-width: 46px !important;
      min-height: 46px !important;
      border-radius: 16px !important;
      color: rgba(255,154,189,.92) !important;
      background:
        radial-gradient(circle at 34% 20%, rgba(255,255,255,.12), transparent 36%),
        rgba(255,79,139,.095) !important;
      border: 1px solid rgba(255,154,189,.14) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 0 22px rgba(255,79,139,.07) !important;
    }
    .support-close,
    .support-mini-action,
    .support-icon-btn,
    .support-send-btn {
      width: 42px !important;
      height: 42px !important;
      min-width: 42px !important;
      min-height: 42px !important;
      border-radius: 14px !important;
      padding: 0 !important;
    }
    .support-send-btn {
      color: #fff !important;
      background: linear-gradient(135deg, rgba(255,79,139,.92), rgba(255,138,182,.82)) !important;
      border-color: rgba(255,154,189,.28) !important;
      box-shadow: 0 12px 24px rgba(255,79,139,.18), inset 0 1px 0 rgba(255,255,255,.16) !important;
    }
    .support-send-btn:not(:has(svg)) {
      width: auto !important;
      min-width: 104px !important;
      padding: 0 16px !important;
    }
    .manager-metric.good i {
      color: rgba(54,226,154,.92) !important;
      background:
        radial-gradient(circle at 34% 20%, rgba(255,255,255,.11), transparent 36%),
        rgba(54,226,154,.095) !important;
      border-color: rgba(54,226,154,.16) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 0 22px rgba(54,226,154,.07) !important;
    }
    .manager-metric.risk i,
    .manager-signal-row.risk i {
      color: rgba(255,138,182,.95) !important;
      background:
        radial-gradient(circle at 34% 20%, rgba(255,255,255,.11), transparent 36%),
        rgba(255,79,139,.105) !important;
      border-color: rgba(255,154,189,.18) !important;
    }
    .manager-shell-nav button svg {
      width: 20px !important;
      height: 20px !important;
      color: currentColor;
      opacity: .9;
    }
    .manager-shell-search svg {
      width: 18px !important;
      height: 18px !important;
      color: rgba(201,190,200,.68) !important;
    }
    .manager-quick-actions button svg,
    .manager-card-link svg {
      width: 18px !important;
      height: 18px !important;
      stroke-width: 1.9 !important;
    }
    .dropdown-logout-only {
      display: grid !important;
      grid-template-columns: 46px minmax(0, 1fr) !important;
      align-items: center !important;
      gap: 12px !important;
      padding: 10px !important;
    }
    .dropdown-logout-only > span {
      display: flex;
      min-width: 0;
      flex-direction: column;
      gap: 3px;
    }
    .dropdown-logout-only b {
      color: rgba(255,154,189,.96);
      font-size: 14px;
      line-height: 1.2;
    }
    .dropdown-logout-only small {
      font-size: 12.5px;
      line-height: 1.3;
    }
    .icon-box,
    .lesson-icon {
      width: 44px !important;
      height: 44px !important;
      min-width: 44px !important;
      border-radius: 15px !important;
      display: grid !important;
      place-items: center !important;
      color: rgba(255,154,189,.9) !important;
      background:
        radial-gradient(circle at 34% 20%, rgba(255,255,255,.11), transparent 36%),
        rgba(255,79,139,.075) !important;
      border: 1px solid rgba(255,154,189,.12) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 0 20px rgba(255,79,139,.055) !important;
      font-size: 12px !important;
      font-weight: 700 !important;
    }

    /* ── Premium dark glass coach dialogue bubble ── */
    .coach-speech {
      opacity: 1 !important;
      border: 1px solid rgba(255,154,189,.22) !important;
      border-radius: 24px !important;
      background:
        linear-gradient(135deg, rgba(18,15,25,.90), rgba(10,9,15,.78) 58%, rgba(255,79,139,.075)),
        rgba(10,9,15,.70) !important;
      color: #F7F3F7 !important;
      box-shadow:
        0 24px 60px rgba(0,0,0,.42),
        0 0 34px rgba(255,79,139,.12),
        inset 0 1px 0 rgba(255,255,255,.065) !important;
      backdrop-filter: blur(18px) saturate(1.16) !important;
      -webkit-backdrop-filter: blur(18px) saturate(1.16) !important;
    }
    .coach-speech::before {
      display: block !important;
      content: "" !important;
      position: absolute !important;
      inset: 1px !important;
      pointer-events: none !important;
      border-radius: inherit !important;
      background:
        linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.012)),
        radial-gradient(circle at 92% 42%, rgba(255,154,189,.12), transparent 180px) !important;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.028) !important;
      z-index: -1 !important;
    }
    .coach-speech::after {
      content: "" !important;
      position: absolute !important;
      right: -24px !important;
      top: 50% !important;
      width: 44px !important;
      height: 44px !important;
      border: 0 !important;
      border-radius: 10px !important;
      background:
        linear-gradient(135deg, rgba(18,15,25,.90), rgba(10,9,15,.76) 68%, rgba(255,79,139,.075)) !important;
      border-right: 1px solid rgba(255,154,189,.20) !important;
      border-top: 1px solid rgba(255,154,189,.16) !important;
      box-shadow: 12px 12px 28px rgba(0,0,0,.22) !important;
      transform: translateY(-50%) rotate(45deg) !important;
      pointer-events: none !important;
      z-index: -1 !important;
    }
    .coach-head,
    .coach-step,
    .coach-text {
      opacity: 1 !important;
    }
    .coach-head .box-title {
      color: rgba(255,154,189,.96) !important;
    }
    .coach-step {
      color: rgba(201,190,200,.84) !important;
    }
    .coach-text {
      color: #F7F3F7 !important;
      opacity: 1 !important;
      margin: 0 !important;
      text-align: center !important;
      font-size: clamp(17px, 1.18vw, 18px) !important;
      line-height: 1.58 !important;
      font-weight: 600 !important;
      letter-spacing: 0 !important;
      text-shadow: 0 2px 14px rgba(0,0,0,.35) !important;
    }
    @media (max-width: 780px) {
      .coach-speech {
        border-radius: 22px !important;
        padding: 18px 20px !important;
      }
      .coach-speech::after {
        display: none !important;
      }
      .coach-text {
        font-size: 16px !important;
        line-height: 1.58 !important;
      }
    }

    /* Owner academy route */
    .owner-readiness,
    .owner-route .panel,
    .owner-route-card,
    .owner-guide-card {
      background:
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)),
        rgba(19, 17, 24, .78);
      border: 1px solid rgba(255,255,255,.075);
      border-radius: 22px;
      box-shadow: 0 18px 45px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.055);
    }

    .owner-readiness {
      padding: 20px;
      margin: 18px 0 20px;
    }

    .owner-readiness-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 14px;
      margin-top: 16px;
    }

    .owner-readiness-item {
      padding: 14px;
      border: 1px solid rgba(255,255,255,.06);
      border-radius: 16px;
      background: rgba(255,255,255,.025);
    }

    .owner-readiness-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      color: var(--text-secondary);
      font-size: 13px;
      font-weight: 600;
    }

    .owner-readiness-top strong {
      color: var(--text-primary);
      font-size: 16px;
      font-weight: 800;
    }

    .owner-readiness-bar {
      height: 6px;
      margin-top: 12px;
      border-radius: 999px;
      overflow: hidden;
      background: rgba(255,255,255,.07);
    }

    .owner-readiness-bar span {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #FF4F8B, #FF9ABD);
      box-shadow: 0 0 16px rgba(255,79,139,.22);
    }

    .owner-route {
      margin: 0 0 22px;
    }

    .owner-route-summary {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
      padding: 22px 24px;
      margin-bottom: 14px;
    }

    .owner-route-summary h3 {
      margin: 6px 0 8px;
      color: var(--text-primary);
      font-size: 24px;
      line-height: 1.15;
      letter-spacing: -.02em;
      font-weight: 800;
    }

    .owner-route-grid,
    .owner-article-guide {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
    }

    .owner-article-guide {
      margin: 22px 0;
    }

    .owner-route-card,
    .owner-guide-card {
      padding: 18px;
      min-height: 146px;
    }

    .owner-guide-card.wide {
      grid-column: span 3;
      min-height: auto;
    }

    .owner-route-card.warning {
      border-color: rgba(255,184,107,.18);
      background:
        linear-gradient(180deg, rgba(255,184,107,.055), rgba(255,255,255,.012)),
        rgba(19, 17, 24, .78);
    }

    .owner-route-card.risk {
      border-color: rgba(255,79,139,.18);
      background:
        linear-gradient(180deg, rgba(255,79,139,.065), rgba(255,255,255,.012)),
        rgba(19, 17, 24, .78);
    }

    .owner-route-card.next {
      border-color: rgba(255,154,189,.18);
    }

    .owner-route-card-head {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--text-accent-soft);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      margin-bottom: 12px;
    }

    .owner-route-icon {
      display: inline-grid;
      place-items: center;
      width: 34px;
      height: 34px;
      flex: 0 0 34px;
      border-radius: 12px;
      color: #FF9ABD;
      background: rgba(255,79,139,.09);
      border: 1px solid rgba(255,154,189,.14);
    }

    .owner-route-icon svg {
      width: 18px;
      height: 18px;
    }

    .owner-route-card ul {
      display: grid;
      gap: 8px;
      margin: 0;
      padding-left: 18px;
      color: var(--text-secondary);
      font-size: 13px;
      line-height: 1.45;
    }

    .owner-route-card li::marker {
      color: rgba(255,154,189,.72);
    }

    .owner-route-card p,
    .owner-guide-card p {
      margin: 0;
      color: var(--text-secondary);
      font-size: 14px;
      line-height: 1.55;
      font-weight: 500;
    }

    .owner-route-card .btn {
      margin-top: 14px;
    }

    @media (max-width: 1180px) {
      .owner-readiness-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .owner-route-grid,
      .owner-article-guide {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .owner-guide-card.wide {
        grid-column: span 2;
      }
    }

    @media (max-width: 720px) {
      .owner-readiness-grid,
      .owner-route-grid,
      .owner-article-guide {
        grid-template-columns: 1fr;
      }

      .owner-guide-card.wide {
        grid-column: auto;
      }

      .owner-route-summary {
        flex-direction: column;
        padding: 18px;
      }
    }

    /* ── Final premium cyberpunk login screen ── */
    body.is-login-page {
      background:
        radial-gradient(circle at 72% 44%, rgba(255,47,120,.22), transparent 34vw),
        radial-gradient(circle at 50% 100%, rgba(255,47,120,.14), transparent 42vw),
        linear-gradient(135deg, #040408 0%, #090610 46%, #05050a 100%) !important;
      overflow: hidden;
    }
    body.is-login-page main {
      min-height: 100svh !important;
      padding: 0 !important;
      overflow: hidden;
    }
    body.is-login-page #page-login {
      min-height: 100svh !important;
      width: 100vw;
      max-width: 100vw;
      padding: clamp(28px, 5vh, 62px) clamp(36px, 8vw, 150px) !important;
      display: flex !important;
      align-items: center !important;
      justify-content: flex-start !important;
      overflow: hidden !important;
      isolation: isolate;
      background:
        radial-gradient(circle at 74% 42%, rgba(255,47,120,.22), transparent 340px),
        radial-gradient(circle at 35% 86%, rgba(255,47,120,.12), transparent 420px),
        linear-gradient(90deg, rgba(3,3,7,.98) 0%, rgba(8,5,12,.90) 42%, rgba(7,4,10,.78) 100%);
    }
    body.is-login-page #page-login::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background:
        linear-gradient(90deg, rgba(0,0,0,.48), transparent 38%, rgba(255,47,120,.035)),
        radial-gradient(circle at 12% 15%, rgba(255,255,255,.045), transparent 1px),
        repeating-linear-gradient(135deg, rgba(255,255,255,.026) 0 1px, transparent 1px 34px),
        radial-gradient(ellipse at center, transparent 44%, rgba(0,0,0,.62) 100%);
      opacity: .94;
    }
    body.is-login-page #page-login::after {
      content: "";
      position: fixed;
      left: clamp(720px, 70vw, 1320px);
      top: 48%;
      width: clamp(520px, 45vw, 760px);
      height: clamp(520px, 45vw, 760px);
      pointer-events: none;
      z-index: 0;
      background:
        radial-gradient(circle at 52% 52%, rgba(255,47,120,.20), transparent 38%),
        url("unicorn-mark.png") center / contain no-repeat;
      opacity: .42;
      transform: translate(-50%, -50%) rotate(-2deg);
      mix-blend-mode: screen;
      filter:
        saturate(1.28)
        contrast(1.08)
        drop-shadow(0 0 22px rgba(255,47,120,.34))
        drop-shadow(0 0 72px rgba(255,47,120,.22))
        drop-shadow(0 0 150px rgba(255,122,168,.14));
      animation: login-emblem-breathe 8.5s var(--ease-premium) infinite;
    }
    body.is-login-page .login-card {
      width: min(490px, calc(100vw - 48px)) !important;
      max-width: min(490px, calc(100vw - 48px)) !important;
      min-height: min(720px, calc(100svh - 76px));
      padding: clamp(38px, 5vh, 58px) clamp(34px, 3.7vw, 52px) clamp(34px, 4vh, 48px) !important;
      margin-left: clamp(20px, 3vw, 70px);
      border-radius: 32px !important;
      border: 1px solid rgba(255,255,255,.12) !important;
      background:
        radial-gradient(circle at 84% 0%, rgba(255,75,145,.22), transparent 210px),
        radial-gradient(circle at 50% 102%, rgba(255,47,120,.18), transparent 250px),
        linear-gradient(180deg, rgba(24,18,28,.90), rgba(8,7,12,.94)) !important;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.13),
        inset 0 -1px 0 rgba(255,47,120,.16),
        0 28px 90px rgba(0,0,0,.58),
        0 0 0 1px rgba(255,64,130,.18),
        0 0 88px rgba(255,45,120,.15) !important;
      backdrop-filter: blur(22px) saturate(1.12) !important;
      -webkit-backdrop-filter: blur(22px) saturate(1.12) !important;
      clip-path: polygon(0 34px, 34px 0, calc(100% - 28px) 0, 100% 28px, 100% calc(100% - 36px), calc(100% - 36px) 100%, 0 100%);
      animation: login-card-enter 560ms var(--ease-premium) both;
      z-index: 1;
    }
    body.is-login-page .login-card::before {
      content: "";
      position: absolute;
      inset: 1px;
      border-radius: inherit;
      pointer-events: none;
      z-index: 0;
      background:
        linear-gradient(180deg, rgba(255,255,255,.08), transparent 32%),
        radial-gradient(circle at 88% 6%, rgba(255,255,255,.10), transparent 90px),
        repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 1px, transparent 1px 28px);
      opacity: .82;
    }
    body.is-login-page .login-card::after {
      content: "";
      position: absolute;
      left: 38px;
      right: 38px;
      top: 0;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg, transparent, rgba(255,47,120,.76), rgba(255,214,232,.88), transparent);
      box-shadow: 0 0 28px rgba(255,47,120,.56);
      z-index: 1;
      pointer-events: none;
    }
    body.is-login-page .login-wordmark {
      margin-bottom: 34px !important;
      text-align: center;
    }
    body.is-login-page .login-wordmark-title {
      color: #fbf7fb !important;
      font-size: clamp(32px, 2.35vw, 44px) !important;
      font-weight: 780 !important;
      line-height: .92 !important;
      letter-spacing: .28em !important;
      text-shadow:
        0 1px 0 rgba(255,255,255,.18),
        0 0 26px rgba(255,255,255,.12),
        0 0 42px rgba(255,47,120,.18) !important;
    }
    body.is-login-page .login-wordmark-title::after {
      bottom: -14px !important;
      width: 250px !important;
      height: 1px !important;
      background: linear-gradient(90deg, transparent, rgba(255,47,120,.62), rgba(255,255,255,.30), rgba(255,47,120,.62), transparent) !important;
    }
    body.is-login-page .login-wordmark-subtitle {
      margin-top: 22px !important;
      color: rgba(255,122,168,.92) !important;
      font-size: 11px !important;
      font-weight: 700 !important;
      letter-spacing: .34em !important;
    }
    body.is-login-page .login-title {
      margin: 0 auto 10px !important;
      color: #f7f3f7 !important;
      font-size: clamp(34px, 2.35vw, 40px) !important;
      font-weight: 760 !important;
      line-height: 1.07 !important;
      letter-spacing: -0.035em !important;
      text-align: center !important;
      background: none !important;
      -webkit-background-clip: initial !important;
      background-clip: initial !important;
      text-shadow: 0 18px 42px rgba(0,0,0,.42), 0 0 34px rgba(255,47,120,.12) !important;
      animation: none !important;
    }
    body.is-login-page .login-sub {
      display: block !important;
      width: auto !important;
      margin: 0 auto 42px !important;
      padding: 0 0 26px !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      color: rgba(224,215,224,.72) !important;
      font-size: 14px !important;
      font-weight: 500 !important;
      line-height: 1.45 !important;
      text-align: center !important;
      box-shadow: none !important;
      position: relative;
    }
    body.is-login-page .login-sub::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 0;
      width: 86px;
      height: 1px;
      transform: translateX(-50%);
      background: linear-gradient(90deg, transparent, rgba(255,47,120,.96), transparent);
      box-shadow: 0 0 18px rgba(255,47,120,.42);
    }
    body.is-login-page .login-card .field {
      margin-bottom: 20px !important;
    }
    body.is-login-page .login-card .field label {
      margin-bottom: 11px !important;
      color: rgba(255,154,189,.82) !important;
      font-size: 10px !important;
      font-weight: 700 !important;
      letter-spacing: .16em !important;
    }
    body.is-login-page .login-input-wrap {
      min-height: 60px !important;
      padding: 0 18px !important;
      gap: 12px;
      border-radius: 16px !important;
      border: 1px solid rgba(255,255,255,.11) !important;
      background:
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)),
        rgba(7,7,13,.76) !important;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.065),
        0 14px 34px rgba(0,0,0,.24) !important;
    }
    body.is-login-page .login-input-icon {
      width: 19px;
      height: 19px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 19px;
      color: rgba(214,202,216,.66);
      transition: color 180ms var(--ease-premium), transform 180ms var(--ease-premium);
    }
    body.is-login-page .login-input-icon svg {
      width: 19px;
      height: 19px;
      display: block;
    }
    body.is-login-page .login-input-wrap:focus-within {
      transform: translateY(-1px);
      border-color: rgba(255,70,135,.58) !important;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.09),
        0 14px 34px rgba(0,0,0,.28),
        0 0 0 3px rgba(255,70,135,.11),
        0 0 36px rgba(255,47,120,.12) !important;
    }
    body.is-login-page .login-input-wrap:focus-within .login-input-icon {
      color: rgba(255,154,189,.95);
      transform: scale(1.04);
    }
    body.is-login-page .login-card .login-input-wrap input {
      min-height: 58px !important;
      color: #f8f4f8 !important;
      font-size: 15px !important;
      font-weight: 560 !important;
    }
    body.is-login-page #btn-do-login {
      min-height: 62px !important;
      margin-top: 10px !important;
      border-radius: 18px !important;
      color: white !important;
      background: linear-gradient(135deg, #ff2f78 0%, #ff4f8b 45%, #ff7aa8 100%) !important;
      box-shadow:
        0 16px 42px rgba(255,47,120,.34),
        0 0 60px rgba(255,47,120,.16),
        inset 0 1px 0 rgba(255,255,255,.30) !important;
      text-shadow: 0 1px 0 rgba(80,0,30,.25);
      transition: transform 180ms var(--ease-premium), box-shadow 180ms var(--ease-premium), filter 180ms var(--ease-premium);
    }
    body.is-login-page #btn-do-login:hover {
      transform: translateY(-1px);
      filter: saturate(1.08);
      box-shadow:
        0 20px 52px rgba(255,47,120,.42),
        0 0 82px rgba(255,47,120,.22),
        inset 0 1px 0 rgba(255,255,255,.34) !important;
    }
    body.is-login-page #btn-do-login:active {
      transform: translateY(0);
    }
    body.is-login-page .login-support {
      margin-top: 26px !important;
      padding: 24px 22px 0 !important;
      border-top: 1px solid rgba(255,255,255,.085) !important;
      color: rgba(207,197,208,.66) !important;
      font-size: 13px !important;
      font-weight: 500 !important;
      line-height: 1.45 !important;
      position: relative;
    }
    body.is-login-page .login-support::before {
      content: "";
      position: absolute;
      left: 50%;
      top: -5px;
      width: 8px;
      height: 8px;
      transform: translateX(-50%) rotate(45deg);
      border: 1px solid rgba(255,47,120,.74);
      background: rgba(255,47,120,.12);
      box-shadow: 0 0 16px rgba(255,47,120,.42);
    }
    body.is-login-page .login-error {
      margin: -2px 0 18px;
      color: #ff8ab6;
      font-size: 13px;
      font-weight: 650;
      line-height: 1.45;
      text-align: left;
    }
    @keyframes login-card-enter {
      from { opacity: 0; transform: translate3d(-18px, 16px, 0) scale(.985); }
      to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
    }
    @keyframes login-emblem-breathe {
      0%, 100% {
        opacity: .30;
        transform: translate(-50%, -50%) rotate(-2.5deg) scale(.985);
        filter: saturate(1.12) contrast(1.04) drop-shadow(0 0 26px rgba(255,47,120,.22)) drop-shadow(0 0 92px rgba(255,47,120,.14));
      }
      50% {
        opacity: .46;
        transform: translate(-50%, -50%) rotate(-1deg) scale(1.025);
        filter: saturate(1.38) contrast(1.10) drop-shadow(0 0 32px rgba(255,47,120,.42)) drop-shadow(0 0 138px rgba(255,47,120,.22));
      }
    }
    @media (max-width: 1180px) {
      body.is-login-page #page-login {
        justify-content: center !important;
        padding-inline: 24px !important;
      }
      body.is-login-page .login-card {
        margin-left: 0;
      }
      body.is-login-page #page-login::after {
        left: 72%;
        width: min(64vw, 600px);
        height: min(64vw, 600px);
        opacity: .22;
      }
    }
    @media (max-width: 720px) {
      body.is-login-page {
        overflow: auto;
      }
      body.is-login-page #page-login {
        min-height: 100svh !important;
        padding: 24px 16px !important;
        justify-content: center !important;
        align-items: center !important;
      }
      body.is-login-page #page-login::after {
        left: 50%;
        top: 34%;
        width: min(88vw, 390px);
        height: min(88vw, 390px);
        opacity: .12;
      }
      body.is-login-page .login-card {
        width: min(100%, 430px) !important;
        max-width: min(100%, 430px) !important;
        min-height: 0;
        padding: 34px 22px 30px !important;
        border-radius: 28px !important;
        clip-path: none;
      }
      body.is-login-page .login-wordmark-title {
        font-size: 29px !important;
        letter-spacing: .22em !important;
      }
      body.is-login-page .login-title {
        font-size: 30px !important;
      }
      body.is-login-page .login-sub {
        margin-bottom: 30px !important;
      }
      body.is-login-page .login-input-wrap {
        min-height: 56px !important;
      }
      body.is-login-page .login-card .login-input-wrap input {
        min-height: 54px !important;
      }
      body.is-login-page #btn-do-login {
        min-height: 58px !important;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      body.is-login-page #page-login::after,
      body.is-login-page .login-card,
      body.is-login-page .login-title {
        animation: none !important;
      }
      body.is-login-page * {
        transition-duration: 0ms !important;
      }
    }

    /* ── Premium login art correction: separate cinematic hero asset ── */
    body.is-login-page {
      background:
        radial-gradient(circle at 74% 45%, rgba(255, 47, 120, .16), transparent 34vw),
        radial-gradient(circle at 16% 86%, rgba(255, 79, 139, .10), transparent 36vw),
        linear-gradient(135deg, #030306 0%, #08050d 48%, #030306 100%) !important;
    }

    body.is-login-page #page-login {
      padding: clamp(30px, 5vh, 62px) clamp(38px, 8.6vw, 164px) !important;
      background:
        linear-gradient(90deg, rgba(0, 0, 0, .78) 0%, rgba(4, 3, 8, .58) 40%, rgba(6, 3, 9, .08) 72%),
        radial-gradient(circle at 76% 44%, rgba(255, 47, 120, .16), transparent 320px),
        radial-gradient(circle at 34% 92%, rgba(255, 47, 120, .10), transparent 480px),
        linear-gradient(135deg, rgba(3, 3, 8, .98), rgba(7, 4, 11, .78)) !important;
    }

    body.is-login-page #page-login::before {
      background:
        linear-gradient(90deg, rgba(0,0,0,.54), rgba(0,0,0,.10) 48%, rgba(0,0,0,.28)),
        repeating-linear-gradient(135deg, rgba(255,255,255,.021) 0 1px, transparent 1px 34px),
        radial-gradient(ellipse at center, transparent 42%, rgba(0,0,0,.68) 100%) !important;
      opacity: .9 !important;
    }

    body.is-login-page #page-login::after {
      left: auto !important;
      right: -8vw !important;
      top: auto !important;
      bottom: -16vh !important;
      width: min(58vw, 920px) !important;
      height: min(38vw, 520px) !important;
      transform: none !important;
      opacity: .34 !important;
      background:
        radial-gradient(ellipse at center, rgba(255, 47, 120, .28), rgba(255, 47, 120, .08) 42%, transparent 72%) !important;
      filter: blur(42px) saturate(1.15) !important;
      mix-blend-mode: screen !important;
      animation: login-haze-breathe 9s var(--ease-premium) infinite !important;
    }

    body.is-login-page .login-hero-art {
      position: fixed;
      right: clamp(28px, 7.8vw, 150px);
      top: 50%;
      width: clamp(680px, 48vw, 850px);
      aspect-ratio: 16 / 9;
      transform: translateY(-50%);
      z-index: 0;
      pointer-events: none;
      border-radius: 34px;
      background:
        linear-gradient(90deg, rgba(0,0,0,.08), rgba(0,0,0,0) 28%, rgba(0,0,0,.10)),
        url("login-unicorn-premium.png") center / cover no-repeat;
      opacity: .88;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        inset 0 -60px 120px rgba(0,0,0,.30),
        0 0 96px rgba(255,47,120,.13);
      filter: saturate(1.04) contrast(1.04);
      overflow: hidden;
      animation: login-hero-breathe 8.5s var(--ease-premium) infinite;
    }

    body.is-login-page .login-hero-art::before {
      content: "";
      position: absolute;
      inset: -16%;
      pointer-events: none;
      background:
        radial-gradient(circle at 66% 48%, rgba(255, 47, 120, .26), transparent 28%),
        radial-gradient(circle at 76% 56%, rgba(255, 154, 189, .12), transparent 34%),
        linear-gradient(90deg, rgba(0,0,0,.72), transparent 36%, rgba(0,0,0,.24));
      mix-blend-mode: screen;
      opacity: .58;
      animation: login-hero-glow 7.5s var(--ease-premium) infinite;
    }

    body.is-login-page .login-hero-art::after {
      content: "";
      position: absolute;
      inset: -22%;
      pointer-events: none;
      background: linear-gradient(108deg, transparent 36%, rgba(255, 235, 245, .18) 49%, rgba(255, 47, 120, .20) 52%, transparent 62%);
      transform: translateX(-46%) rotate(2deg);
      opacity: .0;
      mix-blend-mode: screen;
      animation: login-edge-sweep 7.2s var(--ease-premium) infinite;
    }

    body.is-login-page .login-card {
      width: min(462px, calc(100vw - 48px)) !important;
      max-width: min(462px, calc(100vw - 48px)) !important;
      min-height: auto !important;
      padding: clamp(36px, 4.7vh, 52px) clamp(32px, 3.6vw, 48px) clamp(32px, 4vh, 44px) !important;
      margin-left: clamp(10px, 2.4vw, 56px) !important;
      border-radius: 34px !important;
      clip-path: none !important;
      background:
        radial-gradient(circle at 82% 0%, rgba(255,75,145,.20), transparent 210px),
        radial-gradient(circle at 45% 110%, rgba(255,47,120,.12), transparent 260px),
        linear-gradient(180deg, rgba(19,16,24,.84), rgba(7,7,12,.90)) !important;
      border-color: rgba(255,255,255,.13) !important;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        inset 0 -1px 0 rgba(255,47,120,.12),
        0 32px 96px rgba(0,0,0,.58),
        0 0 0 1px rgba(255,64,130,.14),
        0 0 80px rgba(255,45,120,.12) !important;
    }

    body.is-login-page .login-card::before {
      border-radius: 34px !important;
      background:
        linear-gradient(180deg, rgba(255,255,255,.075), transparent 34%),
        radial-gradient(circle at 84% 8%, rgba(255,255,255,.085), transparent 92px),
        repeating-linear-gradient(135deg, rgba(255,255,255,.015) 0 1px, transparent 1px 28px) !important;
      opacity: .74 !important;
    }

    body.is-login-page .login-card::after {
      left: 44px !important;
      right: 44px !important;
      opacity: .84;
    }

    body.is-login-page .login-wordmark {
      margin-bottom: 30px !important;
    }

    body.is-login-page .login-wordmark-title {
      font-size: clamp(30px, 2.05vw, 40px) !important;
    }

    body.is-login-page .login-title {
      font-size: clamp(32px, 2.08vw, 38px) !important;
      font-weight: 760 !important;
    }

    body.is-login-page .login-sub {
      margin-bottom: 36px !important;
    }

    body.is-login-page .login-form-panel {
      position: relative;
      z-index: 1;
    }

    body.is-login-page .login-input-wrap {
      border-radius: 18px !important;
      background:
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)),
        rgba(5, 5, 10, .70) !important;
    }

    @keyframes login-hero-breathe {
      0%, 100% {
        opacity: .78;
        transform: translateY(-50%) scale(.992);
        filter: saturate(.98) contrast(1.02);
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,.05),
          inset 0 -60px 120px rgba(0,0,0,.32),
          0 0 78px rgba(255,47,120,.10);
      }
      50% {
        opacity: .94;
        transform: translateY(-50%) scale(1.008);
        filter: saturate(1.10) contrast(1.06);
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,.07),
          inset 0 -60px 120px rgba(0,0,0,.24),
          0 0 118px rgba(255,47,120,.18);
      }
    }

    @keyframes login-hero-glow {
      0%, 100% { opacity: .42; }
      50% { opacity: .68; }
    }

    @keyframes login-edge-sweep {
      0%, 42% { opacity: 0; transform: translateX(-54%) rotate(2deg); }
      51% { opacity: .55; }
      64% { opacity: .18; transform: translateX(54%) rotate(2deg); }
      100% { opacity: 0; transform: translateX(54%) rotate(2deg); }
    }

    @keyframes login-haze-breathe {
      0%, 100% { opacity: .24; transform: translate3d(0, 0, 0) scale(.98); }
      50% { opacity: .40; transform: translate3d(-1vw, -1vh, 0) scale(1.04); }
    }

    @media (max-width: 1180px) {
      body.is-login-page .login-hero-art {
        right: 50%;
        top: 43%;
        width: min(86vw, 720px);
        transform: translate(50%, -50%);
        opacity: .26;
      }
      body.is-login-page .login-card {
        margin-left: 0 !important;
      }
    }

    @media (max-width: 720px) {
      body.is-login-page .login-hero-art {
        right: 50%;
        top: 29%;
        width: min(110vw, 520px);
        opacity: .18;
        border-radius: 24px;
      }
      body.is-login-page .login-card {
        width: min(100%, 430px) !important;
        max-width: min(100%, 430px) !important;
        padding: 34px 22px 30px !important;
        border-radius: 28px !important;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      body.is-login-page .login-hero-art,
      body.is-login-page .login-hero-art::before,
      body.is-login-page .login-hero-art::after {
        animation: none !important;
      }
    }

    /* ── Login hero art must be visible without JS cache dependency ── */
    body.is-login-page #page-login::after {
      content: "" !important;
      position: fixed !important;
      left: auto !important;
      right: clamp(18px, 6.5vw, 118px) !important;
      top: 50% !important;
      bottom: auto !important;
      width: clamp(680px, 52vw, 920px) !important;
      height: clamp(440px, 32vw, 610px) !important;
      transform: translateY(-50%) !important;
      z-index: 0 !important;
      pointer-events: none !important;
      border-radius: 34px !important;
      opacity: .96 !important;
      background:
        linear-gradient(90deg, rgba(3,3,8,.22), rgba(3,3,8,0) 32%, rgba(3,3,8,.08)),
        radial-gradient(circle at 68% 48%, rgba(255,47,120,.22), transparent 34%),
        url("login-unicorn-premium.png") center / cover no-repeat !important;
      filter: saturate(1.08) contrast(1.06) drop-shadow(0 0 58px rgba(255,47,120,.18)) !important;
      mix-blend-mode: normal !important;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        inset 0 -80px 140px rgba(0,0,0,.34),
        0 0 120px rgba(255,47,120,.10) !important;
      overflow: hidden !important;
      animation: login-premium-art-breathe 8s var(--ease-premium) infinite !important;
    }

    body.is-login-page .login-hero-art {
      display: none !important;
    }

    @keyframes login-premium-art-breathe {
      0%, 100% {
        opacity: .86;
        transform: translateY(-50%) scale(.992);
        filter: saturate(1.00) contrast(1.04) drop-shadow(0 0 44px rgba(255,47,120,.13));
      }
      50% {
        opacity: 1;
        transform: translateY(-50%) scale(1.008);
        filter: saturate(1.12) contrast(1.08) drop-shadow(0 0 78px rgba(255,47,120,.22));
      }
    }

    @media (max-width: 1180px) {
      body.is-login-page #page-login::after {
        right: 50% !important;
        top: 42% !important;
        width: min(88vw, 780px) !important;
        height: min(56vw, 520px) !important;
        transform: translate(50%, -50%) !important;
        opacity: .30 !important;
      }
    }

    @media (max-width: 720px) {
      body.is-login-page #page-login::after {
        top: 28% !important;
        width: min(118vw, 560px) !important;
        height: min(76vw, 390px) !important;
        opacity: .18 !important;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      body.is-login-page #page-login::after {
        animation: none !important;
      }
    }

    /* Login scene background layer. */
    body.is-login-page {
      background:
        radial-gradient(circle at 72% 48%, rgba(255, 47, 120, .14), transparent 36vw),
        radial-gradient(circle at 46% 102%, rgba(255, 47, 120, .10), transparent 42vw),
        linear-gradient(135deg, #030306 0%, #08050d 46%, #030306 100%) !important;
    }

    body.is-login-page #page-login {
      position: relative !important;
      min-height: 100svh !important;
      width: 100vw !important;
      max-width: 100vw !important;
      padding: clamp(30px, 5vh, 62px) clamp(38px, 8.6vw, 164px) !important;
      display: flex !important;
      align-items: center !important;
      justify-content: flex-start !important;
      overflow: hidden !important;
      isolation: isolate !important;
      background:
        linear-gradient(135deg, rgba(3, 3, 8, .98), rgba(8, 4, 12, .76) 44%, rgba(3, 3, 8, .94)) !important;
    }

    body.is-login-page #page-login::before {
      content: "" !important;
      position: absolute !important;
      inset: 0 !important;
      z-index: 2 !important;
      pointer-events: none !important;
      background:
        repeating-linear-gradient(135deg, rgba(255,255,255,.020) 0 1px, transparent 1px 34px),
        radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.62) 100%) !important;
      opacity: .88 !important;
    }

    body.is-login-page #page-login::after {
      content: "" !important;
      position: absolute !important;
      inset: auto -8vw -18vh auto !important;
      width: min(58vw, 920px) !important;
      height: min(38vw, 520px) !important;
      z-index: 1 !important;
      pointer-events: none !important;
      border-radius: 0 !important;
      opacity: .34 !important;
      background:
        radial-gradient(ellipse at center, rgba(255, 47, 120, .25), rgba(255, 47, 120, .075) 42%, transparent 72%) !important;
      filter: blur(44px) saturate(1.08) !important;
      transform: none !important;
      mix-blend-mode: screen !important;
      box-shadow: none !important;
      animation: login-haze-breathe 9s var(--ease-premium) infinite !important;
    }

    body.is-login-page .login-bg-art {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background-image: url("login-unicorn-premium.png");
      background-repeat: no-repeat;
      background-size: auto 92%;
      background-position: right 9vw center;
      opacity: .92;
      transform: scale(1);
      filter:
        drop-shadow(0 0 32px rgba(255, 47, 120, .28))
        drop-shadow(0 0 110px rgba(255, 47, 120, .16));
      animation: unicornBreath 6s ease-in-out infinite;
    }

    body.is-login-page .login-bg-overlay {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background:
        radial-gradient(circle at 72% 48%, rgba(255, 47, 120, .20), transparent 34%),
        linear-gradient(90deg,
          rgba(5, 5, 10, .96) 0%,
          rgba(5, 5, 10, .78) 30%,
          rgba(5, 5, 10, .30) 58%,
          rgba(5, 5, 10, .64) 100%
        ),
        radial-gradient(circle at 50% 100%, rgba(255, 47, 120, .12), transparent 42%);
    }

    body.is-login-page .login-hero-art {
      display: none !important;
    }

    body.is-login-page .login-card {
      position: relative !important;
      z-index: 3 !important;
      width: min(462px, calc(100vw - 48px)) !important;
      max-width: min(462px, calc(100vw - 48px)) !important;
      min-height: auto !important;
      margin-left: clamp(10px, 2.4vw, 56px) !important;
      border-radius: 34px !important;
      clip-path: none !important;
      overflow: visible !important;
      background:
        radial-gradient(circle at 82% 0%, rgba(255,75,145,.20), transparent 210px),
        radial-gradient(circle at 45% 110%, rgba(255,47,120,.12), transparent 260px),
        linear-gradient(180deg, rgba(19,16,24,.84), rgba(7,7,12,.90)) !important;
      border: 1px solid rgba(255,255,255,.13) !important;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        inset 0 -1px 0 rgba(255,47,120,.12),
        0 32px 96px rgba(0,0,0,.58),
        0 0 0 1px rgba(255,64,130,.14),
        0 0 80px rgba(255,45,120,.12) !important;
    }

    @keyframes unicornBreath {
      0%, 100% {
        opacity: .86;
        filter:
          drop-shadow(0 0 24px rgba(255, 47, 120, .22))
          drop-shadow(0 0 90px rgba(255, 47, 120, .12));
        transform: scale(1);
      }

      50% {
        opacity: .98;
        filter:
          drop-shadow(0 0 38px rgba(255, 47, 120, .34))
          drop-shadow(0 0 130px rgba(255, 47, 120, .20));
        transform: scale(1.012);
      }
    }

    @media (max-width: 768px) {
      body.is-login-page #page-login {
        justify-content: center !important;
        padding: 24px 16px !important;
      }

      body.is-login-page .login-bg-art {
        background-size: auto 72%;
        background-position: center 18%;
        opacity: .22;
      }

      body.is-login-page .login-bg-overlay {
        background:
          linear-gradient(180deg, rgba(5,5,10,.88), rgba(5,5,10,.98));
      }

      body.is-login-page .login-card {
        width: calc(100% - 32px) !important;
        max-width: 430px !important;
        margin: 0 auto !important;
        border-radius: 28px !important;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      body.is-login-page .login-bg-art {
        animation: none !important;
      }
    }

    /* ── Login art blend polish: remove visible image rectangle ── */
    body.is-login-page #page-login {
      background:
        radial-gradient(circle at 76% 46%, rgba(255, 47, 120, .16), transparent 34vw),
        radial-gradient(circle at 18% 84%, rgba(255, 79, 139, .08), transparent 40vw),
        linear-gradient(135deg, #030306 0%, #07040b 48%, #030306 100%) !important;
    }

    body.is-login-page .login-bg-art {
      inset: -8vh -7vw -8vh -4vw !important;
      background-size: auto 104% !important;
      background-position: right 4vw center !important;
      opacity: .90 !important;
      mix-blend-mode: screen;
      filter:
        saturate(1.04)
        contrast(1.03)
        drop-shadow(0 0 26px rgba(255, 47, 120, .22))
        drop-shadow(0 0 104px rgba(255, 47, 120, .14)) !important;
      -webkit-mask-image:
        linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 8%, #000 24%, #000 76%, rgba(0,0,0,.22) 91%, transparent 100%),
        linear-gradient(180deg, transparent 0%, rgba(0,0,0,.20) 8%, #000 20%, #000 80%, rgba(0,0,0,.24) 92%, transparent 100%);
      mask-image:
        linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 8%, #000 24%, #000 76%, rgba(0,0,0,.22) 91%, transparent 100%),
        linear-gradient(180deg, transparent 0%, rgba(0,0,0,.20) 8%, #000 20%, #000 80%, rgba(0,0,0,.24) 92%, transparent 100%);
      -webkit-mask-composite: source-in;
      mask-composite: intersect;
    }

    body.is-login-page .login-bg-overlay {
      z-index: 1 !important;
      background:
        linear-gradient(90deg,
          rgba(5, 5, 10, .97) 0%,
          rgba(5, 5, 10, .84) 27%,
          rgba(5, 5, 10, .38) 53%,
          rgba(5, 5, 10, .66) 78%,
          rgba(5, 5, 10, .84) 100%
        ),
        radial-gradient(circle at 72% 48%, rgba(255, 47, 120, .22), transparent 38%),
        radial-gradient(circle at 86% 18%, rgba(255, 154, 189, .06), transparent 28%),
        radial-gradient(circle at 50% 100%, rgba(255, 47, 120, .12), transparent 45%),
        radial-gradient(ellipse at center, transparent 42%, rgba(0, 0, 0, .58) 100%) !important;
    }

    body.is-login-page #page-login::before {
      z-index: 2 !important;
      background:
        repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 1px, transparent 1px 34px),
        radial-gradient(circle at 72% 48%, rgba(255, 47, 120, .055), transparent 32%),
        radial-gradient(ellipse at center, transparent 46%, rgba(0,0,0,.66) 100%) !important;
      opacity: .92 !important;
    }

    body.is-login-page #page-login::after {
      z-index: 1 !important;
      inset: auto -14vw -22vh auto !important;
      width: min(72vw, 1180px) !important;
      height: min(48vw, 720px) !important;
      border-radius: 0 !important;
      opacity: .30 !important;
      background:
        radial-gradient(ellipse at center, rgba(255, 47, 120, .24), rgba(255, 47, 120, .07) 42%, transparent 72%) !important;
      filter: blur(58px) saturate(1.08) !important;
      box-shadow: none !important;
    }

    @media (max-width: 768px) {
      body.is-login-page .login-bg-art {
        inset: -6vh -28vw -6vh -28vw !important;
        background-size: auto 76% !important;
        background-position: center 18% !important;
        opacity: .24 !important;
        -webkit-mask-image:
          linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%),
          linear-gradient(180deg, transparent 0%, #000 16%, #000 60%, transparent 88%);
        mask-image:
          linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%),
          linear-gradient(180deg, transparent 0%, #000 16%, #000 60%, transparent 88%);
      }

      body.is-login-page .login-bg-overlay {
        background:
          linear-gradient(180deg, rgba(5,5,10,.84), rgba(5,5,10,.98) 46%, rgba(5,5,10,1)),
          radial-gradient(circle at 50% 18%, rgba(255,47,120,.14), transparent 42%) !important;
      }
    }

    /* ── Login card premium HUD polish + password eye ── */
    body.is-login-page .login-card {
      width: min(460px, calc(100vw - 48px)) !important;
      max-width: min(460px, calc(100vw - 48px)) !important;
      padding: clamp(44px, 5vh, 52px) clamp(40px, 3.4vw, 48px) clamp(34px, 4vh, 42px) !important;
      border-radius: 32px !important;
      background:
        radial-gradient(circle at 88% 4%, rgba(255, 79, 139, .20), transparent 168px),
        radial-gradient(circle at 48% 110%, rgba(255, 47, 120, .13), transparent 230px),
        linear-gradient(180deg, rgba(28, 22, 32, .88), rgba(8, 7, 13, .94)) !important;
      border: 1px solid rgba(255,255,255,.10) !important;
      box-shadow:
        0 30px 90px rgba(0,0,0,.58),
        0 0 70px rgba(255,47,120,.12),
        inset 0 1px 0 rgba(255,255,255,.08),
        inset 0 -1px 0 rgba(255,47,120,.12) !important;
      backdrop-filter: blur(22px) saturate(1.12) !important;
      -webkit-backdrop-filter: blur(22px) saturate(1.12) !important;
    }

    body.is-login-page .login-card::before {
      inset: 0 !important;
      border-radius: inherit !important;
      background:
        radial-gradient(circle at 86% 6%, rgba(255, 79, 139, .22), transparent 122px),
        linear-gradient(180deg, rgba(255,255,255,.072), transparent 34%),
        repeating-linear-gradient(135deg, rgba(255,255,255,.014) 0 1px, transparent 1px 28px) !important;
      opacity: .82 !important;
    }

    body.is-login-page .login-card::after {
      content: "" !important;
      position: absolute !important;
      left: 42px !important;
      right: 42px !important;
      top: auto !important;
      bottom: 0 !important;
      height: 1px !important;
      border-radius: 999px !important;
      background: linear-gradient(90deg, transparent, rgba(255,47,120,.44), rgba(255,154,189,.62), transparent) !important;
      box-shadow: 0 0 34px rgba(255,47,120,.30) !important;
      opacity: .82 !important;
      pointer-events: none !important;
      z-index: 1 !important;
    }

    body.is-login-page .login-wordmark {
      margin-bottom: 28px !important;
      text-align: center !important;
    }

    body.is-login-page .login-wordmark-title {
      color: #f8f4f8 !important;
      font-size: clamp(30px, 2.02vw, 38px) !important;
      font-weight: 780 !important;
      line-height: .94 !important;
      letter-spacing: .22em !important;
      text-shadow:
        0 1px 0 rgba(255,255,255,.14),
        0 0 24px rgba(255,255,255,.10),
        0 0 38px rgba(255,47,120,.16) !important;
    }

    body.is-login-page .login-wordmark-title::after {
      bottom: -13px !important;
      width: 228px !important;
      height: 1px !important;
      background: linear-gradient(90deg, transparent, rgba(255,47,120,.58), rgba(255,255,255,.28), rgba(255,47,120,.58), transparent) !important;
      box-shadow: 0 0 18px rgba(255,47,120,.24) !important;
    }

    body.is-login-page .login-wordmark-subtitle {
      margin-top: 21px !important;
      color: rgba(255, 154, 189, .92) !important;
      font-size: 10px !important;
      font-weight: 720 !important;
      letter-spacing: .34em !important;
    }

    body.is-login-page .login-title {
      margin-bottom: 9px !important;
      color: #fff !important;
      font-size: clamp(34px, 2vw, 38px) !important;
      font-weight: 780 !important;
      line-height: 1.08 !important;
      letter-spacing: -0.035em !important;
      text-shadow:
        0 18px 44px rgba(0,0,0,.44),
        0 0 28px rgba(255,47,120,.11) !important;
    }

    body.is-login-page .login-sub {
      margin-bottom: 36px !important;
      padding-bottom: 24px !important;
      color: rgba(255,255,255,.70) !important;
      font-size: 14px !important;
      font-weight: 500 !important;
      line-height: 1.45 !important;
    }

    body.is-login-page .login-sub::after {
      width: 82px !important;
      background: linear-gradient(90deg, transparent, rgba(255,47,120,.92), transparent) !important;
      box-shadow: 0 0 18px rgba(255,47,120,.34) !important;
    }

    body.is-login-page .login-card .field {
      margin-bottom: 19px !important;
    }

    body.is-login-page .login-card .field label {
      margin-bottom: 10px !important;
      color: rgba(255,154,189,.80) !important;
      font-size: 10px !important;
      font-weight: 720 !important;
      letter-spacing: .16em !important;
      text-transform: uppercase !important;
    }

    body.is-login-page .login-input-wrap {
      position: relative !important;
      min-height: 60px !important;
      height: 60px !important;
      padding: 0 16px !important;
      border-radius: 18px !important;
      border: 1px solid rgba(255,255,255,.10) !important;
      background:
        linear-gradient(180deg, rgba(12,12,18,.82), rgba(6,6,10,.88)) !important;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 10px 28px rgba(0,0,0,.22) !important;
      transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease,
        background 180ms ease !important;
    }

    body.is-login-page .login-input-wrap:focus-within {
      transform: translateY(-1px);
      border-color: rgba(255,76,140,.58) !important;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        0 10px 28px rgba(0,0,0,.25),
        0 0 0 3px rgba(255,76,140,.10),
        0 0 30px rgba(255,47,120,.10) !important;
    }

    body.is-login-page .login-input-icon {
      width: 20px !important;
      height: 20px !important;
      flex: 0 0 20px !important;
      color: rgba(255,255,255,.45) !important;
    }

    body.is-login-page .login-input-icon svg {
      width: 20px !important;
      height: 20px !important;
    }

    body.is-login-page .login-input-wrap:focus-within .login-input-icon {
      color: rgba(255,154,189,.92) !important;
    }

    body.is-login-page .login-card .login-input-wrap input {
      min-height: 58px !important;
      height: 58px !important;
      padding: 0 !important;
      color: #fff !important;
      font-size: 15px !important;
      font-weight: 560 !important;
      line-height: 1.2 !important;
    }

    body.is-login-page .login-card .login-input-wrap input::placeholder {
      color: rgba(255,255,255,.38) !important;
    }

    body.is-login-page #login-password {
      padding-right: 42px !important;
    }

    body.is-login-page .login-password-toggle {
      position: absolute;
      right: 14px;
      top: 50%;
      width: 34px;
      height: 34px;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transform: translateY(-50%);
      border: 0;
      border-radius: 12px;
      background: transparent;
      color: rgba(255,255,255,.45);
      cursor: pointer;
      transition:
        color 180ms ease,
        background 180ms ease,
        transform 180ms ease;
      z-index: 3;
    }

    body.is-login-page .login-password-toggle svg {
      width: 19px;
      height: 19px;
      display: block;
    }

    body.is-login-page .login-password-toggle:hover,
    body.is-login-page .login-password-toggle:focus-visible,
    body.is-login-page .login-password-toggle.is-visible {
      color: rgba(255,154,189,.94);
      background: rgba(255,79,139,.10);
      outline: none;
    }

    body.is-login-page .login-password-toggle:active {
      transform: translateY(-50%) scale(.96);
    }

    body.is-login-page #btn-do-login {
      min-height: 62px !important;
      height: 62px !important;
      margin-top: 10px !important;
      border-radius: 18px !important;
      color: #fff !important;
      font-weight: 750 !important;
      background:
        linear-gradient(135deg, #FF2F78 0%, #FF4F8B 48%, #FF7AA8 100%) !important;
      box-shadow:
        0 18px 46px rgba(255,47,120,.34),
        0 0 68px rgba(255,47,120,.16),
        inset 0 1px 0 rgba(255,255,255,.28) !important;
      transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        filter 180ms ease !important;
    }

    body.is-login-page #btn-do-login:hover {
      transform: translateY(-1px);
      filter: saturate(1.06);
      box-shadow:
        0 22px 56px rgba(255,47,120,.42),
        0 0 82px rgba(255,47,120,.22),
        inset 0 1px 0 rgba(255,255,255,.32) !important;
    }

    body.is-login-page #btn-do-login:active {
      transform: translateY(0);
    }

    body.is-login-page .login-support {
      margin-top: 24px !important;
      padding: 22px 18px 0 !important;
      border-top: 1px solid rgba(255,255,255,.08) !important;
      color: rgba(255,255,255,.63) !important;
      font-size: 13px !important;
      font-weight: 500 !important;
      line-height: 1.45 !important;
    }

    body.is-login-page .login-support::before {
      top: -4px !important;
      width: 7px !important;
      height: 7px !important;
      border-color: rgba(255,79,139,.70) !important;
      background: rgba(255,79,139,.12) !important;
      box-shadow: 0 0 14px rgba(255,47,120,.34) !important;
    }

    @media (max-width: 768px) {
      body.is-login-page .login-card {
        width: calc(100% - 32px) !important;
        max-width: 430px !important;
        padding: 34px 22px 30px !important;
      }

      body.is-login-page .login-wordmark-title {
        font-size: 29px !important;
      }

      body.is-login-page .login-title {
        font-size: 30px !important;
      }

      body.is-login-page .login-input-wrap,
      body.is-login-page #btn-do-login {
        height: 58px !important;
        min-height: 58px !important;
      }
    }

    /* Login scene base. */
    body.is-login-page #page-login {
      position: relative !important;
      background: #040408 !important;
      overflow: hidden !important;
    }

    body.is-login-page .login-bg-scene {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background-image: url("login-scene-selected.png");
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
      opacity: 1;
      transform: scale(1);
      filter:
        saturate(1.08)
        contrast(1.05)
        drop-shadow(0 0 32px rgba(255, 47, 120, .22))
        drop-shadow(0 0 110px rgba(255, 47, 120, .12));
      animation: login-scene-breathe 7s ease-in-out infinite;
    }

    body.is-login-page .login-bg-art,
    body.is-login-page .login-hero-art {
      display: none !important;
    }

    body.is-login-page .login-bg-overlay {
      position: absolute;
      inset: 0;
      z-index: 1 !important;
      pointer-events: none;
      background:
        linear-gradient(90deg,
          rgba(4,4,8,.76) 0%,
          rgba(4,4,8,.54) 30%,
          rgba(4,4,8,.18) 58%,
          rgba(4,4,8,.30) 100%
        ),
        radial-gradient(circle at 72% 48%, rgba(255,47,120,.14), transparent 42%),
        radial-gradient(circle at 45% 100%, rgba(255,47,120,.16), transparent 50%),
        radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.42) 100%) !important;
    }

    body.is-login-page #page-login::before {
      content: "" !important;
      position: absolute !important;
      inset: 0 !important;
      z-index: 2 !important;
      pointer-events: none !important;
      background:
        repeating-linear-gradient(135deg, rgba(255,255,255,.014) 0 1px, transparent 1px 34px),
        radial-gradient(circle at 78% 54%, rgba(255,47,120,.045), transparent 36%) !important;
      opacity: .55 !important;
      mix-blend-mode: screen;
    }

    body.is-login-page #page-login::after {
      content: "" !important;
      position: absolute !important;
      left: 0 !important;
      right: 0 !important;
      top: auto !important;
      bottom: 0 !important;
      width: auto !important;
      height: 34% !important;
      z-index: 2 !important;
      pointer-events: none !important;
      border-radius: 0 !important;
      opacity: 1 !important;
      background:
        radial-gradient(ellipse at 55% 100%, rgba(255,47,120,.24), transparent 52%),
        radial-gradient(ellipse at 84% 100%, rgba(255,154,189,.11), transparent 38%),
        linear-gradient(180deg, transparent 0%, rgba(5,5,10,.74) 100%) !important;
      filter: none !important;
      box-shadow: none !important;
      transform: none !important;
      animation: login-floor-haze 8s ease-in-out infinite !important;
    }

    body.is-login-page .login-card {
      z-index: 5 !important;
      width: clamp(420px, 29vw, 500px) !important;
      max-width: min(500px, calc(100vw - 48px)) !important;
      padding: 46px 46px 42px !important;
      border-radius: 30px !important;
      background:
        radial-gradient(circle at 92% 0%, rgba(255,47,120,.22), transparent 150px),
        radial-gradient(circle at 54% 108%, rgba(255,47,120,.16), transparent 230px),
        linear-gradient(180deg, rgba(20,17,25,.88), rgba(7,7,12,.94)) !important;
      border: 1px solid rgba(255,255,255,.10) !important;
      box-shadow:
        0 32px 90px rgba(0,0,0,.62),
        0 0 70px rgba(255,47,120,.14),
        inset 0 1px 0 rgba(255,255,255,.08),
        inset 0 -1px 0 rgba(255,47,120,.14) !important;
      backdrop-filter: blur(20px) saturate(1.12) !important;
      -webkit-backdrop-filter: blur(20px) saturate(1.12) !important;
    }

    body.is-login-page .login-card::before {
      background:
        radial-gradient(circle at 93% 3%, rgba(255,47,120,.26), transparent 118px),
        linear-gradient(180deg, rgba(255,255,255,.08), transparent 34%),
        repeating-linear-gradient(135deg, rgba(255,255,255,.014) 0 1px, transparent 1px 28px) !important;
    }

    body.is-login-page #btn-do-login {
      background: linear-gradient(135deg, #FF2674 0%, #FF3F86 48%, #FF75A7 100%) !important;
      box-shadow:
        0 18px 46px rgba(255,47,120,.36),
        0 0 28px rgba(255,47,120,.16),
        inset 0 1px 0 rgba(255,255,255,.26) !important;
    }

    body.is-login-page #btn-do-login:hover {
      box-shadow:
        0 24px 62px rgba(255,47,120,.46),
        0 0 42px rgba(255,47,120,.24),
        inset 0 1px 0 rgba(255,255,255,.32) !important;
    }

    /* Login panel contrast. */
    body.is-login-page .login-card {
      border-color: rgba(255,255,255,.145) !important;
      background:
        radial-gradient(circle at 92% 0%, rgba(255,47,120,.28), transparent 152px),
        radial-gradient(circle at 50% 112%, rgba(255,47,120,.19), transparent 236px),
        linear-gradient(180deg, rgba(24,20,29,.91), rgba(8,7,13,.965)) !important;
      box-shadow:
        0 34px 98px rgba(0,0,0,.68),
        0 0 86px rgba(255,47,120,.18),
        0 0 0 1px rgba(255,79,139,.12),
        inset 0 1px 0 rgba(255,255,255,.105),
        inset 0 -1px 0 rgba(255,47,120,.18) !important;
    }

    body.is-login-page .login-card::before {
      background:
        radial-gradient(circle at 92% 4%, rgba(255,74,139,.32), transparent 122px),
        linear-gradient(180deg, rgba(255,255,255,.095), transparent 35%),
        repeating-linear-gradient(135deg, rgba(255,255,255,.016) 0 1px, transparent 1px 28px) !important;
    }

    body.is-login-page .login-wordmark-title,
    body.is-login-page .login-title {
      color: #fffafb !important;
      text-shadow:
        0 1px 0 rgba(255,255,255,.16),
        0 18px 46px rgba(0,0,0,.46),
        0 0 32px rgba(255,47,120,.16) !important;
    }

    body.is-login-page .login-sub {
      color: rgba(255,255,255,.76) !important;
    }

    body.is-login-page .login-card .field label {
      color: rgba(255,174,204,.88) !important;
    }

    body.is-login-page .login-input-wrap {
      border-color: rgba(255,255,255,.135) !important;
      background:
        linear-gradient(180deg, rgba(15,15,22,.88), rgba(6,6,10,.92)) !important;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.055),
        0 12px 32px rgba(0,0,0,.28) !important;
    }

    body.is-login-page .login-card .login-input-wrap input {
      color: #fff !important;
      text-shadow: 0 1px 0 rgba(0,0,0,.22);
    }

    body.is-login-page #btn-do-login {
      background:
        linear-gradient(135deg, #ff1f6f 0%, #ff3f86 46%, #ff80ae 100%) !important;
      box-shadow:
        0 20px 52px rgba(255,47,120,.42),
        0 0 36px rgba(255,47,120,.22),
        inset 0 1px 0 rgba(255,255,255,.34),
        inset 0 -10px 22px rgba(166,0,62,.18) !important;
      text-shadow: 0 1px 0 rgba(80,0,30,.28);
    }

    body.is-login-page #btn-do-login:hover {
      box-shadow:
        0 26px 68px rgba(255,47,120,.50),
        0 0 52px rgba(255,47,120,.28),
        inset 0 1px 0 rgba(255,255,255,.38),
        inset 0 -10px 22px rgba(166,0,62,.16) !important;
    }

    @keyframes login-scene-breathe {
      0%, 100% {
        filter:
          saturate(1.02)
          contrast(1.03)
          drop-shadow(0 0 24px rgba(255,47,120,.18))
          drop-shadow(0 0 90px rgba(255,47,120,.10));
        transform: scale(1);
      }
      50% {
        filter:
          saturate(1.14)
          contrast(1.07)
          drop-shadow(0 0 40px rgba(255,47,120,.28))
          drop-shadow(0 0 135px rgba(255,47,120,.18));
        transform: scale(1.006);
      }
    }

    @keyframes login-floor-haze {
      0%, 100% { opacity: .88; }
      50% { opacity: 1; }
    }

    @media (max-width: 768px) {
      body.is-login-page .login-bg-scene {
        background-position: 64% center;
        opacity: .58;
        filter: saturate(.98) contrast(1.02);
      }

      body.is-login-page .login-bg-overlay {
        background:
          linear-gradient(180deg, rgba(5,5,10,.82), rgba(5,5,10,.96) 42%, rgba(5,5,10,.99)),
          radial-gradient(circle at 50% 20%, rgba(255,47,120,.12), transparent 42%) !important;
      }

      body.is-login-page .login-card {
        width: calc(100% - 32px) !important;
        max-width: 430px !important;
        padding: 34px 22px 30px !important;
        margin: 0 auto !important;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      body.is-login-page .login-bg-scene,
      body.is-login-page #page-login::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
      }
    }

    /* Login scene image fit. */
    body.is-login-page .login-bg-scene {
      background-size: auto 100% !important;
      background-position: center center !important;
      opacity: 1 !important;
      transform: none !important;
      filter: brightness(.88) contrast(1.12) saturate(1.04) !important;
      animation: login-scene-contrast-breathe 8s ease-in-out infinite !important;
    }

    body.is-login-page .login-bg-overlay {
      background:
        linear-gradient(90deg,
          rgba(3,3,7,.90) 0%,
          rgba(3,3,7,.68) 28%,
          rgba(3,3,7,.16) 58%,
          rgba(3,3,7,.30) 100%
        ),
        radial-gradient(circle at 74% 42%, rgba(255,34,118,.075), transparent 38%),
        radial-gradient(ellipse at 55% 100%, rgba(255,34,118,.10), transparent 52%),
        radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,.46) 100%) !important;
    }

    body.is-login-page #page-login::before {
      background:
        repeating-linear-gradient(135deg, rgba(255,255,255,.010) 0 1px, transparent 1px 36px),
        radial-gradient(circle at 77% 48%, rgba(255,47,120,.025), transparent 36%) !important;
      opacity: .42 !important;
    }

    body.is-login-page #page-login::after {
      height: 28% !important;
      background:
        radial-gradient(ellipse at 55% 100%, rgba(255,47,120,.13), transparent 54%),
        radial-gradient(ellipse at 84% 100%, rgba(255,154,189,.055), transparent 42%),
        linear-gradient(180deg, transparent 0%, rgba(3,3,7,.72) 100%) !important;
    }

    @keyframes login-scene-contrast-breathe {
      0%, 100% {
        filter: brightness(.86) contrast(1.10) saturate(1.02);
      }
      50% {
        filter: brightness(.92) contrast(1.15) saturate(1.08);
      }
    }

    @media (max-width: 1500px) {
      body.is-login-page .login-bg-scene {
        background-size: auto 100% !important;
        background-position: center center !important;
      }
    }

    @media (max-width: 768px) {
      body.is-login-page .login-bg-scene {
        background-size: cover !important;
        background-position: 68% center !important;
        opacity: .72 !important;
        filter: brightness(.66) contrast(1.08) saturate(.98) !important;
      }

      body.is-login-page .login-bg-overlay {
        background:
          linear-gradient(180deg, rgba(3,3,7,.78), rgba(3,3,7,.96) 42%, rgba(3,3,7,.99)),
          radial-gradient(circle at 58% 20%, rgba(255,47,120,.08), transparent 42%) !important;
      }
    }

    /* Login scene composition. */
    body.is-login-page .login-bg-scene {
      background-size: 94% auto !important;
      background-position: 47% 54% !important;
      background-color: #030307 !important;
      filter: brightness(.94) contrast(1.12) saturate(1.10) !important;
      animation: login-scene-readable-breathe 8s ease-in-out infinite !important;
    }

    body.is-login-page .login-bg-overlay {
      background:
        linear-gradient(90deg,
          rgba(3,3,7,.91) 0%,
          rgba(3,3,7,.70) 27%,
          rgba(3,3,7,.11) 56%,
          rgba(3,3,7,.22) 78%,
          rgba(3,3,7,.34) 100%
        ),
        radial-gradient(circle at 67% 38%, rgba(255,34,118,.145), transparent 31%),
        radial-gradient(circle at 78% 52%, rgba(255,74,150,.12), transparent 28%),
        radial-gradient(ellipse at 59% 94%, rgba(255,34,118,.17), transparent 46%),
        radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,.36) 100%) !important;
    }

    body.is-login-page #page-login::before {
      background:
        repeating-linear-gradient(135deg, rgba(255,255,255,.010) 0 1px, transparent 1px 36px),
        radial-gradient(circle at 66% 37%, rgba(255,47,120,.055), transparent 24%),
        radial-gradient(circle at 78% 54%, rgba(255,47,120,.045), transparent 26%) !important;
      opacity: .52 !important;
    }

    body.is-login-page #page-login::after {
      height: 31% !important;
      background:
        radial-gradient(ellipse at 58% 100%, rgba(255,47,120,.19), transparent 50%),
        radial-gradient(ellipse at 76% 100%, rgba(255,154,189,.08), transparent 40%),
        linear-gradient(180deg, transparent 0%, rgba(3,3,7,.72) 100%) !important;
    }

    @keyframes login-scene-readable-breathe {
      0%, 100% {
        filter: brightness(.91) contrast(1.10) saturate(1.06);
      }
      50% {
        filter: brightness(.98) contrast(1.14) saturate(1.14);
      }
    }

    @media (max-width: 1440px) {
      body.is-login-page .login-bg-scene {
        background-size: 100% auto !important;
        background-position: 50% 55% !important;
      }
    }

    @media (max-width: 1366px) {
      body.is-login-page .login-bg-scene {
        background-size: 104% auto !important;
        background-position: 53% 56% !important;
      }
    }

    @media (max-width: 768px) {
      body.is-login-page .login-bg-scene {
        background-size: cover !important;
        background-position: 68% center !important;
        filter: brightness(.70) contrast(1.08) saturate(1.02) !important;
      }
    }

    /* Wide login scene. */
    body.is-login-page .login-bg-scene {
      background-image: url("login-scene-ultrawide.webp") !important;
      background-size: cover !important;
      background-position: center center !important;
      background-repeat: no-repeat !important;
      opacity: 1 !important;
      transform: none !important;
      filter: brightness(.92) contrast(1.10) saturate(1.08) !important;
      animation: login-ultrawide-breathe 8s ease-in-out infinite !important;
    }

    body.is-login-page .login-bg-overlay {
      background:
        linear-gradient(90deg,
          rgba(3,3,7,.92) 0%,
          rgba(3,3,7,.78) 28%,
          rgba(3,3,7,.18) 58%,
          rgba(3,3,7,.28) 100%
        ),
        radial-gradient(circle at 72% 46%, rgba(255,34,118,.10), transparent 38%),
        radial-gradient(ellipse at 58% 96%, rgba(255,34,118,.16), transparent 48%),
        radial-gradient(ellipse at center, transparent 4%, rgba(0,0,0,.38) 100%) !important;
    }

    body.is-login-page #page-login::before {
      background:
        repeating-linear-gradient(135deg, rgba(255,255,255,.010) 0 1px, transparent 1px 36px),
        radial-gradient(circle at 71% 44%, rgba(255,47,120,.040), transparent 30%) !important;
      opacity: .46 !important;
    }

    body.is-login-page #page-login::after {
      height: 30% !important;
      background:
        radial-gradient(ellipse at 58% 100%, rgba(255,47,120,.18), transparent 50%),
        linear-gradient(180deg, transparent 0%, rgba(3,3,7,.70) 100%) !important;
    }

    @keyframes login-ultrawide-breathe {
      0%, 100% { filter: brightness(.90) contrast(1.08) saturate(1.05); }
      50% { filter: brightness(.96) contrast(1.12) saturate(1.12); }
    }

    @media (max-width: 768px) {
      body.is-login-page .login-bg-scene {
        background-size: cover !important;
        background-position: 64% center !important;
        filter: brightness(.70) contrast(1.08) saturate(1.02) !important;
      }
    }

    /* Login scene source. */
    body.is-login-page .login-bg-scene {
      background-image: url("login-unicorn-master.png") !important;
      background-repeat: no-repeat !important;
      background-size: cover !important;
      background-position: center center !important;
      opacity: 1 !important;
      filter: none !important;
      transform: none !important;
      animation: none !important;
      image-rendering: auto;
    }

    body.is-login-page .login-bg-overlay {
      background:
        linear-gradient(90deg,
          rgba(3,3,7,0.90) 0%,
          rgba(3,3,7,0.72) 28%,
          rgba(3,3,7,0.16) 56%,
          rgba(3,3,7,0.12) 100%
        ),
        radial-gradient(ellipse at 50% 100%, rgba(255,34,118,0.10), transparent 50%),
        radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,0.22) 100%) !important;
    }

    body.is-login-page #page-login::before {
      background: linear-gradient(90deg, rgba(0,0,0,.18), transparent 38%) !important;
      opacity: .26 !important;
      mix-blend-mode: normal !important;
    }

    body.is-login-page #page-login::after {
      height: 24% !important;
      background:
        radial-gradient(ellipse at 50% 100%, rgba(255,47,120,.10), transparent 52%),
        linear-gradient(180deg, transparent 0%, rgba(3,3,7,.38) 100%) !important;
      opacity: .72 !important;
      animation: none !important;
    }

    @media (max-width: 768px) {
      body.is-login-page .login-bg-scene {
        background-size: cover !important;
        background-position: 58% center !important;
        opacity: 1 !important;
        filter: none !important;
        animation: none !important;
      }

      body.is-login-page .login-bg-overlay {
        background:
          linear-gradient(180deg, rgba(3,3,7,.70) 0%, rgba(3,3,7,.52) 42%, rgba(3,3,7,.72) 100%),
          radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,.20) 100%) !important;
      }

      body.is-login-page #page-login::before {
        opacity: .16 !important;
      }

      body.is-login-page #page-login::after {
        height: 20% !important;
        opacity: .52 !important;
      }
    }
    /* Final login-card premium pass: card-only, login scene untouched. */
    body.is-login-page .login-card {
      position: relative !important;
      z-index: 5 !important;
      isolation: isolate;
      overflow: hidden !important;
      width: clamp(420px, 29vw, 500px) !important;
      max-width: min(500px, calc(100vw - 48px)) !important;
      min-height: auto !important;
      padding: 46px 46px 38px !important;
      border-radius: 32px !important;
      clip-path: none !important;
      background: linear-gradient(180deg, rgba(22,18,28,0.90), rgba(6,6,12,0.96)) !important;
      border: 1px solid rgba(255,255,255,0.10) !important;
      box-shadow:
        0 34px 100px rgba(0,0,0,0.62),
        0 0 70px rgba(255,47,120,0.14),
        inset 0 1px 0 rgba(255,255,255,0.08) !important;
      backdrop-filter: blur(22px) saturate(1.12) !important;
      -webkit-backdrop-filter: blur(22px) saturate(1.12) !important;
    }

    body.is-login-page .login-card > * {
      position: relative;
      z-index: 1;
    }

    body.is-login-page .login-card::before {
      content: "" !important;
      position: absolute !important;
      inset: 0 !important;
      z-index: 0 !important;
      pointer-events: none !important;
      border-radius: inherit !important;
      opacity: .94 !important;
      background:
        radial-gradient(circle at 88% 6%, rgba(255,76,140,.28), transparent 128px),
        linear-gradient(180deg, rgba(255,255,255,.075), transparent 30%),
        linear-gradient(90deg, rgba(255,154,189,.42), transparent 78%) left 26px top 24px / 74px 1px no-repeat,
        linear-gradient(180deg, rgba(255,154,189,.36), transparent 82%) left 24px top 24px / 1px 74px no-repeat,
        linear-gradient(270deg, rgba(255,154,189,.32), transparent 78%) right 26px top 24px / 64px 1px no-repeat,
        linear-gradient(180deg, rgba(255,154,189,.28), transparent 82%) right 24px top 24px / 1px 60px no-repeat,
        repeating-linear-gradient(135deg, rgba(255,255,255,.012) 0 1px, transparent 1px 30px) !important;
    }

    body.is-login-page .login-card::after {
      content: "" !important;
      position: absolute !important;
      left: 30px !important;
      right: 30px !important;
      top: auto !important;
      bottom: -64px !important;
      z-index: 0 !important;
      height: 118px !important;
      pointer-events: none !important;
      border-radius: 999px !important;
      opacity: .86 !important;
      background:
        radial-gradient(ellipse at center, rgba(255,47,120,.30), rgba(255,47,120,.10) 36%, transparent 72%) !important;
      box-shadow: 0 0 42px rgba(255,47,120,.20) !important;
    }

    body.is-login-page .login-wordmark {
      margin-bottom: 26px !important;
      text-align: center !important;
    }

    body.is-login-page .login-wordmark-title {
      display: block !important;
      padding-left: .22em;
      color: #fffafb !important;
      font-size: clamp(30px, 2vw, 38px) !important;
      font-weight: 780 !important;
      line-height: .94 !important;
      letter-spacing: .22em !important;
      text-transform: uppercase !important;
      text-shadow:
        0 1px 0 rgba(255,255,255,.14),
        0 0 26px rgba(255,255,255,.10),
        0 0 40px rgba(255,47,120,.18) !important;
    }

    body.is-login-page .login-wordmark-title::after {
      content: none !important;
    }

    body.is-login-page .login-wordmark-subtitle {
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      gap: 11px;
      margin-top: 15px !important;
      color: rgba(255,154,189,.92) !important;
      font-size: 10px !important;
      font-weight: 760 !important;
      line-height: 1 !important;
      letter-spacing: .30em !important;
      text-transform: uppercase !important;
    }

    body.is-login-page .login-wordmark-subtitle::before,
    body.is-login-page .login-wordmark-subtitle::after {
      content: "";
      width: 38px;
      height: 1px;
      flex: 0 0 38px;
      opacity: .86;
      background: linear-gradient(90deg, transparent, rgba(255,154,189,.68));
      box-shadow: 0 0 12px rgba(255,47,120,.18);
    }

    body.is-login-page .login-wordmark-subtitle::after {
      background: linear-gradient(90deg, rgba(255,154,189,.68), transparent);
    }

    body.is-login-page .login-title {
      margin: 0 0 10px !important;
      color: #fff !important;
      font-size: clamp(34px, 2vw, 38px) !important;
      font-weight: 780 !important;
      line-height: 1.08 !important;
      letter-spacing: 0 !important;
      text-align: center !important;
      background: none !important;
      -webkit-background-clip: initial !important;
      background-clip: initial !important;
      text-shadow:
        0 18px 44px rgba(0,0,0,.44),
        0 0 30px rgba(255,47,120,.13) !important;
      animation: none !important;
    }

    body.is-login-page .login-sub {
      display: block !important;
      width: auto !important;
      max-width: 100% !important;
      margin: 0 auto 34px !important;
      padding: 0 0 24px !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      color: rgba(255,255,255,.72) !important;
      font-size: 14px !important;
      font-weight: 520 !important;
      line-height: 1.45 !important;
      text-align: center !important;
      box-shadow: none !important;
      position: relative;
    }

    body.is-login-page .login-sub::after {
      content: "" !important;
      position: absolute !important;
      left: 50% !important;
      bottom: 0 !important;
      width: 118px !important;
      height: 1px !important;
      transform: translateX(-50%) !important;
      background:
        linear-gradient(90deg, transparent, rgba(255,255,255,.18), rgba(255,47,120,.70), rgba(255,255,255,.18), transparent) !important;
      box-shadow: 0 0 20px rgba(255,47,120,.28) !important;
    }

    body.is-login-page .login-form-panel {
      position: relative !important;
      z-index: 1 !important;
    }

    body.is-login-page .login-card .field {
      margin-bottom: 18px !important;
    }

    body.is-login-page .login-card .field label {
      margin-bottom: 10px !important;
      color: rgba(255,174,204,.82) !important;
      font-size: 10px !important;
      font-weight: 760 !important;
      letter-spacing: .16em !important;
      text-transform: uppercase !important;
    }

    body.is-login-page .login-input-wrap {
      position: relative !important;
      display: flex !important;
      align-items: center !important;
      gap: 12px !important;
      min-height: 60px !important;
      height: 60px !important;
      padding: 0 16px !important;
      border-radius: 18px !important;
      border: 1px solid rgba(255,255,255,.10) !important;
      background: linear-gradient(180deg, rgba(12,12,18,0.86), rgba(5,5,10,0.92)) !important;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.04),
        0 12px 28px rgba(0,0,0,0.26) !important;
      transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease,
        background 180ms ease !important;
    }

    body.is-login-page .login-input-wrap::after {
      left: 18px !important;
      right: 18px !important;
      bottom: -1px !important;
      height: 1px !important;
      background: linear-gradient(90deg, transparent, rgba(255,76,140,.58), transparent) !important;
    }

    body.is-login-page .login-input-wrap:focus-within {
      transform: translateY(-1px);
      border-color: rgba(255,76,140,0.58) !important;
      box-shadow:
        0 0 0 3px rgba(255,76,140,0.10),
        0 0 30px rgba(255,47,120,0.12),
        inset 0 1px 0 rgba(255,255,255,0.06) !important;
    }

    body.is-login-page .login-input-icon {
      width: 20px !important;
      height: 20px !important;
      flex: 0 0 20px !important;
      color: rgba(255,255,255,.48) !important;
    }

    body.is-login-page .login-input-icon svg {
      width: 20px !important;
      height: 20px !important;
      display: block;
    }

    body.is-login-page .login-input-wrap:focus-within .login-input-icon {
      color: rgba(255,154,189,.92) !important;
    }

    body.is-login-page .login-card .login-input-wrap input {
      min-width: 0 !important;
      min-height: 58px !important;
      height: 58px !important;
      padding: 0 !important;
      color: #fff !important;
      font-size: 15px !important;
      font-weight: 560 !important;
      line-height: 1.2 !important;
      text-shadow: 0 1px 0 rgba(0,0,0,.22);
    }

    body.is-login-page .login-card .login-input-wrap input::placeholder {
      color: rgba(255,255,255,.36) !important;
    }

    body.is-login-page #login-password {
      padding-right: 52px !important;
    }

    body.is-login-page .login-password-toggle {
      position: absolute;
      right: 13px;
      top: 50%;
      width: 38px;
      height: 38px;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transform: translateY(-50%);
      border: 0;
      border-radius: 14px;
      background: transparent;
      color: rgba(255,255,255,.45);
      cursor: pointer;
      transition:
        color 180ms ease,
        background 180ms ease,
        transform 180ms ease;
      z-index: 3;
    }

    body.is-login-page .login-password-toggle svg {
      width: 19px;
      height: 19px;
      display: block;
    }

    body.is-login-page .login-password-toggle:hover,
    body.is-login-page .login-password-toggle:focus-visible,
    body.is-login-page .login-password-toggle.is-visible {
      color: rgba(255,255,255,.78);
      background: rgba(255,79,139,.11);
      outline: none;
    }

    body.is-login-page .login-password-toggle:active {
      transform: translateY(-50%) scale(.96);
    }

    body.is-login-page #btn-do-login {
      min-height: 62px !important;
      height: 62px !important;
      margin-top: 10px !important;
      border-radius: 18px !important;
      color: #fff !important;
      font-size: 15px !important;
      font-weight: 750 !important;
      letter-spacing: 0 !important;
      background: linear-gradient(135deg, #FF2674 0%, #FF3F86 48%, #FF75A7 100%) !important;
      box-shadow:
        0 18px 46px rgba(255,47,120,0.36),
        0 0 28px rgba(255,47,120,0.16),
        inset 0 1px 0 rgba(255,255,255,0.28) !important;
      text-shadow: 0 1px 0 rgba(80,0,30,.26);
      transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        filter 180ms ease !important;
    }

    body.is-login-page #btn-do-login:hover:not(:disabled) {
      transform: translateY(-1px);
      filter: saturate(1.06);
      box-shadow:
        0 24px 62px rgba(255,47,120,.46),
        0 0 42px rgba(255,47,120,.24),
        inset 0 1px 0 rgba(255,255,255,.34) !important;
    }

    body.is-login-page #btn-do-login:active:not(:disabled) {
      transform: translateY(0);
    }

    body.is-login-page #btn-do-login:disabled {
      transform: none !important;
    }

    body.is-login-page .login-submit-arrow {
      font-weight: 850;
      transition: transform 180ms ease;
    }

    body.is-login-page #btn-do-login:hover:not(:disabled) .login-submit-arrow {
      transform: translateX(3px);
    }

    body.is-login-page .login-support {
      position: relative;
      margin: 22px 0 0 !important;
      padding: 20px 0 0 !important;
      border-top: 0 !important;
      max-width: none !important;
      background:
        linear-gradient(90deg, transparent, rgba(255,255,255,.08), rgba(255,47,120,.20), rgba(255,255,255,.08), transparent) top center / 100% 1px no-repeat;
      text-align: center;
    }

    body.is-login-page .login-support::before {
      content: "" !important;
      position: absolute !important;
      left: 50% !important;
      top: -3px !important;
      width: 6px !important;
      height: 6px !important;
      transform: translateX(-50%) rotate(45deg) !important;
      border: 1px solid rgba(255,79,139,.52) !important;
      background: rgba(255,79,139,.09) !important;
      box-shadow: 0 0 10px rgba(255,47,120,.22) !important;
    }

    body.is-login-page .login-support-chip {
      display: inline-flex;
      align-items: center;
      gap: 13px;
      max-width: 100%;
      padding: 11px 20px 11px 12px;
      border-radius: 17px;
      border: 1px solid rgba(255,79,139,.17);
      background:
        radial-gradient(130% 220% at 50% -70%, rgba(255,47,120,.15), transparent 62%),
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        0 14px 30px -20px rgba(255,47,120,.55);
      text-align: left;
      transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
    }

    body.is-login-page .login-support-chip:hover {
      border-color: rgba(255,79,139,.36);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 16px 34px -18px rgba(255,47,120,.65);
      transform: translateY(-1px);
    }

    body.is-login-page .login-support-icon {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border-radius: 12px;
      border: 1px solid rgba(255,79,139,.30);
      background: linear-gradient(160deg, rgba(255,47,120,.24), rgba(255,47,120,.05));
      box-shadow: 0 0 16px rgba(255,47,120,.20);
      color: #ff9abd;
    }

    body.is-login-page .login-support-icon svg {
      width: 18px;
      height: 18px;
    }

    body.is-login-page .login-support-text {
      display: block;
      min-width: 0;
    }

    body.is-login-page .login-support-label {
      display: block;
      margin-bottom: 2px;
      font-size: 10.5px;
      font-weight: 800;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: rgba(255,255,255,.38);
    }

    body.is-login-page .login-support-cta {
      display: block;
      font-size: 13.5px;
      font-weight: 550;
      line-height: 1.4;
      color: rgba(255,255,255,.84);
    }

    body.is-login-page .login-support-cta b {
      font-weight: 750;
      background: linear-gradient(90deg, #ff9abd, #ff4f8b);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    body.is-login-page .login-error {
      margin: -2px 0 18px !important;
      color: #ff8ab6 !important;
      font-size: 13px !important;
      font-weight: 650 !important;
      line-height: 1.45 !important;
    }

    @media (max-width: 768px) {
      body.is-login-page .login-card {
        width: calc(100% - 32px) !important;
        max-width: 430px !important;
        padding: 34px 22px 28px !important;
        border-radius: 28px !important;
        margin: 0 auto !important;
      }

      body.is-login-page .login-card::before {
        background:
          radial-gradient(circle at 86% 4%, rgba(255,76,140,.23), transparent 112px),
          linear-gradient(180deg, rgba(255,255,255,.065), transparent 30%),
          linear-gradient(90deg, rgba(255,154,189,.34), transparent 78%) left 20px top 20px / 56px 1px no-repeat,
          linear-gradient(180deg, rgba(255,154,189,.30), transparent 82%) left 20px top 20px / 1px 56px no-repeat,
          repeating-linear-gradient(135deg, rgba(255,255,255,.010) 0 1px, transparent 1px 30px) !important;
      }

      body.is-login-page .login-wordmark {
        margin-bottom: 22px !important;
      }

      body.is-login-page .login-wordmark-title {
        font-size: 28px !important;
        letter-spacing: .18em !important;
        padding-left: .18em;
      }

      body.is-login-page .login-wordmark-subtitle {
        gap: 9px;
        letter-spacing: .24em !important;
      }

      body.is-login-page .login-wordmark-subtitle::before,
      body.is-login-page .login-wordmark-subtitle::after {
        width: 28px;
        flex-basis: 28px;
      }

      body.is-login-page .login-title {
        font-size: 30px !important;
      }

      body.is-login-page .login-sub {
        margin-bottom: 28px !important;
        padding-bottom: 20px !important;
        font-size: 13.5px !important;
      }

      body.is-login-page .login-input-wrap,
      body.is-login-page #btn-do-login {
        height: 58px !important;
        min-height: 58px !important;
      }

      body.is-login-page .login-card .login-input-wrap input {
        height: 56px !important;
        min-height: 56px !important;
      }

      body.is-login-page .login-support {
        margin-top: 20px !important;
        padding-top: 18px !important;
        padding-inline: 0 !important;
      }

      body.is-login-page .login-support-chip {
        width: 100%;
        padding: 10px 16px 10px 10px;
      }
    }
  
    /* Staff support launcher */
    .support-fab {
      right: 26px !important;
      bottom: 24px !important;
      min-width: 196px !important;
      min-height: 48px !important;
      height: 48px !important;
      padding: 0 20px 0 12px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: flex-start !important;
      gap: 12px !important;
      border-radius: 18px !important;
      border: 1px solid rgba(255, 154, 189, .30) !important;
      background:
        linear-gradient(135deg, rgba(255, 79, 139, .26), rgba(255, 154, 189, .10)),
        rgba(22, 18, 27, .92) !important;
      color: var(--text-primary, #F7F3F7) !important;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .08),
        0 18px 44px rgba(0, 0, 0, .38),
        0 0 28px rgba(255, 79, 139, .12) !important;
      transform: none !important;
      transform-origin: right bottom !important;
      font-size: 13.5px !important;
      font-weight: 750 !important;
      letter-spacing: -.01em !important;
    }

    .support-fab span {
      width: 32px !important;
      height: 32px !important;
      flex: 0 0 32px !important;
      display: inline-grid !important;
      place-items: center !important;
      border-radius: 13px !important;
      color: #ffd5e4 !important;
      background:
        radial-gradient(circle at 35% 20%, rgba(255, 255, 255, .14), transparent 52%),
        rgba(255, 255, 255, .075) !important;
      border: 1px solid rgba(255, 255, 255, .08) !important;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08) !important;
    }

    .support-fab svg {
      width: 18px !important;
      height: 18px !important;
      display: block !important;
      stroke-width: 2 !important;
    }

    .support-fab b {
      display: block !important;
      min-width: 0 !important;
      color: #fff3f8 !important;
      white-space: nowrap !important;
      line-height: 1 !important;
      font-size: inherit !important;
      font-weight: inherit !important;
    }

    .support-fab:hover {
      transform: translateY(-2px) !important;
      border-color: rgba(255, 154, 189, .48) !important;
      background:
        linear-gradient(135deg, rgba(255, 79, 139, .32), rgba(255, 154, 189, .13)),
        rgba(24, 19, 30, .94) !important;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .10),
        0 22px 52px rgba(0, 0, 0, .44),
        0 0 34px rgba(255, 79, 139, .18) !important;
    }

    .support-fab-badge {
      top: -8px !important;
      right: -8px !important;
    }

    body.is-manager-session .support-fab {
      display: none !important;
    }

    @media (max-width: 640px) {
      .support-fab {
        right: 16px !important;
        bottom: 16px !important;
        min-width: 52px !important;
        width: 52px !important;
        height: 52px !important;
        min-height: 52px !important;
        padding: 0 !important;
        justify-content: center !important;
        border-radius: 18px !important;
      }

      .support-fab b {
        display: none !important;
      }
    }

    /* ══ Manager dashboard — premium polish v3 ══ */

    @keyframes ugPulseGreen {
      0%, 100% { box-shadow: 0 0 0 3px rgba(54,226,154,.14), 0 0 12px rgba(54,226,154,.75); }
      50%      { box-shadow: 0 0 0 6px rgba(54,226,154,.05), 0 0 16px rgba(54,226,154,.95); }
    }
    @keyframes ugPulsePink {
      0%, 100% { box-shadow: 0 0 0 3px rgba(255,79,139,.16), 0 0 10px rgba(255,79,139,.8); }
      50%      { box-shadow: 0 0 0 6px rgba(255,79,139,.06), 0 0 14px rgba(255,79,139,1); }
    }

    /* — Hero: заголовок с градиентным свечением — */
    .manager-shell .manager-hero-row h1 {
      font-size: 38px !important;
      font-weight: 850 !important;
      letter-spacing: -.035em !important;
      background: linear-gradient(115deg, #FFFFFF 52%, #FFC7DA 80%, #FF8AB6);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .manager-shell .manager-welcome {
      display: inline-flex !important;
      align-items: center;
      gap: 10px;
    }
    .manager-shell .manager-welcome::before {
      content: "";
      width: 24px;
      height: 1px;
      background: linear-gradient(90deg, #FF4F8B, transparent);
    }
    .manager-shell .manager-hero-row p span {
      width: 8px !important;
      height: 8px !important;
      border-radius: 50% !important;
      background: #36E29A !important;
      animation: ugPulseGreen 2.6s ease-in-out infinite;
    }

    /* — Карточки: тонкая световая кромка сверху — */
    .manager-shell .manager-card,
    .manager-shell .manager-metric {
      position: relative !important;
      overflow: hidden !important;
    }
    .manager-shell .manager-card::before,
    .manager-shell .manager-metric::before {
      content: "";
      position: absolute;
      top: 0;
      left: 14%;
      right: 14%;
      height: 1px;
      pointer-events: none;
      background: linear-gradient(90deg, transparent, rgba(255,138,182,.30), transparent);
    }

    /* — Метрики: градиентные значения, живые иконки — */
    .manager-shell .manager-metric b {
      font-size: 31px !important;
      background: linear-gradient(120deg, #FFFFFF 60%, #FFB3CC);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .manager-shell .manager-metric.good b {
      background: linear-gradient(120deg, #E9FFF5 40%, #55E8A9);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .manager-shell .manager-metric.risk b {
      background: linear-gradient(120deg, #FFD3E2 30%, #FF4F8B);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .manager-shell .manager-metric i {
      transition: box-shadow .2s ease, transform .2s ease !important;
    }
    .manager-shell .manager-metric:hover i {
      transform: scale(1.05);
      box-shadow: 0 0 30px rgba(255,79,139,.16), inset 0 1px 0 rgba(255,255,255,.07) !important;
    }
    .manager-shell .manager-metric.good:hover i {
      box-shadow: 0 0 30px rgba(54,226,154,.15), inset 0 1px 0 rgba(255,255,255,.06) !important;
    }

    /* — Шапки карточек: счётчик-пилюля вместо голой цифры — */
    .manager-shell .manager-card-head b {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      min-width: 30px !important;
      height: 26px !important;
      margin-top: 8px !important;
      padding: 0 11px !important;
      border-radius: 999px !important;
      border: 1px solid rgba(255,154,189,.22) !important;
      background: linear-gradient(180deg, rgba(255,79,139,.17), rgba(255,79,139,.05)) !important;
      box-shadow: 0 0 14px rgba(255,79,139,.10), inset 0 1px 0 rgba(255,255,255,.06) !important;
      font-size: 13px !important;
      font-weight: 800 !important;
      color: #FFD3E2 !important;
    }
    .manager-shell .manager-card-hint {
      border-bottom: 0 !important;
      background: linear-gradient(90deg, rgba(255,255,255,.10), rgba(255,79,139,.18), transparent) bottom left / 100% 1px no-repeat;
    }
    .manager-shell .manager-card-head button:hover,
    .manager-shell .manager-card-link:hover {
      border-color: rgba(255,154,189,.32) !important;
      color: #FFFFFF !important;
      box-shadow: 0 0 20px rgba(255,79,139,.10), inset 0 1px 0 rgba(255,255,255,.06) !important;
    }

    /* — Алерт-карта: пульс на ярлыке, заметная кнопка — */
    .manager-shell .manager-alert-copy > span {
      display: inline-flex !important;
      align-items: center !important;
      gap: 8px !important;
    }
    .manager-shell .manager-alert-copy > span::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #FF4F8B;
      animation: ugPulsePink 2.2s ease-in-out infinite;
    }
    .manager-shell .manager-alert-card .manager-small-btn {
      border-color: rgba(255,122,174,.32) !important;
      background: linear-gradient(180deg, rgba(255,79,139,.20), rgba(255,79,139,.07)) !important;
      color: #FFD3E2 !important;
      font-weight: 700 !important;
    }
    .manager-shell .manager-alert-card .manager-small-btn:hover {
      border-color: rgba(255,122,174,.5) !important;
      background: linear-gradient(180deg, rgba(255,79,139,.30), rgba(255,79,139,.12)) !important;
      box-shadow: 0 0 24px rgba(255,79,139,.18) !important;
      color: #FFFFFF !important;
    }

    /* — Аватары: кольцо со свечением — */
    .manager-shell .manager-avatar {
      border: 1px solid rgba(255,255,255,.16) !important;
      box-shadow:
        0 0 0 2px rgba(255,79,139,.12),
        inset 0 1px 0 rgba(255,255,255,.12),
        0 8px 18px rgba(255,79,139,.12) !important;
    }

    /* — Прогресс-бары: сочнее и с бликом — */
    .manager-shell .manager-course-main em,
    .manager-shell .manager-rank-main em {
      height: 4px !important;
      background: rgba(255,255,255,.07) !important;
      box-shadow: inset 0 1px 2px rgba(0,0,0,.35) !important;
      overflow: hidden !important;
    }
    .manager-shell .manager-course-main em i,
    .manager-shell .manager-rank-main em i {
      box-shadow: 0 0 12px rgba(255,79,139,.5) !important;
    }

    /* — Рейтинг: медали за топ-3 — */
    .manager-shell .manager-rank-place {
      display: grid !important;
      place-items: center !important;
      width: 28px !important;
      height: 28px !important;
      border-radius: 10px !important;
      border: 1px solid rgba(255,255,255,.10) !important;
      background: rgba(255,255,255,.045) !important;
      color: rgba(255,255,255,.6) !important;
      font-size: 12.5px !important;
      font-weight: 800 !important;
    }
    .manager-shell .manager-rank-place.top-1 {
      border-color: rgba(255,215,140,.55) !important;
      background: linear-gradient(150deg, #FFE3A3, #E8A93D) !important;
      color: #3A2A08 !important;
      box-shadow: 0 0 18px rgba(255,196,90,.30), inset 0 1px 0 rgba(255,255,255,.5) !important;
    }
    .manager-shell .manager-rank-place.top-2 {
      border-color: rgba(220,228,240,.45) !important;
      background: linear-gradient(150deg, #EEF2F8, #9BA6B8) !important;
      color: #232833 !important;
      box-shadow: 0 0 14px rgba(196,208,226,.22), inset 0 1px 0 rgba(255,255,255,.55) !important;
    }
    .manager-shell .manager-rank-place.top-3 {
      border-color: rgba(240,176,140,.45) !important;
      background: linear-gradient(150deg, #F5C4A2, #B96F44) !important;
      color: #3A2113 !important;
      box-shadow: 0 0 14px rgba(230,150,100,.22), inset 0 1px 0 rgba(255,255,255,.4) !important;
    }

    /* — Статус-бейджи: пилюли с индикатором — */
    .manager-status {
      display: inline-flex !important;
      align-items: center !important;
      gap: 7px !important;
      height: 26px !important;
      padding: 0 12px !important;
      border-radius: 999px !important;
      border: 1px solid rgba(255,255,255,.10) !important;
      background: rgba(255,255,255,.045) !important;
      color: rgba(255,255,255,.72) !important;
      font-size: 11px !important;
      font-weight: 700 !important;
      letter-spacing: .02em !important;
      white-space: nowrap !important;
    }
    .manager-status::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: currentColor;
      box-shadow: 0 0 8px currentColor;
      flex: 0 0 auto;
    }
    .manager-status.good {
      border-color: rgba(54,226,154,.28) !important;
      background: rgba(54,226,154,.09) !important;
      color: #7BEFC0 !important;
    }
    .manager-status.warn {
      border-color: rgba(255,194,77,.28) !important;
      background: rgba(255,194,77,.09) !important;
      color: #FFD58A !important;
    }
    .manager-status.risk {
      border-color: rgba(255,79,139,.34) !important;
      background: rgba(255,79,139,.10) !important;
      color: #FF9AB4 !important;
    }
    .manager-status.progress {
      border-color: rgba(255,138,182,.26) !important;
      background: rgba(255,138,182,.08) !important;
      color: #FF9ABD !important;
    }

    /* — Пустые состояния — */
    .manager-shell .manager-empty {
      padding: 18px !important;
      border: 1px dashed rgba(255,255,255,.13) !important;
      border-radius: 16px !important;
      background: rgba(255,255,255,.02) !important;
      color: rgba(201,190,200,.75) !important;
    }

    /* — Донат: градиентное число — */
    .manager-shell .manager-donut-center b {
      background: linear-gradient(120deg, #FFFFFF 55%, #FFB3CC);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    @media (max-width: 768px) {
      .manager-shell .manager-hero-row h1 {
        font-size: 30px !important;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .manager-shell .manager-hero-row p span,
      .manager-shell .manager-alert-copy > span::before {
        animation: none !important;
      }
    }

    /* ── 2026 beta: viewport-locked HR support workspace ── */
    @media (min-width: 901px) {
      body.is-support-page {
        height: 100dvh !important;
        min-height: 0 !important;
        overflow: hidden !important;
      }
      body.is-support-page main,
      body.is-support-page #page-support {
        height: 100dvh !important;
        min-height: 0 !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
      }
      body.is-support-page #page-support > .manager-shell,
      body.is-support-page .role-hr.manager-shell {
        height: 100dvh !important;
        min-height: 0 !important;
        max-height: 100dvh !important;
        grid-template-rows: minmax(0, 1fr);
        overflow: hidden !important;
      }
      body.is-support-page .manager-shell-sidebar {
        position: relative !important;
        top: auto !important;
        height: 100dvh !important;
        min-height: 0 !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
      }
      body.is-support-page .manager-shell-main {
        height: 100dvh !important;
        min-height: 0 !important;
        max-height: 100dvh !important;
        display: grid !important;
        grid-template-rows: 72px minmax(0, 1fr) !important;
        overflow: hidden !important;
      }
      body.is-support-page .manager-shell-topbar {
        position: relative !important;
        top: auto !important;
        min-height: 0 !important;
        height: 72px !important;
        box-sizing: border-box;
      }
      body.is-support-page .support-shell-content {
        width: 100%;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        display: grid !important;
        grid-template-rows: auto minmax(0, 1fr) !important;
        overflow: hidden !important;
        padding: 16px 24px 18px !important;
      }
      body.is-support-page .support-shell-content .page-top {
        min-height: 58px;
        margin: 0 !important;
        padding: 0 0 12px !important;
        align-items: center;
      }
      body.is-support-page .support-shell-content .page-top h2 {
        font-size: clamp(24px, 2vw, 30px) !important;
      }
      body.is-support-page .support-premium-workspace {
        width: 100%;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        grid-template-columns: clamp(285px, 25vw, 360px) minmax(0, 1fr) !important;
        grid-template-rows: minmax(0, 1fr) !important;
        overflow: hidden !important;
        align-items: stretch !important;
        border-radius: 18px !important;
        border-color: rgba(255,255,255,.085) !important;
        box-shadow: 0 24px 70px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.035) !important;
      }
      body.is-support-page .support-premium-workspace .support-sidebar,
      body.is-support-page .support-premium-workspace .support-detail {
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        align-self: stretch !important;
        box-sizing: border-box;
        overflow: hidden !important;
      }
      body.is-support-page .support-sidebar {
        display: grid !important;
        grid-template-rows: auto minmax(0, 1fr) !important;
      }
      body.is-support-page .support-sidebar-head {
        padding: 14px 16px !important;
      }
      body.is-support-page .support-ticket-list {
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
      }
      body.is-support-page .support-detail {
        display: grid !important;
        grid-template-rows: auto minmax(0, 1fr) auto !important;
      }
      body.is-support-page .support-detail-head {
        grid-row: 1 !important;
        padding: 13px 16px !important;
        align-items: center !important;
      }
      body.is-support-page .support-chat-stage {
        grid-row: 2 !important;
        min-width: 0;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background:
          radial-gradient(circle at 88% 8%, rgba(255,79,139,.055), transparent 280px),
          linear-gradient(145deg, rgba(10,8,13,.96), rgba(5,5,9,.98));
      }
      body.is-support-page .support-chat-stage .support-history-loader {
        flex: 0 0 auto;
        margin: 0;
        padding: 8px 14px 0;
      }
      body.is-support-page .support-chat-stage .support-chat.hr-view {
        flex: 1 1 0 !important;
        width: 100%;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
      }
      body.is-support-page .support-detail > .support-reply,
      body.is-support-page .support-detail > .support-closed-note {
        grid-row: 3 !important;
        min-height: 0 !important;
        margin: 0 !important;
        position: relative !important;
        inset: auto !important;
        z-index: 4;
      }
      body.is-support-page .support-detail > .support-reply {
        padding: 9px 12px 10px !important;
        border-top: 1px solid rgba(255,255,255,.085) !important;
        background:
          linear-gradient(180deg, rgba(255,255,255,.022), transparent),
          rgba(10,9,14,.98) !important;
        box-shadow: 0 -18px 42px rgba(0,0,0,.20) !important;
      }
      body.is-support-page .support-composer {
        min-height: 42px !important;
        align-items: center !important;
      }
      body.is-support-page .support-composer textarea {
        height: 42px !important;
        min-height: 42px !important;
        max-height: 82px !important;
        resize: none !important;
      }
      body.is-support-page .support-image-attachment {
        width: min(100%, 238px) !important;
      }
      body.is-support-page .support-image-preview {
        min-height: 104px !important;
      }
    }

    @media (max-width: 900px) {
      body.is-support-page {
        overflow-y: auto !important;
      }
      body.is-support-page .support-chat-stage {
        min-height: 380px;
        display: flex;
        flex-direction: column;
      }
      body.is-support-page .support-chat-stage .support-chat.hr-view {
        flex: 1 1 auto;
        min-height: 320px !important;
      }
    }

    /* ── 2026 beta: integrated premium login console ── */
    body.is-login-page #page-login {
      background: #030307 !important;
    }
    body.is-login-page .login-bg-scene {
      display: block !important;
      position: absolute !important;
      inset: 0 !important;
      z-index: 0 !important;
      pointer-events: none !important;
      background-image: url("login-scene-ultrawide.webp") !important;
      background-repeat: no-repeat !important;
      background-size: cover !important;
      background-position: center center !important;
      opacity: 1 !important;
      filter: brightness(.92) contrast(1.07) saturate(1.05) !important;
      transform: none !important;
      animation: none !important;
    }
    body.is-login-page .login-bg-overlay {
      display: block !important;
      position: absolute !important;
      inset: 0 !important;
      z-index: 1 !important;
      pointer-events: none !important;
      background:
        linear-gradient(90deg, rgba(2,2,6,.88) 0%, rgba(2,2,6,.70) 28%, rgba(2,2,6,.12) 58%, rgba(2,2,6,.24) 100%),
        linear-gradient(180deg, rgba(2,2,6,.12), transparent 55%, rgba(2,2,6,.54)),
        radial-gradient(circle at 73% 48%, rgba(255,47,120,.10), transparent 34%),
        radial-gradient(ellipse at center, transparent 46%, rgba(0,0,0,.34) 100%) !important;
    }
    body.is-login-page #page-login::before {
      z-index: 2 !important;
      opacity: .34 !important;
      background:
        repeating-linear-gradient(135deg, rgba(255,255,255,.012) 0 1px, transparent 1px 38px),
        linear-gradient(90deg, rgba(0,0,0,.22), transparent 42%) !important;
    }
    body.is-login-page #page-login::after {
      z-index: 1 !important;
      inset: auto 0 0 0 !important;
      width: 100% !important;
      height: 24% !important;
      border-radius: 0 !important;
      opacity: .72 !important;
      transform: none !important;
      filter: none !important;
      background:
        radial-gradient(ellipse at 58% 100%, rgba(255,47,120,.12), transparent 52%),
        linear-gradient(180deg, transparent, rgba(2,2,6,.54)) !important;
      box-shadow: none !important;
      animation: none !important;
    }
    body.is-login-page .login-card {
      position: relative !important;
      z-index: 5 !important;
      isolation: isolate;
      width: min(410px, calc(100vw - 44px)) !important;
      max-width: min(410px, calc(100vw - 44px)) !important;
      min-height: 0 !important;
      margin-left: clamp(8px, 2.5vw, 52px) !important;
      padding: clamp(34px, 4.5vh, 44px) clamp(30px, 3vw, 40px) clamp(30px, 4vh, 38px) !important;
      overflow: hidden !important;
      border: 1px solid rgba(255,255,255,.10) !important;
      border-radius: 0 !important;
      clip-path: polygon(0 22px, 22px 0, calc(100% - 30px) 0, 100% 30px, 100% calc(100% - 34px), calc(100% - 34px) 100%, 0 100%) !important;
      background:
        radial-gradient(circle at 94% 2%, rgba(255,76,140,.17), transparent 150px),
        linear-gradient(180deg, rgba(17,14,22,.78), rgba(5,5,10,.86)) !important;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.075),
        inset 1px 0 0 rgba(255,79,139,.08),
        0 34px 100px rgba(0,0,0,.48) !important;
      filter: drop-shadow(0 0 34px rgba(255,47,120,.09));
      backdrop-filter: blur(16px) saturate(1.08) !important;
      -webkit-backdrop-filter: blur(16px) saturate(1.08) !important;
    }
    body.is-login-page .login-card::before {
      content: "" !important;
      position: absolute !important;
      inset: 0 !important;
      z-index: 0 !important;
      border-radius: 0 !important;
      opacity: 1 !important;
      pointer-events: none !important;
      background:
        linear-gradient(90deg, rgba(255,154,189,.78), transparent) left 22px top 18px / 88px 1px no-repeat,
        linear-gradient(180deg, rgba(255,154,189,.62), transparent) left 18px top 22px / 1px 88px no-repeat,
        linear-gradient(270deg, rgba(255,154,189,.38), transparent) right 24px bottom 18px / 72px 1px no-repeat,
        linear-gradient(0deg, rgba(255,154,189,.32), transparent) right 18px bottom 24px / 1px 72px no-repeat,
        linear-gradient(180deg, rgba(255,255,255,.035), transparent 34%) !important;
    }
    body.is-login-page .login-card::after {
      content: "" !important;
      position: absolute !important;
      left: 16% !important;
      right: 16% !important;
      top: auto !important;
      bottom: -42px !important;
      z-index: 0 !important;
      height: 76px !important;
      border-radius: 50% !important;
      opacity: .58 !important;
      pointer-events: none !important;
      background: rgba(255,47,120,.22) !important;
      filter: blur(28px);
      box-shadow: none !important;
    }
    body.is-login-page .login-card > * {
      position: relative;
      z-index: 1;
    }
    body.is-login-page .login-wordmark {
      text-align: left !important;
    }
    body.is-login-page .login-title,
    body.is-login-page .login-sub {
      text-align: center !important;
    }
    body.is-login-page .login-wordmark {
      align-items: flex-start !important;
      position: relative !important;
      width: 100% !important;
      max-width: 100% !important;
      margin-bottom: 28px !important;
      gap: 0 !important;
    }
    body.is-login-page .login-wordmark::after {
      content: "" !important;
      position: absolute !important;
      top: 49px !important;
      left: 0 !important;
      width: min(58%, 184px) !important;
      height: 1px !important;
      background: linear-gradient(90deg, rgba(255,79,139,.78), rgba(255,154,189,.38), transparent) !important;
      box-shadow: 0 0 14px rgba(255,47,120,.16) !important;
      pointer-events: none !important;
    }
    body.is-login-page .login-wordmark-title {
      padding-left: 0 !important;
      color: #ff336f !important;
      font-family: var(--font-display) !important;
      font-size: clamp(43px, 3vw, 52px) !important;
      font-weight: 900 !important;
      line-height: .82 !important;
      letter-spacing: -.065em !important;
      text-transform: uppercase !important;
      text-shadow: 0 12px 36px rgba(255,47,112,.20) !important;
    }
    body.is-login-page .login-wordmark-subtitle {
      display: block !important;
      align-self: flex-end !important;
      margin-top: 17px !important;
      text-align: right !important;
      color: #f8f5f8 !important;
      font-family: var(--font-display) !important;
      font-size: clamp(43px, 3vw, 52px) !important;
      font-weight: 900 !important;
      line-height: .82 !important;
      letter-spacing: -.075em !important;
      text-transform: uppercase !important;
      text-shadow: 0 12px 34px rgba(0,0,0,.32) !important;
    }
    body.is-login-page .login-wordmark-subtitle::before,
    body.is-login-page .login-wordmark-subtitle::after {
      content: none !important;
      display: none !important;
    }
    body.is-login-page .login-title {
      margin-bottom: 8px !important;
      font-size: clamp(30px, 2vw, 36px) !important;
      letter-spacing: -.035em !important;
    }
    body.is-login-page .login-sub {
      margin: 0 0 30px !important;
      padding: 0 0 21px !important;
      font-size: 13px !important;
    }
    body.is-login-page .login-sub::after {
      left: 50% !important;
      width: 86px !important;
      transform: translateX(-50%) !important;
    }
    body.is-login-page .login-card .field {
      margin-bottom: 16px !important;
    }
    body.is-login-page .login-input-wrap {
      height: 56px !important;
      min-height: 56px !important;
      border-radius: 10px !important;
      background: rgba(4,4,9,.72) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 12px 28px rgba(0,0,0,.18) !important;
    }
    body.is-login-page .login-card .login-input-wrap input {
      height: 54px !important;
      min-height: 54px !important;
    }
    body.is-login-page .login-password-toggle {
      border-radius: 8px !important;
    }
    body.is-login-page #btn-do-login {
      height: 56px !important;
      min-height: 56px !important;
      margin-top: 8px !important;
      border-radius: 10px !important;
      clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
      background: linear-gradient(115deg, #ef1f68, #ff4f8b 58%, #ff82af) !important;
      box-shadow: 0 16px 42px rgba(255,47,120,.28), inset 0 1px 0 rgba(255,255,255,.24) !important;
    }
    body.is-login-page .login-support {
      margin-top: 18px !important;
      padding-top: 17px !important;
      text-align: left !important;
      color: rgba(222,214,222,.58) !important;
      font-size: 12px !important;
      background: linear-gradient(90deg, rgba(255,79,139,.30), rgba(255,255,255,.06), transparent) top left / 100% 1px no-repeat !important;
    }
    body.is-login-page .login-support::before {
      display: none !important;
    }

    @media (max-width: 1180px) {
      body.is-login-page #page-login {
        justify-content: flex-start !important;
        padding-inline: clamp(22px, 6vw, 72px) !important;
      }
      body.is-login-page .login-card {
        margin-left: 0 !important;
      }
      body.is-login-page .login-bg-overlay {
        background:
          linear-gradient(90deg, rgba(2,2,6,.90), rgba(2,2,6,.68) 42%, rgba(2,2,6,.30)),
          radial-gradient(ellipse at center, transparent 44%, rgba(0,0,0,.36) 100%) !important;
      }
    }

    @media (max-width: 700px) {
      body.is-login-page #page-login {
        justify-content: center !important;
        padding: 20px 16px !important;
      }
      body.is-login-page .login-bg-scene {
        background-position: 62% center !important;
        filter: brightness(.66) contrast(1.07) saturate(.96) !important;
      }
      body.is-login-page .login-bg-overlay {
        background: linear-gradient(180deg, rgba(2,2,6,.66), rgba(2,2,6,.84)) !important;
      }
      body.is-login-page .login-card {
        width: min(390px, calc(100vw - 28px)) !important;
        max-width: min(390px, calc(100vw - 28px)) !important;
        margin: 0 !important;
        padding: 32px 24px 28px !important;
        clip-path: polygon(0 18px, 18px 0, calc(100% - 22px) 0, 100% 22px, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%) !important;
      }
      body.is-login-page .login-wordmark-title,
      body.is-login-page .login-wordmark-subtitle {
        font-size: clamp(39px, 13vw, 47px) !important;
      }
    }

    @media (max-height: 760px) and (min-width: 701px) {
      body.is-login-page .login-card {
        padding-top: 28px !important;
        padding-bottom: 26px !important;
      }
      body.is-login-page .login-wordmark {
        margin-bottom: 18px !important;
      }
      body.is-login-page .login-sub {
        margin-bottom: 22px !important;
      }
      body.is-login-page .login-input-wrap,
      body.is-login-page #btn-do-login {
        height: 52px !important;
        min-height: 52px !important;
      }
      body.is-login-page .login-card .login-input-wrap input {
        height: 50px !important;
        min-height: 50px !important;
      }
    }