:root {
      --bg: #ebf1fb;
      --panel: rgba(255, 255, 255, 0.9);
      --panel-soft: #eef3fb;
      --ink: #17253b;
      --muted: #667892;
      --line: #d9e8f7;
      --primary: #2c8fd6;
      --primary-deep: #1f4b9d;
      --primary-soft: #e8f5ff;
      --success: #12835a;
      --danger: #cf4f4a;
      --shadow: 0 24px 60px rgba(35, 84, 153, 0.16);
    }

    * { box-sizing: border-box; }

    html {
      font-family: "Nunito", "Avenir Next", "Segoe UI", sans-serif;
    }

    body {
      margin: 0;
      min-height: 100vh;
      padding: 0;
      background:
        radial-gradient(circle at top left, rgba(31, 75, 157, 0.16), transparent 30%),
        radial-gradient(circle at right center, rgba(80, 118, 204, 0.1), transparent 24%),
        linear-gradient(180deg, #f2f6fd 0%, #e8eef8 100%);
      color: var(--ink);
      font-family: "Nunito", "Avenir Next", "Segoe UI", sans-serif;
      font-weight: 500;
    }

    button, input, textarea, select {
      font: inherit;
    }

    button {
      border: none;
      cursor: pointer;
      border-radius: 16px;
      transition: opacity 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
    }

    /* Keep the hit area fixed under the pointer. Moving a button on hover can
       repeatedly enter/leave :hover at its edge and make the cursor flicker. */
    button:hover { transform: none; }
    button:disabled { opacity: 0.58; cursor: not-allowed; transform: none; }

    input, textarea, select {
      width: 100%;
      border: 1px solid var(--line);
      background: white;
      border-radius: 16px;
      padding: 14px 16px;
      color: var(--ink);
      outline: none;
    }

    input:focus, textarea:focus, select:focus {
      border-color: rgba(44, 143, 214, 0.5);
      box-shadow: 0 0 0 4px rgba(44, 143, 214, 0.08);
    }

    select {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      padding-right: 46px;
      cursor: pointer;
      background-image:
        linear-gradient(45deg, transparent 50%, var(--primary-deep) 50%),
        linear-gradient(135deg, var(--primary-deep) 50%, transparent 50%);
      background-position:
        calc(100% - 20px) calc(50% - 2px),
        calc(100% - 14px) calc(50% - 2px);
      background-size: 6px 6px, 6px 6px;
      background-repeat: no-repeat;
    }

    select::-ms-expand {
      display: none;
    }

    textarea {
      min-height: 200px;
      resize: vertical;
      background: #fbfdff;
    }

    audio {
      width: 100%;
      margin-top: 8px;
    }

    .hidden { display: none !important; }

    .view-as-banner {
      position: sticky;
      z-index: 1200;
      top: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 22px;
      min-height: 62px;
      padding: 10px max(20px, env(safe-area-inset-right)) 10px max(20px, env(safe-area-inset-left));
      border-bottom: 1px solid rgba(126, 75, 22, 0.22);
      background: #fff3df;
      color: #53351f;
      box-shadow: 0 8px 24px rgba(76, 46, 19, 0.12);
    }

    .view-as-banner-copy {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      min-width: 0;
      font-size: 14px;
    }

    .view-as-banner-kicker,
    .view-as-banner-mode {
      display: inline-flex;
      align-items: center;
      min-height: 26px;
      padding: 4px 9px;
      border-radius: 999px;
      background: #f3a949;
      color: #42270f;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .06em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .view-as-banner-mode {
      background: rgba(255, 255, 255, .72);
      color: #6b4a2c;
    }

    .view-as-exit-button {
      flex: 0 0 auto;
      min-height: 38px;
      padding: 8px 15px;
      border: 1px solid #d88e31;
      border-radius: 10px;
      background: #fff;
      color: #704210;
      font-size: 13px;
      font-weight: 850;
    }

    .view-as-exit-button:hover {
      background: #fffaf2;
    }

    .view-as-exit-short {
      display: none;
    }

    @media (max-width: 700px) {
      .view-as-banner {
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        min-height: 46px;
        padding: 6px max(12px, env(safe-area-inset-right)) 6px max(12px, env(safe-area-inset-left));
        box-shadow: 0 5px 14px rgba(76, 46, 19, 0.1);
      }

      .view-as-banner-copy {
        flex: 1 1 auto;
        justify-content: flex-start;
        gap: 0;
        overflow: hidden;
        font-size: 13px;
        line-height: 1.15;
      }

      .view-as-banner-kicker,
      .view-as-banner-mode,
      .view-as-banner-prefix,
      .view-as-exit-long {
        display: none;
      }

      .view-as-banner-identity {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .view-as-exit-button {
        min-height: 32px;
        max-width: none;
        padding: 5px 11px;
        border-radius: 999px;
        font-size: 12px;
        line-height: 1;
      }

      .view-as-exit-short {
        display: inline;
      }
    }

    .embed-boot-loader {
      display: none;
      min-height: 280px;
      padding: 28px;
      align-items: center;
      justify-content: center;
      background:
        radial-gradient(circle at 20% 10%, rgba(44, 143, 214, 0.12), transparent 28%),
        linear-gradient(180deg, #f6f9ff 0%, #edf3fb 100%);
      color: var(--ink);
      text-align: center;
    }

    .embed-boot-card {
      width: min(460px, 100%);
      padding: 26px;
      border-radius: 28px;
      background: rgba(255, 255, 255, 0.94);
      border: 1px solid rgba(207, 221, 247, 0.96);
      box-shadow: 0 24px 52px rgba(24, 52, 106, 0.12);
    }

    .embed-boot-spinner {
      width: 34px;
      height: 34px;
      margin: 0 auto 14px;
      border-radius: 999px;
      border: 4px solid rgba(31, 75, 157, 0.12);
      border-top-color: #245bd4;
      animation: spin 0.82s linear infinite;
    }

    .embed-boot-title {
      font-size: 22px;
      font-weight: 900;
      letter-spacing: -0.04em;
      color: #173057;
    }

    .embed-boot-copy {
      margin-top: 8px;
      color: #657796;
      font-size: 14px;
      line-height: 1.5;
    }

    .embed-boot-loader.error .embed-boot-spinner {
      display: none;
    }

    .embed-boot-loader.error .embed-boot-title {
      color: #9f2f2a;
    }

    html.embed-roleplay-preload body {
      min-height: 0;
      background:
        radial-gradient(circle at top left, rgba(44, 143, 214, 0.1), transparent 28%),
        linear-gradient(180deg, #f6f9ff 0%, #edf3fb 100%);
    }

    html.embed-roleplay-preload:not(.embed-ready) #authView {
      display: none !important;
    }

    html.embed-roleplay-preload:not(.embed-ready) #embedBootLoader {
      display: flex;
    }

    html.embed-roleplay-preload.embed-ready #embedBootLoader {
      display: none;
    }

    .app-shell {
      max-width: 1480px;
      margin: 0 auto;
      padding: 24px;
    }

    body.settings-view-active > .app-shell {
      display: none;
    }

    #authView.app-shell,
    #authView .app-shell {
      padding: 0;
    }

    .view {
      animation: fadeUp 0.3s ease;
    }

    #authView {
      width: 100vw;
      margin-left: calc(50% - 50vw);
      margin-top: -24px;
      margin-bottom: -24px;
    }

    .auth-layout {
      min-height: 100vh;
      display: grid;
      grid-template-columns: minmax(360px, 520px) minmax(320px, 1fr);
      gap: 40px;
      align-items: center;
      padding: clamp(28px, 4vw, 48px);
      border-radius: 0;
      position: relative;
      overflow: hidden;
      background:
        linear-gradient(90deg, rgba(53, 215, 173, 0.64) 0%, rgba(60, 156, 214, 0.58) 40%, rgba(35, 84, 153, 0.74) 100%),
        url("/static/assets/amess-login-bg-optimized.webp?v=2") center center / cover no-repeat;
      box-shadow: 0 34px 86px rgba(27, 64, 130, 0.18);
      isolation: isolate;
    }

    .auth-layout::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(16, 29, 58, 0.08) 0%, rgba(16, 29, 58, 0.04) 38%, rgba(16, 29, 58, 0.2) 100%);
      z-index: 0;
    }

    .auth-layout::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.03));
      z-index: 0;
      pointer-events: none;
    }

    .auth-panel {
      position: relative;
      z-index: 1;
    }

    .auth-login-card {
      background: rgba(255, 255, 255, 0.985);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(223, 232, 245, 0.96);
      border-radius: 34px;
      box-shadow: 0 26px 64px rgba(15, 43, 95, 0.18);
      padding: 38px 34px 32px;
      max-width: 500px;
      justify-self: center;
    }

    .auth-login-card h2 {
      margin: 0 0 10px;
      font-size: 34px;
      letter-spacing: -0.04em;
    }

    .auth-login-brand {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 24px;
    }

    .auth-login-brand img {
      width: min(100%, 122px);
      height: auto;
      object-fit: contain;
      display: block;
    }

    .auth-login-kicker {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: #7b8da7;
    }

    .auth-brand {
      min-height: 640px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      color: white;
      position: relative;
      padding-right: clamp(24px, 4vw, 90px);
      padding-left: clamp(16px, 2vw, 42px);
      padding-top: clamp(218px, 22vh, 292px);
    }

    .auth-brand-copy,
    .auth-brand-card {
      position: relative;
      z-index: 1;
      max-width: 620px;
      padding-left: 0;
      padding-right: 0;
    }

    .auth-brand-title {
      margin: 0 0 18px;
      font-size: clamp(48px, 6vw, 86px);
      line-height: 0.94;
      letter-spacing: -0.06em;
      text-wrap: balance;
      font-weight: 900;
      text-shadow: 0 10px 24px rgba(19, 42, 89, 0.14);
    }

    .auth-brand-subtitle {
      max-width: 520px;
      line-height: 1.58;
      color: rgba(255, 255, 255, 0.92);
      font-size: 18px;
      font-weight: 600;
    }

    .auth-brand-card {
      margin-top: 24px;
      border-radius: 0;
      padding: 0;
      background: transparent;
      border: 0;
      backdrop-filter: none;
      box-shadow: none;
      max-width: 500px;
    }

    .auth-tagline {
      position: absolute;
      top: 56px;
      right: 56px;
      margin: 0;
      color: rgba(255, 255, 255, 0.96);
      line-height: 1;
      font-size: clamp(20px, 1.28vw, 27px);
      font-weight: 800;
      letter-spacing: -0.03em;
      text-align: right;
      white-space: nowrap;
      text-shadow: 0 10px 24px rgba(15, 43, 95, 0.24);
      z-index: 3;
    }

    @media (min-width: 1101px) and (max-width: 1499px) {
      .auth-layout {
        grid-template-columns: minmax(400px, 0.9fr) minmax(560px, 1.1fr);
        gap: 30px;
        padding-left: clamp(36px, 4vw, 64px);
        padding-right: clamp(36px, 4vw, 64px);
      }

      .auth-login-card {
        justify-self: center;
        margin-left: clamp(6px, 1vw, 20px);
      }

      .auth-brand {
        min-height: auto;
        align-self: start;
        padding-top: clamp(262px, 28vh, 332px);
        padding-left: clamp(8px, 1vw, 24px);
        padding-right: clamp(18px, 2vw, 34px);
      }

      .auth-brand-copy {
        max-width: 760px;
      }

      .auth-brand-title {
        max-width: 640px;
        font-size: clamp(38px, 4.7vw, 68px);
        line-height: 0.96;
      }

      .auth-brand-subtitle {
        max-width: 560px;
        font-size: 15px;
      }

      .auth-tagline {
        top: 146px;
        right: 62px;
        font-size: clamp(16px, 1.08vw, 20px);
      }
    }

    @media (min-width: 1500px) {
      .auth-layout {
        grid-template-columns: minmax(420px, 0.88fr) minmax(760px, 1.12fr);
        padding-left: clamp(70px, 7vw, 150px);
        padding-right: clamp(60px, 5vw, 110px);
      }

      .auth-login-card {
        justify-self: center;
        margin-left: clamp(10px, 2vw, 36px);
      }

      .auth-brand {
        align-self: start;
        min-height: auto;
        padding-top: clamp(208px, 21vh, 282px);
        padding-left: clamp(24px, 2vw, 52px);
      }

      .auth-brand-copy {
        max-width: 760px;
      }

      .auth-brand-title {
        max-width: 700px;
      }

      .auth-brand-subtitle {
        max-width: 620px;
      }

      .auth-tagline {
        top: 54px;
        right: 68px;
        font-size: clamp(22px, 1.4vw, 30px);
      }
    }

    .auth-brand-ecosystem {
      margin-top: 14px;
      color: rgba(255, 255, 255, 0.96);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .auth-actions {
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-top: 20px;
    }

    .auth-status {
      min-height: 22px;
      color: var(--muted);
      font-size: 14px;
    }

    .auth-reset-panel .auth-status {
      margin-top: 10px;
    }

    .auth-secondary-link {
      margin-top: -2px;
      align-self: flex-start;
      background: transparent;
      padding: 0;
      border: none;
      color: #2a7dcb;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      box-shadow: none;
    }

    .auth-secondary-link:hover {
      transform: none;
      opacity: 0.86;
    }

    .auth-stage {
      position: relative;
      margin-top: 18px;
      min-height: 318px;
    }

    .auth-stage-panel {
      position: absolute;
      inset: 0;
      transition: opacity 0.18s ease, transform 0.18s ease;
    }

    .auth-stage-panel.hidden {
      display: block !important;
      opacity: 0;
      pointer-events: none;
      transform: translateY(6px);
    }

    .auth-stage-panel.active {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }

    .auth-reset-panel {
      margin-top: 0;
      padding: 18px;
      border-radius: 22px;
      background: rgba(246, 249, 255, 0.98);
      border: 1px solid #dfe8f7;
      min-height: 100%;
    }

    .auth-reset-panel-title {
      margin: 0 0 8px;
      font-size: 18px;
      font-weight: 800;
      letter-spacing: -0.03em;
      color: var(--ink);
    }

    .auth-reset-panel .muted {
      margin-bottom: 14px;
    }

    .auth-inline-actions {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 14px;
    }

    .auth-inline-actions .secondary-button,
    .auth-inline-actions .primary-button {
      width: auto;
      margin-top: 0;
      min-width: 150px;
    }

    .password-input-wrap {
      position: relative;
      display: flex;
      align-items: center;
    }

    .password-input-wrap input {
      padding-right: 52px;
    }

    .password-visibility-toggle {
      position: absolute;
      right: 12px;
      top: calc(50% - 17px);
      width: 34px;
      height: 34px;
      border: none;
      border-radius: 999px;
      background: rgba(31, 100, 255, 0.08);
      color: #224a9a;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, scale 0.12s ease;
    }

    .password-visibility-toggle:hover {
      background: rgba(31, 100, 255, 0.14);
      color: #173a82;
      box-shadow: 0 4px 10px rgba(23, 58, 130, 0.10);
    }

    .password-visibility-toggle:active {
      scale: 0.96;
    }

    .password-visibility-toggle:focus-visible {
      outline: 2px solid rgba(31, 100, 255, 0.24);
      outline-offset: 2px;
    }

    .password-visibility-toggle svg {
      width: 18px;
      height: 18px;
      stroke: currentColor;
      stroke-width: 1.9;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .auth-help {
      margin-top: 18px;
      padding: 16px 18px;
      border-radius: 20px;
      background: linear-gradient(180deg, #eef4fd, #e8f0fb);
      color: #607695;
      font-size: 14px;
      line-height: 1.55;
      border: 1px solid #dfe9f9;
    }

    .setup-layout {
      display: grid;
      grid-template-columns: minmax(320px, 460px) 1fr;
      gap: 24px;
      align-items: start;
    }

    .brand-panel,
    .panel {
      background: var(--panel);
      backdrop-filter: blur(14px);
      border: 1px solid rgba(255, 255, 255, 0.8);
      border-radius: 30px;
      box-shadow: var(--shadow);
    }

    .brand-panel {
      min-height: 720px;
      padding: 32px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: sticky;
      top: 24px;
      overflow: hidden;
      color: white;
      background:
        linear-gradient(150deg, rgba(31, 75, 157, 0.98), rgba(44, 143, 214, 0.92)),
        linear-gradient(180deg, #1f4b9d, #2c8fd6);
    }

    .brand-panel::before,
    .brand-panel::after {
      content: "";
      position: absolute;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.12);
    }

    .brand-panel::before {
      width: 220px;
      height: 220px;
      top: -40px;
      right: -60px;
    }

    .brand-panel::after {
      width: 260px;
      height: 260px;
      bottom: -110px;
      left: -70px;
    }

    .brand-copy,
    .brand-preview {
      position: relative;
      z-index: 1;
    }

    .brand-kicker {
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      opacity: 0.72;
    }

    .brand-logo {
      width: 76px;
      height: 76px;
      object-fit: contain;
      display: block;
      margin-bottom: 18px;
      filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.18));
    }

    .brand-title {
      margin: 16px 0 12px;
      font-size: clamp(38px, 5vw, 62px);
      line-height: 0.95;
      letter-spacing: -0.05em;
    }

    .brand-subtitle {
      max-width: 330px;
      line-height: 1.6;
      color: rgba(255, 255, 255, 0.84);
      font-size: 15px;
    }

    .brand-preview {
      background: rgba(255, 255, 255, 0.14);
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: 24px;
      padding: 18px;
    }

    .preview-chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.18);
      font-size: 13px;
      font-weight: 700;
    }

    .preview-card {
      margin-top: 16px;
      background: rgba(255, 255, 255, 0.16);
      border-radius: 22px;
      padding: 16px;
      min-height: 160px;
    }

    .muted-invert {
      color: rgba(255, 255, 255, 0.78);
      font-size: 13px;
      line-height: 1.55;
    }

    .setup-main,
    .practice-main,
    .practice-side {
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    .workspace-shell {
      display: grid;
      grid-template-columns: 220px minmax(0, 1fr);
      gap: 24px;
      align-items: start;
    }

    .workspace-mobile-topbar,
    .workspace-mobile-menu-close,
    .workspace-mobile-backdrop {
      display: none;
    }

    .workspace-sidebar {
      position: sticky;
      top: 24px;
      min-height: calc(100vh - 48px);
      padding: 22px 16px;
      border-radius: 30px;
      background:
        linear-gradient(180deg, rgba(8, 26, 68, 0.98), rgba(12, 33, 81, 0.96)),
        linear-gradient(180deg, #0e2458, #0f2e72);
      box-shadow: 0 28px 60px rgba(7, 23, 63, 0.32);
      color: white;
      display: flex;
      flex-direction: column;
      gap: 18px;
      overflow: hidden;
    }

    .workspace-sidebar::before {
      content: "";
      position: absolute;
      width: 220px;
      height: 220px;
      border-radius: 999px;
      top: -80px;
      left: -70px;
      background: rgba(106, 138, 255, 0.18);
      pointer-events: none;
    }

    .workspace-sidebar > * {
      position: relative;
      z-index: 1;
    }

    .workspace-logo {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 10px 4px;
    }

    .workspace-logo img {
      width: 40px;
      height: 40px;
      object-fit: contain;
      filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.22));
    }

    .workspace-logo-copy {
      display: flex;
      flex-direction: column;
      gap: 2px;
      line-height: 1.05;
    }

    .workspace-logo-copy strong {
      font-size: 13px;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .workspace-logo-copy span {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.7);
    }

    .workspace-nav {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 8px;
    }

    #workspaceSidebar .workspace-nav {
      min-height: 0;
      overflow-y: auto;
    }

    #workspaceSidebar .workspace-nav > *,
    #workspaceSidebar .workspace-logo,
    #workspaceSidebar .workspace-profile-menu {
      flex-shrink: 0;
    }

    .workspace-nav-button {
      width: 100%;
      border-radius: 18px;
      padding: 14px 14px;
      background: transparent;
      color: rgba(255, 255, 255, 0.82);
      border: 1px solid transparent;
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 700;
      font-size: 15px;
      text-align: left;
      box-shadow: none;
    }

    .workspace-nav-button:hover {
      background: rgba(255, 255, 255, 0.06);
      transform: none;
    }

    .workspace-nav-button.active {
      background: linear-gradient(135deg, #3157d8, #2b79ff);
      color: white;
      border-color: rgba(255, 255, 255, 0.08);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 14px 28px rgba(34, 74, 185, 0.35);
    }

    .workspace-pending-projects > summary {
      cursor: pointer;
      list-style: none;
      gap: 8px;
      font-size: 13px;
    }

    .workspace-pending-projects > summary::-webkit-details-marker {
      display: none;
    }

    .workspace-pending-projects > summary:focus-visible {
      outline: 2px solid #91b8ff;
      outline-offset: 2px;
    }

    .workspace-pending-label {
      flex: 1;
      min-width: 0;
    }

    .workspace-pending-chevron {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
    }

    .workspace-pending-projects[open] .workspace-pending-chevron {
      transform: rotate(90deg);
    }

    .workspace-pending-items {
      display: flex;
      flex-direction: column;
      gap: 4px;
      margin: 4px 0 0 24px;
      padding-left: 8px;
      border-left: 1px solid rgba(255, 255, 255, 0.16);
    }

    .workspace-nav-attention-dot {
      width: 10px;
      height: 10px;
      margin-left: auto;
      border: 2px solid rgba(8, 26, 68, 0.78);
      border-radius: 999px;
      background: #facc15;
      box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.18), 0 0 14px rgba(250, 204, 21, 0.58);
      flex: 0 0 auto;
    }

    .workspace-nav-button.active .workspace-nav-attention-dot {
      border-color: rgba(255, 255, 255, 0.78);
    }

    .workspace-nav-attention-dot.is-due {
      animation: followupsAttentionPulse 1.6s ease-in-out infinite;
    }

    .workspace-nav-icon {
      width: 18px;
      height: 18px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      opacity: 0.95;
      flex: 0 0 18px;
    }

    .workspace-nav-icon svg {
      width: 18px;
      height: 18px;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .workspace-profile {
      display: flex;
      align-items: center;
      width: 100%;
      min-width: 0;
      gap: 12px;
      padding: 0 4px;
    }

    .workspace-profile-avatar {
      width: 40px;
      height: 40px;
      overflow: hidden;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #5e89ff, #3157d8);
      color: white;
      font-weight: 800;
      font-size: 13px;
      flex-shrink: 0;
    }

    .workspace-profile-avatar.has-photo {
      background: #e8edf4;
    }

    .workspace-profile-avatar img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }

    .workspace-profile-copy {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .workspace-profile-copy strong {
      font-size: 14px;
      color: white;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .workspace-profile-copy span {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.64);
    }

    .workspace-profile-menu {
      margin-top: auto;
      padding-top: 14px;
      border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    .workspace-profile-menu .user-menu {
      width: 100%;
      display: flex;
    }

    .workspace-profile-menu .user-badge {
      width: 100%;
      justify-content: flex-start;
      padding: 8px 0 4px;
      border-radius: 0;
      border: 0;
      background: transparent;
      color: white;
      transition: opacity 160ms ease;
    }

    .workspace-profile-menu .user-badge:hover {
      background: transparent;
      opacity: 0.88;
    }

    .workspace-profile-menu .user-badge:focus-visible {
      outline: 2px solid rgba(126, 164, 255, 0.9);
      outline-offset: 4px;
    }

    .workspace-profile-menu .user-menu-trigger::after {
      content: none;
    }

    .workspace-profile-settings-icon {
      width: 36px;
      height: 36px;
      margin-left: auto;
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: rgba(255, 255, 255, 0.9);
      background: rgba(255, 255, 255, 0.08);
    }

    .workspace-profile-settings-icon svg {
      width: 20px;
      height: 20px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .workspace-profile-menu .user-menu-panel {
      top: auto;
      bottom: calc(100% + 10px);
      right: 0;
      left: auto;
    }

    body.product-tour-active {
      overflow: hidden;
    }

    body.academy-welcome-active {
      overflow: hidden;
    }

    body.product-tour-active .admin-online-widget,
    body.product-tour-active .support-widget {
      opacity: 0;
      pointer-events: none;
    }

    body.academy-welcome-active .admin-online-widget,
    body.academy-welcome-active .support-widget {
      opacity: 0;
      pointer-events: none;
    }

    .academy-welcome-prompt {
      position: fixed;
      inset: 0;
      z-index: 19950;
      display: grid;
      place-items: center;
      padding: 20px;
    }

    .academy-welcome-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(8, 20, 44, 0.66);
    }

    .academy-welcome-dialog {
      position: relative;
      width: min(440px, 100%);
      padding: 30px;
      border: 1px solid #d9e1ee;
      border-radius: 20px;
      background: #ffffff;
      box-shadow: 0 24px 70px rgba(8, 20, 44, 0.28);
      color: #14284e;
    }

    .academy-welcome-close {
      position: absolute;
      top: 14px;
      right: 14px;
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border: 0;
      border-radius: 10px;
      background: #f1f5f9;
      color: #61708b;
      font: inherit;
      font-size: 23px;
      line-height: 1;
      cursor: pointer;
    }

    .academy-welcome-eyebrow {
      display: inline-flex;
      margin-bottom: 12px;
      color: #c26a20;
      font-size: 12px;
      font-weight: 850;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .academy-welcome-dialog h2 {
      margin: 0 34px 0 0;
      color: #14284e;
      font-size: clamp(25px, 4vw, 31px);
      line-height: 1.12;
      letter-spacing: -0.03em;
    }

    .academy-welcome-dialog p {
      margin: 13px 0 24px;
      color: #61708b;
      font-size: 15px;
      line-height: 1.55;
    }

    .academy-welcome-open {
      width: 100%;
      min-height: 48px;
      border: 1px solid #244f9e;
      border-radius: 12px;
      background: #244f9e;
      color: #ffffff;
      font: inherit;
      font-size: 14px;
      font-weight: 850;
      cursor: pointer;
    }

    .academy-welcome-open:hover {
      background: #183d7d;
    }

    .academy-welcome-close:focus-visible,
    .academy-welcome-open:focus-visible {
      outline: 3px solid rgba(36, 79, 158, 0.28);
      outline-offset: 2px;
    }

    .product-tour-root {
      position: fixed;
      inset: 0;
      z-index: 20000;
      pointer-events: auto;
    }

    .product-tour-spotlight {
      position: fixed;
      border: 2px solid rgba(255, 255, 255, 0.96);
      border-radius: 18px;
      box-shadow:
        0 0 0 9999px rgba(8, 20, 44, 0.72),
        0 16px 44px rgba(8, 20, 44, 0.28);
      transition: top 220ms ease, left 220ms ease, width 220ms ease, height 220ms ease;
    }

    .product-tour-dialog {
      position: fixed;
      width: min(360px, calc(100vw - 24px));
      padding: 22px;
      border: 1px solid rgba(49, 87, 216, 0.16);
      border-radius: 20px;
      background: #ffffff;
      box-shadow: 0 24px 70px rgba(8, 20, 44, 0.3);
      color: #14284e;
      pointer-events: auto;
      transition: top 220ms ease, left 220ms ease;
    }

    .product-tour-close {
      position: absolute;
      top: 12px;
      right: 12px;
      width: 32px;
      height: 32px;
      display: grid;
      place-items: center;
      border: 0;
      border-radius: 10px;
      background: #f1f5fc;
      color: #5f6f8d;
      font-size: 22px;
      line-height: 1;
      cursor: pointer;
    }

    .product-tour-title {
      margin: 0 34px 0 0;
      font-size: 24px;
      line-height: 1.12;
      letter-spacing: -0.025em;
    }

    .product-tour-copy {
      margin: 10px 0 0;
      color: #5f6f8d;
      font-size: 14px;
      line-height: 1.55;
    }

    .product-tour-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-top: 20px;
    }

    .product-tour-progress {
      display: flex;
      align-items: center;
      gap: 5px;
      min-width: 52px;
    }

    .product-tour-progress span {
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: #d8e0ef;
      transition: width 160ms ease, background 160ms ease;
    }

    .product-tour-progress span.active {
      width: 18px;
      background: #3157d8;
    }

    .product-tour-actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .product-tour-button {
      min-height: 38px;
      padding: 0 14px;
      border: 1px solid #d8e0ef;
      border-radius: 11px;
      background: #ffffff;
      color: #3157d8;
      font: inherit;
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
    }

    .product-tour-button.primary {
      border-color: #3157d8;
      background: #3157d8;
      color: #ffffff;
    }

    .product-tour-button:focus-visible,
    .product-tour-close:focus-visible {
      outline: 3px solid rgba(94, 137, 255, 0.42);
      outline-offset: 2px;
    }

    @media (prefers-reduced-motion: reduce) {
      .product-tour-spotlight,
      .product-tour-dialog {
        transition: none;
      }
    }

    @media (max-width: 620px) {
      .academy-welcome-dialog {
        padding: 24px;
        border-radius: 17px;
      }

      .product-tour-dialog {
        padding: 19px;
        border-radius: 17px;
      }

      .product-tour-title {
        font-size: 21px;
      }

      .product-tour-footer {
        align-items: flex-end;
      }

      .product-tour-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
      }
    }

    .workspace-main {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .team-chat-workspace-card {
      height: calc(100dvh - 112px);
      min-height: 620px;
      padding: 0;
      display: grid;
      grid-template-rows: minmax(0, 1fr);
      overflow: hidden;
      border: 1px solid rgba(206, 220, 246, 0.96);
      border-radius: 26px;
      background: #fff;
      box-shadow: 0 22px 52px rgba(28, 54, 108, 0.1);
    }

    .team-chat-workspace-card.hidden {
      display: none;
    }

    .team-chat-workspace-frame {
      display: block;
      width: 100%;
      height: 100%;
      min-height: 0;
      border: 0;
      background: #fff;
    }

    .workspace-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 18px;
    }

    .workspace-header-title {
      margin: 0;
      font-size: clamp(34px, 4vw, 48px);
      line-height: 0.98;
      letter-spacing: -0.05em;
      color: #14284e;
    }

    .workspace-header-title.calendar-title {
      background: linear-gradient(135deg, #14284e, #3157d8);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .workspace-header-subtitle {
      margin-top: 10px;
      color: var(--muted);
      font-size: 16px;
      line-height: 1.6;
    }

    .workspace-header-actions {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .workspace-header-actions:empty {
      display: none;
    }

    .workspace-header-actions.has-agent-intelligence-filters {
      flex: 1;
      align-items: flex-end;
      flex-wrap: nowrap;
    }

    .workspace-header.agent-intelligence-active {
      align-items: flex-start;
    }

    .agent-intelligence-header-title {
      min-width: 210px;
    }

    .agent-intelligence-header-title .workspace-header-title {
      white-space: nowrap;
    }

    .agent-intelligence-header-title .agent-intelligence-sync {
      margin-top: 8px;
    }

    .workspace-notification-wrap {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .workspace-notification-btn {
      position: relative;
      width: 48px;
      height: 48px;
      padding: 0;
      border-radius: 16px;
      border: 1px solid rgba(212, 225, 246, 0.95);
      background: rgba(255, 255, 255, 0.94);
      color: #2149a7;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 18px 38px rgba(27, 62, 145, 0.08);
    }

    .workspace-notification-btn:hover {
      transform: translateY(-1px);
      border-color: rgba(86, 123, 224, 0.34);
      box-shadow: 0 20px 42px rgba(27, 62, 145, 0.12);
    }

    .workspace-notification-btn svg {
      width: 21px;
      height: 21px;
      display: block;
    }

    .workspace-notification-dot {
      position: absolute;
      top: 11px;
      right: 12px;
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: #ef9b28;
      border: 2px solid #fff;
      box-shadow: 0 0 0 0 rgba(239, 155, 40, 0.44), 0 0 14px rgba(239, 155, 40, 0.45);
      opacity: 0;
      transform: scale(0.7);
      transition: opacity 0.18s ease, transform 0.18s ease;
    }

    .workspace-notification-wrap.has-notifications .workspace-notification-dot {
      opacity: 1;
      transform: scale(1);
      animation: workspaceNotificationPulse 1.45s ease-out infinite;
    }

    @keyframes workspaceNotificationPulse {
      0% {
        box-shadow: 0 0 0 0 rgba(239, 155, 40, 0.58), 0 0 12px rgba(239, 155, 40, 0.42);
      }
      72% {
        box-shadow: 0 0 0 9px rgba(239, 155, 40, 0), 0 0 20px rgba(239, 155, 40, 0.36);
      }
      100% {
        box-shadow: 0 0 0 0 rgba(239, 155, 40, 0), 0 0 12px rgba(239, 155, 40, 0.42);
      }
    }

    .workspace-notification-panel {
      position: absolute;
      top: calc(100% + 12px);
      right: 0;
      width: min(340px, calc(100vw - 36px));
      padding: 14px;
      border-radius: 18px;
      border: 1px solid rgba(212, 225, 246, 0.95);
      background: rgba(255, 255, 255, 0.98);
      box-shadow: 0 24px 60px rgba(18, 42, 91, 0.16);
      z-index: 25;
    }

    .workspace-notification-panel::before {
      content: "";
      position: absolute;
      top: -7px;
      right: 17px;
      width: 14px;
      height: 14px;
      transform: rotate(45deg);
      background: rgba(255, 255, 255, 0.98);
      border-left: 1px solid rgba(212, 225, 246, 0.95);
      border-top: 1px solid rgba(212, 225, 246, 0.95);
    }

    .workspace-notification-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 3px 4px 12px;
      border-bottom: 1px solid rgba(226, 233, 246, 0.92);
    }

    .workspace-notification-head strong {
      color: #14284e;
      font-size: 14px;
      letter-spacing: 0.01em;
    }

    .workspace-notification-status {
      color: #6f7fa2;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .workspace-notification-empty {
      display: grid;
      grid-template-columns: 38px 1fr;
      gap: 12px;
      align-items: center;
      padding: 15px 4px 4px;
    }

    .workspace-notification-empty-icon {
      width: 38px;
      height: 38px;
      border-radius: 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #3157d8;
      background: #eef4ff;
      border: 1px solid #dbe7ff;
    }

    .workspace-notification-empty-icon svg {
      width: 19px;
      height: 19px;
    }

    .workspace-notification-empty-title {
      color: #172b55;
      font-size: 14px;
      font-weight: 900;
      line-height: 1.25;
    }

    .workspace-notification-empty-text {
      margin-top: 3px;
      color: #7381a0;
      font-size: 13px;
      line-height: 1.45;
    }

    .workspace-notification-empty-text:empty {
      display: none;
    }

    .workspace-notification-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 10px;
    }

    .workspace-notification-action {
      min-height: 32px;
      padding: 7px 10px;
      border-radius: 10px;
      border: 1px solid rgba(214, 223, 237, 0.95);
      background: #fff;
      color: #3157d8;
      font-size: 12px;
      font-weight: 900;
      cursor: pointer;
    }

    .workspace-notification-action.primary {
      border-color: rgba(49, 87, 216, 0.18);
      background: #eef4ff;
      color: #1f45ad;
    }

    .workspace-notification-action:hover {
      transform: translateY(-1px);
      box-shadow: 0 10px 20px rgba(31, 75, 157, 0.08);
    }

    .workspace-notification-list {
      display: grid;
      max-height: min(62vh, 470px);
      overflow-y: auto;
      overscroll-behavior: contain;
    }

    .workspace-notification-item {
      position: relative;
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr);
      gap: 11px;
      width: 100%;
      padding: 14px 8px 14px 4px;
      border: 0;
      border-bottom: 1px solid rgba(226, 233, 246, 0.86);
      background: #f8fbff;
      color: inherit;
      text-align: left;
      cursor: pointer;
    }

    .workspace-notification-item.is-read {
      background: #fff;
      opacity: 0.74;
    }

    .workspace-notification-item:hover {
      background: #f1f6ff;
    }

    .workspace-notification-item-icon {
      width: 38px;
      height: 38px;
      border-radius: 13px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #3157d8;
      background: #edf3ff;
      border: 1px solid #dbe7ff;
      font-size: 17px;
      font-weight: 900;
    }

    .workspace-notification-item[data-notification-kind="manual_review"] .workspace-notification-item-icon {
      color: #a86808;
      background: #fff4e2;
      border-color: #f3ddb9;
    }

    .workspace-notification-item[data-notification-kind="amess_qualified_preaviso"] .workspace-notification-item-icon {
      color: #ae4b05;
      background: #fff1db;
      border-color: #f5d3a0;
    }

    .workspace-notification-item[data-notification-kind="amess_qualified_preaviso"] .workspace-notification-item-title {
      display: block;
      overflow: visible;
      font-weight: 650;
    }

    .workspace-notification-agent {
      color: #ae4b05;
      font-weight: 950;
    }

    .workspace-notification-item-copy {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 9px;
      align-items: center;
      min-width: 0;
      padding-right: 9px;
    }

    .workspace-notification-item-title {
      display: -webkit-box;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      color: #172b55;
      font-size: 13px;
      font-weight: 900;
      line-height: 1.35;
    }

    .workspace-notification-item-time {
      display: block;
      color: #8c98af;
      font-size: 11px;
      font-weight: 850;
      white-space: nowrap;
    }

    .workspace-notification-item-dot {
      position: absolute;
      top: 18px;
      right: 8px;
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: #3157d8;
    }

    .workspace-notification-item.is-read .workspace-notification-item-dot {
      display: none;
    }

    .app-update-notification-modal {
      position: fixed;
      inset: 0;
      z-index: 21000;
      display: grid;
      place-items: center;
      padding: 20px;
    }

    .app-update-notification-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(11, 27, 59, 0.66);
    }

    .app-update-notification-dialog {
      position: relative;
      width: min(560px, 100%);
      max-height: min(80vh, 700px);
      overflow-y: auto;
      padding: 32px;
      border-radius: 22px;
      background: #fff;
      box-shadow: 0 30px 80px rgba(10, 26, 59, 0.3);
    }

    .app-update-notification-close {
      position: absolute;
      top: 12px;
      right: 14px;
      border: 0;
      background: transparent;
      color: #5b6982;
      font-size: 30px;
      cursor: pointer;
    }

    .app-update-notification-kicker {
      color: #3157d8;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .app-update-notification-dialog h2 { margin: 10px 28px 16px 0; color: #172b55; }
    .app-update-notification-body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; color: #3c4b65; }

    .workspace-notification-footer {
      display: flex;
      justify-content: flex-end;
      padding: 11px 4px 1px;
    }

    .calendar-card {
      --calendar-surface-height: 720px;
      --calendar-header-row-height: 76px;
      --calendar-month-header-height: 56px;
      --calendar-hour-height: 46px;
      display: flex;
      flex-direction: column;
      width: 100%;
      max-width: 100%;
      overflow-anchor: none;
      min-width: 0;
      gap: 14px;
      border-radius: 16px;
      border-color: rgba(212, 225, 246, 0.84);
      background: #fff;
      box-shadow: 0 16px 38px rgba(18, 42, 91, 0.09);
    }

    html.calendar-view-switching {
      scroll-behavior: auto !important;
    }

    .calendar-head {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      align-items: center;
      flex-wrap: wrap;
    }

    .calendar-availability-heading {
      display: grid;
      gap: 3px;
    }

    .calendar-month-label {
      color: #3157d8;
      font-size: 16px;
      font-weight: 900;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .calendar-color-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 14px;
      margin-top: 10px;
      color: #7180a1;
      font-size: 11px;
      line-height: 1.35;
    }

    .calendar-color-legend-item {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      white-space: nowrap;
    }

    .calendar-color-legend-swatch {
      width: 9px;
      height: 9px;
      border-radius: 999px;
      flex: 0 0 auto;
    }

    .calendar-color-legend-swatch.qualified {
      background: #2f9d57;
    }

    .calendar-color-legend-swatch.sold {
      background: #7c5cff;
    }

    .calendar-color-legend-swatch.cancelled {
      background: #dc4c4c;
    }

    .calendar-color-legend-swatch.ghosted {
      background: #d4a62a;
    }

    .calendar-controls {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .calendar-agent-menu {
      position: relative;
      display: inline-flex;
    }

    .calendar-agent-panel {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      z-index: 35;
      display: none;
      min-width: 286px;
      padding: 16px;
      border-radius: 10px;
      border: 1px solid rgba(49, 87, 216, 0.14);
      background: rgba(255, 255, 255, 0.98);
      box-shadow: 0 18px 36px rgba(31, 75, 157, 0.14);
      backdrop-filter: blur(16px);
    }

    .calendar-agent-menu.open .calendar-agent-panel {
      display: grid;
      gap: 14px;
    }

    .calendar-agent-panel-head {
      display: grid;
      gap: 3px;
      padding-bottom: 12px;
      border-bottom: 1px solid #e5ebf5;
    }

    .calendar-agent-panel-head strong {
      color: #14284e;
      font-size: 14px;
      font-weight: 900;
    }

    .calendar-agent-panel-head span {
      color: #697b9b;
      font-size: 11px;
      line-height: 1.4;
    }

    .calendar-agent-options-label {
      margin-bottom: -6px;
      color: #7a89a4;
      font-size: 9px;
      font-weight: 900;
      letter-spacing: 0.09em;
      text-transform: uppercase;
    }

    .calendar-agent-availability {
      display: grid;
      gap: 9px;
      padding-top: 13px;
      border-top: 1px solid #e5ebf5;
    }

    .calendar-create-block-btn {
      min-height: 40px;
      border: 1px solid rgba(36, 55, 87, 0.18);
      border-radius: 7px;
      background: #243757;
      color: #fff;
      font: inherit;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
    }

    .calendar-create-block-btn:hover,
    .calendar-create-block-btn:focus-visible {
      background: #182a49;
      outline: none;
    }

    .calendar-filter-field {
      display: grid;
      gap: 6px;
    }

    .calendar-filter-label {
      color: #6f7fa2;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .calendar-agent-trigger {
      width: auto;
      height: 40px;
      gap: 7px;
      padding: 0 12px;
      border-radius: 8px;
      border: 1px solid rgba(49, 87, 216, 0.18);
      background: linear-gradient(180deg, #ffffff, #f7faff);
      color: #3157d8;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: none;
      transition: transform 150ms ease, box-shadow 150ms ease, color 150ms ease, border-color 150ms ease;
    }

    .calendar-agent-trigger:hover,
    .calendar-agent-trigger.active {
      background: #eef3ff;
      color: #14284e;
      border-color: rgba(49, 87, 216, 0.28);
      box-shadow: none;
    }

    .calendar-agent-trigger svg {
      width: 16px;
      height: 16px;
      stroke-width: 2.25;
    }

    .calendar-agent-trigger span {
      display: block;
      max-width: 128px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 12px;
      font-weight: 900;
    }

    .calendar-agent-filter {
      width: 100%;
      height: 44px;
      padding: 0 14px;
      border-radius: 8px;
      border: 1px solid rgba(49, 87, 216, 0.18);
      background: linear-gradient(180deg, #ffffff, #f7faff);
      color: #14284e;
      font-size: 13px;
      font-weight: 900;
      cursor: pointer;
      box-shadow: none;
    }

    .calendar-cancelled-toggle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px 14px;
      border-radius: 8px;
      border: 1px solid rgba(214, 223, 237, 0.95);
      background: linear-gradient(180deg, #ffffff, #f8fbff);
      color: #17315c;
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
    }

    .calendar-cancelled-toggle input {
      width: 18px;
      height: 18px;
      accent-color: #3157d8;
    }

    .calendar-occupied-toggle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px 14px;
      border-radius: 8px;
      border: 1px solid rgba(214, 223, 237, 0.95);
      background: linear-gradient(180deg, #ffffff, #f8fbff);
      color: #17315c;
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
    }

    .calendar-occupied-toggle input {
      width: 18px;
      height: 18px;
      accent-color: #3157d8;
    }

    .calendar-period-nav,
    .calendar-view-toggle {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      padding: 3px;
      border-radius: 8px;
      background: #f3f6fb;
      border: 1px solid rgba(213, 223, 239, 0.88);
      box-shadow: none;
    }

    .calendar-icon-btn,
    .calendar-view-btn {
      height: 34px;
      border: 0;
      border-radius: 5px;
      background: transparent;
      color: #3157d8;
      font-weight: 900;
      cursor: pointer;
      transition: transform 150ms ease, background 150ms ease, box-shadow 150ms ease, color 150ms ease;
    }

    .calendar-icon-btn {
      width: 38px;
      font-size: 18px;
      line-height: 1;
    }

    .calendar-view-btn {
      padding: 0 12px;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .calendar-icon-btn:hover,
    .calendar-view-btn:hover {
      background: #fff;
      color: #14284e;
      box-shadow: 0 2px 7px rgba(49, 87, 216, 0.1);
    }

    .calendar-view-btn.active {
      background: #3157d8;
      color: #fff;
      box-shadow: 0 3px 8px rgba(49, 87, 216, 0.2);
    }

    .calendar-today-btn {
      height: 34px;
      padding: 0 12px;
      border-radius: 5px;
      border: 0;
      background: transparent;
      color: #2149a7;
      font-weight: 900;
      cursor: pointer;
      transition: background 150ms ease, color 150ms ease;
    }

    .calendar-today-btn:hover {
      background: #fff;
      color: #14284e;
    }

    .calendar-grid {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      grid-template-rows: var(--calendar-month-header-height) repeat(5, calc((var(--calendar-surface-height) - var(--calendar-month-header-height)) / 5));
      border: 1px solid rgba(212, 225, 246, 0.9);
      border-radius: 10px;
      overflow: hidden;
      background: rgba(255, 255, 255, 0.86);
      box-shadow: none;
      min-height: var(--calendar-surface-height);
    }

    .calendar-loading-surface {
      grid-column: 1 / -1;
      grid-row: 1 / -1;
      min-height: var(--calendar-surface-height);
      background:
        linear-gradient(90deg, transparent, rgba(49, 87, 216, 0.07), transparent) 0 0 / 240px 100% no-repeat,
        repeating-linear-gradient(0deg, rgba(226, 234, 246, 0.72) 0 1px, transparent 1px 92px),
        repeating-linear-gradient(90deg, rgba(226, 234, 246, 0.72) 0 1px, transparent 1px calc(100% / 7));
      animation: calendarLoadingSweep 1200ms ease-in-out infinite;
    }

    @keyframes calendarLoadingSweep {
      from {
        background-position: -240px 0, 0 0, 0 0;
      }
      to {
        background-position: calc(100% + 240px) 0, 0 0, 0 0;
      }
    }

    .calendar-grid.day-view {
      grid-template-columns: 64px minmax(0, 1fr);
      grid-template-rows: var(--calendar-header-row-height) calc(var(--calendar-surface-height) - var(--calendar-header-row-height));
      overflow-x: auto;
    }

    .calendar-grid.week-view {
      grid-template-columns: 58px repeat(7, minmax(120px, 1fr));
      grid-template-rows: var(--calendar-header-row-height) calc(var(--calendar-surface-height) - var(--calendar-header-row-height));
      overflow-x: auto;
    }

    .calendar-grid.week-view.three-day-view {
      grid-template-columns: 58px repeat(3, minmax(180px, 1fr));
    }

    .calendar-grid.week-view.three-day-view .calendar-day-name,
    .calendar-grid.week-view.three-day-view .week-day-column {
      min-width: 180px;
    }

    .calendar-grid.week-view .calendar-day-name {
      border-top: 0;
      border-bottom: 1px solid #e2eaf6;
      min-width: 120px;
    }

    .calendar-grid.day-view .calendar-day-name {
      grid-column: 2;
      grid-row: 1;
      border-top: 0;
      border-right: 0;
      border-bottom: 1px solid #e2eaf6;
      padding: 10px 16px;
      display: flex;
      align-items: center;
      gap: 14px;
      min-width: 620px;
    }

    .day-header-stack,
    .week-header-stack {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 5px;
      min-width: 0;
    }

    .day-header-date,
    .week-header-date {
      min-width: 28px;
      height: 30px;
      border-radius: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #14284e;
      font-size: 23px;
      font-weight: 900;
      line-height: 1;
      background: transparent;
      border: 0;
      box-shadow: none;
      letter-spacing: -0.045em;
    }

    .day-header-name,
    .week-header-weekday {
      color: #3157d8;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .calendar-day-name.is-today .day-header-date,
    .calendar-day-name.is-today .week-header-date {
      color: #274ed7;
      position: relative;
    }

    .calendar-day-name.is-today .day-header-date::after,
    .calendar-day-name.is-today .week-header-date::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: -7px;
      width: 24px;
      height: 3px;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(49, 87, 216, 0.95), rgba(88, 132, 238, 0.72));
      transform: translateX(-50%);
    }

    .week-time-corner {
      grid-column: 1;
      grid-row: 1;
      border-right: 1px solid #e2eaf6;
      border-bottom: 1px solid #e2eaf6;
      background: linear-gradient(180deg, #f7faff, #eef4ff);
    }

    .week-time-axis {
      grid-column: 1;
      grid-row: 2;
      position: relative;
      border-right: 1px solid #e2eaf6;
      background: rgba(250, 252, 255, 0.98);
    }

    .week-time-label {
      position: absolute;
      left: 0;
      right: 8px;
      transform: translateY(-50%);
      color: #7a879f;
      font-size: 11px;
      font-weight: 800;
      line-height: 1;
      text-align: right;
    }

    .week-day-column {
      position: relative;
      grid-row: 2;
      min-width: 120px;
      border-right: 1px solid #e2eaf6;
      background:
        repeating-linear-gradient(
          to bottom,
          #e2eaf6 0,
          #e2eaf6 1px,
          rgba(255, 255, 255, 0.96) 1px,
          rgba(255, 255, 255, 0.96) var(--calendar-hour-height)
        );
      overflow: hidden;
    }

    .week-day-column.is-today {
      background:
        repeating-linear-gradient(
          to bottom,
          #d9e5fb 0,
          #d9e5fb 1px,
          rgba(243, 248, 255, 0.98) 1px,
          rgba(243, 248, 255, 0.98) var(--calendar-hour-height)
        );
      box-shadow: inset 0 0 0 1px rgba(49, 87, 216, 0.16);
    }

    .week-day-column.is-blocked-day {
      background:
        repeating-linear-gradient(
          to bottom,
          #e3ebf7 0,
          #e3ebf7 1px,
          rgba(249, 251, 255, 0.78) 1px,
          rgba(249, 251, 255, 0.78) var(--calendar-hour-height)
        );
    }

    .week-day-block-banner {
      position: absolute;
      top: 12px;
      left: 8px;
      right: 8px;
      z-index: 3;
      min-height: 66px;
      padding: 12px 14px;
      border: 1px solid rgba(148, 163, 184, 0.24);
      border-radius: 12px;
      background: rgba(248, 250, 252, 0.86);
      color: #60708f;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.04em;
      line-height: 1.35;
      text-align: center;
      text-transform: uppercase;
      pointer-events: none;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
    }

    .week-day-column:last-child {
      border-right: 0;
    }

    .calendar-current-time-indicator {
      position: absolute;
      top: var(--current-time-top);
      left: 0;
      right: 0;
      z-index: 12;
      height: 2px;
      border-radius: 999px;
      background: #e34b4b;
      box-shadow: 0 1px 4px rgba(176, 39, 39, 0.2);
      pointer-events: none;
    }

    .calendar-current-time-indicator::before {
      position: absolute;
      top: 50%;
      left: 0;
      width: 9px;
      height: 9px;
      border: 2px solid #fff;
      border-radius: 50%;
      background: #e34b4b;
      box-shadow: 0 1px 4px rgba(176, 39, 39, 0.22);
      content: "";
      transform: translate(-35%, -50%);
    }

    .calendar-grid.day-view .week-day-column {
      grid-column: 2;
      min-width: 620px;
      border-right: 0;
    }

    .week-event {
      position: absolute;
      left: var(--event-left, 6px);
      right: var(--event-right, 6px);
      top: var(--event-top);
      height: var(--event-height);
      min-height: 28px;
      padding: 4px 6px;
      border: 1px solid rgba(49, 87, 216, 0.16);
      border-left: 4px solid #9aa8c4;
      border-radius: 9px;
      background: rgba(247, 250, 255, 0.95);
      color: #14284e;
      text-align: left;
      overflow: hidden;
      box-shadow: 0 10px 22px rgba(36, 72, 128, 0.08);
      cursor: pointer;
      z-index: 4;
    }

    .week-event.has-audit-pending {
      padding-right: 24px;
    }

    .calendar-audit-clock {
      display: inline-flex;
      width: 14px;
      height: 14px;
      flex: 0 0 auto;
      align-items: center;
      justify-content: center;
      border: 1.5px solid rgba(212, 166, 42, 0.85);
      border-radius: 999px;
      background: rgba(255, 249, 232, 0.96);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
      position: relative;
    }

    .calendar-audit-clock::before,
    .calendar-audit-clock::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 1.5px;
      border-radius: 999px;
      background: #b8891c;
      transform-origin: 50% 0;
    }

    .calendar-audit-clock::before {
      height: 4px;
      transform: translate(-50%, -1px) rotate(0deg);
    }

    .calendar-audit-clock::after {
      height: 4px;
      transform: translate(-50%, -1px) rotate(115deg);
    }

    .week-event .calendar-audit-clock {
      position: absolute;
      top: 5px;
      right: 6px;
      width: 13px;
      height: 13px;
    }

    .week-event.dragging {
      opacity: 0.42;
      box-shadow: none;
    }

    .week-event.is-selected {
      z-index: 80 !important;
      box-shadow: 0 18px 34px rgba(36, 72, 128, 0.18);
      border-color: rgba(49, 87, 216, 0.3);
    }

    .week-day-column.drag-target {
      box-shadow: inset 0 0 0 2px rgba(49, 87, 216, 0.22);
    }

    .week-event.cancelled {
      border-left-color: #dc4c4c;
      border-color: rgba(220, 76, 76, 0.22);
      background: linear-gradient(180deg, rgba(255, 239, 237, 0.96), rgba(255, 246, 244, 1));
      color: #8e2222;
    }

    .week-event.qualified {
      border-left-color: #2f9d57;
      border-color: rgba(47, 157, 87, 0.2);
      background: linear-gradient(180deg, rgba(232, 249, 238, 0.97), rgba(243, 252, 246, 1));
      color: #1d5f34;
    }

    .week-event.unqualified {
      border-left-color: #c77700;
      border-color: rgba(199, 119, 0, 0.22);
      background: linear-gradient(180deg, rgba(255, 244, 224, 0.97), rgba(255, 250, 240, 1));
      color: #7d4b00;
    }

    .week-event.preconfirmed,
    .week-event.confirmed {
      border-left-color: #18a66a;
      border-color: rgba(24, 166, 106, 0.24);
      background: linear-gradient(180deg, rgba(231, 250, 241, 0.98), rgba(244, 253, 248, 1));
      color: #14613f;
    }

    .week-event.confirmed {
      border-left-color: #078a52;
      background: linear-gradient(180deg, rgba(218, 247, 233, 0.98), rgba(239, 252, 246, 1));
    }

    .week-event.sold {
      border-left-color: #7c5cff;
      border-color: rgba(124, 92, 255, 0.22);
      background: linear-gradient(180deg, rgba(242, 238, 255, 0.98), rgba(248, 246, 255, 1));
      color: #4a33b8;
    }

    .week-event.ghosted {
      border-left-color: #d4a62a;
      border-color: rgba(212, 166, 42, 0.22);
      background: linear-gradient(180deg, rgba(255, 248, 226, 0.97), rgba(255, 252, 240, 1));
      color: #7c5c00;
    }

    .week-event.manual-block {
      border: 1px solid #283a56;
      border-left: 5px solid #182a49;
      border-radius: 3px;
      background: repeating-linear-gradient(-45deg, #edf1f6, #edf1f6 7px, #e4e9f0 7px, #e4e9f0 14px);
      color: #182a49;
      box-shadow: none;
      cursor: pointer;
    }

    .week-event.is-masked {
      opacity: 0.56;
      border-color: rgba(151, 165, 194, 0.22);
      border-left-color: #94a3bd;
      background: linear-gradient(180deg, rgba(249, 251, 255, 0.64), rgba(244, 248, 255, 0.72));
      color: #273b5e;
      box-shadow: 0 8px 18px rgba(36, 72, 128, 0.04);
      cursor: default;
    }

    .week-event.is-masked.availability-only {
      opacity: 1;
      border-color: rgba(103, 147, 232, 0.26);
      border-left-color: #6793e8;
      background: linear-gradient(180deg, rgba(239, 246, 255, 0.98), rgba(247, 250, 255, 1));
      color: #273b5e;
    }

    .week-event.is-masked .week-event-time,
    .week-event.is-masked .week-event-agent,
    .week-event.is-masked .week-event-address {
      color: #6f7fa2;
    }

    .week-event.mastermind {
      left: 0;
      right: 0;
      height: calc(var(--event-height) + 6px);
      border-left-color: #b26ba4;
      border-radius: 2px;
      background: linear-gradient(180deg, rgba(247, 233, 243, 0.82), rgba(252, 246, 250, 0.94));
      color: #6d3c63;
      box-shadow: none;
      cursor: pointer;
      pointer-events: auto;
      text-decoration: none;
    }

    .week-event.mastermind:hover,
    .week-event.mastermind:focus-visible {
      border-color: rgba(178, 107, 164, 0.56);
      background: linear-gradient(180deg, rgba(242, 220, 237, 0.96), rgba(250, 239, 247, 1));
      outline: 2px solid rgba(178, 107, 164, 0.22);
      outline-offset: 2px;
    }

    .week-event.mastermind:disabled,
    .week-event.mastermind.is-closed {
      border-color: rgba(151, 165, 194, 0.22);
      border-left-color: #9aa8c4;
      background: #f3f5f8;
      color: #8a95a8;
      cursor: not-allowed;
      opacity: 0.72;
    }

    .week-mastermind-banner {
      position: relative;
      top: var(--event-top);
      height: var(--event-height);
      min-height: var(--event-height);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      margin: 0;
      padding: 3px 14px;
      border: 1px solid rgba(75, 112, 193, 0.3);
      border-radius: 2px;
      background: #dfe9fc;
      color: rgba(34, 68, 143, 0.92);
      box-shadow: none;
      cursor: pointer;
      pointer-events: auto;
      text-decoration: none;
      z-index: 2;
    }

    .week-mastermind-banner:hover,
    .week-mastermind-banner:focus-visible {
      border-color: rgba(49, 87, 216, 0.55);
      background: #d3e1fb;
      outline: 2px solid rgba(49, 87, 216, 0.2);
      outline-offset: 2px;
    }

    .week-mastermind-banner:disabled,
    .week-mastermind-banner.is-closed {
      border-color: rgba(151, 165, 194, 0.24);
      background: #edf0f4;
      color: #8994a7;
      cursor: not-allowed;
      opacity: 0.78;
    }

    .week-mastermind-banner .week-event-title {
      color: inherit;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      -webkit-line-clamp: 1;
    }

    .week-event-time {
      display: block;
      margin-bottom: 2px;
      color: #3157d8;
      font-size: 9px;
      font-weight: 900;
      letter-spacing: 0.03em;
      text-transform: uppercase;
    }

    .week-event.mastermind .week-event-time {
      color: #8d4f81;
    }

    .week-event-title {
      display: block;
      color: inherit;
      font-size: 11px;
      font-weight: 700;
      line-height: 1.18;
      word-break: break-word;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .week-event-agent {
      display: block;
      margin-top: 2px;
      color: #6f7fa2;
      font-size: 9px;
      font-weight: 700;
      line-height: 1.2;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .week-event-address {
      display: block;
      margin-top: 3px;
      color: #6f7fa2;
      font-size: 10px;
      font-weight: 650;
      line-height: 1.25;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .week-event.is-compact {
      padding: 4px 5px;
    }

    .week-event.is-compact .week-event-title {
      font-size: 10px;
      -webkit-line-clamp: 2;
    }

    .week-event.is-compact .week-event-agent,
    .week-event.is-compact .week-event-address {
      display: none;
    }

    .calendar-day-name {
      padding: 10px 8px;
      background: linear-gradient(180deg, #f7faff, #eef4ff);
      color: #6f7fa2;
      font-size: 11px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.09em;
      border-right: 1px solid #e2eaf6;
    }

    .calendar-grid.week-view .calendar-day-name {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .calendar-day-name.is-today {
      background: linear-gradient(180deg, rgba(246, 250, 255, 0.96), rgba(237, 244, 255, 0.88));
      color: #173464;
      box-shadow: inset 0 -1px 0 rgba(49, 87, 216, 0.18);
    }

    .calendar-day-name:last-child {
      border-right: 0;
    }

    .calendar-cell {
      min-height: 0;
      padding: 10px;
      border-top: 1px solid #e2eaf6;
      border-right: 1px solid #e2eaf6;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(250, 252, 255, 0.9));
      transition: background 150ms ease, box-shadow 150ms ease;
    }

    .calendar-cell:nth-child(7n) {
      border-right: 0;
    }

    .calendar-cell.is-muted {
      background: #f8faff;
      color: #9aa6bd;
    }

    .calendar-cell.is-today {
      background: linear-gradient(180deg, #f8fbff, #eef5ff);
      box-shadow: inset 0 0 0 2px rgba(49, 87, 216, 0.28);
    }

    .calendar-cell.is-blocked-day {
      background: linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(241, 245, 249, 0.9));
    }

    .calendar-cell.drag-target {
      background: linear-gradient(180deg, #eef4ff, #e6efff);
      box-shadow: inset 0 0 0 2px rgba(49, 87, 216, 0.35);
    }

    .calendar-date-label {
      display: flex;
      width: 100%;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      padding: 0;
      border: 0;
      background: transparent;
      color: #7a879f;
      font-weight: 700;
      font-size: 13px;
      text-align: left;
      cursor: pointer;
    }

    .calendar-cell.is-today .calendar-date-label {
      color: #14284e;
      font-weight: 900;
    }

    .calendar-events {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-top: 8px;
    }

    .calendar-blocked-day-label {
      margin-top: 8px;
      padding: 5px 7px;
      border: 1px solid rgba(148, 163, 184, 0.22);
      border-radius: 10px;
      background: rgba(248, 250, 252, 0.9);
      color: #60708f;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .calendar-grid:not(.day-view):not(.week-view) .calendar-cell {
      display: flex;
      flex-direction: column;
    }

    .calendar-grid:not(.day-view):not(.week-view) .calendar-events {
      flex: 1 1 auto;
      min-height: 0;
      gap: 4px;
    }

    .calendar-event {
      width: 100%;
      text-align: left;
      border: 1px solid rgba(49, 87, 216, 0.14);
      border-left: 4px solid #3157d8;
      border-radius: 11px;
      background: linear-gradient(180deg, #f7faff, #edf4ff);
      padding: 6px 8px;
      color: #14284e;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
      box-shadow: 0 10px 20px rgba(49, 87, 216, 0.08);
      transition: box-shadow 150ms ease, border-color 150ms ease;
    }

    .calendar-event > *,
    .week-event > * {
      pointer-events: none;
    }

    .calendar-event.dragging,
    .week-event.dragging {
      opacity: 0.35;
      cursor: grabbing;
    }

    .calendar-grid:not(.day-view):not(.week-view) .calendar-event {
      padding: 4px 6px;
      border-radius: 9px;
      box-shadow: 0 6px 14px rgba(49, 87, 216, 0.06);
      gap: 4px;
    }

    .calendar-grid:not(.day-view):not(.week-view) .calendar-event-time {
      font-size: 8px;
    }

    .calendar-grid:not(.day-view):not(.week-view) .calendar-event-name {
      font-size: 10px;
      line-height: 1.15;
    }

    .calendar-grid:not(.day-view):not(.week-view) .calendar-audit-clock {
      width: 12px;
      height: 12px;
    }

    .calendar-event:hover,
    .calendar-event:focus-visible {
      transform: none;
      border-color: rgba(49, 87, 216, 0.28);
      box-shadow: 0 15px 28px rgba(49, 87, 216, 0.14);
      outline: none;
    }

    .calendar-event.is-selected {
      position: relative;
      z-index: 12;
      box-shadow: 0 16px 30px rgba(49, 87, 216, 0.16);
      border-color: rgba(49, 87, 216, 0.3);
    }

    .calendar-event.cancelled {
      border-left-color: #dc4c4c;
      background: linear-gradient(180deg, rgba(255, 244, 243, 0.9), rgba(255, 248, 247, 0.98));
      color: #8e2222;
    }

    .calendar-event.qualified {
      border-left-color: #2f9d57;
      background: linear-gradient(180deg, rgba(238, 251, 242, 0.9), rgba(247, 252, 248, 0.98));
      color: #1d5f34;
    }

    .calendar-event.unqualified {
      border-left-color: #c77700;
      background: linear-gradient(180deg, rgba(255, 244, 224, 0.92), rgba(255, 250, 240, 0.99));
      color: #7d4b00;
    }

    .calendar-event.preconfirmed,
    .calendar-event.confirmed {
      border-left-color: #18a66a;
      background: linear-gradient(180deg, rgba(231, 250, 241, 0.94), rgba(244, 253, 248, 0.99));
      color: #14613f;
    }

    .calendar-event.confirmed {
      border-left-color: #078a52;
      background: linear-gradient(180deg, rgba(218, 247, 233, 0.96), rgba(239, 252, 246, 1));
    }

    .calendar-event.sold {
      border-left-color: #7c5cff;
      background: linear-gradient(180deg, rgba(242, 238, 255, 0.95), rgba(248, 246, 255, 0.99));
      color: #4a33b8;
    }

    .calendar-event.ghosted {
      border-left-color: #d4a62a;
      background: linear-gradient(180deg, rgba(255, 249, 232, 0.9), rgba(255, 252, 242, 0.98));
      color: #7c5c00;
    }

    .calendar-event.manual-block,
    .calendar-day-list-item.manual-block {
      border-color: #283a56;
      border-left-color: #182a49;
      border-radius: 4px;
      background: repeating-linear-gradient(-45deg, #edf1f6, #edf1f6 7px, #e4e9f0 7px, #e4e9f0 14px);
      color: #182a49;
      box-shadow: none;
    }

    .calendar-event.is-masked,
    .calendar-day-list-item.is-masked {
      opacity: 0.58;
      border-color: rgba(151, 165, 194, 0.2);
      border-left-color: #94a3bd;
      background: linear-gradient(180deg, rgba(249, 251, 255, 0.66), rgba(244, 248, 255, 0.76));
      color: #273b5e;
      box-shadow: 0 6px 14px rgba(36, 72, 128, 0.035);
      cursor: default;
    }

    .calendar-event.is-masked.availability-only,
    .calendar-day-list-item.is-masked.availability-only {
      opacity: 1;
      border-color: rgba(103, 147, 232, 0.24);
      border-left-color: #6793e8;
      background: linear-gradient(180deg, rgba(239, 246, 255, 0.98), rgba(247, 250, 255, 1));
      color: #273b5e;
    }

    .calendar-event.is-masked:hover,
    .calendar-event.is-masked:focus-visible,
    .calendar-day-list-item.is-masked:hover,
    .calendar-day-list-item.is-masked:focus-visible,
    .week-event.is-masked:hover,
    .week-event.is-masked:focus-visible {
      transform: none;
      outline: none;
    }

    .calendar-event.is-masked .calendar-event-time,
    .calendar-event.is-masked .calendar-event-agent,
    .calendar-day-list-item.is-masked .calendar-day-list-time,
    .calendar-day-list-item.is-masked .calendar-day-list-agent,
    .calendar-day-list-item.is-masked .calendar-day-list-meta {
      color: #6f7fa2;
    }

    .calendar-event-time {
      display: inline-flex;
      flex: 0 0 auto;
      color: #3157d8;
      font-size: 9px;
      font-weight: 900;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .calendar-event.cancelled .calendar-event-time,
    .calendar-event.qualified .calendar-event-time,
    .calendar-event.unqualified .calendar-event-time,
    .calendar-event.preconfirmed .calendar-event-time,
    .calendar-event.confirmed .calendar-event-time,
    .calendar-event.sold .calendar-event-time,
    .calendar-event.ghosted .calendar-event-time,
    .calendar-day-list-item.cancelled .calendar-day-list-time,
    .calendar-day-list-item.qualified .calendar-day-list-time,
    .calendar-day-list-item.unqualified .calendar-day-list-time,
    .calendar-day-list-item.preconfirmed .calendar-day-list-time,
    .calendar-day-list-item.confirmed .calendar-day-list-time,
    .calendar-day-list-item.sold .calendar-day-list-time,
    .calendar-day-list-item.ghosted .calendar-day-list-time,
    .week-event.cancelled .week-event-time,
    .week-event.qualified .week-event-time,
    .week-event.unqualified .week-event-time,
    .week-event.sold .week-event-time,
    .week-event.ghosted .week-event-time {
      color: currentColor;
    }

    .calendar-event.manual-block .calendar-event-time,
    .calendar-day-list-item.manual-block .calendar-day-list-time,
    .week-event.manual-block .week-event-time {
      color: currentColor;
    }

    .calendar-event-name {
      display: block;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 11px;
      font-weight: 600;
      line-height: 1.25;
    }

    .calendar-event-agent {
      display: block;
      flex: 0 1 auto;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #6f7fa2;
      font-size: 9px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }

    .calendar-popover {
      position: fixed;
      z-index: 80;
      width: min(390px, calc(100vw - 28px));
      border-radius: 20px;
      border: 1px solid rgba(212, 225, 246, 0.82);
      background: rgba(255, 255, 255, 0.94);
      backdrop-filter: blur(18px);
      box-shadow: 0 28px 64px rgba(18, 42, 91, 0.23);
      overflow: hidden;
      animation: calendarPopoverIn 180ms ease-out;
      transform-origin: top left;
    }

    .calendar-contact-search-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      min-height: 38px;
      padding: 0 13px;
      border: 1px solid #cbd9ee;
      border-radius: 10px;
      background: #fff;
      color: #315b9a;
      font: inherit;
      font-size: 12px;
      font-weight: 900;
      cursor: pointer;
    }

    .calendar-contact-search-btn:hover,
    .calendar-contact-search-btn:focus-visible {
      border-color: #8eabe0;
      background: #eef4ff;
      outline: none;
    }

    .calendar-contact-search-btn > span:first-child {
      font-size: 19px;
      line-height: 1;
    }

    .calendar-contact-drawer {
      --calendar-contact-drawer-right: 74px;
      position: fixed;
      top: 0;
      right: var(--calendar-contact-drawer-right);
      bottom: 0;
      z-index: 1250;
      display: flex;
      width: min(430px, calc(100vw - var(--calendar-contact-drawer-right) - 24px));
      min-width: 320px;
      flex-direction: column;
      overflow: hidden;
      border-left: 1px solid #dce5f2;
      background: #f8faff;
      box-shadow: -22px 0 55px rgba(22, 48, 91, 0.17);
      animation: calendarContactDrawerIn 190ms ease-out;
    }

    .calendar-contact-drawer.hidden {
      display: none !important;
    }

    .calendar-contact-drawer.align-left {
      right: auto;
      left: 12px;
      width: min(430px, calc(100vw - 24px));
      border-right: 1px solid #dce5f2;
      border-left: 1px solid #dce5f2;
      border-radius: 0 18px 18px 0;
    }

    @keyframes calendarContactDrawerIn {
      from { opacity: 0; transform: translateX(28px); }
      to { opacity: 1; transform: translateX(0); }
    }

    .calendar-contact-drawer-head {
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 76px;
      padding: max(14px, env(safe-area-inset-top)) 16px 14px;
      border-bottom: 1px solid #dfe7f3;
      background: #fff;
    }

    .calendar-contact-drawer-head > div {
      display: grid;
      min-width: 0;
      flex: 1;
      gap: 3px;
    }

    .calendar-contact-drawer-head span {
      color: #7c8ea9;
      font-size: 9px;
      font-weight: 950;
      letter-spacing: .08em;
    }

    .calendar-contact-drawer-head strong {
      overflow: hidden;
      color: #17335e;
      font-size: 18px;
      font-weight: 950;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .calendar-contact-back,
    .calendar-contact-close {
      display: grid;
      width: 36px;
      height: 36px;
      flex: 0 0 36px;
      place-items: center;
      padding: 0;
      border: 0;
      border-radius: 10px;
      background: #edf3fc;
      color: #456487;
      font: inherit;
      font-size: 24px;
      line-height: 1;
      cursor: pointer;
    }

    .calendar-contact-back.hidden {
      display: none;
    }

    .calendar-contact-back:hover,
    .calendar-contact-close:hover {
      background: #dfeafb;
    }

    .calendar-contact-search-shell {
      display: grid;
      gap: 7px;
      padding: 14px 16px;
      border-bottom: 1px solid #e3eaf5;
      background: #fff;
    }

    .calendar-contact-search-shell.hidden {
      display: none;
    }

    .calendar-contact-search-shell > label {
      color: #647793;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .025em;
      text-transform: uppercase;
    }

    .calendar-contact-search-shell > div {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
    }

    .calendar-contact-search-shell input {
      min-width: 0;
      min-height: 42px;
      padding: 0 12px;
      border: 1px solid #cbd8eb;
      border-radius: 10px;
      background: #f9fbff;
      color: #203a61;
      font: inherit;
      font-size: 13px;
    }

    .calendar-contact-search-shell input:focus {
      border-color: #5e8bd9;
      outline: 3px solid rgba(94, 139, 217, .14);
    }

    .calendar-contact-search-shell button,
    .calendar-contact-rebook {
      min-height: 40px;
      padding: 0 13px;
      border: 0;
      border-radius: 10px;
      background: #326dc6;
      color: #fff;
      font: inherit;
      font-size: 12px;
      font-weight: 900;
      cursor: pointer;
    }

    .calendar-contact-drawer-status {
      min-height: 18px;
      padding: 9px 16px 0;
      color: #71829b;
      font-size: 11px;
      font-weight: 800;
    }

    .calendar-contact-drawer-status:empty {
      display: none;
    }

    .calendar-contact-drawer-status.error {
      color: #b33c47;
    }

    .calendar-contact-drawer-body {
      display: flex;
      min-height: 0;
      flex: 1;
      flex-direction: column;
      gap: 12px;
      overflow-y: auto;
      overscroll-behavior: contain;
      padding: 14px 16px max(22px, env(safe-area-inset-bottom));
    }

    .calendar-contact-results,
    .calendar-contact-timeline {
      display: grid;
      gap: 10px;
    }

    .calendar-contact-result {
      display: grid;
      width: 100%;
      gap: 4px;
      padding: 13px 14px;
      border: 1px solid #dce5f2;
      border-radius: 13px;
      background: #fff;
      color: #213d67;
      font: inherit;
      text-align: left;
      cursor: pointer;
    }

    .calendar-contact-result:hover,
    .calendar-contact-result:focus-visible {
      border-color: #92afe0;
      background: #f3f7ff;
      outline: none;
      box-shadow: 0 8px 20px rgba(31, 67, 124, .08);
    }

    .calendar-contact-result strong {
      font-size: 14px;
      font-weight: 950;
    }

    .calendar-contact-result span {
      color: #4e6686;
      font-size: 12px;
      font-weight: 800;
    }

    .calendar-contact-result small {
      color: #8492a7;
      font-size: 10px;
      font-weight: 750;
    }

    .calendar-contact-summary {
      display: grid;
      gap: 4px;
      padding: 12px 14px;
      border: 1px solid #d8e4f4;
      border-radius: 13px;
      background: linear-gradient(135deg, #edf4ff, #f8fbff);
      color: #2d4b73;
    }

    .calendar-contact-summary strong {
      font-size: 13px;
      font-weight: 950;
    }

    .calendar-contact-summary span {
      color: #647a98;
      font-size: 11px;
      font-weight: 750;
    }

    .calendar-contact-history-card {
      position: relative;
      display: grid;
      gap: 8px;
      padding: 14px;
      border: 1px solid #dde6f2;
      border-radius: 14px;
      background: #fff;
      box-shadow: 0 7px 20px rgba(27, 56, 102, .06);
    }

    .calendar-contact-history-card::before {
      position: absolute;
      top: 19px;
      left: -21px;
      width: 9px;
      height: 9px;
      border: 3px solid #f8faff;
      border-radius: 50%;
      background: #6d96d8;
      content: "";
    }

    .calendar-contact-timeline {
      position: relative;
      margin-left: 10px;
      padding-left: 10px;
      border-left: 2px solid #dbe6f7;
    }

    .calendar-contact-history-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 8px;
    }

    .calendar-contact-history-top > strong {
      color: #234168;
      font-size: 12px;
      font-weight: 950;
      line-height: 1.35;
    }

    .calendar-contact-history-status {
      flex: 0 0 auto;
      padding: 5px 8px;
      border-radius: 999px;
      background: #fff0d8;
      color: #9b6811;
      font-size: 9px;
      font-weight: 950;
      letter-spacing: .02em;
      text-transform: uppercase;
    }

    .calendar-contact-history-status.approved {
      background: #e8f7ee;
      color: #23804d;
    }

    .calendar-contact-history-status.declined {
      background: #ffe9e8;
      color: #b33e45;
    }

    .calendar-contact-history-agent {
      color: #6a7d98;
      font-size: 11px;
      font-weight: 800;
    }

    .calendar-contact-history-notes {
      display: grid;
      gap: 6px;
      padding-top: 4px;
      border-top: 1px solid #edf1f7;
    }

    .calendar-contact-history-notes p {
      margin: 0;
      color: #526984;
      font-size: 11px;
      line-height: 1.45;
    }

    .calendar-contact-rebook {
      justify-self: start;
      min-height: 34px;
      margin-top: 2px;
      background: #eaf1ff;
      color: #315fb2;
    }

    .calendar-contact-rebook:hover {
      background: #dce9ff;
    }

    .calendar-contact-empty {
      margin: auto 0;
      padding: 28px 18px;
      border: 1px dashed #cbd8e9;
      border-radius: 14px;
      background: #fff;
      color: #71829a;
      font-size: 12px;
      font-weight: 750;
      line-height: 1.55;
      text-align: center;
    }

    @media (max-width: 760px) {
      .calendar-contact-search-btn > span:last-child {
        display: none;
      }

      .calendar-contact-search-btn {
        width: 38px;
        padding: 0;
      }

      .calendar-contact-drawer,
      .calendar-contact-drawer.align-left {
        top: max(8px, env(safe-area-inset-top));
        right: max(8px, env(safe-area-inset-right));
        bottom: calc(78px + env(safe-area-inset-bottom));
        left: max(8px, env(safe-area-inset-left));
        width: auto;
        min-width: 0;
        border: 1px solid #dce5f2;
        border-radius: 18px;
        box-shadow: 0 18px 65px rgba(18, 42, 91, .24);
      }
    }

    .calendar-more-btn {
      margin-top: 1px;
      padding: 0;
      border: 0;
      background: transparent;
      color: #173464;
      font-size: 10px;
      font-weight: 900;
      line-height: 1.2;
      text-align: left;
      cursor: pointer;
    }

    .calendar-grid:not(.day-view):not(.week-view) .calendar-more-btn {
      margin-top: auto;
      padding-top: 2px;
    }

    .calendar-more-btn:hover,
    .calendar-more-btn:focus-visible {
      color: #3157d8;
      outline: none;
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    .calendar-undo-toast {
      position: fixed;
      right: max(18px, env(safe-area-inset-right));
      bottom: max(18px, env(safe-area-inset-bottom));
      z-index: 231;
      display: flex;
      align-items: center;
      gap: 14px;
      width: min(390px, calc(100vw - 28px));
      padding: 14px 16px;
      border-radius: 16px;
      border: 1px solid rgba(27, 34, 54, 0.22);
      background: rgba(25, 29, 38, 0.96);
      color: #f5f7fb;
      box-shadow: 0 24px 52px rgba(14, 18, 29, 0.34);
    }

    .calendar-undo-toast.hidden {
      display: none;
    }

    .calendar-undo-toast-message {
      font-size: 13px;
      font-weight: 700;
      line-height: 1.35;
      color: #eef3ff;
    }

    .calendar-undo-toast-actions {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-left: auto;
      flex-shrink: 0;
    }

    .calendar-undo-toast-action {
      border: 0;
      border-radius: 999px;
      padding: 8px 12px;
      font-size: 13px;
      font-weight: 900;
      cursor: pointer;
    }

    .calendar-undo-toast-action.undo {
      background: #8ab6ff;
      color: #13224f;
    }

    .calendar-undo-toast-action.close {
      background: rgba(255, 255, 255, 0.1);
      color: #eef3ff;
    }

    @media (max-width: 760px) {
      .calendar-undo-toast {
        right: 12px;
        bottom: max(12px, env(safe-area-inset-bottom));
        width: min(390px, calc(100vw - 24px));
      }
    }

    .calendar-result-task-rail {
      position: fixed;
      right: max(18px, env(safe-area-inset-right));
      bottom: max(18px, env(safe-area-inset-bottom));
      z-index: 230;
      display: grid;
      width: min(330px, calc(100vw - 28px));
      gap: 9px;
      pointer-events: none;
    }

    .calendar-result-task {
      position: relative;
      overflow: hidden;
      padding: 12px 13px;
      border: 1px solid rgba(202, 216, 240, 0.96);
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.98);
      color: #172b55;
      box-shadow: 0 18px 42px rgba(19, 47, 99, 0.2);
      pointer-events: auto;
      animation: calendarResultTaskIn 180ms ease-out;
    }

    @keyframes calendarResultTaskIn {
      from {
        opacity: 0;
        transform: translateX(18px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    .calendar-result-task-main {
      display: grid;
      grid-template-columns: 24px minmax(0, 1fr) auto;
      gap: 8px;
      align-items: center;
    }

    .calendar-result-task-main strong {
      overflow: hidden;
      font-size: 12px;
      font-weight: 900;
      line-height: 1.35;
      text-overflow: ellipsis;
    }

    .calendar-result-task-icon {
      width: 24px;
      height: 24px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      background: #edf3ff;
      color: #3157d8;
      font-size: 13px;
      font-weight: 950;
    }

    .calendar-result-task.is-saving .calendar-result-task-icon {
      border: 2px solid #d6e2fb;
      border-top-color: #3157d8;
      background: transparent;
      animation: calendarResultTaskSpin 1.4s linear infinite;
    }

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

    .calendar-result-task.is-success .calendar-result-task-icon {
      background: #e3f7ec;
      color: #128048;
    }

    .calendar-result-task.is-warning .calendar-result-task-icon {
      background: #fff1d7;
      color: #9b6407;
    }

    .calendar-result-task.is-error .calendar-result-task-icon {
      background: #ffe6e8;
      color: #c53540;
    }

    .calendar-result-task-close {
      width: 24px;
      height: 24px;
      padding: 0;
      border: 0;
      border-radius: 999px;
      background: #f1f4f9;
      color: #63718d;
      font-size: 16px;
      line-height: 1;
      cursor: pointer;
    }

    .calendar-result-task-retry {
      margin-top: 8px;
      padding: 5px 9px;
      border: 1px solid rgba(49, 87, 216, 0.18);
      border-radius: 999px;
      background: #eef4ff;
      color: #244bb5;
      font-size: 11px;
      font-weight: 900;
      cursor: pointer;
    }

    @media (max-width: 760px) {
      .calendar-result-task-rail {
        right: 12px;
        bottom: max(12px, env(safe-area-inset-bottom));
        width: min(320px, calc(100vw - 24px));
      }
    }

    .calendar-day-list {
      max-height: min(420px, calc(100vh - 120px));
      overflow: auto;
      padding: 8px 18px 16px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .calendar-day-list-item {
      width: 100%;
      text-align: left;
      border: 1px solid rgba(49, 87, 216, 0.12);
      border-left: 4px solid #3157d8;
      border-radius: 12px;
      background: linear-gradient(180deg, #f8fbff, #eef4ff);
      padding: 10px 11px;
      cursor: pointer;
      color: #14284e;
      box-shadow: 0 8px 20px rgba(49, 87, 216, 0.07);
    }

    .calendar-day-list-item:hover,
    .calendar-day-list-item:focus-visible {
      border-color: rgba(49, 87, 216, 0.24);
      outline: none;
      transform: translateY(-1px);
    }

    .calendar-day-list-item.cancelled {
      border-left-color: #dc4c4c;
      background: linear-gradient(180deg, rgba(255, 244, 243, 0.92), rgba(255, 248, 247, 0.98));
      color: #8e2222;
    }

    .calendar-day-list-item.qualified {
      border-left-color: #2f9d57;
      background: linear-gradient(180deg, rgba(238, 251, 242, 0.92), rgba(247, 252, 248, 0.98));
      color: #1d5f34;
    }

    .calendar-day-list-item.unqualified {
      border-left-color: #c77700;
      background: linear-gradient(180deg, rgba(255, 244, 224, 0.94), rgba(255, 250, 240, 0.99));
      color: #7d4b00;
    }

    .calendar-day-list-item.preconfirmed,
    .calendar-day-list-item.confirmed {
      border-left-color: #18a66a;
      background: linear-gradient(180deg, rgba(231, 250, 241, 0.95), rgba(244, 253, 248, 0.99));
      color: #14613f;
    }

    .calendar-day-list-item.confirmed {
      border-left-color: #078a52;
      background: linear-gradient(180deg, rgba(218, 247, 233, 0.97), rgba(239, 252, 246, 1));
    }

    .calendar-day-list-item.sold {
      border-left-color: #7c5cff;
      background: linear-gradient(180deg, rgba(242, 238, 255, 0.95), rgba(248, 246, 255, 0.99));
      color: #4a33b8;
    }

    .calendar-event.is-masked.availability-only.cancelled,
    .week-event.is-masked.availability-only.cancelled,
    .calendar-day-list-item.is-masked.availability-only.cancelled {
      border-color: rgba(220, 76, 76, 0.28);
      border-left-color: #dc4c4c;
      background: linear-gradient(180deg, rgba(255, 239, 237, 0.98), rgba(255, 248, 247, 1));
      color: #8e2222;
    }

    .calendar-event.is-masked.availability-only.sold,
    .week-event.is-masked.availability-only.sold,
    .calendar-day-list-item.is-masked.availability-only.sold {
      border-color: rgba(124, 92, 255, 0.28);
      border-left-color: #7c5cff;
      background: linear-gradient(180deg, rgba(242, 238, 255, 0.98), rgba(248, 246, 255, 1));
      color: #4a33b8;
    }

    .calendar-day-list-item.ghosted {
      border-left-color: #d4a62a;
      background: linear-gradient(180deg, rgba(255, 249, 232, 0.92), rgba(255, 252, 242, 0.98));
      color: #7c5c00;
    }

    .calendar-event.history-record,
    .week-event.history-record,
    .calendar-day-list-item.history-record {
      opacity: 0.42;
      border-style: dashed;
      box-shadow: none;
      filter: saturate(0.62);
    }

    .calendar-event.history-record:hover,
    .calendar-event.history-record:focus-visible,
    .week-event.history-record:hover,
    .week-event.history-record:focus-visible,
    .calendar-day-list-item.history-record:hover,
    .calendar-day-list-item.history-record:focus-visible {
      opacity: 0.68;
      transform: none;
      box-shadow: none;
    }

    .calendar-history-label,
    .calendar-member-status-label {
      display: inline-flex;
      width: fit-content;
      max-width: 100%;
      padding: 2px 5px;
      border: 1px solid currentColor;
      border-radius: 999px;
      font-size: 8px;
      font-weight: 900;
      line-height: 1.15;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .calendar-visit-label {
      display: inline-flex;
      width: fit-content;
      max-width: 100%;
      padding: 2px 6px;
      border-radius: 999px;
      background: #eaf1ff;
      color: #285bc8;
      font-size: 8px;
      font-weight: 900;
      line-height: 1.2;
      letter-spacing: 0.035em;
      text-transform: uppercase;
    }

    .calendar-day-list-time {
      display: block;
      color: #3157d8;
      font-size: 10px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin-bottom: 3px;
    }

    .calendar-day-list-name {
      display: block;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.2;
    }

    .calendar-day-list-agent,
    .calendar-day-list-meta {
      display: block;
      margin-top: 4px;
      color: #6f7fa2;
      font-size: 10px;
      font-weight: 700;
      line-height: 1.3;
    }

    @keyframes calendarPopoverIn {
      from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .calendar-popover-head {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: flex-start;
      padding: 16px 18px 13px;
      border-bottom: 1px solid #e8eef8;
      background: rgba(248, 251, 255, 0.92);
    }

    .calendar-popover-head strong {
      display: block;
      color: #14284e;
      font-size: 17px;
      line-height: 1.2;
      font-weight: 700;
    }

    .calendar-popover-head span {
      display: block;
      margin-top: 4px;
      color: #3157d8;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.03em;
      text-transform: uppercase;
    }

    .calendar-popover-close {
      width: 28px;
      height: 28px;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: #506080;
      cursor: pointer;
      font-weight: 900;
      transition: color 150ms ease, opacity 150ms ease, transform 180ms ease;
    }

    .calendar-popover-close:hover {
      background: transparent;
      color: #1e3765;
      transform: rotate(7deg) scale(1.08);
    }

    .calendar-popover-head-actions {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .calendar-popover-menu-wrap {
      position: relative;
    }

    .calendar-popover-menu-trigger {
      width: 32px;
      height: 28px;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: #3157d8;
      font-size: 18px;
      font-weight: 900;
      line-height: 1;
      cursor: pointer;
    }

    .calendar-popover-menu-trigger:hover,
    .calendar-popover-menu-trigger[aria-expanded="true"] {
      border-color: transparent;
      background: transparent;
      color: #173fba;
    }

    .calendar-popover-menu {
      position: absolute;
      z-index: 4;
      top: calc(100% + 8px);
      right: 0;
      width: 170px;
      padding: 6px;
      border: 1px solid #dbe5f4;
      border-radius: 12px;
      background: #fff;
      box-shadow: 0 16px 34px rgba(23, 52, 100, 0.18);
    }

    .calendar-popover-menu button {
      width: 100%;
      padding: 10px 11px;
      border: 0;
      border-radius: 9px;
      background: transparent;
      color: #173464;
      text-align: left;
      font: inherit;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
    }

    .calendar-popover-menu button:hover {
      background: #f2f6fd;
    }

    .calendar-popover-menu button.danger {
      color: #d43c49;
    }

    .calendar-popover-menu-mobile-result {
      display: none;
    }

    .calendar-popover-body {
      display: grid;
      gap: 0;
      padding: 6px 18px 14px;
    }

    .calendar-popover-row {
      display: grid;
      grid-template-columns: 118px minmax(0, 1fr);
      gap: 12px;
      align-items: start;
      padding: 7px 2px;
      border-bottom: 1px solid rgba(226, 234, 246, 0.82);
    }

    .calendar-popover-icon {
      display: none;
    }

    .calendar-popover-icon svg {
      width: 14px;
      height: 14px;
      stroke-width: 2.25;
    }

    .calendar-popover-row span {
      color: #7381a0;
      font-size: 9px;
      font-weight: 900;
      letter-spacing: 0.04em;
      line-height: 1.4;
      text-transform: uppercase;
    }

    .calendar-popover-row > div:last-child {
      display: contents;
    }

    .calendar-popover-row strong,
    .calendar-popover-row p {
      margin: 0;
      color: #243757;
      font-size: 12px;
      line-height: 1.35;
      font-weight: 650;
    }

    .calendar-reschedule-backdrop {
      position: fixed;
      inset: 0;
      z-index: 95;
      display: grid;
      place-items: center;
      padding: 18px;
      background: rgba(16, 29, 60, 0.28);
      backdrop-filter: blur(4px);
    }

    .calendar-reschedule-modal {
      width: min(420px, 100%);
      border-radius: 24px;
      border: 1px solid rgba(49, 87, 216, 0.14);
      background: rgba(255, 255, 255, 0.98);
      box-shadow: 0 28px 60px rgba(31, 75, 157, 0.22);
      overflow: hidden;
    }

    .calendar-reschedule-head {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: flex-start;
      padding: 18px 20px 14px;
      border-bottom: 1px solid #e8eef8;
      background: rgba(248, 251, 255, 0.92);
    }

    .calendar-reschedule-head strong {
      display: block;
      color: #14284e;
      font-size: 17px;
      line-height: 1.2;
      font-weight: 700;
    }

    .calendar-reschedule-head p {
      margin: 5px 0 0;
      color: #6d7d9d;
      font-size: 12px;
      line-height: 1.5;
    }

    .calendar-reschedule-body {
      display: grid;
      gap: 14px;
      padding: 16px 20px 20px;
    }

    .calendar-reschedule-fields {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .calendar-reschedule-field {
      display: grid;
      gap: 6px;
    }

    .calendar-reschedule-field.is-wide {
      grid-column: 1 / -1;
    }

    .calendar-reschedule-field span {
      color: #6f7fa2;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .calendar-reschedule-field input,
    .calendar-reschedule-field select,
    .calendar-reschedule-field textarea {
      height: 44px;
      border-radius: 14px;
      border: 1px solid rgba(49, 87, 216, 0.16);
      padding: 0 12px;
      color: #243757;
      font: inherit;
      background: #fff;
    }

    .calendar-reschedule-field textarea {
      min-height: 76px;
      height: auto;
      padding-top: 11px;
      resize: vertical;
    }

    .calendar-reschedule-field input:focus,
    .calendar-reschedule-field select:focus,
    .calendar-reschedule-field textarea:focus {
      outline: none;
      border-color: rgba(49, 87, 216, 0.45);
      box-shadow: 0 0 0 4px rgba(49, 87, 216, 0.08);
    }

    .calendar-block-private-option {
      grid-column: 1 / -1;
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 11px 12px;
      border: 1px solid #dce7f8;
      border-radius: 12px;
      background: #f5f8ff;
      color: #24416c;
      cursor: pointer;
    }

    .calendar-block-private-option input {
      width: 18px;
      height: 18px;
      margin: 1px 0 0;
      accent-color: #3157d8;
    }

    .calendar-block-private-option span {
      display: grid;
      gap: 3px;
    }

    .calendar-block-private-option strong {
      font-size: 12px;
      font-weight: 900;
    }

    .calendar-block-private-option small {
      color: #6a7d9c;
      font-size: 11px;
      font-weight: 700;
      line-height: 1.35;
    }

    .calendar-reschedule-actions {
      display: flex;
      gap: 10px;
      justify-content: flex-end;
    }

    .calendar-reschedule-actions .secondary-button,
    .calendar-reschedule-actions .primary-button {
      min-width: 122px;
      justify-content: center;
    }

    .calendar-reschedule-feedback {
      margin: -2px 0 0;
      padding: 10px 12px;
      border-radius: 12px;
      background: #fff2f0;
      color: #a6372b;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.4;
    }

    .calendar-outcome-card {
      flex: 0 0 auto;
      padding: 12px 18px 14px;
      border: 0;
      border-top: 1px solid #e8eef8;
      background: rgba(255, 255, 255, 0.98);
    }

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

    .calendar-outcome-head span {
      color: #7381a0;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .calendar-outcome-status {
      color: #3157d8;
      font-size: 11px;
      font-weight: 900;
    }

    .calendar-outcome-status.cancelled {
      color: #b43f35;
    }

    .calendar-outcome-status.qualified {
      color: #2c7a45;
    }

    .calendar-outcome-status.unqualified {
      color: #9b5c00;
    }

    .calendar-outcome-status.preconfirmed,
    .calendar-outcome-status.confirmed {
      color: #078a52;
    }

    .calendar-outcome-status.sold {
      color: #5a3ee6;
    }

    .calendar-outcome-status.ghosted {
      color: #9a7500;
    }

    .calendar-result-highlights {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 10px;
    }

    .calendar-result-chip {
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      padding: 4px 8px;
      border-radius: 999px;
      background: #eef4ff;
      color: #365a96;
      font-size: 10px;
      font-weight: 850;
      line-height: 1.2;
    }

    .calendar-result-chip.bonus {
      background: #e8f8ee;
      color: #168047;
    }

    .calendar-result-chip.sync-warning {
      background: #fff5df;
      color: #946900;
    }

    .calendar-result-open-btn {
      width: 100%;
      min-height: 42px;
      border: 0;
      border-radius: 11px;
      background: #1769e8;
      color: #fff;
      font-size: 12px;
      font-weight: 850;
      cursor: pointer;
      box-shadow: 0 12px 24px rgba(23, 105, 232, 0.18);
    }

    .calendar-result-open-btn:hover {
      background: #105dce;
      transform: translateY(-1px);
    }

    .calendar-result-open-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }

    .calendar-result-backdrop {
      position: fixed;
      inset: 0;
      z-index: 1550;
      display: grid;
      place-items: center;
      padding: 18px;
      background: rgba(13, 28, 58, 0.42);
      backdrop-filter: blur(5px);
    }

    .calendar-result-modal {
      width: min(720px, 100%);
      max-height: calc(100vh - 36px);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      border: 1px solid rgba(49, 87, 216, 0.14);
      border-radius: 22px;
      background: #fff;
      box-shadow: 0 32px 80px rgba(17, 42, 91, 0.3);
    }

    .calendar-result-modal-head {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      padding: 20px 22px 16px;
      border-bottom: 1px solid #e7edf7;
      background: #f8fbff;
    }

    .calendar-result-modal-head small {
      display: block;
      margin-bottom: 5px;
      color: #52709e;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .calendar-result-modal-head strong {
      display: block;
      color: #14284e;
      font-size: 21px;
      line-height: 1.2;
    }

    .calendar-result-modal-head p {
      margin: 5px 0 0;
      color: #6c7d9e;
      font-size: 12px;
    }

    .calendar-result-form {
      min-height: 0;
      overflow-y: auto;
    }

    .calendar-result-form-body {
      display: grid;
      gap: 18px;
      padding: 20px 22px;
    }

    .calendar-result-section {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      padding-bottom: 18px;
      border-bottom: 1px solid #edf1f7;
    }

    .calendar-result-section.full {
      grid-template-columns: 1fr;
    }

    .calendar-result-field {
      display: grid;
      gap: 7px;
      min-width: 0;
    }

    .calendar-result-field > span,
    .calendar-result-section-title {
      color: #66789b;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .calendar-result-field select,
    .calendar-result-field input,
    .calendar-result-field textarea {
      width: 100%;
      box-sizing: border-box;
      border: 1px solid #d7e1ef;
      border-radius: 10px;
      background: #fff;
      color: #18345e;
      font: inherit;
      font-size: 13px;
      font-weight: 650;
    }

    .calendar-result-field select,
    .calendar-result-field input {
      min-height: 44px;
      padding: 0 12px;
    }

    .calendar-result-field textarea {
      min-height: 88px;
      resize: vertical;
      padding: 11px 12px;
      line-height: 1.45;
    }

    .calendar-result-field small {
      display: block;
      margin-top: -2px;
      color: #7a8baa;
      font-size: 10px;
      font-weight: 650;
      line-height: 1.35;
    }

    .calendar-result-field select:focus,
    .calendar-result-field input:focus,
    .calendar-result-field textarea:focus {
      outline: none;
      border-color: #1769e8;
      box-shadow: 0 0 0 4px rgba(23, 105, 232, 0.08);
    }

    .calendar-result-sale-fields {
      display: flex;
      flex-direction: column;
      gap: 16px;
      padding: 18px;
      border: 1px solid #dce7f7;
      border-radius: 14px;
      background: #f8fbff;
    }

    .calendar-result-sale-head {
      display: flex;
      align-items: center;
      gap: 11px;
    }

    .calendar-result-sale-icon {
      width: 36px;
      height: 36px;
      flex: 0 0 36px;
      display: grid;
      place-items: center;
      border-radius: 11px;
      background: #e7f0ff;
      color: #1769e8;
    }

    .calendar-result-sale-icon svg {
      width: 19px;
      height: 19px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .calendar-result-sale-copy {
      display: grid;
      gap: 2px;
    }

    .calendar-result-sale-copy strong {
      color: #19355f;
      font-size: 13px;
      font-weight: 850;
    }

    .calendar-result-sale-copy span {
      color: #7183a3;
      font-size: 10px;
      font-weight: 650;
      line-height: 1.35;
    }

    .calendar-result-sale-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    .calendar-result-money {
      position: relative;
    }

    .calendar-result-money::before {
      content: "$";
      position: absolute;
      left: 12px;
      bottom: 13px;
      z-index: 1;
      color: #7183a3;
      font-size: 13px;
      font-weight: 800;
      pointer-events: none;
    }

    .calendar-result-money input {
      padding-left: 27px;
    }

    .calendar-result-pending-card {
      padding: 13px;
      border: 1px solid #e1e9f6;
      border-radius: 12px;
      background: #fff;
    }

    .calendar-result-pending-card textarea {
      min-height: 74px;
    }

    .calendar-result-bonus-preview {
      padding: 12px 14px;
      border-radius: 11px;
      background: #f1f5fb;
      color: #5d6f91;
      font-size: 12px;
      font-weight: 750;
    }

    .calendar-result-bonus-preview.eligible {
      background: #eaf8ef;
      color: #147a43;
    }

    .calendar-result-bonus-preview.already-counted,
    .calendar-lifecycle-note {
      background: #eef3ff;
      color: #315da8;
    }

    .calendar-lifecycle-note {
      margin: 10px 0;
      padding: 10px 12px;
      border-radius: 10px;
      font-size: 11px;
      font-weight: 750;
      line-height: 1.4;
    }

    .calendar-result-form-footer {
      position: sticky;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      padding: 14px 22px;
      border-top: 1px solid #e7edf7;
      background: rgba(255, 255, 255, 0.97);
    }

    .calendar-result-form-status {
      margin-right: auto;
      color: #65779b;
      font-size: 11px;
      font-weight: 750;
    }

    .calendar-result-form-status.error {
      color: #c83e45;
    }

    @media (max-width: 640px) {
      .calendar-result-section,
      .calendar-result-sale-grid {
        grid-template-columns: 1fr;
      }

      .calendar-result-form-footer {
        flex-wrap: wrap;
      }

      .calendar-result-form-status {
        flex-basis: 100%;
      }
    }

    .calendar-outcome-options {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 7px;
    }

    .calendar-outcome-btn {
      min-height: 38px;
      padding: 7px 5px;
      border-radius: 11px;
      border: 1px solid rgba(214, 223, 237, 0.95);
      background: #fff;
      color: #506080;
      cursor: pointer;
      display: grid;
      place-items: center;
      gap: 3px;
      font-size: 10px;
      font-weight: 900;
      transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
    }

    .calendar-outcome-btn:disabled {
      opacity: 0.45;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }

    .calendar-outcome-btn:disabled {
      opacity: 0.45;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }

    .calendar-outcome-btn svg {
      width: 14px;
      height: 14px;
      stroke-width: 2.3;
    }

    .calendar-outcome-btn:hover,
    .calendar-outcome-btn.active {
      transform: translateY(-1px);
      border-color: rgba(49, 87, 216, 0.26);
      background: #eef4ff;
      color: #1f45ad;
      box-shadow: 0 12px 22px rgba(49, 87, 216, 0.1);
    }

    .calendar-outcome-btn.cancelled.active {
      background: #fff0ee;
      color: #b43f35;
      border-color: rgba(180, 63, 53, 0.18);
    }

    .calendar-outcome-btn.sold.active {
      background: #f1ecff;
      color: #5a3ee6;
      border-color: rgba(124, 92, 255, 0.24);
      box-shadow: 0 12px 22px rgba(124, 92, 255, 0.14);
    }

    .calendar-outcome-btn.qualified.active {
      background: #eef8f1;
      color: #2c7a45;
      border-color: rgba(44, 122, 69, 0.2);
    }

    .calendar-outcome-btn.ghosted.active {
      background: #fff7dd;
      color: #9a7500;
      border-color: rgba(212, 166, 42, 0.28);
    }

    .appointment-report {
      display: flex;
      flex-direction: column;
      gap: 14px;
      padding-top: 4px;
    }

    .suggested-slots {
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding-top: 6px;
    }

    .calendar-slots-toggle {
      width: 100%;
      min-height: 50px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 9px 10px 9px 16px;
      border: 1px solid #dbe5f3;
      border-radius: 16px;
      background: #fff;
      color: #14284e;
      box-shadow: 0 8px 22px rgba(36, 68, 132, 0.07);
      font: inherit;
      font-size: 15px;
      font-weight: 900;
      text-align: left;
    }

    .calendar-slots-toggle-icon {
      width: 32px;
      height: 32px;
      display: inline-grid;
      place-items: center;
      flex: 0 0 auto;
      border-radius: 50%;
      background: #3157d8;
      color: #fff;
      font-size: 23px;
      font-weight: 500;
      line-height: 1;
      transition: transform 180ms ease, background 180ms ease;
    }

    .calendar-slots-toggle[aria-expanded="true"] .calendar-slots-toggle-icon {
      transform: rotate(45deg);
      background: #203f9f;
    }

    .suggested-slots-top {
      margin-bottom: 6px;
      padding: 22px;
      border: 1px solid #dbe5f3;
      border-radius: 16px;
      background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
      box-shadow: 0 12px 28px rgba(36, 68, 132, 0.08);
    }

    .suggested-slots-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
      padding-top: 10px;
      border-top: 1px solid rgba(218, 228, 245, 0.86);
    }

    .suggested-slots-top .suggested-slots-head {
      padding-top: 0;
      border-top: 0;
    }

    .suggested-slots-head h3 {
      margin: 3px 0 0;
      color: #14284e;
      font-size: 23px;
      letter-spacing: -0.02em;
    }

    .suggested-slots-head p {
      margin: 5px 0 0;
      color: #7180a1;
      font-size: 13px;
      line-height: 1.45;
    }

    .suggested-slots-range {
      padding: 6px 9px;
      border-radius: 5px;
      background: #e7eefc;
      color: #405b94;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .suggested-slots-grid {
      display: grid;
      grid-template-columns: repeat(7, minmax(132px, 1fr));
      gap: 10px;
      overflow-x: auto;
      overscroll-behavior-inline: contain;
      scroll-snap-type: x proximity;
      scrollbar-color: #b9c9ea transparent;
      scrollbar-width: thin;
      padding: 2px 0 7px;
    }

    .suggested-slots-grid::before {
      display: none;
    }

    .suggested-slot-day {
      min-height: 260px;
      min-width: 0;
      margin: 0;
      border-radius: 12px;
      border: 1px solid #dce5f2;
      background: #fff;
      overflow: hidden;
      scroll-snap-align: start;
    }

    .suggested-slot-day.is-today {
      border-color: #3157d8;
      background: #fff;
      box-shadow: inset 0 0 0 1px #3157d8;
    }

    .suggested-slot-day.is-available {
      border-color: #cbd9ee;
      background: #fff;
    }

    .suggested-slot-day.is-today.is-available {
      border-color: #3157d8;
      box-shadow: inset 0 0 0 1px #3157d8;
    }

    .suggested-slot-day.is-unavailable {
      background: #f8fafc;
      opacity: 0.68;
    }

    .suggested-slot-day-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 12px;
      border-bottom: 1px solid rgba(231, 238, 248, 0.92);
      background: #f5f8fd;
    }

    .suggested-slot-day.is-today .suggested-slot-day-head {
      background: #e7eefc;
      border-bottom-color: #c4d3ef;
    }

    .suggested-slot-day.is-available .suggested-slot-day-head {
      background: #f5f8fd;
      border-bottom-color: #e0e8f4;
    }

    .suggested-slot-day-head strong {
      color: #274493;
      font-size: 13px;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .suggested-slot-day-head span {
      color: #5c6d95;
      font-size: 12px;
      font-weight: 800;
    }

    .suggested-slot-day.is-today .suggested-slot-day-head strong,
    .suggested-slot-day.is-today .suggested-slot-day-head span {
      color: #2444a5;
    }

    .suggested-slot-body {
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding: 12px 10px;
    }

    .suggested-slot-label {
      color: #6f7fa2;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .suggested-slot-times {
      display: flex;
      flex-direction: column;
      gap: 8px;
      max-height: 294px;
      overflow-y: auto;
      padding: 1px 3px 2px;
      scrollbar-color: #c3d0e6 transparent;
      scrollbar-width: thin;
    }

    .suggested-slot-time {
      display: flex;
      width: 100%;
      min-height: 38px;
      align-items: center;
      justify-content: center;
      padding: 7px 10px;
      border: 1px solid #aab9cf;
      border-radius: 999px;
      background: #fff;
      color: #2454c6;
      font-family: inherit;
      font-size: 13px;
      font-weight: 900;
      line-height: 1.3;
      white-space: normal;
      overflow-wrap: anywhere;
    }

    button.suggested-slot-time {
      cursor: pointer;
      transition: color 150ms ease, background 150ms ease, border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
    }

    button.suggested-slot-time:hover,
    button.suggested-slot-time:focus-visible {
      border-color: #3157d8;
      background: #3157d8;
      color: #fff;
      outline: none;
      transform: translateY(-1px);
      box-shadow: 0 8px 18px rgba(49, 87, 216, 0.2);
    }

    .suggested-slot-time::after {
      display: none;
    }

    .suggested-slot-time:last-child::after {
      display: none;
    }

    .suggested-slot-time.all-day {
      color: #237342;
    }

    .suggested-slot-time.none {
      border-color: transparent;
      background: transparent;
      color: #7b88a5;
    }

    .calendar-details-toggle {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      width: 100%;
      padding: 14px 16px;
      border: 1px solid #d8e2f1;
      border-radius: 12px;
      background: #f8faff;
      color: #243757;
      font-family: inherit;
      text-align: left;
      cursor: pointer;
      transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
    }

    .calendar-details-toggle:hover,
    .calendar-details-toggle:focus-visible,
    .calendar-details-toggle.is-expanded {
      border-color: #b9c9e8;
      background: #f1f5ff;
      outline: none;
      box-shadow: 0 8px 18px rgba(36, 68, 132, 0.07);
    }

    .calendar-details-toggle-icon {
      display: grid;
      width: 38px;
      height: 38px;
      place-items: center;
      border-radius: 10px;
      background: #e7edff;
      color: #3157d8;
    }

    .calendar-details-toggle-icon svg {
      width: 20px;
      height: 20px;
      stroke-width: 1.8;
    }

    .calendar-details-toggle-copy {
      display: grid;
      gap: 2px;
      min-width: 0;
    }

    .calendar-details-toggle-copy strong {
      font-size: 14px;
      font-weight: 900;
    }

    .calendar-details-toggle-chevron {
      width: 18px;
      height: 18px;
      transition: transform 160ms ease;
    }

    .calendar-details-toggle.is-expanded .calendar-details-toggle-chevron {
      transform: rotate(180deg);
    }

    .calendar-details-panel {
      display: grid;
      gap: 12px;
      padding-top: 2px;
    }

    .calendar-details-toolbar {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 14px;
      flex-wrap: wrap;
      padding: 2px 2px 0;
    }

    .calendar-details-period-label {
      flex: 1 1 auto;
      min-width: 0;
      color: #20345d;
      font-size: 16px;
      font-weight: 900;
      letter-spacing: -0.015em;
    }

    .calendar-details-toolbar .calendar-view-toggle {
      display: inline-flex;
      flex: 0 0 auto;
      flex-direction: row;
      flex-wrap: nowrap;
      width: auto;
      margin-left: auto;
      padding: 4px;
      border-radius: 11px;
      background: #eef3fb;
    }

    .calendar-details-toolbar .calendar-view-btn {
      flex: 0 0 auto;
      min-width: 76px;
      padding-inline: 14px;
      border-radius: 8px;
      text-transform: none;
      letter-spacing: 0;
      white-space: nowrap;
    }

    .suggested-slot-note {
      color: #7c8aa8;
      font-size: 11px;
      line-height: 1.4;
    }

    .appointment-report-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 14px;
      flex-wrap: wrap;
      padding-top: 10px;
      border-top: 1px solid rgba(218, 228, 245, 0.86);
    }

    .appointment-report-head h3 {
      margin: 0;
      color: #14284e;
      font-size: 22px;
      letter-spacing: -0.02em;
    }

    .appointment-report-head p {
      margin: 5px 0 0;
      color: #7381a0;
      font-size: 13px;
      line-height: 1.45;
    }

    .appointment-report-counts {
      display: none;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .appointment-report-tools {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-left: auto;
    }

    .appointment-report-search {
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      gap: 0;
    }

    .appointment-report-search-btn {
      width: 34px;
      height: 34px;
      border: 1px solid rgba(212, 223, 243, 0.96);
      border-radius: 999px;
      background: rgba(248, 251, 255, 0.92);
      color: #3452ab;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 10px 22px rgba(32, 60, 120, 0.04);
      transition: background 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
      flex: 0 0 auto;
    }

    .appointment-report-search-btn:hover {
      background: rgba(233, 240, 255, 0.96);
      transform: translateY(-1px);
    }

    .appointment-report-search.is-open .appointment-report-search-btn {
      border-color: rgba(59, 87, 183, 0.24);
      background: rgba(233, 240, 255, 0.98);
    }

    .appointment-report-search-input {
      width: 0;
      min-width: 0;
      padding: 0;
      margin-left: 0;
      border: 1px solid transparent;
      border-radius: 999px;
      background: rgba(248, 251, 255, 0.92);
      color: #14284e;
      font-size: 12px;
      font-weight: 700;
      outline: none;
      opacity: 0;
      pointer-events: none;
      transition: width 0.22s ease, opacity 0.18s ease, padding 0.22s ease, margin-left 0.22s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    }

    .appointment-report-search.is-open .appointment-report-search-input {
      width: min(280px, 44vw);
      padding: 0 13px;
      margin-left: 8px;
      height: 34px;
      border-color: rgba(212, 223, 243, 0.96);
      opacity: 1;
      pointer-events: auto;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.78);
    }

    .appointment-report-search-input::placeholder {
      color: #8a97b3;
      font-weight: 600;
    }

    .appointment-report-search-input:focus {
      border-color: rgba(59, 87, 183, 0.34);
      box-shadow: 0 0 0 3px rgba(59, 87, 183, 0.12);
    }

    .appointment-report-count {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 10px;
      border-radius: 999px;
      background: #f3f7ff;
      color: #3157d8;
      font-size: 12px;
      font-weight: 900;
    }

    .appointment-report-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-width: 0;
      container-type: inline-size;
    }

    .appointment-report-item {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 0.65fr) minmax(0, 0.4fr) minmax(0, 1.3fr) minmax(0, 1.4fr);
      gap: 12px;
      padding: 10px 14px;
      border-radius: 18px;
      border: 1px solid rgba(214, 223, 237, 0.95);
      background: rgba(255, 255, 255, 0.88);
      box-shadow: 0 10px 24px rgba(36, 72, 128, 0.045);
      min-width: 0;
      height: 132px;
      min-height: 132px;
      overflow: hidden;
      align-items: stretch;
    }

    .appointment-report-item.general-view {
      grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.75fr) minmax(0, 0.6fr) minmax(0, 0.4fr) minmax(0, 1.25fr) minmax(0, 1.35fr);
    }

    .appointment-report-main {
      min-width: 0;
    }

    .appointment-report-main strong {
      display: block;
      color: #14284e;
      font-size: 14px;
      font-weight: 600;
      line-height: 1.25;
    }

    .appointment-report-main span,
    .appointment-report-detail span {
      display: block;
      margin-top: 4px;
      color: #7381a0;
      font-size: 11px;
      line-height: 1.35;
    }

    .appointment-report-pill {
      display: inline-flex;
      width: max-content;
      align-items: center;
      padding: 7px 10px;
      border-radius: 999px;
      background: #eef4ff;
      color: #3157d8;
      font-size: 11px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .appointment-report-pill.pending {
      background: #fff8e8;
      color: #9a6418;
    }

    .appointment-report-pill.declined {
      background: #fff0ee;
      color: #b43f35;
    }

    .appointment-report-pill.approved {
      background: #eef8f1;
      color: #2c7a45;
    }

    .appointment-report-detail {
      min-width: 0;
      display: flex;
      flex-direction: column;
      min-height: 0;
    }

    .appointment-report-agent strong {
      display: block;
      color: #14284e;
      font-size: 13px;
      font-weight: 650;
      line-height: 1.3;
    }

    .appointment-report-column-label {
      display: block;
      margin-bottom: 4px;
      color: #7381a0;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .appointment-report-bonus {
      display: flex;
      min-width: 0;
      flex-direction: column;
      gap: 6px;
      min-height: 0;
    }

    .appointment-report-bonus.is-admin-editable {
      cursor: pointer;
    }

    .appointment-report-bonus.is-saving {
      opacity: 0.62;
      pointer-events: none;
    }

    .appointment-report-bonus strong {
      color: #14284e;
      font-size: 12px;
      line-height: 1.25;
    }

    .bonus-steps {
      display: flex;
      align-items: center;
      gap: 5px;
      min-height: 18px;
    }

    .bonus-step {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 18px;
      border-radius: 999px;
      border: 1px solid #dce6f5;
      background: #f6f9ff;
      color: #8a97b3;
      font-size: 9px;
      font-weight: 950;
    }

    .bonus-step.active {
      border-color: rgba(44, 122, 69, 0.24);
      background: #eef8f1;
      color: #2c7a45;
    }

    .bonus-step.blocked {
      border-color: rgba(180, 63, 53, 0.22);
      background: #fff0ee;
      color: #b43f35;
    }

    .bonus-step.override {
      box-shadow: 0 0 0 2px rgba(58, 101, 219, 0.12);
    }

    .appointment-report-note {
      margin: 0;
      color: #243757;
      font-size: 11px;
      line-height: 1.35;
      flex: 1;
      overflow-y: auto;
      overscroll-behavior: contain;
      overflow-wrap: anywhere;
      padding-right: 6px;
      scrollbar-color: #c5d2e8 transparent;
      scrollbar-width: thin;
      white-space: pre-wrap;
      min-height: 0;
    }

    @container (max-width: 680px) {
      .appointment-report-item,
      .appointment-report-item.general-view {
        grid-template-columns: 1fr;
        height: auto;
        padding: 14px;
      }

    }

    .appointment-report-empty {
      padding: 18px;
      border-radius: 16px;
      border: 1px dashed #d9e4f5;
      background: #fbfdff;
      color: #7381a0;
      font-weight: 800;
      text-align: center;
    }

    .followups-card {
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 16px 18px 18px;
    }

    .followups-head {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 12px;
      flex-wrap: wrap;
    }
    .followups-head-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items: center;
    }

    .followups-add-btn {
      width: 48px;
      height: 48px;
      padding: 0;
      border-radius: 16px;
      border: 1px solid rgba(212, 225, 246, 0.95);
      background: rgba(255, 255, 255, 0.94);
      color: #1769e8;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 30px;
      line-height: 1;
      font-weight: 400;
      box-shadow: 0 18px 38px rgba(27, 62, 145, 0.08);
      cursor: pointer;
      transition: border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
    }

    .followups-add-btn:hover,
    .followups-add-btn:focus-visible {
      border-color: #bfd2f6;
      background: #f5f8ff;
      color: #244de4;
      box-shadow: 0 20px 42px rgba(27, 62, 145, 0.12);
      transform: translateY(-1px);
    }

    .followups-head h2 {
      margin: 0;
      color: #14284e;
      font-size: 20px;
    }

    .followups-actions {
      display: flex;
      gap: 10px;
      align-items: center;
      justify-content: flex-end;
      min-width: 0;
    }

    .followups-search-inline {
      width: 0;
      display: flex;
      align-items: center;
      opacity: 0;
      overflow: hidden;
      pointer-events: none;
      transition: width 180ms ease, opacity 180ms ease, margin-left 180ms ease;
      margin-left: 0;
    }

    .followups-search-inline.open {
      width: min(280px, 34vw);
      opacity: 1;
      pointer-events: auto;
      margin-left: 2px;
    }

    .followups-icon-btn {
      position: relative;
      width: 40px;
      height: 40px;
      border-radius: 12px;
      border: 1px solid #dbe5f4;
      background: #fff;
      color: #3551ad;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
    }

    .followups-icon-btn:hover,
    .followups-icon-btn:focus-visible {
      border-color: #bfd2f6;
      background: #f5f8ff;
      color: #244de4;
    }

    .followups-icon-btn svg {
      width: 18px;
      height: 18px;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .followups-loading-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0;
      width: 34px;
      min-width: 34px;
      min-height: 34px;
      padding: 0;
      border-radius: 999px;
      background: rgba(65, 109, 244, 0.08);
      color: #3551ad;
      font-size: 0;
    }

    .followups-loading-badge::before {
      content: "";
      width: 10px;
      height: 10px;
      border-radius: 999px;
      border: 2px solid rgba(65, 109, 244, 0.22);
      border-top-color: #416df4;
      animation: followupsSpin 0.9s linear infinite;
    }

    .followups-filter,
    .followups-input,
    .followups-textarea {
      border: 1px solid #dbe5f4;
      border-radius: 10px;
      background: #ffffff;
      color: #16274a;
      font: inherit;
      font-weight: 600;
      min-width: 0;
      width: 100%;
      outline: none;
      transition: border-color 160ms ease, box-shadow 160ms ease;
    }

    .followups-filter,
    .followups-input {
      min-height: 40px;
      padding: 0 12px;
    }

    .followups-filter {
      width: auto;
      min-width: 150px;
      background: #fff;
    }

    .followups-search {
      min-width: 0;
    }

    .followups-filter-trigger {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .followups-textarea {
      min-height: 92px;
      padding: 12px 13px;
      resize: vertical;
      line-height: 1.4;
    }

    .followups-filter:focus,
    .followups-input:focus,
    .followups-textarea:focus {
      border-color: #416df4;
      box-shadow: 0 0 0 3px rgba(65, 109, 244, 0.14);
    }

    .followups-input.is-invalid {
      border-color: #d65252;
      box-shadow: 0 0 0 3px rgba(214, 82, 82, 0.12);
    }

    .followups-help-text {
      color: #7280a0;
      font-size: 12px;
      line-height: 1.35;
    }

    .followups-help-text.error {
      color: #bf3d3d;
      font-weight: 700;
    }

    .followups-shell {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 12px;
      align-items: start;
    }

    .followups-shell.has-detail {
      grid-template-columns: minmax(0, 1fr);
    }

    .followups-main-stack {
      display: grid;
      gap: 12px;
      min-width: 0;
    }

    .followups-form,
    .followups-board,
    .followups-detail-panel {
      border-radius: 12px;
      border: 1px solid #e2eaf6;
      background: #ffffff;
      box-shadow: 0 6px 18px rgba(34, 62, 112, 0.04);
      padding: 12px;
    }

    .followups-form {
      display: grid;
      gap: 14px;
    }

    .followups-form.hidden {
      display: none;
    }

    .followups-form-backdrop {
      position: fixed;
      inset: 0;
      z-index: 210;
      background: rgba(16, 28, 54, 0.38);
      backdrop-filter: blur(3px);
    }

    .followups-form-backdrop.hidden {
      display: none;
    }

    .followups-create-modal {
      position: fixed;
      top: 50%;
      left: 50%;
      z-index: 211;
      width: min(720px, calc(100vw - 32px));
      max-height: calc(100vh - 40px);
      overflow-y: auto;
      transform: translate(-50%, -50%);
      padding: 24px;
      border-radius: 18px;
      box-shadow: 0 30px 80px rgba(17, 31, 60, 0.24);
    }

    body.followup-form-open {
      overflow: hidden;
    }

    .followups-focus-board {
      border-color: #dce6f7;
      background: #ffffff;
      min-height: 0;
    }

    .followups-today-board {
      border-color: #d7e3f7;
      background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
      min-height: 0;
    }

    .followups-today-toggle {
      width: 100%;
      border: 0;
      background: transparent;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      cursor: pointer;
      text-align: left;
    }

    .followups-today-toggle-icon {
      width: 34px;
      height: 34px;
      border-radius: 10px;
      border: 1px solid #dbe5f4;
      background: #ffffff;
      color: #3157d8;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      transition: transform 160ms ease;
    }

    .followups-today-toggle-icon svg {
      width: 16px;
      height: 16px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .followups-today-board.is-collapsed .followups-today-toggle-icon {
      transform: rotate(-90deg);
    }

    .followups-focus-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 14px;
      margin-top: 4px;
      color: #7180a1;
      font-size: 11px;
      line-height: 1.35;
    }

    .followups-focus-legend-item {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      white-space: nowrap;
    }

    .followups-focus-legend-swatch {
      width: 9px;
      height: 9px;
      border-radius: 999px;
      flex: 0 0 auto;
    }

    .followups-focus-legend-swatch.today {
      background: #2f6fed;
    }

    .followups-focus-legend-swatch.tomorrow {
      background: #f0a43b;
    }

    .followups-focus-legend-swatch.update {
      background: #c8831c;
    }

    .followups-focus-legend-swatch.reschedule {
      background: #c64040;
    }

    .followups-form-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }

    .followups-form-title,
    .followups-board-title {
      margin: 0;
      color: #14284e;
      font-size: 17px;
      font-weight: 900;
    }

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

    .followups-create-schedule {
      gap: 10px;
    }

    .followups-create-schedule-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.25fr) minmax(260px, 1fr);
      gap: 12px;
      align-items: end;
    }

    .followups-create-schedule-grid .followups-postpone-time-grid {
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) minmax(78px, 0.82fr);
      align-items: center;
      gap: 8px;
    }

    .followups-create-shortcuts {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .followups-audio-control {
      align-items: start;
    }

    .followups-audio-toggle {
      min-height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 0 13px;
      border: 1px solid #d5e0f0;
      border-radius: 10px;
      background: #f8fbff;
      color: #285696;
      font: inherit;
      font-size: 12px;
      font-weight: 850;
      cursor: pointer;
    }

    .followups-audio-toggle:hover,
    .followups-audio-toggle[aria-expanded="true"] {
      border-color: #bcd0ef;
      background: #eef5ff;
      color: #1769e8;
    }

    .followups-audio-toggle svg {
      width: 17px;
      height: 17px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

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

    .followups-field.full {
      grid-column: 1 / -1;
    }

    .followups-field label {
      color: #7280a0;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .followups-submit {
      justify-self: start;
      border: none;
      border-radius: 10px;
      background: #416df4;
      color: #fff;
      min-height: 40px;
      padding: 0 16px;
      font: inherit;
      font-weight: 800;
      cursor: pointer;
      box-shadow: none;
    }

    .followups-submit:hover {
      filter: brightness(0.98);
    }
    .followups-submit.alt {
      background: #fff;
      color: #3551ad;
      border: 1px solid #dbe5f4;
      box-shadow: none;
    }

    .followups-notes-log-wrap {
      margin-top: -4px;
    }

    .followups-notes-log-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
      max-height: 230px;
      overflow: auto;
      padding-right: 4px;
    }

    .followups-note-log-empty {
      border: 1px dashed #dbe5f4;
      border-radius: 12px;
      padding: 12px 14px;
      color: #7483a4;
      background: #fbfdff;
      font-size: 13px;
      font-weight: 700;
    }

    .followups-note-log-item {
      border: 1px solid #e5ebf8;
      border-radius: 14px;
      padding: 12px 14px;
      background: #fbfdff;
    }

    .followups-note-log-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 6px;
      color: #7280a0;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .followups-note-log-text {
      color: #22355f;
      font-size: 13px;
      line-height: 1.45;
      white-space: pre-wrap;
    }

    .followups-board {
      display: grid;
      gap: 10px;
      min-height: 0;
      align-content: start;
    }

    .followups-today-board.is-collapsed {
      gap: 0;
      padding-bottom: 10px;
    }

    .followups-detail-backdrop {
      position: fixed;
      inset: 0;
      z-index: 90;
      background: rgba(16, 28, 54, 0.34);
      backdrop-filter: blur(2px);
    }

    .followups-detail-backdrop.hidden {
      display: none;
    }

    .followups-detail-panel {
      position: fixed;
      top: 50%;
      right: 28px;
      z-index: 91;
      display: grid;
      gap: 14px;
      width: min(470px, calc(100vw - 32px));
      max-height: calc(100vh - 48px);
      overflow: auto;
      align-content: start;
      transform: translateY(-50%);
      box-shadow: 0 28px 80px rgba(17, 31, 60, 0.22);
    }

    .followups-detail-panel.hidden {
      display: none;
    }

    .followups-detail-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
    }

    .followups-detail-head-actions {
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }

    .followups-detail-kicker {
      color: #7280a0;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .followups-detail-title {
      margin: 4px 0 0;
      color: #14284e;
      font-size: 24px;
      line-height: 1.15;
      font-weight: 900;
    }

    .followups-detail-close {
      width: 32px;
      height: 32px;
      border: 1px solid #dbe5f4;
      border-radius: 10px;
      background: #fff;
      color: #4b5f8c;
      font: inherit;
      font-size: 18px;
      line-height: 1;
      cursor: pointer;
    }

    .followups-detail-close:hover {
      border-color: #cddaf1;
      background: #f7faff;
    }

    .followups-detail-add-btn {
      width: 40px;
      height: 40px;
      border: 1px solid #dbe5f4;
      border-radius: 12px;
      background: linear-gradient(180deg, #ffffff, #f7faff);
      color: #3157d8;
      font: inherit;
      font-size: 28px;
      line-height: 1;
      cursor: pointer;
    }

    .followups-detail-add-btn:hover {
      border-color: #c7d7f5;
      background: #eef4ff;
    }

    .followups-detail-grid {
      display: grid;
      gap: 12px;
    }

    .followups-detail-quick {
      display: grid;
      gap: 10px;
      padding: 14px;
      border-radius: 12px;
      border: 1px solid #e6edf8;
      background: linear-gradient(180deg, #fbfdff, #f7faff);
    }

    .followups-detail-quick.hidden {
      display: none;
    }

    .followups-detail-quick.compact {
      padding: 12px;
      background: #ffffff;
    }

    .followups-detail-quick-head {
      color: #14284e;
      font-size: 13px;
      font-weight: 900;
    }

    .followups-detail-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .followups-detail-btn {
      min-height: 38px;
      padding: 0 12px;
      border-radius: 10px;
      border: 1px solid #dbe5f4;
      background: #fff;
      color: #29457b;
      font: inherit;
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
    }

    .followups-detail-btn.success {
      grid-column: 1 / -1;
    }

    .followups-detail-btn:hover {
      border-color: #c7d7f5;
      background: #f7faff;
    }

    .followups-detail-btn.primary {
      border-color: #416df4;
      background: #416df4;
      color: #fff;
    }

    .followups-detail-btn.warning {
      color: #a45f09;
    }

    .followups-detail-btn.success {
      color: #2b7742;
    }

    .followups-detail-btn.danger {
      color: #b34040;
    }

    .followups-detail-quick.compact .followups-detail-actions {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .followups-detail-quick.compact .followups-detail-btn.success {
      grid-column: auto;
    }

    .followups-detail-item {
      display: grid;
      gap: 5px;
      padding-bottom: 10px;
      border-bottom: 1px solid #eef3fb;
    }

    .followups-detail-item:last-child {
      border-bottom: 0;
      padding-bottom: 0;
    }

    .followups-detail-label {
      color: #7280a0;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .followups-detail-value {
      color: #1d3058;
      font-size: 14px;
      line-height: 1.45;
      word-break: break-word;
    }

    .followups-detail-history {
      display: flex;
      flex-direction: column;
      gap: 10px;
      max-height: 360px;
      overflow: auto;
      padding-right: 4px;
    }

    .followups-detail-history-entry {
      border: 1px solid #e6edf8;
      border-radius: 12px;
      background: #fbfdff;
      padding: 10px 12px;
    }

    .followups-detail-history-meta {
      color: #7280a0;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .followups-detail-history-text {
      margin-top: 6px;
      color: #22355f;
      font-size: 13px;
      line-height: 1.45;
      white-space: pre-wrap;
    }

    .followups-detail-empty {
      border: 1px dashed #d9e4f5;
      border-radius: 12px;
      padding: 14px;
      color: #7280a0;
      background: #fbfdff;
      font-size: 13px;
      line-height: 1.45;
    }

    .followups-board-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
      min-height: 40px;
    }

    .followups-focus-body.hidden {
      display: none;
    }

    .followups-summary {
      display: none;
    }

    .followups-today-summary {
      display: grid;
      gap: 4px;
    }

    .followups-today-title {
      font-size: 18px;
      font-weight: 900;
      color: #17386f;
      letter-spacing: -0.03em;
    }

    .followups-today-subtitle {
      font-size: 14px;
      color: #60749d;
      line-height: 1.45;
    }

    .followups-filter-trigger {
      min-height: 40px;
      min-width: 40px;
      padding: 0 10px;
      border-radius: 10px;
      box-shadow: none;
      align-self: center;
    }

    .followups-filter-trigger span:not(.history-filter-count) {
      display: none;
    }

    .followups-table-head {
      display: grid;
      grid-template-columns: minmax(170px, 0.95fr) minmax(150px, 0.8fr) minmax(170px, 0.9fr) minmax(260px, 1.35fr) 34px;
      gap: 12px;
      padding: 0 4px 10px;
      margin-top: -2px;
      border-bottom: 1px solid #e7edf7;
      align-items: center;
      color: #7280a0;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .followups-table-head > * {
      display: flex;
      align-items: center;
      min-height: 24px;
    }

    .followups-main-head {
      grid-template-columns: minmax(170px, 0.95fr) minmax(150px, 0.8fr) minmax(170px, 0.9fr) minmax(260px, 1.35fr) auto;
      align-items: end;
    }

    .followups-main-head > * {
      min-height: 40px;
      align-items: flex-end;
    }

    .followups-table-head-tools {
      display: inline-flex;
      justify-content: flex-end;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }

    .followups-sort-head {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border: 0;
      background: transparent;
      padding: 0;
      color: inherit;
      font: inherit;
      text-transform: inherit;
      letter-spacing: inherit;
      font-weight: inherit;
      cursor: pointer;
      min-height: 24px;
    }

    .followups-sort-head::after {
      content: "";
      width: 10px;
      height: 10px;
      opacity: 0;
      transform: translateY(-1px);
      transition: opacity 140ms ease;
    }

    .followups-sort-head.active::after {
      opacity: 1;
    }

    .followups-sort-head[data-direction="asc"]::after {
      content: "↑";
    }

    .followups-sort-head[data-direction="desc"]::after {
      content: "↓";
    }

    .followups-reason-filter-wrap {
      position: relative;
      display: flex;
      align-items: center;
      min-width: 0;
    }

    .followups-reason-filter-btn {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-height: 30px;
      padding: 4px 8px;
      margin-left: -8px;
      border: 1px solid transparent;
      border-radius: 8px;
      background: transparent;
      color: inherit;
      font: inherit;
      font-weight: inherit;
      cursor: pointer;
    }

    .followups-reason-filter-btn:hover,
    .followups-reason-filter-btn[aria-expanded="true"],
    .followups-reason-filter-btn.active {
      border-color: #cfddf2;
      background: #f4f8ff;
      color: #1264dc;
    }

    .followups-reason-filter-btn svg {
      width: 15px;
      height: 15px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .followups-reason-filter-count {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 18px;
      height: 18px;
      padding: 0 5px;
      border-radius: 999px;
      background: #1264dc;
      color: #fff;
      font-size: 10px;
      line-height: 1;
    }

    .followups-reason-filter-popover {
      position: fixed;
      z-index: 1450;
      width: min(310px, calc(100vw - 24px));
      padding: 14px;
      border: 1px solid #dbe5f3;
      border-radius: 12px;
      background: #fff;
      box-shadow: 0 18px 46px rgba(24, 52, 94, 0.2);
      color: #17345e;
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 0;
      text-transform: none;
    }

    .followups-reason-filter-popover-head,
    .followups-reason-filter-popover-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .followups-reason-filter-popover-head {
      padding: 2px 2px 12px;
      border-bottom: 1px solid #edf1f7;
    }

    .followups-reason-filter-popover-head strong {
      font-size: 14px;
      font-weight: 850;
    }

    .followups-reason-filter-clear {
      border: 0;
      background: transparent;
      color: #1264dc;
      font: inherit;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
    }

    .followups-reason-filter-options {
      display: grid;
      gap: 4px;
      padding: 10px 0;
    }

    .followups-reason-filter-option {
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 40px;
      padding: 8px;
      border-radius: 8px;
      cursor: pointer;
    }

    .followups-reason-filter-option:hover {
      background: #f5f8fd;
    }

    .followups-reason-filter-option input {
      width: 17px;
      height: 17px;
      margin: 0;
      accent-color: #1264dc;
    }

    .followups-reason-filter-popover-actions {
      justify-content: flex-end;
      padding-top: 12px;
      border-top: 1px solid #edf1f7;
    }

    .followups-reason-filter-apply {
      min-height: 36px;
      padding: 0 16px;
      border: 0;
      border-radius: 8px;
      background: #1264dc;
      color: #fff;
      font: inherit;
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
    }

    .followups-list {
      display: flex;
      flex-direction: column;
      min-height: 0;
    }

    .followups-refresh-btn {
      border: 1px solid #dbe5f4;
      border-radius: 10px;
      background: #fff;
      color: #3551ad;
      min-height: 40px;
      padding: 0 14px;
      font: inherit;
      font-weight: 700;
      cursor: pointer;
    }

    .followups-refresh-btn:hover {
      border-color: #416df4;
      color: #244de4;
    }

    .followup-row {
      display: grid;
      grid-template-columns: minmax(170px, 0.95fr) minmax(150px, 0.8fr) minmax(170px, 0.9fr) minmax(260px, 1.35fr) 34px;
      gap: 12px;
      align-items: start;
      padding: 10px 4px;
      border-bottom: 1px solid #edf2fb;
      cursor: pointer;
      transition: background 140ms ease, box-shadow 140ms ease;
    }


    .followup-row:hover {
      background: rgba(64, 104, 231, 0.03);
    }

    .followup-row.is-selected {
      background: rgba(64, 104, 231, 0.06);
      box-shadow: inset 0 0 0 1px rgba(64, 104, 231, 0.14);
    }

    .followup-row.is-today {
      box-shadow: none;
      background: transparent;
    }

    .followup-row.is-tomorrow {
      box-shadow: none;
      background: transparent;
    }

    .followup-row.focus-update {
      box-shadow: none;
      background: transparent;
    }

    .followup-row.focus-reschedule {
      box-shadow: none;
      background: transparent;
    }

    .followup-row:last-child {
      border-bottom: 0;
    }

    .followup-row-cell {
      min-width: 0;
      color: #5d6d8d;
      font-size: 13px;
      line-height: 1.45;
    }

    .followup-row-client {
      font-weight: 800;
      color: #16274a;
      font-size: 15px;
    }

    .followup-row-subtle {
      display: block;
      margin-top: 2px;
      color: #7280a0;
      font-size: 12px;
    }

    .followup-row-status {
      color: #38455f;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .followup-row-status.is-update {
      color: #38455f;
    }

    .followup-row-status.is-reschedule {
      color: #38455f;
    }

    .followup-row-notes {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .followup-row-notes strong {
      color: #22355f;
      font-weight: 700;
    }

    .followup-row-simple {
      grid-template-columns: minmax(220px, 1.2fr) minmax(170px, 0.85fr) minmax(0, 1.45fr) 34px;
      gap: 16px;
    }

    .followups-focus-head {
      grid-template-columns: minmax(220px, 1.2fr) minmax(170px, 0.85fr) minmax(0, 1.45fr) 34px;
      gap: 16px;
      padding-right: 4px;
    }

    .followup-row-time {
      display: inline-flex;
      align-items: center;
      width: fit-content;
      padding: 6px 10px;
      border-radius: 999px;
      background: #f4f7fc;
      color: #30415f;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .followup-row-note-copy {
      color: #22355f;
      font-size: 14px;
      line-height: 1.45;
      font-weight: 700;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .followup-row-note-copy.is-empty {
      color: #7a89a6;
      font-weight: 600;
      font-style: italic;
    }

    .followups-focus-head > span:nth-child(2),
    .followup-row-simple > .followup-row-cell:nth-child(2) {
      padding-left: 2px;
    }

    .followups-focus-head > span:nth-child(3),
    .followup-row-simple > .followup-row-cell:nth-child(3) {
      padding-left: 6px;
    }

    .followup-focus-flag {
      display: inline-block;
      margin-top: 2px;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #68789d;
    }

    .followup-focus-flag.today {
      color: #68789d;
    }

    .followup-focus-flag.tomorrow {
      color: #68789d;
    }

    .followup-focus-flag.update {
      color: #68789d;
    }

    .followup-focus-flag.reschedule {
      color: #68789d;
    }

    .followup-date-highlight {
      display: inline-block;
      font-weight: 800;
      text-decoration-line: underline;
      text-decoration-thickness: 2px;
      text-underline-offset: 3px;
    }

    .followup-date-highlight.is-today {
      color: #30415f;
      text-decoration-color: rgba(48, 65, 95, 0.28);
    }

    .followup-date-highlight.is-tomorrow {
      color: #30415f;
      text-decoration-color: rgba(48, 65, 95, 0.28);
    }

    .followup-row-menu-wrap {
      position: relative;
      display: flex;
      justify-content: flex-end;
    }

    .followup-row-menu-btn {
      width: 28px;
      height: 28px;
      border: 0;
      border-radius: 8px;
      background: transparent;
      color: #6f7fa2;
      font-size: 20px;
      line-height: 1;
      cursor: pointer;
    }

    .followup-row-menu-btn:hover {
      background: #f3f6fc;
      color: #27426d;
    }

    .followup-row-menu {
      position: absolute;
      top: 32px;
      right: 0;
      min-width: 150px;
      padding: 6px;
      border-radius: 12px;
      border: 1px solid #dbe5f4;
      background: #fff;
      box-shadow: 0 16px 32px rgba(21, 39, 72, 0.12);
      z-index: 8;
    }

    .followup-row-menu.hidden {
      display: none;
    }

    .followup-row-menu button {
      width: 100%;
      border: 0;
      background: transparent;
      text-align: left;
      padding: 9px 10px;
      border-radius: 8px;
      color: #21345d;
      font: inherit;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
    }

    .followup-row-menu button:hover {
      background: #f5f8fe;
    }

    .followup-row-menu button.danger {
      color: #b13c3c;
    }

    .followup-row.is-editing {
      background: #f8fbff;
      box-shadow: inset 0 0 0 1px #cfe0ff;
    }

    .followup-inline-edit {
      display: grid;
      grid-template-columns: minmax(240px, 1.35fr) minmax(190px, 1fr) auto;
      gap: 12px;
      align-items: start;
      width: 100%;
    }

    .followup-inline-edit-field {
      display: grid;
      gap: 6px;
    }

    .followup-inline-edit-field label {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #7b89a8;
    }

    .followup-inline-edit-actions {
      display: flex;
      align-items: center;
      align-self: center;
    }

    .followup-inline-edit-btn {
      min-height: 36px;
      padding: 0 14px;
      border-radius: 12px;
      border: 1px solid #d4def1;
      background: #fff;
      color: #27426d;
      font: inherit;
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
    }

    .followup-inline-edit-btn.primary {
      border-color: #3157d8;
      background: #3157d8;
      color: #fff;
    }

    .followups-postpone-modal {
      position: fixed;
      top: 50%;
      left: 50%;
      z-index: 92;
      width: min(420px, calc(100vw - 32px));
      max-width: calc(100vw - 32px);
      display: grid;
      gap: 14px;
      padding: 18px;
      border: 1px solid #dbe5f4;
      border-radius: 16px;
      background: #ffffff;
      box-shadow: 0 28px 80px rgba(17, 31, 60, 0.22);
      transform: translate(-50%, -50%);
      overflow: hidden;
    }

    #followupPostponeModal {
      width: min(500px, calc(100vw - 32px));
      gap: 0;
      padding: 0;
      border-color: #dfe6f1;
      border-radius: 20px;
      box-shadow: 0 30px 90px rgba(17, 31, 60, 0.24);
      overflow: visible;
    }

    .followups-postpone-modal.hidden {
      display: none;
    }

    .followups-postpone-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }

    #followupPostponeModal .followups-postpone-head {
      padding: 24px 24px 20px;
      border-bottom: 1px solid #e8edf5;
    }

    #followupPostponeModal .followups-detail-kicker {
      color: #6f7f98;
      font-size: 10px;
      letter-spacing: 0.11em;
    }

    #followupPostponeModal .followups-form-title {
      margin-top: 4px;
      color: #132d55;
      font-size: 21px;
      line-height: 1.2;
    }

    .followups-postpone-copy {
      margin: 7px 0 0;
      color: #69788f;
      font-size: 12px;
      line-height: 1.45;
    }

    .followups-postpone-shortcuts {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    #followupPostponeModal .followups-postpone-shortcuts {
      padding: 18px 24px 0;
    }

    .followups-postpone-shortcuts-label {
      width: 100%;
      margin-bottom: 1px;
      color: #7280a0;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .followups-postpone-picker {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 12px;
      min-width: 0;
    }

    #followupPostponeModal .followups-postpone-picker {
      gap: 18px;
      padding: 22px 24px 0;
    }

    .followups-postpone-time-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      min-width: 0;
    }

    #followupPostponeModal .followups-postpone-time-grid {
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) minmax(88px, 0.82fr);
      align-items: center;
      gap: 8px;
    }

    .followups-postpone-time-field {
      display: grid;
      gap: 7px;
    }

    .followups-postpone-time-label {
      color: #7280a0;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .followups-postpone-time-separator {
      color: #6f7f98;
      font-size: 20px;
      font-weight: 800;
    }

    .followups-postpone-picker > *,
    .followups-postpone-time-grid > * {
      min-width: 0;
    }

    .followups-postpone-modal .followups-input,
    .followups-postpone-modal .followups-filter {
      width: 100%;
      min-width: 0;
    }

    #followupPostponeModal .followups-input,
    #followupPostponeModal .followups-filter {
      min-height: 48px;
      border-color: #d8e1ee;
      border-radius: 11px;
      color: #17345f;
      font-size: 15px;
      font-weight: 750;
    }

    #followupPostponeModal .followups-textarea {
      min-height: 86px;
      border-color: #d8e1ee;
      border-radius: 11px;
      color: #17345f;
      font-size: 14px;
      font-weight: 650;
    }

    .followups-postpone-date-picker {
      position: relative;
    }

    .followups-postpone-date-trigger {
      width: 100%;
      min-height: 48px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 0 14px;
      border: 1px solid #d8e1ee;
      border-radius: 11px;
      background: #fff;
      color: #17345f;
      font: inherit;
      font-size: 15px;
      font-weight: 750;
      text-align: left;
      cursor: pointer;
    }

    .followups-postpone-date-trigger:focus-visible,
    .followups-postpone-date-trigger[aria-expanded="true"] {
      border-color: #416df4;
      outline: none;
      box-shadow: 0 0 0 3px rgba(65, 109, 244, 0.14);
    }

    .followups-postpone-date-trigger svg {
      width: 18px;
      height: 18px;
      flex: 0 0 auto;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .followups-postpone-calendar {
      position: absolute;
      top: calc(100% + 8px);
      left: 0;
      z-index: 12;
      width: min(340px, 100%);
      padding: 16px;
      border: 1px solid #dce5f1;
      border-radius: 14px;
      background: #fff;
      box-shadow: 0 22px 54px rgba(17, 31, 60, 0.2);
    }

    .followups-postpone-calendar.hidden {
      display: none;
    }

    .followups-postpone-calendar-head {
      display: grid;
      grid-template-columns: 36px minmax(0, 1fr) 36px;
      align-items: center;
      gap: 8px;
      margin-bottom: 12px;
    }

    .followups-postpone-calendar-month {
      color: #17345f;
      font-size: 14px;
      font-weight: 850;
      text-align: center;
    }

    .followups-postpone-calendar-nav {
      width: 36px;
      height: 36px;
      padding: 0;
      border: 1px solid transparent;
      border-radius: 9px;
      background: transparent;
      color: #31558e;
      font: inherit;
      font-size: 20px;
      cursor: pointer;
    }

    .followups-postpone-calendar-nav:hover {
      border-color: #dce5f1;
      background: #f7f9fc;
    }

    .followups-postpone-calendar-weekdays,
    .followups-postpone-calendar-days {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap: 4px;
    }

    .followups-postpone-calendar-weekdays {
      margin-bottom: 5px;
    }

    .followups-postpone-calendar-weekdays span {
      color: #718098;
      font-size: 10px;
      font-weight: 900;
      line-height: 28px;
      text-align: center;
    }

    .followups-postpone-calendar-empty,
    .followups-postpone-calendar-day {
      min-width: 0;
      height: 36px;
    }

    .followups-postpone-calendar-day {
      padding: 0;
      border: 1px solid transparent;
      border-radius: 8px;
      background: transparent;
      color: #243a5e;
      font: inherit;
      font-size: 12px;
      font-weight: 750;
      cursor: pointer;
    }

    .followups-postpone-calendar-day:hover {
      border-color: #dce5f1;
      background: #f3f6fb;
    }

    .followups-postpone-calendar-day.is-today {
      border-color: #bcd0f4;
      color: #1769e8;
    }

    .followups-postpone-calendar-day.is-selected {
      border-color: #1769e8;
      background: #1769e8;
      color: #fff;
    }

    .followups-postpone-calendar-footer {
      display: flex;
      justify-content: flex-end;
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid #edf1f6;
    }

    .followups-postpone-calendar-today {
      min-height: 32px;
      padding: 0 10px;
      border: 0;
      border-radius: 8px;
      background: transparent;
      color: #1769e8;
      font: inherit;
      font-size: 12px;
      font-weight: 850;
      cursor: pointer;
    }

    .followups-postpone-calendar-today:hover {
      background: #eef4ff;
    }

    .followups-postpone-chip {
      min-height: 34px;
      padding: 0 12px;
      border-radius: 999px;
      border: 1px solid #dbe5f4;
      background: #f8fbff;
      color: #3551ad;
      font: inherit;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
    }

    #followupPostponeModal .followups-postpone-chip {
      min-height: 38px;
      padding: 0 14px;
      border-color: #d8e1ee;
      border-radius: 10px;
      background: #fff;
      color: #31558e;
      font-size: 12px;
    }

    .followups-postpone-chip:hover {
      border-color: #bfd2f6;
      background: #eef4ff;
    }

    .followups-postpone-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
    }

    #followupPostponeModal .followups-postpone-actions {
      margin-top: 20px;
      padding: 18px 24px 22px;
      border-top: 1px solid #e8edf5;
    }

    #followupPostponeModal .followups-detail-btn {
      min-height: 42px;
      padding: 0 16px;
      border-radius: 10px;
    }

    #followupPostponeModal #followupPostponeConfirmBtn {
      border-color: #1769e8;
      background: #1769e8;
      color: #fff;
    }

    #followupPostponeModal #followupPostponeConfirmBtn:hover {
      border-color: #115dcf;
      background: #115dcf;
    }

    #followupPostponeModal #followupPostponeStatus:not(.hidden) {
      margin: 16px 24px 0;
    }

    @media (max-width: 520px) {
      #followupPostponeModal .followups-postpone-head,
      #followupPostponeModal .followups-postpone-picker,
      #followupPostponeModal .followups-postpone-shortcuts,
      #followupPostponeModal .followups-postpone-actions {
        padding-right: 18px;
        padding-left: 18px;
      }

      #followupPostponeModal .followups-postpone-time-grid {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) minmax(78px, 0.8fr);
      }

      #followupPostponeModal .followups-postpone-actions {
        display: grid;
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
      }
    }

    .followups-result-modal {
      width: min(560px, calc(100vw - 32px));
      max-height: min(760px, calc(100vh - 32px));
      overflow-y: auto;
    }

    .followups-result-options {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 9px;
    }

    .followups-result-option {
      min-width: 0;
      min-height: 66px;
      display: grid;
      grid-template-columns: 12px minmax(0, 1fr);
      align-items: start;
      gap: 10px;
      padding: 11px 12px;
      border: 1px solid #dbe5f4;
      border-radius: 11px;
      background: #fff;
      color: #17335f;
      text-align: left;
      cursor: pointer;
    }

    .followups-result-option:hover {
      border-color: #b9cdf3;
      background: #f8fbff;
    }

    .followups-result-option.is-selected {
      border-color: #4a75ed;
      background: #eef4ff;
      box-shadow: 0 0 0 2px rgba(74, 117, 237, 0.1);
    }

    .followups-result-dot {
      width: 10px;
      height: 10px;
      margin-top: 4px;
      border-radius: 999px;
      background: #6f89b7;
      box-shadow: 0 0 0 3px rgba(111, 137, 183, 0.13);
    }

    .followups-result-option[data-followup-result-value="appointment_confirmed"] .followups-result-dot,
    .followups-result-option[data-followup-result-value="contacted"] .followups-result-dot {
      background: #12a85d;
      box-shadow: 0 0 0 3px rgba(18, 168, 93, 0.13);
    }

    .followups-result-option[data-followup-result-value="not_interested"] .followups-result-dot {
      background: #df4a55;
      box-shadow: 0 0 0 3px rgba(223, 74, 85, 0.13);
    }

    .followups-result-option strong,
    .followups-result-option small {
      display: block;
    }

    .followups-result-option strong {
      font-size: 12px;
      font-weight: 850;
    }

    .followups-result-option small {
      margin-top: 3px;
      color: #7084a7;
      font-size: 10px;
      font-weight: 600;
      line-height: 1.35;
    }

    .followups-result-schedule.hidden {
      display: none;
    }

    .followups-result-modal .followups-input,
    .followups-result-modal .followups-textarea {
      width: 100%;
    }

    @media (max-width: 620px) {
      .followups-result-options {
        grid-template-columns: minmax(0, 1fr);
      }
    }

    .followup-undo-toast {
      position: fixed;
      left: 24px;
      bottom: 24px;
      z-index: 120;
      display: flex;
      align-items: center;
      gap: 14px;
      max-width: min(520px, calc(100vw - 24px));
      padding: 14px 16px;
      border-radius: 16px;
      border: 1px solid rgba(27, 34, 54, 0.22);
      background: rgba(25, 29, 38, 0.96);
      color: #f5f7fb;
      box-shadow: 0 24px 52px rgba(14, 18, 29, 0.34);
    }

    .followup-undo-toast.hidden {
      display: none;
    }

    .followup-undo-toast-message {
      font-size: 13px;
      font-weight: 700;
      line-height: 1.35;
      color: #eef3ff;
    }

    .followup-undo-toast-actions {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-left: auto;
      flex-shrink: 0;
    }

    .followup-undo-toast-action {
      border: 0;
      border-radius: 999px;
      padding: 8px 12px;
      font-size: 13px;
      font-weight: 900;
      cursor: pointer;
    }

    .followup-undo-toast-action.undo {
      background: #8ab6ff;
      color: #13224f;
    }

    .followup-undo-toast-action.close {
      background: rgba(255, 255, 255, 0.1);
      color: #eef3ff;
    }

    @media (max-width: 1100px) {
      .followups-shell,
      .followup-row,
      .followups-table-head {
        grid-template-columns: 1fr;
      }

      .followup-row-simple {
        grid-template-columns: 1fr;
      }

      .followups-shell.has-detail {
        grid-template-columns: 1fr;
      }

      .followups-detail-panel {
        inset: 14px;
        top: 14px;
        right: 14px;
        width: auto;
        max-height: calc(100vh - 28px);
        transform: none;
      }

      .followups-table-head > * {
        min-height: 20px;
      }

      .followups-form-row {
        grid-template-columns: 1fr;
      }

      .followups-create-schedule-grid {
        grid-template-columns: 1fr;
      }

      .followups-create-modal {
        width: calc(100vw - 20px);
        max-height: calc(100vh - 20px);
        padding: 18px;
      }
    }

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

    .calendar-empty {
      grid-column: 1 / -1;
      padding: 22px;
      border: 1px dashed #d9e4f5;
      border-radius: 16px;
      color: #6f7fa2;
      background: #fbfdff;
      font-weight: 800;
      text-align: center;
    }

    @media (max-width: 780px) {
      .calendar-card {
        overflow-x: auto;
      }

      .calendar-controls {
        justify-content: flex-start;
      }

      .calendar-grid {
        min-width: 720px;
      }

      .followups-shell {
        grid-template-columns: 1fr;
      }

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

      .suggested-slots-grid {
        grid-template-columns: 1fr;
      }

      .suggested-slots-grid::before {
        display: none;
      }

      .suggested-slot-day {
        margin: 0;
      }

      .appointment-report-item {
        grid-template-columns: 1fr;
      }
    }

    .workspace-dashboard-btn {
      padding: 14px 18px;
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.92);
      color: #3157d8;
      border: 1px solid rgba(212, 225, 246, 0.9);
      font-weight: 800;
      box-shadow: 0 18px 38px rgba(27, 62, 145, 0.08);
    }

    .workspace-card {
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(246, 249, 255, 0.94));
      border: 1px solid rgba(222, 232, 247, 0.92);
      border-radius: 32px;
      box-shadow: var(--shadow);
      padding: 22px;
    }

    .income-calculator-card {
      --income-navy: #142553;
      --income-blue: #2f74f6;
      --income-sky: #eaf3ff;
      --income-gold: #ffad19;
      display: grid;
      gap: 22px;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      padding: 0;
      overflow: hidden;
      border: 1px solid #dce5f2;
      background: #f7f9fd;
    }

    .income-calculator-card > * {
      max-width: 100%;
      min-width: 0;
    }

    .income-calculator-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 10px;
      color: #9ec4ff;
      font-size: 0.76rem;
      font-weight: 850;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .income-calculator-eyebrow::before {
      content: "";
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--income-gold);
      box-shadow: 0 0 0 5px rgba(255, 173, 25, 0.14);
    }

    .income-calculator-rate {
      align-self: center;
      padding: 18px 20px;
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(12px);
    }

    .income-calculator-rate span,
    .income-calculator-rate small {
      display: block;
      color: #bfd0ef;
    }

    .income-calculator-rate strong {
      display: block;
      margin: 5px 0 4px;
      color: #fff;
      font-size: 1.8rem;
    }

    .income-wallet-status {
      min-height: 20px;
      margin: 0 28px;
      color: #6d7890;
      font-size: 0.82rem;
    }

    .income-wallet-status:empty {
      display: none;
    }

    .income-wallet-status.loading {
      position: relative;
      display: grid;
      min-height: 54px;
      color: transparent;
      font-size: 0;
      place-items: center;
      user-select: none;
    }

    .income-wallet-status.loading::before {
      width: 42px;
      height: 42px;
      border: 3px solid #dce8fa;
      border-top-color: #3478f6;
      border-radius: 50%;
      content: "";
      animation: spin 0.85s linear infinite;
    }

    .income-wallet-status.loading::after {
      position: absolute;
      width: 24px;
      height: 24px;
      background: url("/static/assets/company-logo-optimized.webp?v=2") center / contain no-repeat;
      content: "";
    }

    .income-wallet-status.error {
      color: #ae3f47;
    }

    .income-wallet-overview,
    .income-wallet-payroll,
    .income-wallet-how {
      min-width: 0;
      margin: 0 24px;
    }

    .income-wallet-overview {
      margin-top: 16px;
    }

    .income-wallet-admin-picker {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 12px;
      margin-bottom: 14px;
    }

    .income-wallet-admin-picker label {
      color: #65718a;
      font-size: 0.75rem;
      font-weight: 850;
    }

    .income-wallet-admin-picker select {
      width: min(320px, 100%);
      min-height: 42px;
      padding: 9px 38px 9px 13px;
      border: 1px solid #ccd9ed;
      border-radius: 12px;
      color: #17284d;
      background-color: #fff;
      font: inherit;
      font-weight: 800;
    }

    .income-wallet-payroll {
      padding: 18px 20px;
      border: 1px solid #dce5f1;
      border-radius: 20px;
      background: linear-gradient(145deg, #ffffff, #f6f9fe);
      box-shadow: 0 10px 28px rgba(17, 38, 82, 0.05);
    }

    .income-wallet-payroll-total {
      text-align: right;
    }

    .income-wallet-payroll-total span,
    .income-wallet-payroll-total strong {
      display: block;
    }

    .income-wallet-payroll-total span {
      color: #71809c;
      font-size: 0.72rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    .income-wallet-payroll-total strong {
      margin-top: 3px;
      color: var(--income-navy);
      font-size: 1.65rem;
    }

    .income-wallet-payroll-grid {
      display: grid;
      grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
      gap: 20px;
    }

    .income-wallet-payroll-line,
    .income-wallet-invoice-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 10px 0;
      border-bottom: 1px solid #e8edf5;
      color: #586783;
      font-size: 0.82rem;
    }

    .income-wallet-payroll-line:last-child,
    .income-wallet-invoice-row:last-child {
      border-bottom: 0;
    }

    .income-wallet-payroll-line strong,
    .income-wallet-invoice-row strong {
      color: #17284d;
    }

    .income-wallet-invoices h4 {
      margin: 0 0 3px;
      color: #17284d;
      font-size: 0.9rem;
    }

    .income-wallet-invoice-row > div:last-child {
      text-align: right;
    }

    .income-wallet-invoice-row a {
      color: #1f5cc8;
      font-weight: 800;
      text-decoration: none;
    }

    .income-wallet-invoice-row small {
      display: block;
      margin-top: 2px;
      color: #8792a7;
      font-size: 0.7rem;
    }

    .income-wallet-payroll-warning {
      margin: 10px 0 0;
      padding: 9px 11px;
      border-radius: 10px;
      color: #86511e;
      background: #fff5df;
      font-size: 0.74rem;
      line-height: 1.4;
    }

    .income-wallet-metrics {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 10px;
      width: 100%;
      min-width: 0;
      padding: 2px 2px 10px;
      overflow-x: auto;
      scrollbar-color: #c8d5e9 transparent;
      scrollbar-width: thin;
    }

    .income-wallet-metric {
      --metric-accent: #3478f6;
      --metric-soft: #eaf2ff;
      position: relative;
      display: flex;
      min-width: 0;
      min-height: 150px;
      padding: 15px 14px 14px;
      overflow: hidden;
      border: 1px solid color-mix(in srgb, var(--metric-accent) 20%, #dfe7f2);
      border-radius: 19px;
      flex-direction: column;
      justify-content: space-between;
      background: linear-gradient(145deg, #fff 45%, var(--metric-soft));
      box-shadow: 0 12px 28px rgba(17, 38, 82, 0.07);
    }

    .income-wallet-metric::before {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      height: 4px;
      background: var(--metric-accent);
      content: "";
    }

    .income-wallet-metric:nth-child(2) {
      --metric-accent: #7357d9;
      --metric-soft: #f0edff;
    }

    .income-wallet-metric:nth-child(3) {
      --metric-accent: #e5911e;
      --metric-soft: #fff3df;
    }

    .income-wallet-metric:nth-child(4) {
      --metric-accent: #199568;
      --metric-soft: #e8f8f1;
    }

    .income-wallet-metric:nth-child(5),
    .income-wallet-metric.is-operational {
      --metric-accent: #2473d8;
      --metric-soft: #eaf4ff;
    }

    .income-wallet-metric.is-locked {
      --metric-accent: #8993a7;
      --metric-soft: #f0f2f5;
      box-shadow: none;
      filter: grayscale(0.45);
    }

    .income-wallet-metric-top,
    .income-wallet-metric-value {
      flex-wrap: wrap;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .income-wallet-metric-top > span {
      min-width: 0;
      color: #5f6f8c;
      font-size: 0.76rem;
      font-weight: 850;
      letter-spacing: 0.025em;
    }

    .income-wallet-metric-icon {
      display: grid;
      width: 34px;
      height: 34px;
      border-radius: 11px;
      flex: 0 0 34px;
      color: var(--metric-accent);
      background: var(--metric-soft);
      place-items: center;
    }

    .income-wallet-metric-icon svg {
      width: 18px;
      height: 18px;
      fill: none;
      stroke: currentColor;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 1.8;
    }

    .income-wallet-metric-value strong {
      color: var(--income-navy);
      font-size: 2rem;
      line-height: 1;
    }

    .income-wallet-metric.is-status .income-wallet-metric-value strong {
      font-size: 1.05rem;
    }

    .income-wallet-metric.is-status .income-wallet-metric-value small {
      max-width: 100%;
      line-height: 1.2;
      overflow-wrap: anywhere;
      text-align: center;
      white-space: normal;
    }

    .income-wallet-metric-value small {
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      padding: 5px 9px;
      border-radius: 999px;
      color: var(--metric-accent);
      background: var(--metric-soft);
      font-size: 0.74rem;
      font-weight: 900;
      white-space: nowrap;
    }

    .income-wallet-metric.has-tooltip {
      cursor: help;
      outline: none;
    }

    .income-wallet-metric-tooltip {
      position: absolute;
      z-index: 3;
      right: 10px;
      bottom: 10px;
      left: 10px;
      padding: 9px 10px;
      border-radius: 11px;
      color: #fff;
      background: #142951;
      box-shadow: 0 10px 24px rgba(13, 31, 68, 0.24);
      font-size: 0.68rem;
      font-weight: 750;
      line-height: 1.35;
      opacity: 0;
      pointer-events: none;
      transform: translateY(5px);
      transition: opacity 150ms ease, transform 150ms ease, visibility 150ms ease;
      visibility: hidden;
    }

    .income-wallet-metric.has-tooltip:hover .income-wallet-metric-tooltip,
    .income-wallet-metric.has-tooltip:focus-visible .income-wallet-metric-tooltip {
      opacity: 1;
      transform: translateY(0);
      visibility: visible;
    }

    .income-wallet-metric.has-tooltip:focus-visible {
      box-shadow: 0 0 0 3px rgba(52, 120, 246, 0.2), 0 12px 28px rgba(17, 38, 82, 0.07);
    }

    .income-wallet-section-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 18px;
      margin: 8px 0 12px;
    }

    .income-wallet-section-head h3 {
      margin: 0;
      color: var(--income-navy);
      font-size: 1.18rem;
    }

    .income-wallet-section-head p {
      margin: 4px 0 0;
      color: #71809c;
      font-size: 0.82rem;
    }

    details.income-wallet-how {
      overflow: hidden;
      border: 1px solid #dce5f1;
      border-radius: 18px;
      background: #fff;
      box-shadow: 0 8px 22px rgba(17, 38, 82, 0.04);
    }

    details.income-wallet-how > summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 16px 18px;
      color: var(--income-navy);
      font-weight: 850;
      cursor: pointer;
      list-style: none;
    }

    details.income-wallet-how > summary::-webkit-details-marker {
      display: none;
    }

    details.income-wallet-how > summary::after {
      content: "Ver";
      color: #2f67c9;
      font-size: 0.76rem;
    }

    details.income-wallet-how[open] > summary::after {
      content: "Cerrar";
    }

    details.income-wallet-how .income-wallet-rules {
      padding: 0 16px 16px;
    }

    .income-wallet-rules {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    .income-wallet-rule {
      position: relative;
      min-width: 0;
      padding: 17px;
      overflow: hidden;
      border: 1px solid #dde6f2;
      border-radius: 17px;
      background: linear-gradient(145deg, #fff, #f7faff);
    }

    .income-wallet-rule.unlocked {
      border-color: #b8ddc8;
      background: linear-gradient(145deg, #f7fffa, #eefaf3);
    }

    .income-wallet-rule-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .income-wallet-rule-top strong {
      color: #17284d;
      font-size: 0.9rem;
    }

    .income-wallet-rule-amount {
      flex: 0 0 auto;
      padding: 5px 8px;
      border-radius: 999px;
      color: #1f5cc8;
      background: #e8f1ff;
      font-size: 0.76rem;
      font-weight: 900;
    }

    .income-wallet-rule p {
      margin: 8px 0 0;
      color: #71809c;
      font-size: 0.76rem;
      line-height: 1.45;
    }

    .income-wallet-progress-track {
      height: 7px;
      margin-top: 12px;
      overflow: hidden;
      border-radius: 999px;
      background: #e6edf7;
    }

    .income-wallet-progress-track span {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #2f74f6, #61a0ff);
    }

    .income-wallet-rule.unlocked .income-wallet-progress-track span {
      background: linear-gradient(90deg, #15965f, #41be82);
    }

    .income-wallet-simulator-head {
      display: flex;
      align-items: center;
      margin: 8px 24px 0;
      padding: 16px 18px;
      border-radius: 19px;
      color: #243252;
      background: #eaf3ff;
    }

    .income-wallet-simulator-head h3 {
      margin: 0;
      color: var(--income-navy);
      font-size: 1.15rem;
    }

    .income-wallet-simulator-head p {
      margin: 5px 0 0;
      color: #65789b;
      font-size: 0.84rem;
      line-height: 1.45;
    }

    .income-wallet-simulator-head .income-calculator-rate {
      padding: 12px 15px;
      border-color: #cbdcf5;
      background: rgba(255, 255, 255, 0.65);
    }

    .income-wallet-simulator-head .income-calculator-rate span,
    .income-wallet-simulator-head .income-calculator-rate small {
      color: #6b7d9d;
    }

    .income-wallet-simulator-head .income-calculator-rate strong {
      color: var(--income-navy);
      font-size: 1.25rem;
    }

    .income-calculator-body {
      display: grid;
      grid-template-columns: minmax(280px, 0.38fr) minmax(0, 0.62fr);
      gap: 22px;
      min-width: 0;
      padding: 0 24px 26px;
    }

    .income-calculator-body > * {
      min-width: 0;
    }

    .income-calculator-form,
    .income-calculator-result {
      border: 1px solid #e0e7f1;
      border-radius: 20px;
      background: #fff;
      box-shadow: 0 12px 35px rgba(17, 38, 82, 0.06);
    }

    .income-calculator-form {
      padding: 22px;
    }

    .income-calculator-field {
      display: grid;
      gap: 8px;
      margin-bottom: 18px;
    }

    .income-calculator-field > span,
    .income-calculator-options-title {
      color: #33405e;
      font-size: 0.76rem;
      font-weight: 850;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .income-calculator-money-wrap {
      position: relative;
    }

    .income-calculator-money-wrap > span {
      position: absolute;
      left: 16px;
      top: 50%;
      color: var(--income-blue);
      font-size: 1.15rem;
      font-weight: 900;
      transform: translateY(-50%);
    }

    .income-calculator-money-wrap input,
    .income-calculator-field select,
    .income-calculator-small-input {
      width: 100%;
      min-height: 50px;
      border: 1px solid #cfd9e8;
      border-radius: 13px;
      color: #152140;
      background: #fbfcff;
      font: inherit;
      font-weight: 750;
    }

    .income-calculator-money-wrap input {
      padding: 0 16px 0 36px;
      font-size: 1.12rem;
    }

    .income-calculator-field select,
    .income-calculator-small-input {
      padding: 0 14px;
    }

    .income-calculator-money-wrap input:focus,
    .income-calculator-field select:focus,
    .income-calculator-small-input:focus {
      outline: 3px solid rgba(47, 116, 246, 0.14);
      border-color: var(--income-blue);
    }

    .income-calculator-options {
      display: grid;
      gap: 10px;
      margin: 10px 0 18px;
    }

    .income-calculator-toggle {
      display: grid;
      grid-template-columns: 20px 1fr;
      gap: 10px;
      align-items: start;
      padding: 11px 12px;
      border-radius: 12px;
      background: #f6f8fc;
      color: #243252;
      cursor: pointer;
    }

    .income-calculator-toggle input {
      width: 17px;
      height: 17px;
      margin: 1px 0 0;
      accent-color: var(--income-blue);
    }

    .income-calculator-toggle strong,
    .income-calculator-toggle small {
      display: block;
    }

    .income-calculator-toggle strong {
      font-size: 0.9rem;
    }

    .income-calculator-toggle small {
      margin-top: 3px;
      color: #71809c;
      line-height: 1.35;
    }

    .income-calculator-extras {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 12px;
    }

    .income-calculator-extras label {
      display: grid;
      gap: 6px;
      color: #65718a;
      font-size: 0.75rem;
      font-weight: 750;
    }

    .income-calculator-submit {
      width: 100%;
      min-height: 52px;
      margin-top: 2px;
      border: 0;
      border-radius: 14px;
      color: #fff;
      background: linear-gradient(135deg, #245fdf, #3985ff);
      box-shadow: 0 12px 24px rgba(47, 116, 246, 0.24);
      font: inherit;
      font-weight: 900;
      cursor: pointer;
    }

    .income-calculator-submit:disabled {
      opacity: 0.65;
      cursor: wait;
    }

    .income-calculator-status {
      min-height: 20px;
      margin: 10px 0 0;
      color: #6d7890;
      font-size: 0.82rem;
      line-height: 1.45;
    }

    .income-calculator-status.error {
      color: #ae3f47;
    }

    .income-calculator-result {
      padding: 22px;
    }

    .income-level-guide {
      margin-top: 18px;
      padding: 16px;
      border: 1px solid #dbe5f3;
      border-radius: 17px;
      background: linear-gradient(135deg, #f7faff, #eef5ff);
    }

    .income-level-guide-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 12px;
    }

    .income-level-guide-head strong {
      color: var(--income-navy);
      font-size: 0.95rem;
    }

    .income-level-guide-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      gap: 10px;
      align-items: stretch;
    }

    .income-level-guide-card {
      padding: 11px 12px;
      border: 1px solid #dce5f2;
      border-radius: 13px;
      background: #fff;
    }

    .income-level-guide-card strong,
    .income-level-guide-card span {
      display: block;
    }

    .income-level-guide-card strong {
      color: var(--income-navy);
      font-size: 0.82rem;
    }

    .income-level-guide-card span {
      margin-top: 5px;
      color: #2c3b5d;
      font-size: 0.75rem;
      font-weight: 800;
    }

    .income-level-guide-card span:last-child {
      margin-top: 4px;
      color: #71809c;
      font-size: 0.69rem;
    }

    .income-level-guide-arrow {
      display: grid;
      min-width: 76px;
      color: #2f74f6;
      font-size: 0.68rem;
      font-weight: 900;
      text-align: center;
      place-items: center;
    }

    .income-level-guide-arrow b {
      display: block;
      font-size: 1.15rem;
      line-height: 1;
    }

    .income-level-guide-result {
      margin: 12px 0 0;
      color: #425170;
      font-size: 0.75rem;
      font-weight: 750;
      line-height: 1.45;
    }

    .income-calculator-empty {
      display: grid;
      min-height: 100%;
      place-items: center;
      padding: 34px;
      color: #6d7890;
      text-align: center;
    }

    .income-calculator-empty svg {
      width: 54px;
      height: 54px;
      margin-bottom: 12px;
      color: #7fa9f7;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.5;
    }

    .income-result-summary {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      align-items: flex-start;
      margin-bottom: 18px;
    }

    .income-result-summary span,
    .income-result-summary small {
      display: block;
      color: #7b879f;
    }

    .income-result-summary strong {
      display: block;
      margin-top: 4px;
      color: var(--income-navy);
      font-size: clamp(1.6rem, 3vw, 2.25rem);
    }

    .income-result-level {
      padding: 8px 12px;
      border-radius: 999px;
      color: #1f5cc8;
      background: #e8f1ff;
      font-size: 0.78rem;
      font-weight: 900;
    }

    .income-metrics-table {
      overflow: hidden;
      border: 1px solid #e3e9f2;
      border-radius: 16px;
    }

    .income-metrics-row {
      display: grid;
      grid-template-columns: minmax(145px, 1.4fr) repeat(3, minmax(64px, 0.6fr));
      align-items: center;
      min-height: 55px;
      border-bottom: 1px solid #e8edf4;
    }

    .income-metrics-row:last-child {
      border-bottom: 0;
    }

    .income-metrics-row > * {
      padding: 10px 12px;
      text-align: center;
    }

    .income-metrics-row > :first-child {
      text-align: left;
    }

    .income-metrics-head {
      min-height: 42px;
      color: #62708d;
      background: #f4f7fb;
      font-size: 0.69rem;
      font-weight: 850;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .income-metrics-label strong,
    .income-metrics-label small {
      display: block;
    }

    .income-metrics-label strong {
      color: #1a2949;
      font-size: 0.88rem;
    }

    .income-metrics-label small {
      margin-top: 2px;
      color: #8994aa;
      font-size: 0.7rem;
    }

    .income-metric-value {
      color: #17284d;
      font-weight: 900;
    }

    .income-breakdown {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px 16px;
      margin-top: 18px;
      padding: 16px;
      border-radius: 15px;
      background: #f6f8fc;
    }

    .income-breakdown-line {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      color: #53617d;
      font-size: 0.78rem;
    }

    .income-breakdown-line strong {
      color: #1a2949;
    }

    .income-alternatives {
      margin-top: 18px;
      padding: 16px;
      border: 1px solid #d9e6fa;
      border-radius: 16px;
      background: #f5f9ff;
    }

    .income-alternatives-head strong,
    .income-alternatives-head span {
      display: block;
    }

    .income-alternatives-head strong {
      color: #17284d;
      font-size: 0.92rem;
    }

    .income-alternatives-head span {
      margin-top: 2px;
      color: #65789b;
      font-size: 0.76rem;
    }

    .income-alternatives-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-top: 12px;
    }

    .income-alternative-option {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px;
      border-radius: 12px;
      color: #31466f;
      background: #fff;
      font-size: 0.78rem;
      font-weight: 800;
    }

    .income-alternative-option strong {
      flex: 0 0 auto;
      color: #1f5cc8;
      font-size: 0.92rem;
    }

    .income-dealer-offer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-top: 12px;
      padding: 14px;
      border-radius: 13px;
      color: #fff;
      background: linear-gradient(135deg, #172a5d, #245fdf);
    }

    .income-dealer-offer strong,
    .income-dealer-offer span {
      display: block;
    }

    .income-dealer-offer span {
      margin-top: 2px;
      color: #dbe8ff;
      font-size: 0.75rem;
    }

    .income-dealer-offer b {
      flex: 0 0 auto;
      padding: 7px 10px;
      border-radius: 999px;
      color: #172a5d;
      background: #fff;
      font-size: 0.72rem;
    }

    .income-assumption-note {
      margin: 14px 2px 0;
      color: #71809b;
      font-size: 0.76rem;
      line-height: 1.5;
    }

    .payroll-admin-card {
      display: grid;
      gap: 20px;
      overflow: hidden;
      padding: 26px;
    }

    .payroll-admin-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 20px;
    }

    .payroll-admin-head h2 {
      margin: 0;
      color: #142553;
      font-size: clamp(1.5rem, 2.6vw, 2.15rem);
    }

    .payroll-admin-head p {
      max-width: 720px;
      margin: 8px 0 0;
      color: #68758e;
      line-height: 1.55;
    }

    .payroll-admin-card .income-wallet-status {
      margin: -6px 0 0;
    }

    .payroll-admin-summary {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
    }

    .payroll-admin-summary article {
      padding: 17px;
      border: 1px solid #dfe7f2;
      border-radius: 16px;
      background: #fff;
    }

    .payroll-admin-summary span,
    .payroll-admin-summary small {
      display: block;
      color: #78859d;
      font-size: 0.74rem;
    }

    .payroll-admin-summary strong {
      display: block;
      margin: 5px 0 2px;
      color: #142553;
      font-size: 1.55rem;
    }

    .payroll-admin-table-wrap {
      overflow-x: auto;
      border: 1px solid #dfe7f2;
      border-radius: 18px;
      background: #fff;
    }

    .payroll-admin-table {
      width: 100%;
      min-width: 980px;
      border-collapse: collapse;
    }

    .payroll-admin-table th,
    .payroll-admin-table td {
      padding: 13px 14px;
      border-bottom: 1px solid #e8edf5;
      color: #4f5e78;
      font-size: 0.78rem;
      text-align: left;
      white-space: nowrap;
    }

    .payroll-admin-table th {
      color: #74819a;
      background: #f7f9fc;
      font-size: 0.68rem;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .payroll-admin-table td:first-child,
    .payroll-admin-table td:nth-child(7) {
      color: #142553;
      font-weight: 800;
    }

    .payroll-review-badge {
      display: inline-flex;
      padding: 5px 8px;
      border-radius: 999px;
      color: #23673c;
      background: #e7f7ed;
      font-size: 0.68rem;
      font-weight: 800;
    }

    .payroll-review-badge.review {
      color: #875015;
      background: #fff1d6;
    }

    .payroll-bonus-registry {
      border: 1px solid #dfe7f2;
      border-radius: 18px;
      background: #fff;
      overflow: hidden;
    }

    .payroll-bonus-registry-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 17px 19px;
      border-bottom: 1px solid #e8edf5;
    }

    .payroll-bonus-registry h3 {
      margin: 0;
      color: #142553;
      font-size: 1rem;
    }

    .payroll-bonus-registry-head p {
      margin: 4px 0 0;
      color: #78859d;
      font-size: 0.75rem;
    }

    .payroll-bonus-registry-count {
      flex: 0 0 auto;
      padding: 6px 10px;
      border-radius: 999px;
      color: #2458bb;
      background: #eaf1ff;
      font-size: 0.72rem;
      font-weight: 800;
    }

    .payroll-bonus-registry-table-wrap {
      overflow-x: auto;
    }

    .payroll-bonus-registry-table {
      width: 100%;
      min-width: 660px;
      border-collapse: collapse;
    }

    .payroll-bonus-registry-table th,
    .payroll-bonus-registry-table td {
      padding: 12px 19px;
      border-bottom: 1px solid #edf1f6;
      color: #65718a;
      font-size: 0.78rem;
      text-align: left;
      white-space: nowrap;
    }

    .payroll-bonus-registry-table th {
      color: #74819a;
      background: #f7f9fc;
      font-size: 0.68rem;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .payroll-bonus-registry-table td:first-child,
    .payroll-bonus-registry-table td:nth-child(2) {
      color: #18284d;
      font-weight: 800;
    }

    .payroll-bonus-registry-table tbody tr:last-child td {
      border-bottom: 0;
    }

    @media (max-width: 980px) {
      .income-calculator-body,
      .income-wallet-simulator-head,
      .income-wallet-payroll-grid {
        grid-template-columns: 1fr;
      }

      .income-wallet-rules,
      .payroll-admin-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .income-wallet-metrics {
        grid-template-columns: repeat(6, minmax(160px, 1fr));
      }
    }

    @media (max-width: 620px) {
      .income-calculator-body {
        padding: 0 14px 18px;
      }

      .income-wallet-overview,
      .income-wallet-payroll,
      .income-wallet-how,
      .income-wallet-simulator-head {
        margin-right: 14px;
        margin-left: 14px;
      }

      .income-wallet-status {
        margin-right: 18px;
        margin-left: 18px;
      }

      .income-wallet-rules,
      .income-alternatives-grid,
      .payroll-admin-summary {
        grid-template-columns: 1fr;
      }

      .payroll-admin-card {
        padding: 20px 14px;
      }

      .payroll-admin-head {
        align-items: stretch;
        flex-direction: column;
      }

      .income-calculator-form,
      .income-calculator-result {
        padding: 16px;
      }

      .income-calculator-extras,
      .income-breakdown {
        grid-template-columns: 1fr;
      }

      .income-level-guide-head {
        align-items: stretch;
        flex-direction: column;
      }

      .income-level-guide-grid {
        grid-template-columns: 1fr;
      }

      .income-level-guide-arrow {
        min-height: 32px;
      }

      .income-level-guide-arrow b {
        transform: rotate(90deg);
      }

      .income-metrics-row {
        grid-template-columns: minmax(112px, 1.2fr) repeat(3, minmax(54px, 0.6fr));
      }

      .income-metrics-row > * {
        padding: 9px 6px;
      }
    }

    .agent-intelligence-card {
      min-width: 0;
      max-width: 100%;
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
      color: #172033;
    }

    .message-stats-switcher {
      width: fit-content;
      display: inline-flex;
      gap: 4px;
      margin-top: 12px;
      padding: 4px;
      border: 1px solid #dce5f4;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.76);
      box-shadow: 0 8px 24px rgba(20, 40, 78, 0.06);
    }

    .message-stats-switcher button {
      min-height: 34px;
      padding: 7px 13px;
      border: 0;
      border-radius: 9px;
      background: transparent;
      color: #66758e;
      font: inherit;
      font-size: 11px;
      font-weight: 850;
      cursor: pointer;
    }

    .message-stats-switcher button.active {
      background: #1d3e7c;
      color: #fff;
      box-shadow: 0 5px 14px rgba(29, 62, 124, 0.2);
    }

    .message-stats-dashboard {
      display: grid;
      gap: 18px;
    }

    .message-stats-hero,
    .message-stats-panel {
      border: 1px solid #dfe7f3;
      border-radius: 20px;
      background: rgba(255, 255, 255, 0.96);
      box-shadow: 0 15px 40px rgba(28, 54, 99, 0.07);
    }

    .message-stats-hero {
      padding: 22px;
      background:
        radial-gradient(circle at 92% 8%, rgba(45, 101, 215, 0.13), transparent 30%),
        linear-gradient(135deg, #ffffff, #f4f8ff);
    }

    .message-stats-hero-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 24px;
    }

    .message-stats-eyebrow {
      margin: 0 0 7px;
      color: #3562bd;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .message-stats-hero h2 {
      margin: 0;
      color: #14284e;
      font-size: clamp(23px, 2.4vw, 34px);
      letter-spacing: -0.04em;
    }

    .message-stats-hero-copy {
      max-width: 650px;
      margin: 8px 0 0;
      color: #63718a;
      font-size: 13px;
      line-height: 1.55;
    }

    .message-stats-range {
      display: flex;
      align-items: flex-end;
      gap: 8px;
      flex: 0 0 auto;
    }

    .message-stats-range label {
      display: grid;
      gap: 5px;
      color: #748097;
      font-size: 9px;
      font-weight: 900;
      letter-spacing: 0.07em;
      text-transform: uppercase;
    }

    .message-stats-range input {
      height: 39px;
      padding: 0 10px;
      border: 1px solid #d8e2f1;
      border-radius: 10px;
      background: #fff;
      color: #243654;
      font: inherit;
      font-size: 11px;
    }

    .message-stats-range button {
      height: 39px;
      padding: 0 15px;
      border: 0;
      border-radius: 10px;
      background: #2e61cb;
      color: #fff;
      font-size: 11px;
      font-weight: 850;
      cursor: pointer;
    }

    .message-stats-kpis {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 10px;
      margin-top: 20px;
    }

    .message-stats-kpi {
      min-width: 0;
      padding: 15px;
      border: 1px solid rgba(211, 224, 244, 0.95);
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.84);
    }

    .message-stats-kpi span {
      display: block;
      color: #79869a;
      font-size: 9px;
      font-weight: 900;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .message-stats-kpi strong {
      display: block;
      margin-top: 8px;
      color: #14284e;
      font-size: clamp(20px, 2vw, 28px);
      line-height: 1;
      letter-spacing: -0.045em;
      font-variant-numeric: tabular-nums;
    }

    .message-stats-kpi small {
      display: block;
      margin-top: 6px;
      color: #7c8799;
      font-size: 9px;
      line-height: 1.35;
    }

    .message-stats-measurement-note {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-top: 14px;
      padding: 10px 12px;
      border-radius: 11px;
      background: #edf4ff;
      color: #546783;
      font-size: 10px;
      line-height: 1.45;
    }

    .message-stats-measurement-note a {
      flex: 0 0 auto;
      color: #2657b8;
      font-weight: 850;
      text-decoration: none;
    }

    .message-stats-control-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
    }

    .message-stats-control-body {
      display: grid;
      gap: 15px;
      padding: 18px;
    }

    .message-stats-budget-overview {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px 18px;
      align-items: end;
    }

    .message-stats-budget-overview strong {
      color: #193158;
      font-size: 22px;
      letter-spacing: -0.04em;
    }

    .message-stats-budget-overview > div:first-child {
      display: flex;
      align-items: baseline;
      gap: 9px;
    }

    .message-stats-budget-overview span,
    .message-stats-control-help {
      color: #78869a;
      font-size: 10px;
      line-height: 1.45;
    }

    .message-stats-budget-track {
      grid-column: 1 / -1;
      height: 8px;
      overflow: hidden;
      border-radius: 999px;
      background: #e8eef8;
    }

    .message-stats-budget-track i {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: #3670d8;
    }

    .message-stats-budget-overview[data-status="warning"] .message-stats-budget-track i {
      background: #e6a03c;
    }

    .message-stats-budget-overview[data-status="over"] .message-stats-budget-track i {
      background: #d95858;
    }

    .message-stats-control-form {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .message-stats-control-form label {
      display: grid;
      gap: 5px;
      color: #6d7b91;
      font-size: 9px;
      font-weight: 850;
    }

    .message-stats-control-form input {
      width: 100%;
      min-width: 0;
      height: 38px;
      padding: 0 10px;
      border: 1px solid #dce4f0;
      border-radius: 9px;
      background: #fff;
      color: #243a60;
      font: inherit;
      font-size: 11px;
    }

    .message-stats-control-form .message-stats-control-wide {
      grid-column: 1 / -1;
    }

    .message-stats-control-actions {
      grid-column: 1 / -1;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .message-stats-control-actions button {
      min-height: 37px;
      padding: 0 13px;
      border: 1px solid #2f63c7;
      border-radius: 9px;
      background: #2f63c7;
      color: #fff;
      font-size: 10px;
      font-weight: 850;
      cursor: pointer;
    }

    .message-stats-control-actions button.secondary {
      background: #fff;
      color: #2f5eb4;
    }

    .message-stats-control-actions button:disabled {
      border-color: #d8e0ec;
      background: #edf1f7;
      color: #929dad;
      cursor: not-allowed;
    }

    .message-stats-control-status {
      min-height: 14px;
      color: #65758d;
      font-size: 10px;
    }

    .calendar-outcome-select-field {
      display: grid;
      gap: 6px;
      margin-bottom: 10px;
    }

    .calendar-outcome-select-field span {
      color: #7381a0;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .calendar-outcome-select-field select {
      width: 100%;
      min-height: 40px;
      border: 1px solid rgba(49, 87, 216, 0.2);
      border-radius: 12px;
      padding: 0 36px 0 12px;
      background: #fff;
      color: #243757;
      font: inherit;
      font-size: 12px;
      font-weight: 750;
      cursor: pointer;
    }

    .calendar-outcome-select-field select:disabled {
      opacity: 0.58;
      cursor: not-allowed;
    }

    .calendar-outcome-select-field select[data-outcome="preconfirmed"],
    .calendar-outcome-select-field select[data-outcome="confirmed"] {
      border-color: rgba(7, 138, 82, 0.36);
      background-color: #effbf5;
      color: #086a42;
    }

    .message-stats-quota-summary {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
    }

    .message-stats-quota-summary article {
      padding: 12px;
      border: 1px solid #e0e8f4;
      border-radius: 12px;
      background: #f7faff;
    }

    .message-stats-quota-summary span,
    .message-stats-quota-summary strong {
      display: block;
    }

    .message-stats-quota-summary span {
      color: #7a879a;
      font-size: 8px;
      font-weight: 900;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .message-stats-quota-summary strong {
      margin-top: 6px;
      color: #1a335d;
      font-size: 20px;
    }

    .message-stats-quota-table {
      min-width: 880px;
    }

    .message-stats-quota-chip {
      display: inline-flex;
      align-items: center;
      min-height: 23px;
      padding: 3px 8px;
      border-radius: 999px;
      background: #e9f6ee;
      color: #277348;
      font-size: 8px;
      font-weight: 900;
      white-space: nowrap;
    }

    .message-stats-quota-chip[data-blocked="true"] {
      background: #fff0f0;
      color: #b64040;
    }

    .message-stats-quota-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
    }

    .message-stats-quota-actions button {
      min-height: 27px;
      padding: 0 8px;
      border: 1px solid #cad8ec;
      border-radius: 8px;
      background: #fff;
      color: #2d58a6;
      font-size: 8px;
      font-weight: 900;
      cursor: pointer;
    }

    .message-stats-quota-actions button[data-quota-extra="0"] {
      color: #9a4b4b;
    }

    .message-stats-reconciliation-list {
      display: grid;
      gap: 7px;
    }

    .message-stats-reconciliation-row {
      display: grid;
      grid-template-columns: 68px repeat(3, minmax(0, 1fr));
      gap: 8px;
      padding: 9px 10px;
      border-radius: 10px;
      background: #f6f9fd;
      color: #718097;
      font-size: 9px;
    }

    .message-stats-reconciliation-row strong {
      color: #2b4165;
    }

    .message-stats-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.75fr);
      gap: 18px;
    }

    .message-stats-panel-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 17px 18px;
      border-bottom: 1px solid #e7edf6;
    }

    .message-stats-panel-head h3 {
      margin: 0;
      color: #1b3157;
      font-size: 15px;
      letter-spacing: -0.02em;
    }

    .message-stats-panel-head span {
      color: #8290a5;
      font-size: 9px;
      font-weight: 800;
      text-transform: uppercase;
    }

    .message-stats-trend {
      height: 250px;
      display: flex;
      align-items: flex-end;
      gap: 7px;
      overflow-x: auto;
      padding: 24px 18px 18px;
    }

    .message-stats-trend-day {
      min-width: 24px;
      height: 100%;
      display: flex;
      flex: 1 0 24px;
      flex-direction: column;
      justify-content: flex-end;
      gap: 7px;
      text-align: center;
    }

    .message-stats-trend-bar-wrap {
      height: 190px;
      display: flex;
      align-items: flex-end;
      justify-content: center;
    }

    .message-stats-trend-bar {
      width: min(22px, 70%);
      min-height: 3px;
      border-radius: 6px 6px 2px 2px;
      background: linear-gradient(180deg, #4480ed, #224aa7);
      box-shadow: 0 6px 13px rgba(40, 89, 185, 0.16);
    }

    .message-stats-trend-day span {
      color: #8590a2;
      font-size: 8px;
      font-weight: 800;
      white-space: nowrap;
    }

    .message-stats-components,
    .message-stats-alerts {
      display: grid;
      gap: 10px;
      padding: 16px 18px 18px;
    }

    .message-stats-component {
      display: grid;
      gap: 7px;
      padding: 12px;
      border: 1px solid #e6ebf3;
      border-radius: 12px;
      background: #fafcff;
    }

    .message-stats-component-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      color: #253a60;
      font-size: 11px;
      font-weight: 850;
    }

    .message-stats-component small {
      color: #8490a3;
      font-size: 9px;
    }

    .message-stats-component-track {
      height: 5px;
      overflow: hidden;
      border-radius: 99px;
      background: #e9eff8;
    }

    .message-stats-component-track i {
      height: 100%;
      display: block;
      border-radius: inherit;
      background: #376fd4;
    }

    .message-stats-alert {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 10px;
      padding: 11px 12px;
      border: 1px solid #e5eaf2;
      border-radius: 12px;
      background: #fafbfe;
    }

    .message-stats-alert-dot {
      width: 9px;
      height: 9px;
      margin-top: 4px;
      border-radius: 99px;
      background: #f0a43b;
      box-shadow: 0 0 0 4px rgba(240, 164, 59, 0.13);
    }

    .message-stats-alert[data-severity="high"] .message-stats-alert-dot {
      background: #dc5b5b;
      box-shadow: 0 0 0 4px rgba(220, 91, 91, 0.13);
    }

    .message-stats-alert strong {
      display: block;
      color: #263a5d;
      font-size: 11px;
    }

    .message-stats-alert p {
      margin: 3px 0 0;
      color: #707d91;
      font-size: 9px;
      line-height: 1.45;
    }

    .message-stats-table-wrap {
      overflow-x: auto;
    }

    .message-stats-table {
      width: 100%;
      min-width: 720px;
      border-collapse: collapse;
    }

    .message-stats-table th,
    .message-stats-table td {
      padding: 12px 16px;
      border-bottom: 1px solid #edf1f6;
      color: #43516a;
      font-size: 10px;
      text-align: left;
      vertical-align: middle;
    }

    .message-stats-table th {
      background: #f8faff;
      color: #7b8799;
      font-size: 8px;
      font-weight: 900;
      letter-spacing: 0.07em;
      text-transform: uppercase;
    }

    .message-stats-table td strong {
      color: #243a60;
      font-size: 11px;
    }

    .message-stats-table .cost-cell {
      color: #234c9b;
      font-weight: 900;
      font-variant-numeric: tabular-nums;
    }

    .message-stats-status {
      min-height: 160px;
      display: grid;
      place-items: center;
      padding: 28px;
      color: #718096;
      text-align: center;
    }

    .message-stats-kind {
      display: inline-flex;
      align-items: center;
      min-height: 22px;
      padding: 3px 8px;
      border-radius: 999px;
      background: #edf4ff;
      color: #315da9;
      font-size: 8px;
      font-weight: 900;
      white-space: nowrap;
    }

    .message-stats-kind[data-kind="short_attempt"] {
      background: #fff5df;
      color: #9a6716;
    }

    .message-stats-kind[data-kind="zero_duration"],
    .message-stats-kind[data-kind="possible_open"] {
      background: #fff0f0;
      color: #b54545;
    }

    @media (max-width: 1100px) {
      .message-stats-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .message-stats-grid {
        grid-template-columns: 1fr;
      }

      .message-stats-control-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 720px) {
      .message-stats-hero-head,
      .message-stats-range,
      .message-stats-measurement-note {
        align-items: stretch;
        flex-direction: column;
      }

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

      .message-stats-kpi:first-child {
        grid-column: 1 / -1;
      }

      .message-stats-range input,
      .message-stats-range button {
        width: 100%;
      }

      .message-stats-control-form {
        grid-template-columns: 1fr;
      }

      .message-stats-quota-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .message-stats-control-form .message-stats-control-wide,
      .message-stats-control-actions {
        grid-column: 1;
      }

      .message-stats-reconciliation-row {
        grid-template-columns: 1fr 1fr;
      }
    }

    .agent-intelligence-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 32px;
      margin-bottom: 20px;
    }

    .agent-intelligence-heading {
      max-width: 520px;
    }

    .agent-intelligence-heading h2 {
      margin: 0;
      color: #111827;
      font-size: clamp(34px, 4vw, 50px);
      line-height: 1;
      letter-spacing: -0.055em;
    }

    .agent-intelligence-sync {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-height: 24px;
      margin-top: 10px;
      color: #70798a;
      font-size: 11px;
      font-weight: 750;
      font-variant-numeric: tabular-nums;
    }

    .agent-intelligence-sync-dot {
      width: 7px;
      height: 7px;
      flex: 0 0 auto;
      border-radius: 999px;
      background: #5f8b75;
      box-shadow: 0 0 0 4px rgba(95, 139, 117, 0.11);
    }

    .agent-intelligence-sync.is-refreshing .agent-intelligence-sync-dot {
      background: #4d75c7;
      box-shadow: 0 0 0 4px rgba(77, 117, 199, 0.12);
      animation: agentIntelligenceSyncPulse 1.15s ease-in-out infinite;
    }

    .agent-intelligence-sync.has-error {
      color: #9a5d58;
    }

    .agent-intelligence-sync.has-error .agent-intelligence-sync-dot {
      background: #b96b64;
      box-shadow: 0 0 0 4px rgba(185, 107, 100, 0.12);
    }

    @keyframes agentIntelligenceSyncPulse {
      0%, 100% { opacity: 0.45; transform: scale(0.82); }
      50% { opacity: 1; transform: scale(1); }
    }

    .agent-intelligence-filters {
      display: grid;
      grid-template-columns: minmax(205px, 1.2fr) minmax(150px, 0.8fr) minmax(185px, 1fr);
      gap: 10px;
      width: min(650px, 100%);
      margin-left: auto;
    }

    .agent-intelligence-filter {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 7px;
    }

    .agent-intelligence-filter > span {
      color: #747c8c;
      font-size: 10px;
      font-weight: 850;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .agent-intelligence-filter input,
    .agent-intelligence-filter select,
    .agent-intelligence-range-button {
      width: 100%;
      height: 44px;
      min-width: 0;
      padding: 0 13px;
      border: 1px solid #dfe3ea;
      border-radius: 12px;
      outline: none;
      background: rgba(255, 255, 255, 0.9);
      color: #253047;
      font: inherit;
      font-size: 13px;
      box-shadow: 0 4px 16px rgba(28, 39, 61, 0.035);
    }

    .agent-intelligence-filter input:focus,
    .agent-intelligence-filter select:focus,
    .agent-intelligence-range-button:focus-visible {
      border-color: #768dbf;
      box-shadow: 0 0 0 3px rgba(67, 94, 152, 0.11);
    }

    .agent-intelligence-range-wrap {
      position: relative;
    }

    .agent-intelligence-range-button {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      text-align: left;
      cursor: pointer;
    }

    .agent-intelligence-range-button svg,
    .agent-intelligence-search-icon {
      width: 16px;
      height: 16px;
      flex: 0 0 auto;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .agent-intelligence-range-panel {
      position: absolute;
      z-index: 25;
      top: calc(100% + 8px);
      right: 0;
      width: 288px;
      padding: 14px;
      border: 1px solid #dde3ec;
      border-radius: 16px;
      background: #fff;
      box-shadow: 0 22px 55px rgba(24, 36, 61, 0.16);
    }

    .agent-intelligence-range-presets {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
      margin-bottom: 12px;
    }

    .agent-intelligence-range-preset {
      min-height: 34px;
      padding: 6px 8px;
      border: 1px solid #e1e6ee;
      border-radius: 9px;
      background: #f8f9fb;
      color: #5b6473;
      font-size: 11px;
      font-weight: 800;
      cursor: pointer;
    }

    .agent-intelligence-range-preset.active {
      border-color: #c7d3ea;
      background: #edf2fb;
      color: #29426e;
    }

    .agent-intelligence-range-fields {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .agent-intelligence-range-fields label {
      display: grid;
      gap: 5px;
      color: #7a8291;
      font-size: 10px;
      font-weight: 800;
      text-transform: uppercase;
    }

    .agent-intelligence-range-fields input {
      height: 38px;
      padding: 0 8px;
      font-size: 11px;
    }

    .agent-intelligence-range-apply {
      width: 100%;
      min-height: 38px;
      margin-top: 10px;
      border: 0;
      border-radius: 10px;
      background: #263d68;
      color: #fff;
      font-weight: 850;
      cursor: pointer;
    }

    .agent-intelligence-search-wrap {
      position: relative;
    }

    .agent-intelligence-search-wrap input {
      padding-left: 37px;
    }

    .agent-intelligence-search-icon {
      position: absolute;
      left: 13px;
      bottom: 14px;
      color: #8790a0;
      pointer-events: none;
    }

    .agent-team-pulse {
      margin-bottom: 18px;
      border: 1px solid #dfe4ec;
      border-radius: 18px;
      background: #172452;
      color: #fff;
      box-shadow: 0 14px 38px rgba(23, 36, 82, 0.13);
      overflow: hidden;
    }

    .agent-team-pulse-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      min-height: 42px;
      padding: 9px 18px 8px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    .agent-team-pulse-head h3 {
      margin: 0;
      font-size: 14px;
      letter-spacing: -0.02em;
      white-space: nowrap;
    }

    .agent-team-pulse-head p {
      max-width: 620px;
      margin: 0;
      color: rgba(255, 255, 255, 0.66);
      overflow: hidden;
      font-size: 10px;
      line-height: 1.35;
      text-align: right;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .agent-team-pulse-viewport {
      position: relative;
      width: 100%;
      overflow: hidden;
      mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
    }

    .agent-team-pulse-track {
      display: flex;
      width: max-content;
      will-change: transform;
      animation: agentTeamPulseScroll 36s linear infinite;
    }

    .agent-team-pulse-track.is-placeholder {
      animation: none;
    }

    .agent-team-pulse:hover .agent-team-pulse-track,
    .agent-team-pulse:focus-within .agent-team-pulse-track {
      animation-play-state: paused;
    }

    .agent-team-pulse-group {
      display: flex;
      flex: 0 0 auto;
    }

    @keyframes agentTeamPulseScroll {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }

    @media (prefers-reduced-motion: reduce) {
      .agent-intelligence-sync.is-refreshing .agent-intelligence-sync-dot,
      .agent-team-pulse-track {
        animation: none;
      }

      .agent-team-pulse-viewport {
        overflow-x: auto;
        mask-image: none;
        -webkit-mask-image: none;
      }

      .agent-team-pulse-group[aria-hidden="true"] {
        display: none;
      }
    }

    .agent-team-pulse-metric {
      position: relative;
      display: grid;
      grid-template-columns: minmax(122px, 1fr) auto;
      grid-template-rows: auto auto;
      column-gap: 16px;
      align-items: center;
      width: 265px;
      min-height: 72px;
      padding: 10px 18px;
      border-left: 1px solid rgba(255, 255, 255, 0.12);
      cursor: help;
      outline: none;
    }

    .agent-team-pulse-metric:first-child {
      border-left: 0;
    }

    .agent-team-pulse-metric span,
    .agent-team-pulse-metric strong,
    .agent-team-pulse-metric small {
      display: block;
      min-width: 0;
    }

    .agent-team-pulse-metric span {
      color: rgba(255, 255, 255, 0.58);
      overflow: hidden;
      font-size: 8px;
      font-weight: 900;
      letter-spacing: 0.075em;
      line-height: 1.35;
      text-overflow: ellipsis;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .agent-team-pulse-metric strong {
      grid-column: 2;
      grid-row: 1 / 3;
      font-size: clamp(18px, 1.7vw, 24px);
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.035em;
      white-space: nowrap;
    }

    .agent-team-pulse-metric small {
      color: rgba(255, 255, 255, 0.62);
      overflow: hidden;
      font-size: 8px;
      line-height: 1.35;
      opacity: 0;
      text-overflow: ellipsis;
      transform: translateY(2px);
      transition: opacity 150ms ease, transform 150ms ease, visibility 150ms ease;
      visibility: hidden;
      white-space: nowrap;
    }

    .agent-team-pulse-metric:hover small,
    .agent-team-pulse-metric:focus-visible small {
      opacity: 1;
      transform: translateY(0);
      visibility: visible;
    }

    .agent-team-pulse-metric:focus-visible {
      box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.72);
    }

    .amess-dashboard {
      display: grid;
      gap: 18px;
      color: #121a35;
    }

    .amess-dashboard-loading {
      min-height: 180px;
      display: grid;
      place-items: center;
      border: 1px solid #e1e5ed;
      border-radius: 20px;
      background: rgba(255, 255, 255, 0.82);
    }

    .amess-dashboard-summary,
    .amess-dashboard-panel {
      overflow: hidden;
      border: 1px solid #dfe4ec;
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.94);
      box-shadow: 0 12px 32px rgba(23, 36, 82, 0.055);
    }

    .amess-dashboard-panel-head {
      background: #172452;
      color: #fff;
    }

    .amess-dashboard-range {
      display: flex;
      align-items: end;
      justify-content: center;
      gap: 9px;
      padding: 11px 16px 9px;
      background: #f1f2f4;
      color: #4f596a;
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
    }

    .amess-dashboard-range label,
    .amess-dashboard-standards-range label {
      display: grid;
      gap: 5px;
    }

    .amess-dashboard-range input,
    .amess-dashboard-standards-range input {
      min-height: 32px;
      padding: 5px 8px;
      border: 1px solid rgba(16, 32, 61, 0.14);
      border-radius: 8px;
      background: #74a9d8;
      color: #10203d;
      font: inherit;
      font-variant-numeric: tabular-nums;
    }

    .amess-dashboard-range button,
    .amess-dashboard-standards-range button {
      min-height: 32px;
      padding: 0 14px;
      border: 0;
      border-radius: 9px;
      background: #f4a51c;
      color: #172452;
      font: inherit;
      font-weight: 900;
      text-transform: uppercase;
      cursor: pointer;
    }

    .amess-dashboard-range .amess-dashboard-refresh {
      width: 34px;
      min-width: 34px;
      padding: 0;
      display: grid;
      place-items: center;
      border: 1px solid #d4dae4;
      background: #fff;
      color: #172452;
      box-shadow: 0 4px 10px rgba(23, 36, 82, 0.08);
    }

    .amess-dashboard-refresh svg {
      width: 16px;
      height: 16px;
      fill: none;
      stroke: currentColor;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 2;
    }

    .amess-dashboard-refresh:hover,
    .amess-dashboard-refresh:focus-visible {
      border-color: #739ad1;
      background: #f6f9fd;
      outline: none;
    }

    .amess-dashboard-refresh:disabled svg {
      animation: spin 0.85s linear infinite;
    }

    .amess-dashboard-range button:disabled,
    .amess-dashboard-standards-range button:disabled {
      cursor: wait;
      opacity: 0.62;
    }

    .amess-dashboard-kpis {
      display: grid;
      grid-template-columns: repeat(14, minmax(0, 1fr));
      gap: 8px;
      padding: 0 16px 15px;
      background: #f1f2f4;
    }

    .amess-kpi-card {
      min-width: 0;
      min-height: 82px;
      display: grid;
      grid-template-rows: minmax(48px, 1fr) auto;
      overflow: hidden;
      border: 1px solid #dfe3e9;
      border-radius: 9px;
      background: #fff;
      box-shadow: 0 5px 14px rgba(23, 36, 82, 0.045);
    }

    .amess-kpi-card[data-card="agents"],
    .amess-kpi-card[data-card="active-time"],
    .amess-kpi-card[data-card="call-duration"],
    .amess-kpi-card[data-card="valid"],
    .amess-kpi-card[data-card="qualified"],
    .amess-kpi-card[data-card="sales"] {
      grid-column: span 2;
    }

    .amess-kpi-card[data-card="calls"],
    .amess-kpi-card[data-card="appointments"] {
      grid-column: span 3;
    }

    .amess-kpi-card[data-card="appointment-rate"],
    .amess-kpi-card[data-card="call-rate"] {
      grid-column: span 5;
    }

    .amess-kpi-card-values {
      display: grid;
      grid-template-columns: repeat(var(--metric-columns, 1), minmax(0, 1fr));
      background: var(--metric-background, #fff);
    }

    .amess-kpi-card[data-status="warning"] { --metric-background: #fbe9d5; }
    .amess-kpi-card[data-status="danger"] { --metric-background: #f8d9dc; }
    .amess-kpi-card[data-status="success"] { --metric-background: #dff3e7; }
    .amess-kpi-card[data-status="excellent"] { --metric-background: #dce9fa; }

    .amess-kpi-card[data-metrics="2"] {
      --metric-columns: 2;
    }

    .amess-kpi-value {
      min-width: 0;
      display: grid;
      place-content: center;
      gap: 2px;
      padding: 7px 6px 6px;
      text-align: center;
    }

    .amess-kpi-value + .amess-kpi-value {
      border-left: 1px solid rgba(23, 36, 82, 0.11);
    }

    .amess-kpi-value strong {
      display: block;
      color: #10182d;
      font-size: clamp(18px, 1.55vw, 25px);
      line-height: 1;
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.04em;
      white-space: nowrap;
    }

    .amess-kpi-value span {
      color: #697384;
      font-size: 7px;
      font-weight: 850;
      letter-spacing: 0.04em;
      line-height: 1.2;
      text-transform: uppercase;
    }

    .amess-kpi-card-label {
      min-height: 30px;
      display: grid;
      place-items: center;
      padding: 5px 6px;
      border-top: 1px solid #e1e4e9;
      color: #172033;
      font-size: 8px;
      font-weight: 900;
      letter-spacing: 0.02em;
      line-height: 1.22;
      text-align: center;
      text-transform: uppercase;
    }

    .amess-dashboard-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      grid-template-areas:
        "chart chart messages messages"
        "first trial messages messages";
      gap: 18px;
      align-items: stretch;
    }

    .amess-dashboard-chart-panel {
      grid-area: chart;
    }

    .amess-dashboard-messages-panel {
      grid-area: messages;
      min-height: 458px;
      display: flex;
      flex-direction: column;
    }

    .amess-dashboard-first-panel {
      grid-area: first;
    }

    .amess-dashboard-trial-panel {
      grid-area: trial;
      min-width: 0;
    }

    .amess-dashboard-trial-panel .amess-dashboard-panel-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .amess-dashboard-trial-panel .amess-dashboard-panel-actions { justify-content: space-between; flex-wrap: wrap; }
    #amessTrialRemovalStatus:empty { display: none; }

    .amess-dashboard-panel-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      color: rgba(255, 255, 255, 0.75);
      font-size: 10px;
      font-weight: 850;
      text-transform: uppercase;
    }

    .amess-trial-add {
      min-height: 30px;
      padding: 5px 10px;
      border: 1px solid rgba(255, 255, 255, 0.34);
      border-radius: 8px;
      background: #f4a51c;
      color: #172452;
      font: inherit;
      font-size: 9px;
      font-weight: 900;
      text-transform: uppercase;
      cursor: pointer;
    }

    .amess-trial-add:hover,
    .amess-trial-add:focus-visible {
      border-color: #fff;
      background: #ffc45d;
      outline: none;
    }

    .amess-trial-form-row {
      display: grid;
      grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
      gap: 12px;
    }

    .amess-trial-form .agents-field {
      display: grid;
      gap: 7px;
    }

    .amess-trial-form select,
    .amess-trial-form input {
      width: 100%;
      min-height: 44px;
      box-sizing: border-box;
      padding: 10px 12px;
      border: 1px solid #dbe5f4;
      border-radius: 13px;
      background: #fbfdff;
      color: #1d3058;
      font: inherit;
    }

    .amess-trial-form-note {
      margin: -4px 0 0;
      color: #6a7893;
      font-size: 12px;
      line-height: 1.5;
    }

    .amess-trial-status {
      min-height: 18px;
      color: #42526d;
      font-size: 12px;
      font-weight: 700;
    }

    @media (max-width: 560px) {
      .amess-trial-form-row {
        grid-template-columns: 1fr;
      }
    }

    .amess-dashboard-panel-head {
      min-height: 52px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 11px 16px;
      border-bottom: 3px solid #f4a51c;
    }

    .amess-dashboard-panel-head h3 {
      margin: 0;
      font-size: 17px;
      letter-spacing: -0.025em;
      text-transform: uppercase;
    }

    .amess-dashboard-panel-head > span,
    .amess-dashboard-standards-range {
      color: rgba(255, 255, 255, 0.75);
      font-size: 10px;
      font-weight: 850;
      text-transform: uppercase;
    }

    .amess-dashboard-chart-control {
      display: flex;
      align-items: center;
      gap: 7px;
      color: rgba(255, 255, 255, 0.68);
      font-size: 8px;
      font-weight: 900;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .amess-dashboard-chart-control select {
      min-height: 30px;
      padding: 4px 28px 4px 10px;
      border: 1px solid rgba(255, 255, 255, 0.28);
      border-radius: 8px;
      background: #233467;
      color: #fff;
      font: inherit;
      font-size: 9px;
      cursor: pointer;
    }

    .amess-dashboard-chart-control select:hover,
    .amess-dashboard-chart-control select:focus-visible {
      border-color: rgba(255, 255, 255, 0.72);
      outline: none;
    }

    .amess-sales-chart {
      min-height: 250px;
      overflow-x: auto;
      padding: 14px 16px 10px;
      background: #fff;
    }

    .amess-sales-chart svg {
      display: block;
      width: 100%;
      height: 226px;
    }

    .amess-sales-chart-legend {
      display: flex;
      justify-content: center;
      gap: 18px;
      margin-bottom: 5px;
      color: #4b5362;
      font-size: 9px;
      font-weight: 800;
    }

    .amess-sales-chart-legend span::before {
      width: 9px;
      height: 9px;
      display: inline-block;
      margin-right: 5px;
      border-radius: 2px;
      background: var(--legend-color);
      content: "";
    }

    .amess-dashboard-messages {
      flex: 1 1 auto;
      display: grid;
      align-content: start;
      gap: 10px;
      overflow-y: auto;
      padding: 16px;
    }

    .amess-dashboard-message {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 9px;
      align-items: start;
      padding: 11px 12px;
      border: 1px solid #e5e8ee;
      border-radius: 12px;
      background: #fafbfc;
      font-size: 11px;
      line-height: 1.45;
    }

    .amess-dashboard-message-icon {
      font-size: 15px;
      line-height: 1;
    }

    .amess-dashboard-people {
      min-height: 118px;
      display: grid;
      align-content: start;
      gap: 8px;
      padding: 14px;
    }

    .amess-dashboard-person,
    .amess-dashboard-empty {
      min-height: 38px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 8px 10px;
      border-radius: 10px;
      background: #f6f7f9;
      font-size: 11px;
      font-weight: 750;
    }

    .amess-dashboard-empty {
      justify-content: center;
      color: #7b8494;
      font-weight: 650;
    }

    .amess-dashboard-person-status {
      flex: 0 0 auto;
      font-size: 15px;
    }

    .amess-trial-person { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
    .amess-trial-person .amess-dashboard-person-status { font-size: 11px; display: block; white-space: normal; overflow-wrap: anywhere; margin-top: 5px; color: #596579; }
    .amess-trial-remove { padding: 6px 9px; border: 1px solid #e3bac1; border-radius: 7px; background: #fff; color: #a32235; font: inherit; cursor: pointer; }
    .amess-trial-remove:disabled { cursor: wait; opacity: .65; }

    .amess-dashboard-standards-head {
      min-height: 60px;
    }

    .amess-dashboard-standards-range {
      display: flex;
      align-items: end;
      gap: 20px;
    }

    .amess-dashboard-standards-range input {
      min-height: 32px;
      background: rgba(255, 255, 255, 0.12);
      border-color: rgba(255, 255, 255, 0.22);
      color: #fff;
      color-scheme: dark;
    }

    .amess-dashboard-standards-range button {
      min-height: 32px;
      font-size: 9px;
    }

    .amess-dashboard-standards-range .amess-name-correction-open {
      border-color: rgba(255, 255, 255, 0.5);
      background: transparent;
      color: #fff;
    }

    .amess-name-correction-panel {
      padding: 16px 18px;
      border-bottom: 1px solid #d9e1ec;
      background: #f4f7fb;
      color: #152344;
    }

    .amess-name-correction-heading,
    .amess-name-correction-form {
      display: flex;
      gap: 14px;
      align-items: end;
    }

    .amess-name-correction-heading {
      align-items: start;
      justify-content: space-between;
      margin-bottom: 12px;
    }

    .amess-name-correction-heading p {
      margin: 4px 0 0;
      color: #667085;
      font-size: 12px;
    }

    .amess-name-correction-heading button {
      border: 0;
      background: transparent;
      color: #42526d;
      font-weight: 800;
      cursor: pointer;
    }

    .amess-name-correction-form label {
      flex: 1 1 250px;
    }

    .amess-name-correction-form label span {
      display: block;
      margin-bottom: 5px;
      color: #42526d;
      font-size: 10px;
      font-weight: 850;
      text-transform: uppercase;
    }

    .amess-name-correction-form input {
      width: 100%;
      min-height: 38px;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 8px 10px;
      background: #fff;
      color: #152344;
    }

    .amess-name-correction-form button {
      min-height: 38px;
      white-space: nowrap;
    }

    .amess-name-correction-status {
      min-height: 18px;
      margin-top: 9px;
      color: #42526d;
      font-size: 12px;
      font-weight: 700;
    }

    .amess-name-correction-list {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin-top: 5px;
    }

    .amess-name-correction-item {
      padding: 6px 9px;
      border: 1px solid #d6deea;
      border-radius: 999px;
      background: #fff;
      color: #42526d;
      font-size: 11px;
    }

    @media (max-width: 900px) {
      .amess-name-correction-form {
        align-items: stretch;
        flex-direction: column;
      }
    }

    .amess-standards-status {
      align-self: center;
      min-width: 78px;
      color: rgba(255, 255, 255, 0.72);
      font-size: 9px;
      font-weight: 750;
      text-align: right;
      text-transform: none;
      white-space: nowrap;
    }

    .amess-weekly-note { margin: 12px 16px; color: #596579; font-size: 13px; line-height: 1.6; }
    .amess-dashboard-table-wrap {
      overflow-x: auto;
    }

    .amess-dashboard-table {
      width: 100%;
      min-width: 760px;
      border-collapse: collapse;
      background: #fff;
      font-size: 11px;
    }

    .amess-dashboard-table th,
    .amess-dashboard-table td {
      padding: 10px 14px;
      border-bottom: 1px solid #e6e9ef;
      text-align: left;
      font-variant-numeric: tabular-nums;
    }

    .amess-dashboard-table th {
      background: #74a9d8;
      color: #101a2d;
      font-size: 9px;
      font-weight: 900;
      letter-spacing: 0.035em;
      text-transform: uppercase;
    }

    .amess-dashboard-table th:last-child,
    .amess-dashboard-table td:last-child {
      text-align: right;
    }

    .amess-dashboard-table tbody tr:hover {
      background: #f6f9fd;
    }

    .amess-dashboard-table .amess-standards-average-row {
      background: #e9f1fb;
      color: #102a56;
      font-weight: 900;
    }

    .amess-dashboard-table .amess-standards-average-row:hover {
      background: #e9f1fb;
    }

    .amess-compliance {
      display: inline-flex;
      min-width: 62px;
      justify-content: center;
      padding: 5px 8px;
      border-radius: 999px;
      background: #eef1f5;
      font-weight: 900;
    }

    .amess-compliance[data-level="high"] {
      background: #e1f4e8;
      color: #287346;
    }

    .amess-compliance[data-level="mid"] {
      background: #fff0d8;
      color: #9a6414;
    }

    .amess-compliance[data-level="low"] {
      background: #fae3e4;
      color: #a5484c;
    }

    .amess-agent-link {
      padding: 0;
      border: 0;
      background: transparent;
      color: #173a76;
      font: inherit;
      font-weight: 900;
      text-align: left;
      text-decoration: underline;
      text-decoration-color: rgba(23, 58, 118, 0.3);
      text-underline-offset: 3px;
      cursor: pointer;
    }

    .amess-agent-link:hover,
    .amess-agent-link:focus-visible {
      color: #2e6ed4;
      outline: none;
      text-decoration-color: currentColor;
    }

    .amess-agent-kpi-backdrop {
      position: fixed;
      inset: 0;
      z-index: 1200;
      display: grid;
      place-items: center;
      padding: 22px;
      background: rgba(8, 18, 43, 0.64);
      backdrop-filter: blur(7px);
    }

    .amess-agent-kpi-dialog {
      width: min(1180px, 100%);
      max-height: calc(100vh - 44px);
      overflow: auto;
      border: 1px solid rgba(255, 255, 255, 0.26);
      border-radius: 22px;
      background: #f1f2f4;
      box-shadow: 0 30px 90px rgba(4, 13, 36, 0.38);
    }

    .agent-intelligence-card.self-only {
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
    }

    .amess-agent-kpi-backdrop.self-only {
      position: static;
      inset: auto;
      z-index: auto;
      display: block;
      padding: 0;
      background: transparent;
      backdrop-filter: none;
    }

    .amess-agent-kpi-backdrop.self-only .amess-agent-kpi-dialog {
      width: 100%;
      max-height: none;
      overflow: visible;
      border-color: #dce4f0;
      box-shadow: 0 18px 48px rgba(16, 37, 78, 0.12);
    }

    .amess-agent-kpi-backdrop.self-only .amess-agent-kpi-hero {
      position: static;
      grid-template-columns: minmax(220px, 1fr) auto;
    }

    .amess-agent-kpi-backdrop.self-only .amess-agent-kpi-heading {
      display: block;
    }

    .amess-agent-kpi-backdrop.self-only .amess-agent-kpi-controls {
      width: 100%;
    }

    .amess-agent-kpi-hero {
      position: sticky;
      top: 0;
      z-index: 2;
      display: grid;
      grid-template-columns: minmax(220px, 1fr) auto;
      gap: 18px;
      align-items: end;
      padding: 19px 22px 17px;
      overflow: hidden;
      border-bottom: 3px solid #f4a51c;
      background: #172452;
      color: #fff;
    }

    .amess-agent-kpi-title-row {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .amess-agent-kpi-close,
    .amess-agent-kpi-refresh {
      width: 36px;
      height: 36px;
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      border: 1px solid rgba(255, 255, 255, 0.28);
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.08);
      color: #fff;
      cursor: pointer;
    }

    .amess-agent-kpi-close:hover,
    .amess-agent-kpi-close:focus-visible,
    .amess-agent-kpi-refresh:hover,
    .amess-agent-kpi-refresh:focus-visible {
      background: rgba(255, 255, 255, 0.18);
      outline: none;
    }

    .amess-agent-kpi-close svg,
    .amess-agent-kpi-refresh svg {
      width: 17px;
      height: 17px;
      fill: none;
      stroke: currentColor;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 2;
    }

    .amess-agent-kpi-refresh:disabled svg {
      animation: spin 0.85s linear infinite;
    }

    .amess-agent-kpi-heading h2 {
      margin: 0;
      font-size: clamp(23px, 3vw, 34px);
      letter-spacing: -0.04em;
    }

    .amess-agent-kpi-controls {
      min-width: 0;
      display: flex;
      align-items: end;
      justify-content: flex-end;
      gap: 8px;
    }

    .amess-agent-kpi-controls label {
      min-width: 156px;
      flex: 1 1 156px;
      display: grid;
      gap: 6px;
      color: #fff;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .amess-agent-kpi-controls input,
    .amess-agent-kpi-controls select {
      width: 100%;
      min-width: 0;
      box-sizing: border-box;
      min-height: 43px;
      padding: 8px 11px;
      border: 2px solid #f4b23f;
      border-radius: 10px;
      background: #fff;
      color: #10203d;
      font: inherit;
      font-size: 12px;
      font-weight: 850;
      color-scheme: light;
    }

    .amess-agent-kpi-refresh {
      width: 46px;
      min-width: 46px;
      padding: 0;
      background: #f4a51c;
      border-color: #f4b23f;
      color: #172452;
      font-size: 11px;
      font-weight: 950;
      white-space: nowrap;
    }

    .amess-agent-kpi-refresh span {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      white-space: nowrap;
    }

    .amess-agent-kpi-refresh:hover,
    .amess-agent-kpi-refresh:focus-visible {
      background: #ffc251;
    }

    .amess-agent-kpi-body {
      display: grid;
      gap: 16px;
      padding: 18px;
    }

    .amess-agent-kpi-grid {
      display: grid;
      grid-template-columns: repeat(10, minmax(0, 1fr));
      gap: 8px;
    }

    .amess-agent-kpi-card {
      min-height: 94px;
      display: grid;
      grid-template-rows: 1fr auto;
      overflow: hidden;
      border: 1px solid #dfe3e9;
      border-radius: 10px;
      background: #fff;
      box-shadow: 0 5px 14px rgba(23, 36, 82, 0.045);
    }

    .amess-agent-kpi-card[hidden] { display: none; }

    .amess-agent-kpi-card strong {
      display: grid;
      place-items: center;
      padding: 12px 6px 9px;
      color: #10182d;
      font-size: clamp(18px, 1.75vw, 26px);
      line-height: 1;
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.045em;
      white-space: nowrap;
    }

    .amess-agent-kpi-card span {
      min-height: 36px;
      display: grid;
      place-items: center;
      padding: 6px;
      border-top: 1px solid #e1e4e9;
      color: #172033;
      font-size: 7px;
      font-weight: 900;
      line-height: 1.2;
      text-align: center;
      text-transform: uppercase;
    }

    .amess-agent-kpi-lower {
      display: grid;
      grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
      gap: 16px;
      align-items: stretch;
    }

    .amess-agent-kpi-panel {
      overflow: hidden;
      border: 1px solid #dfe4ec;
      border-radius: 14px;
      background: #fff;
    }

    .amess-agent-kpi-panel h3 {
      margin: 0;
      padding: 11px 14px;
      border-bottom: 3px solid #f4a51c;
      background: #172452;
      color: #fff;
      font-size: 14px;
      letter-spacing: -0.015em;
      text-transform: uppercase;
    }

    .amess-agent-kpi-conversions {
      display: grid;
      padding: 4px 14px 8px;
    }

    .amess-agent-kpi-conversion {
      min-height: 42px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      border-bottom: 1px solid #edf0f4;
      font-size: 11px;
      font-weight: 800;
    }

    .amess-agent-kpi-conversion:last-child {
      border-bottom: 0;
    }

    .amess-agent-kpi-conversion strong {
      flex: 0 0 auto;
      font-variant-numeric: tabular-nums;
    }

    .amess-agent-kpi-messages {
      display: grid;
      align-content: start;
      gap: 9px;
      padding: 14px;
    }

    .amess-agent-kpi-message {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 9px;
      padding: 9px 10px;
      border: 1px solid #e8ebf0;
      border-radius: 10px;
      background: #fafbfc;
      font-size: 10px;
      line-height: 1.42;
    }

    .amess-agent-kpi-resources {
      display: grid;
      gap: 8px;
      padding: 13px 14px 15px;
    }

    .amess-agent-kpi-resource {
      display: block;
      padding: 10px 11px;
      border: 1px solid #dfe5ee;
      border-radius: 10px;
      background: #f8fafc;
      color: #2056ad;
      font-size: 10px;
      font-weight: 800;
      line-height: 1.35;
      text-decoration: none;
    }

    .amess-agent-kpi-resource:hover,
    .amess-agent-kpi-resource:focus-visible {
      border-color: #8fb2e4;
      background: #eef5ff;
      outline: none;
    }

    .amess-agent-compliance-panel {
      overflow: hidden;
      border: 1px solid #dfe4ec;
      border-radius: 14px;
      background: #fff;
    }

    .amess-agent-compliance-heading {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
      padding: 17px 18px 10px;
    }

    .amess-agent-compliance-heading h3 {
      margin: 0;
      color: #172033;
      font-size: 20px;
      letter-spacing: -0.025em;
    }

    .amess-agent-compliance-heading p {
      margin: 5px 0 0;
      color: #667085;
      font-size: 11px;
      font-weight: 700;
      line-height: 1.45;
    }

    .amess-agent-compliance-years {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 6px;
    }

    .amess-agent-compliance-year {
      min-width: 66px;
      padding: 7px 11px;
      border: 0;
      border-radius: 8px;
      background: transparent;
      color: #57657a;
      font: inherit;
      font-size: 11px;
      font-weight: 800;
      cursor: pointer;
    }

    .amess-agent-compliance-year:hover,
    .amess-agent-compliance-year:focus-visible {
      background: #eef4ff;
      color: #155fca;
      outline: none;
    }

    .amess-agent-compliance-year[aria-pressed="true"] {
      background: #0969da;
      color: #fff;
    }

    .amess-agent-compliance-calendar {
      padding: 0 18px 17px;
    }

    .amess-agent-compliance-frame {
      overflow-x: auto;
      padding: 14px 14px 12px;
      border: 1px solid #d8dee4;
      border-radius: 10px;
      background: #fff;
    }

    .amess-agent-compliance-chart {
      width: max-content;
      min-width: 100%;
    }

    .amess-agent-compliance-months {
      display: grid;
      grid-template-columns: 33px repeat(var(--compliance-weeks), 13px);
      column-gap: 3px;
      min-height: 21px;
      color: #24292f;
      font-size: 10px;
      line-height: 16px;
    }

    .amess-agent-compliance-month {
      overflow: hidden;
      white-space: nowrap;
    }

    .amess-agent-compliance-grid-row {
      display: grid;
      grid-template-columns: 33px auto;
      column-gap: 3px;
      align-items: start;
    }

    .amess-agent-compliance-weekdays {
      display: grid;
      grid-template-rows: repeat(7, 13px);
      row-gap: 3px;
      color: #57606a;
      font-size: 9px;
      line-height: 13px;
    }

    .amess-agent-compliance-weekdays span:nth-child(1) { grid-row: 2; }
    .amess-agent-compliance-weekdays span:nth-child(2) { grid-row: 4; }
    .amess-agent-compliance-weekdays span:nth-child(3) { grid-row: 6; }

    .amess-agent-compliance-days {
      display: grid;
      grid-auto-flow: column;
      grid-template-rows: repeat(7, 13px);
      grid-template-columns: repeat(var(--compliance-weeks), 13px);
      gap: 3px;
    }

    .amess-agent-compliance-day,
    .amess-agent-compliance-blank {
      width: 13px;
      height: 13px;
      border-radius: 3px;
    }

    .amess-agent-compliance-day {
      position: relative;
      padding: 0;
      border: 1px solid rgba(27, 31, 36, 0.06);
      background: #ebedf0;
      cursor: default;
    }

    .amess-agent-compliance-day[data-star-day="true"] {
      border-color: #f59e0b;
      box-shadow: 0 0 0 1px #f59e0b;
    }

    .amess-agent-compliance-day[data-star-day="true"]::after,
    .amess-agent-compliance-legend i[data-star-day="true"]::after {
      content: "★";
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      color: #f59e0b;
      font-size: 9px;
      line-height: 1;
      text-shadow: 0 0 2px #fff, 0 0 2px #fff;
    }

    .amess-agent-compliance-day[data-level="1"] {
      background: #9be9a8;
      border-color: rgba(27, 31, 36, 0.05);
    }

    .amess-agent-compliance-day[data-level="2"] {
      background: #216e39;
      border-color: rgba(27, 31, 36, 0.08);
    }

    .amess-agent-compliance-day:hover,
    .amess-agent-compliance-day:focus-visible {
      outline: 2px solid #0969da;
      outline-offset: 1px;
    }

    .amess-agent-compliance-legend {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 6px;
      margin-top: 12px;
      color: #57606a;
      font-size: 10px;
      font-weight: 700;
    }

    .amess-agent-compliance-legend i {
      position: relative;
      width: 13px;
      height: 13px;
      border: 1px solid rgba(27, 31, 36, 0.06);
      border-radius: 3px;
      background: #ebedf0;
    }

    .amess-agent-compliance-legend i[data-level="1"] { background: #9be9a8; }
    .amess-agent-compliance-legend i[data-level="2"] { background: #216e39; }
    .amess-agent-compliance-legend i[data-star-day="true"] {
      border-color: #f59e0b;
      box-shadow: 0 0 0 1px #f59e0b;
    }

    .amess-agent-compliance-empty {
      display: grid;
      place-items: center;
      min-height: 120px;
      color: #737c8d;
      font-size: 11px;
      font-weight: 750;
      text-align: center;
    }

    .amess-agent-compliance-tooltip {
      position: fixed;
      z-index: 1400;
      width: max-content;
      max-width: min(280px, calc(100vw - 24px));
      display: grid;
      gap: 4px;
      padding: 10px 12px;
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: 9px;
      background: #1f2937;
      color: #fff;
      box-shadow: 0 12px 30px rgba(15, 23, 42, 0.28);
      font-size: 11px;
      line-height: 1.35;
      pointer-events: none;
    }

    .amess-agent-compliance-tooltip strong {
      font-size: 12px;
      text-transform: capitalize;
    }

    .amess-agent-compliance-tooltip span {
      color: rgba(255, 255, 255, 0.82);
    }

    .amess-agent-compliance-tooltip em {
      margin-top: 2px;
      color: #b7f7c5;
      font-style: normal;
      font-weight: 850;
    }

    #agentProfilePerformanceView { display: grid; gap: 16px; }

    .agent-profile-view-switch {
      display: flex; align-items: center; justify-content: space-between; gap: 14px;
      padding: 7px 8px; border: 1px solid #dce4f0; border-radius: 15px; background: #fff;
    }
    .agent-profile-view-tabs {
      flex: 0 0 auto; display: inline-flex; gap: 4px; padding: 3px;
      border-radius: 11px; background: #eef3fb;
    }
    .agent-profile-view-tabs button {
      min-height: 34px; padding: 7px 14px; border: 0; border-radius: 9px;
      background: transparent; color: #63718d; font-size: 11px; font-weight: 900; cursor: pointer;
    }
    .agent-profile-view-tabs button[aria-selected="true"] {
      background: #173a76; color: #fff; box-shadow: 0 5px 14px rgba(23, 58, 118, 0.2);
    }
    .agent-journal-view { display: grid; gap: 14px; }
    .agent-journal-view:has(.agent-journal-entry-popover:not(.hidden)) { padding-bottom: 112px; }
    .agent-journal-kicker {
      color: #2e6ed4; font-size: 9px; font-weight: 950; letter-spacing: 0.1em; text-transform: uppercase;
    }
    .agent-journal-add {
      min-height: 38px; padding: 8px 15px; border: 0; border-radius: 11px;
      background: #1f5ec7; color: #fff; font-size: 11px; font-weight: 900; cursor: pointer;
      box-shadow: 0 9px 20px rgba(31, 94, 199, 0.2);
    }

    .agent-journal-pinned { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .agent-journal-sticky {
      position: relative; min-width: 0; min-height: 126px; overflow: hidden;
      padding: 23px 17px 14px; border: 0; border-radius: 4px 4px 13px 4px;
      background: linear-gradient(145deg, #fff9b8 0%, #fff1a0 78%, #eed979 100%);
      box-shadow: 0 13px 24px rgba(81, 65, 16, 0.16), inset 0 1px rgba(255,255,255,0.7);
      transform: rotate(-0.7deg); transition: transform 160ms ease, box-shadow 160ms ease;
    }
    .agent-journal-sticky:nth-child(2n) { transform: rotate(0.55deg); background: linear-gradient(145deg, #fffbc9, #ffefa7 78%, #ead477); }
    .agent-journal-sticky:nth-child(3n) { transform: rotate(-0.25deg); }
    .agent-journal-sticky[data-note-color="pink"] { background: linear-gradient(145deg, #ffe1ec, #ffc8dc 78%, #eaa5bf); }
    .agent-journal-sticky[data-note-color="blue"] { background: linear-gradient(145deg, #dff2ff, #bfe2fb 78%, #91c7eb); }
    .agent-journal-sticky[data-note-color="green"] { background: linear-gradient(145deg, #e3f7d7, #ccecb8 78%, #9ed27e); }
    .agent-journal-sticky[data-note-color="lilac"] { background: linear-gradient(145deg, #eee3ff, #dcc8fb 78%, #bca2e8); }
    .agent-journal-sticky:hover { transform: translateY(-2px) rotate(0deg); box-shadow: 0 17px 28px rgba(81, 65, 16, 0.2); }
    .agent-journal-sticky::before {
      content: ""; position: absolute; top: 0; left: 50%; width: 54px; height: 14px;
      background: rgba(255,255,255,0.5); box-shadow: 0 1px 2px rgba(91,70,10,0.08);
      transform: translateX(-50%) rotate(-2deg);
    }
    .agent-journal-sticky::after {
      content: ""; position: absolute; right: 0; bottom: 0; border-style: solid;
      border-width: 0 0 20px 20px; border-color: transparent transparent #dfca6d transparent;
      filter: drop-shadow(-2px -2px 2px rgba(87,66,10,0.08));
    }
    .agent-journal-sticky-main { width: 100%; padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; }
    .agent-journal-sticky strong, .agent-journal-sticky p, .agent-journal-sticky small { display: block; }
    .agent-journal-sticky strong { color: #4d3b0a; font-size: 13px; line-height: 1.25; }
    .agent-journal-sticky p {
      display: -webkit-box; margin: 8px 0 10px; overflow: hidden; color: #75601e;
      font-size: 10px; line-height: 1.42; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    }
    .agent-journal-sticky small { color: #9a7c22; font-size: 8px; font-weight: 800; }
    .agent-journal-sticky-unpin {
      position: absolute; z-index: 3; top: 7px; right: 8px; display: grid; width: 22px; height: 22px;
      place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,0.48);
      color: rgba(74,55,8,0.65); font-size: 16px; font-weight: 700; line-height: 1; cursor: pointer;
    }
    .agent-journal-sticky-unpin:hover { background: rgba(255,255,255,0.75); color: #4d3b0a; }

    .agent-journal-timeline { position: relative; display: grid; gap: 10px; padding-left: 18px; }
    .agent-journal-timeline::before {
      content: ""; position: absolute; top: 8px; bottom: 8px; left: 5px; width: 2px;
      border-radius: 999px; background: #dce5f3;
    }
    .agent-journal-entry {
      position: relative; padding: 14px 15px; border: 1px solid #dce4f0;
      border-radius: 15px; background: #fff;
    }
    .agent-journal-entry::before {
      content: ""; position: absolute; top: 20px; left: -18px; width: 9px; height: 9px;
      box-sizing: border-box; border: 2px solid #fff; border-radius: 50%; background: #2e6ed4;
      box-shadow: 0 0 0 2px #a9c4ef;
    }
    .agent-journal-entry-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
    .agent-journal-entry-category {
      display: inline-flex; align-items: center; gap: 6px; color: #2e6ed4;
      font-size: 8px; font-weight: 950; letter-spacing: 0.07em; text-transform: uppercase;
    }
    .agent-journal-entry h4 { margin: 4px 0 0; color: #172452; font-size: 15px; }
    .agent-journal-entry-menu { position: relative; flex: 0 0 auto; }
    .agent-journal-menu-trigger {
      display: grid; width: 30px; height: 30px; place-items: center; padding: 0;
      border: 1px solid #d8e1ef; border-radius: 9px; background: #f8faff;
      color: #315a9c; font-size: 17px; font-weight: 900; line-height: 1; cursor: pointer;
      list-style: none;
    }
    .agent-journal-entry-popover {
      position: absolute; z-index: 5; top: 34px; right: 0; display: grid; min-width: 168px;
      padding: 5px; border: 1px solid #dce4f0; border-radius: 11px; background: #fff;
      box-shadow: 0 14px 32px rgba(18, 40, 82, 0.18);
    }
    .agent-journal-entry-popover button, .agent-journal-entry-popover a {
      display: block; box-sizing: border-box; width: 100%;
      padding: 8px 9px; border: 0; border-radius: 8px; background: transparent;
      color: #344a70; font-size: 9px; font-weight: 850; text-align: left; text-decoration: none; cursor: pointer;
    }
    .agent-journal-entry-popover button:hover, .agent-journal-entry-popover a:hover { background: #f1f5fb; color: #1f5ec7; }
    .agent-journal-entry-date-line { display: flex; align-items: center; gap: 6px; }
    .agent-journal-info {
      position: relative; display: inline-grid; width: 15px; height: 15px; place-items: center;
      border: 1px solid #bdc9db; border-radius: 50%; color: #7b89a0; font-size: 8px;
      font-weight: 950; cursor: help; text-transform: none;
    }
    .agent-journal-info::after {
      content: attr(data-tooltip); position: absolute; z-index: 6; top: 21px; left: 0;
      width: max-content; max-width: 260px; padding: 7px 9px; border-radius: 8px;
      background: #172452; color: #fff; font-size: 8px; font-weight: 750;
      line-height: 1.35; opacity: 0; pointer-events: none; transform: translateY(-3px);
      transition: opacity 140ms ease, transform 140ms ease;
    }
    .agent-journal-info:hover::after, .agent-journal-info:focus::after { opacity: 1; transform: translateY(0); }
    .agent-journal-entry-body {
      margin: 9px 0 0; color: #4d5c77; font-size: 11px; line-height: 1.55; white-space: pre-wrap;
    }
    .agent-journal-follow-up {
      display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 9px;
      color: #7a879e; font-size: 9px; font-weight: 750;
    }
    .agent-journal-follow-up {
      width: fit-content; padding: 6px 9px; border-radius: 9px; background: #f1f6ff; color: #315a9c;
    }
    .agent-journal-attachments { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
    .agent-journal-attachment {
      display: inline-flex; align-items: center; gap: 6px; max-width: 220px; padding: 6px 9px;
      border: 1px solid #dce4f0; border-radius: 9px; background: #f8faff; color: #315a9c;
      font-size: 9px; font-weight: 800; text-decoration: none;
    }

    .agent-journal-comments { margin-top: 10px; border-top: 1px solid #edf1f7; padding-top: 8px; }
    .agent-journal-comments-empty { display: none; }
    .agent-journal-comments-empty:target { display: block; }
    .agent-journal-comments-panel-collapsed { display: none; }
    .agent-journal-comments:target .agent-journal-comments-panel { display: block; }
    .agent-journal-comments-toggle {
      width: fit-content; color: #718099; font-size: 9px; font-weight: 850; cursor: pointer; list-style: none;
      padding: 0; border: 0; background: transparent;
    }
    .agent-journal-comments-panel { margin-top: 7px; }
    .agent-journal-comment-list { display: grid; gap: 6px; margin-top: 7px; }
    .agent-journal-comment { padding: 7px 9px; border-radius: 9px; background: #f6f8fc; color: #52617b; font-size: 9px; line-height: 1.4; }
    .agent-journal-comment strong { color: #263e6a; }
    .agent-journal-comment-form { display: flex; gap: 6px; margin-top: 7px; }
    .agent-journal-comment-form input {
      min-width: 0; flex: 1; min-height: 30px; padding: 6px 9px; border: 1px solid #d8e1ef;
      border-radius: 9px; font: inherit; font-size: 9px;
    }
    .agent-journal-comment-form button {
      padding: 6px 10px; border: 0; border-radius: 9px; background: #e9f0fb;
      color: #315a9c; font-size: 9px; font-weight: 900; cursor: pointer;
    }
    .agent-journal-empty, .agent-journal-status { padding: 20px; color: #748198; font-size: 11px; text-align: center; }
    .agent-journal-status:empty { display: none; }

    .agent-journal-editor-backdrop {
      position: fixed; inset: 0; z-index: 1400; display: grid; place-items: center;
      padding: 22px; background: rgba(7, 18, 43, 0.62); backdrop-filter: blur(6px);
    }
    .agent-journal-editor {
      width: min(680px, 100%); max-height: calc(100vh - 44px); overflow: auto; padding: 20px;
      border-radius: 20px; background: #fff; box-shadow: 0 28px 80px rgba(5, 16, 40, 0.34);
    }
    .agent-journal-editor-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
    .agent-journal-editor-head span { color: #2e6ed4; font-size: 9px; font-weight: 950; letter-spacing: 0.1em; text-transform: uppercase; }
    .agent-journal-editor-head h3 { margin: 4px 0 0; color: #172452; font-size: 22px; }
    .agent-journal-editor-head button {
      width: 34px; height: 34px; border: 1px solid #dce4f0; border-radius: 10px;
      background: #f8faff; color: #52617b; font-size: 20px; cursor: pointer;
    }
    .agent-journal-editor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
    .agent-journal-editor-grid label { display: grid; gap: 6px; color: #51617d; font-size: 9px; font-weight: 900; text-transform: uppercase; }
    .agent-journal-editor-grid input, .agent-journal-editor-grid select, .agent-journal-editor-grid textarea {
      width: 100%; box-sizing: border-box; padding: 10px 11px; border: 1px solid #ced9ea;
      border-radius: 10px; background: #fbfcff; color: #172452; font: inherit;
      font-size: 11px; font-weight: 700; text-transform: none;
    }
    .agent-journal-editor-grid textarea { resize: vertical; }
    .agent-journal-editor-wide { grid-column: 1 / -1; }
    .agent-journal-files small { color: #8792a7; font-size: 8px; text-transform: none; }
    .agent-journal-pin-control {
      grid-column: 1 / -1; display: flex !important; align-items: center;
      gap: 8px !important; text-transform: none !important;
    }
    .agent-journal-pin-control input { width: auto; }
    .agent-journal-color-picker {
      grid-column: 1 / -1; display: flex; align-items: center; gap: 9px;
      margin: 0; padding: 0; border: 0;
    }
    .agent-journal-color-picker legend {
      float: left; margin-right: 4px; color: #51617d; font-size: 9px;
      font-weight: 900; text-transform: uppercase;
    }
    .agent-journal-color-picker label { position: relative; display: block; cursor: pointer; }
    .agent-journal-color-picker input { position: absolute; opacity: 0; pointer-events: none; }
    .agent-journal-color-picker span {
      display: block; width: 25px; height: 25px; box-sizing: border-box; border: 2px solid #fff;
      border-radius: 50%; background: #fff1a0; box-shadow: 0 0 0 1px #cbd5e4;
    }
    .agent-journal-color-picker span[data-note-color="pink"] { background: #ffc8dc; }
    .agent-journal-color-picker span[data-note-color="blue"] { background: #bfe2fb; }
    .agent-journal-color-picker span[data-note-color="green"] { background: #ccecb8; }
    .agent-journal-color-picker span[data-note-color="lilac"] { background: #dcc8fb; }
    .agent-journal-color-picker input:checked + span { box-shadow: 0 0 0 3px #2e6ed4; transform: scale(1.04); }
    .agent-journal-editor-status { min-height: 16px; margin-top: 10px; color: #b03d3d; font-size: 10px; font-weight: 750; }
    .agent-journal-editor-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
    .agent-journal-editor-actions button {
      min-height: 38px; padding: 8px 15px; border: 1px solid #d7e0ed; border-radius: 10px;
      background: #f7f9fd; color: #52617b; font-size: 10px; font-weight: 900; cursor: pointer;
    }
    .agent-journal-editor-actions button[type="submit"] { border-color: #1f5ec7; background: #1f5ec7; color: #fff; }

    .amess-agent-kpi-status {
      min-height: 0;
      color: #737c8d;
      font-size: 9px;
      font-weight: 750;
    }

    .amess-agent-kpi-status:empty {
      display: none;
    }

    @media (max-width: 960px) {
      .amess-dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
          "chart chart"
          "messages messages"
          "first trial";
      }

      .amess-dashboard-kpis {
        grid-template-columns: repeat(6, minmax(0, 1fr));
      }

      .amess-kpi-card[data-card="agents"],
      .amess-kpi-card[data-card="active-time"],
      .amess-kpi-card[data-card="call-duration"] {
        grid-column: span 2;
      }

      .amess-kpi-card[data-card="calls"],
      .amess-kpi-card[data-card="appointments"],
      .amess-kpi-card[data-card="valid"],
      .amess-kpi-card[data-card="qualified"],
      .amess-kpi-card[data-card="sales"],
      .amess-kpi-card[data-card="appointment-rate"],
      .amess-kpi-card[data-card="call-rate"] {
        grid-column: span 3;
      }

      .amess-dashboard-messages-panel {
        min-height: 0;
      }

      .amess-agent-kpi-hero {
        grid-template-columns: 1fr;
      }

      .amess-agent-kpi-backdrop.self-only .amess-agent-kpi-hero {
        grid-template-columns: 1fr;
      }

      .amess-agent-kpi-controls {
        justify-content: flex-start;
        flex-wrap: wrap;
      }

      .amess-agent-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .agent-journal-pinned { grid-template-columns: 1fr; }
    }

    @media (max-width: 640px) {
      .amess-dashboard-panel-head,
      .amess-dashboard-standards-head {
        align-items: flex-start;
        flex-direction: column;
      }

      .amess-dashboard-range,
      .amess-dashboard-standards-range {
        align-items: stretch;
        flex-direction: column;
        gap: 8px;
      }

      .amess-dashboard-range button,
      .amess-dashboard-standards-range button {
        width: 100%;
      }

      .amess-dashboard-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding-inline: 12px;
      }

      .amess-kpi-card[data-card="agents"],
      .amess-kpi-card[data-card="active-time"],
      .amess-kpi-card[data-card="call-duration"],
      .amess-kpi-card[data-card="valid"],
      .amess-kpi-card[data-card="qualified"],
      .amess-kpi-card[data-card="sales"] {
        grid-column: span 1;
      }

      .amess-kpi-card[data-card="calls"],
      .amess-kpi-card[data-card="appointments"],
      .amess-kpi-card[data-card="appointment-rate"],
      .amess-kpi-card[data-card="call-rate"] {
        grid-column: 1 / -1;
      }

      .amess-dashboard-grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
          "chart"
          "messages"
          "first"
          "trial";
      }

      .amess-agent-kpi-backdrop {
        padding: 0;
      }

      .amess-agent-kpi-dialog {
        max-height: 100vh;
        min-height: 100vh;
        border-radius: 0;
      }

      .amess-agent-kpi-backdrop.self-only .amess-agent-kpi-dialog {
        max-height: none;
        min-height: 0;
        border-radius: 18px;
      }

      .amess-agent-kpi-controls,
      .amess-agent-kpi-controls label {
        width: 100%;
      }

      .amess-agent-kpi-refresh {
        width: 100%;
      }

      .amess-agent-kpi-refresh span {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        clip-path: none;
      }

      .amess-agent-kpi-grid,
      .amess-agent-kpi-lower {
        grid-template-columns: 1fr;
      }

      .agent-profile-view-switch {
        align-items: stretch;
        flex-direction: column;
      }

      .agent-profile-view-tabs,
      .agent-journal-add { width: 100%; }
      .agent-profile-view-tabs button { flex: 1; }
      .agent-journal-editor-grid { grid-template-columns: 1fr; }
      .agent-journal-editor-wide { grid-column: auto; }

      .amess-agent-compliance-heading {
        align-items: stretch;
        flex-direction: column;
      }

      .amess-agent-compliance-years {
        justify-content: flex-start;
      }

    }

    .agent-attention-section {
      margin-bottom: 22px;
      padding: 20px;
      border: 1px solid #e3e6eb;
      border-radius: 22px;
      background: rgba(255, 255, 255, 0.88);
      box-shadow: 0 12px 38px rgba(27, 36, 54, 0.045);
    }

    .agent-attention-head,
    .agent-roster-head,
    .agent-intelligence-pagination {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
    }

    .agent-attention-head {
      margin-bottom: 14px;
    }

    .agent-attention-controls {
      display: flex;
      align-items: center;
    }

    .agent-attention-counter {
      min-width: auto;
      margin: 0;
      padding: 6px 10px;
      border-radius: 999px;
      background: #eef2f7;
      color: #667083;
      font-size: 10px;
      font-weight: 900;
    }

    .agent-attention-head h3,
    .agent-roster-title h3 {
      margin: 0;
      color: #172033;
      font-size: 20px;
      letter-spacing: -0.025em;
    }

    .agent-attention-head span,
    .agent-roster-title p {
      margin: 4px 0 0;
      color: #858c99;
      font-size: 12px;
    }

    .agent-attention-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    .agent-insight {
      position: relative;
      min-width: 0;
      min-height: 112px;
      padding: 12px 13px 11px 17px;
      border: 1px solid #e8e9ec;
      border-radius: 15px;
      background: #fbfbfc;
      color: #313949;
      line-height: 1.35;
      animation: agentInsightEnter 0.22s ease-out;
    }

    @keyframes agentInsightEnter {
      from { opacity: 0; transform: translateX(10px); }
      to { opacity: 1; transform: translateX(0); }
    }

    .agent-insight::before {
      content: "";
      position: absolute;
      top: 12px;
      bottom: 12px;
      left: 0;
      width: 3px;
      border-radius: 999px;
      background: #a3afc1;
    }

    .agent-insight[data-type="follow_up"]::before,
    .agent-insight[data-type="decline"]::before,
    .agent-insight[data-type="resource"]::before {
      background: #b96b64;
    }

    .agent-insight[data-type="improvement"]::before {
      background: #4d8a70;
    }

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

    .agent-insight-type {
      color: #8a919e;
      font-size: 8px;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .agent-insight-agent {
      display: block;
      margin-top: 8px;
      overflow: hidden;
      color: #273043;
      font-size: 12px;
      font-weight: 900;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .agent-insight-metric {
      display: flex;
      align-items: baseline;
      gap: 8px;
      margin-top: 7px;
    }

    .agent-insight-metric strong {
      flex: 0 0 auto;
      color: #20293a;
      font-size: 21px;
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.035em;
    }

    .agent-insight-metric span {
      min-width: 0;
      margin: 0;
      overflow: hidden;
      color: #7f8795;
      font-size: 9px;
      line-height: 1.35;
      text-overflow: ellipsis;
    }

    .agent-insight-done {
      flex: 0 0 auto;
      width: 27px;
      height: 27px;
      padding: 0;
      border: 1px solid #dce3df;
      border-radius: 50%;
      background: #fff;
      color: #6f7b75;
      font-size: 12px;
      font-weight: 900;
      cursor: pointer;
    }

    .agent-insight-done:hover,
    .agent-insight-done:focus-visible {
      border-color: #9fc4ae;
      background: #eef8f2;
      color: #397052;
      outline: none;
    }

    .agent-insight-done:disabled {
      opacity: 0.55;
      cursor: wait;
    }

    .agent-attention-empty {
      padding: 18px;
      border: 1px dashed #daddE4;
      border-radius: 14px;
      color: #737b89;
      font-size: 13px;
    }

    .agent-roster-panel {
      min-width: 0;
      max-width: 100%;
      border: 1px solid #e3e6eb;
      border-radius: 22px;
      background: rgba(255, 255, 255, 0.92);
      box-shadow: 0 12px 38px rgba(27, 36, 54, 0.045);
      overflow: hidden;
    }

    .agent-roster-head {
      align-items: flex-end;
      padding: 22px 24px 18px;
      border-bottom: 1px solid #eceef2;
    }

    .agent-classification-filters {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 6px;
    }

    .agent-classification-filter {
      min-height: 32px;
      padding: 6px 10px;
      border: 1px solid #e0e4ea;
      border-radius: 999px;
      background: #fafbfc;
      color: #636b79;
      font-size: 11px;
      font-weight: 800;
      cursor: pointer;
    }

    .agent-classification-filter.active {
      border-color: #bdc9dd;
      background: #eaf0fa;
      color: #2e466f;
    }

    .agent-roster-scroll {
      width: 100%;
      max-width: 100%;
      overflow-x: auto;
    }

    .agent-roster-table {
      min-width: 1120px;
    }

    .agent-roster-table-head,
    .agent-roster-row {
      display: grid;
      grid-template-columns: minmax(190px, 1.5fr) 160px 90px 112px 112px 100px 92px 92px 86px;
      align-items: center;
      gap: 10px;
      padding: 0 24px;
    }

    .agent-roster-table-head {
      min-height: 44px;
      color: #8a919d;
      font-size: 9px;
      font-weight: 900;
      letter-spacing: 0.075em;
      text-transform: uppercase;
    }

    .agent-roster-row {
      width: 100%;
      min-height: 72px;
      border: 0;
      border-top: 1px solid #eff0f3;
      background: #fff;
      color: #242c3a;
      text-align: left;
      cursor: pointer;
      transition: background 0.16s ease;
    }

    .agent-roster-row:hover,
    .agent-roster-row:focus-visible {
      outline: none;
      background: #f8fafc;
    }

    .agent-roster-person {
      display: flex;
      align-items: center;
      min-width: 0;
      gap: 11px;
    }

    .agent-roster-avatar,
    .agent-detail-avatar {
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      border-radius: 999px;
      background: #e9edf4;
      color: #43516a;
      font-weight: 900;
    }

    .agent-roster-avatar {
      width: 36px;
      height: 36px;
      font-size: 11px;
    }

    .agent-roster-name {
      min-width: 0;
    }

    .agent-roster-name strong,
    .agent-roster-name span {
      display: block;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .agent-roster-name strong {
      color: #202838;
      font-size: 13px;
    }

    .agent-roster-name span {
      margin-top: 4px;
      color: #9299a5;
      font-size: 10px;
    }

    .agent-classification {
      display: inline-flex;
      width: fit-content;
      max-width: 150px;
      align-items: center;
      gap: 7px;
      color: #586170;
      font-size: 11px;
      font-weight: 850;
      line-height: 1.25;
    }

    .agent-classification::before {
      content: "";
      width: 7px;
      height: 7px;
      flex: 0 0 auto;
      border-radius: 999px;
      background: #9ea7b5;
    }

    .agent-classification[data-status="high_performer"]::before { background: #4c8a6d; }
    .agent-classification[data-status="low_effort"]::before,
    .agent-classification[data-status="possible_resource_burner"]::before { background: #aa625d; }
    .agent-classification[data-status="conversation_gap"]::before,
    .agent-classification[data-status="skill_gap"]::before,
    .agent-classification[data-status="follow_up_gap"]::before,
    .agent-classification[data-status="appointment_quality_gap"]::before { background: #ad8353; }

    .agent-roster-metric {
      color: #424b5b;
      font-size: 12px;
      font-variant-numeric: tabular-nums;
    }

    .agent-roster-metric strong {
      color: #1e2737;
      font-size: 13px;
    }

    .agent-roster-metric small {
      display: block;
      margin-top: 3px;
      color: #979eaa;
      font-size: 9px;
    }

    .agent-trend {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      color: #747d8b;
      font-size: 11px;
      font-weight: 800;
    }

    .agent-trend.up { color: #4f8069; }
    .agent-trend.down { color: #9e625d; }

    .agent-intelligence-status {
      padding: 36px 24px;
      color: #737b89;
      text-align: center;
      font-size: 13px;
    }

    .agent-intelligence-pagination {
      min-height: 58px;
      padding: 10px 24px;
      border-top: 1px solid #eceef2;
      color: #858d9a;
      font-size: 11px;
    }

    .agent-intelligence-page-actions {
      display: flex;
      gap: 7px;
    }

    .agent-intelligence-page-actions button {
      min-width: 34px;
      height: 34px;
      padding: 0 10px;
      border: 1px solid #e0e4ea;
      border-radius: 9px;
      background: #fff;
      color: #555f70;
      font-weight: 800;
      cursor: pointer;
    }

    .agent-intelligence-page-actions button:disabled {
      opacity: 0.42;
      cursor: default;
    }

    .agent-detail-backdrop {
      position: fixed;
      z-index: 110;
      inset: 0;
      border: 0;
      background: rgba(20, 28, 42, 0.28);
      backdrop-filter: blur(2px);
      cursor: default;
    }

    .agent-detail-panel {
      position: fixed;
      z-index: 111;
      top: 0;
      right: 0;
      bottom: 0;
      width: min(560px, 100vw);
      padding: 26px;
      overflow-y: auto;
      background: #f7f8fa;
      box-shadow: -24px 0 60px rgba(24, 34, 52, 0.18);
    }

    .agent-detail-close {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 38px;
      height: 38px;
      border: 1px solid #dde2e9;
      border-radius: 999px;
      background: #fff;
      color: #5d6675;
      font-size: 22px;
      cursor: pointer;
    }

    .agent-detail-identity {
      display: flex;
      align-items: center;
      gap: 14px;
      padding-right: 52px;
    }

    .agent-detail-avatar {
      width: 52px;
      height: 52px;
      font-size: 15px;
    }

    .agent-detail-identity h3 {
      margin: 0 0 6px;
      color: #171f2e;
      font-size: 24px;
      letter-spacing: -0.035em;
    }

    .agent-detail-context {
      margin: 18px 0 14px;
      padding: 13px 15px;
      border: 1px solid #e3e6eb;
      border-radius: 13px;
      background: #fff;
      color: #606978;
      font-size: 12px;
      line-height: 1.5;
    }

    .agent-detail-dimensions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .agent-dimension-card {
      padding: 17px;
      border: 1px solid #e1e5eb;
      border-radius: 16px;
      background: #fff;
    }

    .agent-dimension-card h4 {
      margin: 0 0 13px;
      color: #2d3646;
      font-size: 12px;
      letter-spacing: 0.015em;
    }

    .agent-dimension-row {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 10px;
      padding: 7px 0;
      border-top: 1px solid #f0f1f3;
      color: #7d8491;
      font-size: 10px;
    }

    .agent-dimension-row strong {
      color: #303949;
      font-size: 11px;
      text-align: right;
      font-variant-numeric: tabular-nums;
    }

    .agent-appointment-funnel {
      display: grid;
      grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
      align-items: center;
      gap: 8px;
      margin-top: 10px;
      padding: 18px;
      border: 1px solid #e1e5eb;
      border-radius: 16px;
      background: #fff;
    }

    .agent-funnel-stage {
      text-align: center;
    }

    .agent-funnel-stage span,
    .agent-funnel-stage strong {
      display: block;
    }

    .agent-funnel-stage span {
      color: #888f9b;
      font-size: 9px;
      font-weight: 850;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .agent-funnel-stage strong {
      margin-top: 6px;
      color: #253047;
      font-size: 22px;
    }

    .agent-funnel-arrow {
      color: #a6adba;
      font-size: 15px;
    }

    .agent-funnel-note {
      grid-column: 1 / -1;
      margin: 4px 0 0;
      padding-top: 12px;
      border-top: 1px solid #eef0f3;
      color: #697281;
      font-size: 11px;
      text-align: center;
    }

    @media (max-width: 1400px) {
      .agent-attention-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

    }

    @media (max-width: 720px) {
      .workspace-header.agent-intelligence-active {
        align-items: stretch;
        flex-direction: column;
      }

      .workspace-header-actions.has-agent-intelligence-filters {
        align-items: flex-start;
        flex-wrap: wrap;
        width: 100%;
      }

      .workspace-header-actions.has-agent-intelligence-filters .workspace-notification-wrap {
        order: -1;
        margin-left: auto;
      }

      .agent-intelligence-heading h2 {
        font-size: 36px;
      }

      .agent-intelligence-filters,
      .agent-detail-dimensions {
        grid-template-columns: 1fr;
        width: 100%;
      }

      .agent-attention-section,
      .agent-roster-head {
        padding: 18px;
      }

      .agent-attention-head {
        align-items: flex-start;
      }

      .agent-team-pulse-head {
        padding: 9px 14px 8px;
      }

      .agent-team-pulse-head p {
        max-width: 62vw;
      }

      .agent-team-pulse-metric {
        width: 235px;
      }

      .agent-attention-grid {
        grid-template-columns: 1fr;
      }

      .agent-roster-head {
        align-items: flex-start;
        flex-direction: column;
      }

      .agent-classification-filters {
        justify-content: flex-start;
      }

      .agent-detail-panel {
        padding: 22px 16px;
      }

      .agent-appointment-funnel {
        gap: 4px;
        padding: 14px 10px;
      }
    }

    .agents-card {
      display: block;
      padding: 0;
      overflow: hidden;
      background: #f7faff;
    }

    .agents-catalog-view {
      padding: 28px;
      min-height: 560px;
      background:
        radial-gradient(circle at 100% 0%, rgba(61, 106, 242, 0.12), transparent 34%),
        #f7faff;
    }

    .agents-catalog-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 24px;
    }

    .agents-catalog-head h2 {
      margin: 0;
      color: #14284e;
      font-size: clamp(28px, 4vw, 42px);
      letter-spacing: -0.045em;
    }

    .agents-catalog-head p {
      margin: 7px 0 0;
      color: #7180a1;
      font-size: 14px;
    }

    .agents-eyebrow.agents-eyebrow-dark {
      color: #5570a8;
    }

    .agents-catalog-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
      align-items: stretch;
    }

    .agent-catalog-card {
      position: relative;
      min-height: 245px;
      padding: 22px;
      border: 1px solid #dce6f5;
      border-radius: 24px;
      background: linear-gradient(180deg, #ffffff, #f9fbff);
      box-shadow: 0 18px 42px rgba(31, 75, 157, 0.08);
      display: flex;
      flex-direction: column;
      transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    }

    .agent-catalog-card:hover {
      transform: translateY(-3px);
      border-color: #b9cbf2;
      box-shadow: 0 24px 48px rgba(31, 75, 157, 0.13);
    }

    .agent-card-settings {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 38px;
      height: 38px;
      padding: 9px;
      border: 1px solid #dce5f4;
      border-radius: 12px;
      background: #fff;
      color: #5570a8;
      cursor: pointer;
    }

    .agent-card-settings svg,
    .agents-config-btn svg {
      width: 100%;
      height: 100%;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.7;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .agent-card-icon {
      width: 54px;
      height: 54px;
      display: grid;
      place-items: center;
      margin-bottom: 17px;
      border-radius: 17px;
      background: linear-gradient(135deg, #153578, #3275f5);
      color: #fff;
      box-shadow: 0 12px 24px rgba(49, 87, 216, 0.22);
    }

    .agent-card-icon svg {
      width: 27px;
      height: 27px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .agent-card-status {
      display: flex;
      align-items: center;
      gap: 7px;
      color: #5570a8;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .agent-card-status span {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: #39b774;
    }

    .agent-catalog-card h3 {
      margin: 10px 0 7px;
      color: #152a50;
      font-size: 21px;
      letter-spacing: -0.025em;
    }

    .agent-catalog-card p {
      margin: 0 0 16px;
      color: #7180a1;
      font-size: 13px;
      line-height: 1.55;
    }

    .agent-card-meta {
      margin-top: auto;
      color: #8795b0;
      font-size: 11px;
    }

    .agent-card-open {
      margin-top: auto;
      min-height: 42px;
      border: 0;
      border-radius: 13px;
      background: #edf3ff;
      color: #3157d8;
      font-weight: 900;
      cursor: pointer;
    }

    .level-manager-shell {
      min-height: 620px;
      background: #f4f7fb;
    }

    .level-manager-hero {
      align-items: center;
      padding: 22px 28px;
    }

    .level-manager-hero .agents-hero-copy {
      display: grid;
      gap: 8px;
    }

    .level-manager-hero .agents-back-btn {
      margin-bottom: 0;
    }

    .level-manager-hero h2 {
      margin: 0;
    }

    .level-manager-hero-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 14px;
    }

    .level-manager-period {
      margin: 0;
      color: rgba(255, 255, 255, 0.74);
      font-size: 12px;
      font-weight: 750;
      text-align: right;
    }

    .level-manager-refresh {
      min-height: 42px;
      padding: 0 16px;
      border: 1px solid rgba(255, 255, 255, 0.28);
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.12);
      color: #fff;
      font-weight: 850;
      cursor: pointer;
      backdrop-filter: blur(8px);
    }

    .level-manager-refresh:hover {
      background: rgba(255, 255, 255, 0.2);
    }

    .level-manager-summary {
      padding: 22px 26px 16px;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
    }

    .level-manager-summary article {
      position: relative;
      min-height: 84px;
      padding: 15px 16px 14px 20px;
      overflow: hidden;
      border: 1px solid #dfe6f1;
      border-radius: 16px;
      background: #fff;
      box-shadow: 0 8px 24px rgba(25, 52, 96, 0.04);
    }

    .level-manager-summary article::before {
      position: absolute;
      inset: 0 auto 0 0;
      width: 4px;
      border-radius: 16px 0 0 16px;
      background: var(--level-color, #3478f6);
      content: "";
    }

    .level-manager-summary strong,
    .level-manager-summary span {
      display: block;
    }

    .level-manager-summary strong {
      color: #132c58;
      font-size: 28px;
      line-height: 1;
    }

    .level-manager-summary span {
      margin-top: 8px;
      color: #7182a2;
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
    }

    .level-manager-quality {
      margin: 0 26px 16px;
      border: 1px solid #dce6f2;
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.76);
    }

    .level-manager-quality summary {
      padding: 12px 15px;
      color: #31547e;
      font-size: 12px;
      font-weight: 850;
      cursor: pointer;
    }

    .level-manager-quality p {
      margin: 0;
      padding: 0 15px 13px;
      color: #70809c;
      font-size: 12px;
      line-height: 1.5;
    }

    .level-manager-table-wrap {
      margin: 0 26px 26px;
      overflow-x: auto;
      border: 1px solid #dfe6f1;
      border-radius: 18px;
      background: #fff;
    }

    .level-manager-table {
      width: 100%;
      min-width: 930px;
      border-collapse: collapse;
    }

    .level-manager-table th,
    .level-manager-table td {
      padding: 15px 14px;
      border-bottom: 1px solid #edf1f6;
      text-align: left;
      vertical-align: middle;
    }

    .level-manager-table th {
      background: #f5f8fd;
      color: #64779a;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .level-manager-table td {
      color: #233c66;
      font-size: 12px;
    }

    .level-manager-table td strong {
      color: #132c58;
      font-size: 13px;
    }

    .level-manager-table td small {
      display: block;
      margin-top: 4px;
      color: #8190aa;
      font-size: 10px;
      line-height: 1.35;
    }

    .level-manager-state {
      color: #273f66;
      font-weight: 850;
    }

    .level-manager-state[data-state="critical"] {
      color: #bd3440;
    }

    .level-manager-state[data-state="progress"] {
      color: #315dc2;
    }

    .level-manager-state[data-state="stable"] {
      color: #168052;
    }

    .level-manager-followup {
      min-width: 245px;
    }

    .level-manager-followup-reasons {
      max-width: 310px;
      color: #485c7d !important;
      line-height: 1.45 !important;
    }

    .level-manager-history {
      margin-top: 7px;
    }

    .level-manager-history summary {
      width: fit-content;
      color: #3766ba;
      font-size: 10px;
      font-weight: 850;
      cursor: pointer;
    }

    .level-manager-history-list {
      display: grid;
      gap: 5px;
      margin-top: 7px;
      padding: 8px 9px;
      border-radius: 10px;
      background: #f5f8fd;
    }

    .level-manager-history-list span {
      color: #5f718f;
      font-size: 10px;
      line-height: 1.35;
    }

    .level-manager-progress {
      min-width: 120px;
    }

    .level-manager-progress > div {
      height: 7px;
      margin-top: 6px;
      overflow: hidden;
      border-radius: 99px;
      background: #e8eef7;
    }

    .level-manager-progress > div span {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: #2f72ef;
    }

    .level-manager-badge {
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      padding: 0 10px;
      border-radius: 99px;
      background: #edf3ff;
      color: #315dc2;
      font-size: 10px;
      font-weight: 900;
      white-space: nowrap;
    }

    .level-manager-badge[data-state="critical"] { background: #fff0f1; color: #bf3340; }
    .level-manager-badge[data-state="risk"] { background: #fff6e7; color: #a76100; }
    .level-manager-badge[data-state="stable"] { background: #eaf8f1; color: #158052; }
    .level-manager-badge[data-state="new_hire"] { background: #eef2ff; color: #555bc0; }
    .level-manager-badge[data-state="watch"] { background: #f0f3f8; color: #667590; }

    .level-manager-level-pro { background: #eaf8f1; color: #158052; }
    .level-manager-level-elite { background: #fff4db; color: #9a6500; }
    .level-manager-level-core { background: #edf3ff; color: #315dc2; }

    .level-manager-status {
      padding: 32px;
      color: #64779a;
      text-align: center;
      font-weight: 750;
    }

    @media (max-width: 900px) {
      .level-manager-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .level-manager-hero { align-items: flex-start; flex-direction: column; }
      .level-manager-hero-actions { width: 100%; justify-content: space-between; }
      .level-manager-period { text-align: left; }
    }

    .agents-hero {
      padding: 26px 28px;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 20px;
      background:
        radial-gradient(circle at 90% 0%, rgba(74, 112, 255, 0.2), transparent 42%),
        linear-gradient(135deg, #10285f, #183f94);
      color: white;
    }

    .agents-hero-copy {
      max-width: 680px;
    }

    .agents-eyebrow {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 10px;
      color: rgba(255, 255, 255, 0.72);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .agents-mode-dot {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: #66e3a4;
      box-shadow: 0 0 0 5px rgba(102, 227, 164, 0.12);
    }

    .agents-hero h2 {
      margin: 0;
      font-size: clamp(25px, 3vw, 34px);
      letter-spacing: -0.035em;
    }

    .agents-hero p {
      max-width: 620px;
      margin: 9px 0 0;
      color: rgba(255, 255, 255, 0.75);
      font-size: 14px;
      line-height: 1.55;
    }

    .agents-safety-badge {
      flex: 0 0 auto;
      padding: 9px 12px;
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.09);
      color: rgba(255, 255, 255, 0.9);
      font-size: 12px;
      font-weight: 800;
    }

    .agents-safety-badge-light {
      border-color: #dce6f5;
      background: #fff;
      color: #5570a8;
    }

    .agents-back-btn {
      margin: 0 0 15px;
      padding: 0;
      border: 0;
      background: none;
      color: rgba(255, 255, 255, 0.75);
      font: inherit;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
    }

    .agents-config-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 13px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: 13px;
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
      font-weight: 900;
      cursor: pointer;
    }

    .agents-config-btn svg {
      width: 18px;
      height: 18px;
    }

    .agents-workspace {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.72fr);
      gap: 18px;
      padding: 20px;
    }

    .agents-panel {
      min-width: 0;
      padding: 20px;
      border: 1px solid #dfe8f6;
      border-radius: 22px;
      background: white;
      box-shadow: 0 14px 34px rgba(31, 75, 157, 0.07);
    }

    .agents-panel-head {
      margin-bottom: 16px;
    }

    .agents-panel-head h3 {
      margin: 0;
      color: #152a50;
      font-size: 18px;
    }

    .agents-panel-head p {
      margin: 5px 0 0;
      color: #7180a1;
      font-size: 13px;
      line-height: 1.45;
    }

    .agents-form {
      display: grid;
      gap: 15px;
    }

    .agents-field {
      display: grid;
      gap: 7px;
    }

    .agents-field label {
      color: #29457b;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .agents-field textarea,
    .agents-field input[type="file"] {
      width: 100%;
      box-sizing: border-box;
      border: 1px solid #dbe5f4;
      border-radius: 14px;
      background: #fbfdff;
      color: #1d3058;
      font: inherit;
    }

    .agents-field textarea {
      min-height: 128px;
      padding: 13px 14px;
      resize: vertical;
      line-height: 1.5;
    }

    .agents-field textarea:focus {
      outline: 2px solid rgba(49, 87, 216, 0.15);
      border-color: #7695ee;
    }

    .agents-field input[type="file"] {
      padding: 11px;
      font-size: 13px;
    }

    .agents-field-help {
      color: #8290ad;
      font-size: 11px;
      line-height: 1.4;
    }

    .agents-alternative {
      display: flex;
      align-items: center;
      gap: 10px;
      color: #8a98b3;
      font-size: 11px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .agents-alternative::before,
    .agents-alternative::after {
      content: "";
      height: 1px;
      flex: 1;
      background: #e7edf7;
    }

    .agents-run-btn {
      min-height: 46px;
      border: 0;
      border-radius: 14px;
      background: linear-gradient(135deg, #3157d8, #2b79ff);
      color: white;
      font-weight: 900;
      cursor: pointer;
      box-shadow: 0 14px 26px rgba(49, 87, 216, 0.22);
    }

    .agents-run-btn:disabled {
      cursor: wait;
      opacity: 0.65;
    }

    .agents-run-status {
      min-height: 20px;
      color: #5e6f92;
      font-size: 13px;
      line-height: 1.45;
    }

    .agents-run-status.error {
      color: #b43e3e;
    }

    .agents-report-retry-warning {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin: 0 0 18px;
      padding: 14px 16px;
      border: 1px solid #efc5c5;
      border-radius: 14px;
      background: #fff7f7;
      color: #8f3434;
      font-size: 13px;
      line-height: 1.45;
    }

    .agents-report-retry-warning strong {
      display: block;
      color: #7e2929;
    }

    .agents-live-inbox {
      margin: 0 20px 18px;
    }

    .agents-scheduling-summary {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin: 0 20px 14px;
    }

    .agents-scheduling-card {
      min-width: 0;
      display: grid;
      gap: 4px;
      padding: 14px 16px;
      border: 1px solid #dce6f4;
      border-radius: 16px;
      background: #fff;
      box-shadow: 0 8px 24px rgba(36, 72, 128, 0.06);
    }

    .agents-scheduling-card span {
      color: #647695;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.03em;
      line-height: 1.35;
      text-transform: uppercase;
    }

    .agents-scheduling-card strong {
      color: #173463;
      font-size: 30px;
      font-weight: 900;
      line-height: 1;
    }

    .agents-scheduling-card small {
      color: #71819d;
      font-size: 11px;
      font-weight: 800;
    }

    .agents-scheduling-card.today {
      border-color: #cbdaf3;
      background: #f7faff;
    }

    .agents-scheduling-card.up small { color: #16824d; }
    .agents-scheduling-card.down small { color: #b45151; }

    .agents-scheduling-loading {
      grid-column: 1 / -1;
      min-height: 74px;
      display: grid;
      place-items: center;
      border: 1px dashed #d8e2f1;
      border-radius: 16px;
      color: #71819d;
      font-size: 12px;
      font-weight: 800;
    }

    .agents-scheduling-loading.error { color: #a94343; }

    .agents-live-head,
    .agents-live-heading {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .agents-live-head h3,
    .agents-live-heading strong { margin: 0; color: #203b70; }

    .agents-live-status {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: #607396;
      font-size: 11px;
      font-weight: 800;
    }

    .agents-live-status::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #35b66f;
      box-shadow: 0 0 0 4px rgba(53, 182, 111, 0.12);
    }

    .agents-live-board {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin-top: 15px;
      align-items: stretch;
    }

    .agents-live-column {
      min-width: 0;
      min-height: 170px;
      display: flex;
      flex-direction: column;
      padding: 12px;
      border: 1px solid #e0e8f5;
      border-radius: 16px;
      background: #f8fbff;
    }

    .agents-live-count {
      min-width: 24px;
      padding: 4px 7px;
      border-radius: 999px;
      background: #e6edfb;
      color: #34548d;
      text-align: center;
      font-size: 11px;
      font-weight: 900;
    }

    .agents-live-items {
      display: grid;
      align-content: start;
      gap: 8px;
      margin-top: 10px;
      max-height: min(56vh, 460px);
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-gutter: stable;
      padding-right: 4px;
    }

    .agents-live-items:empty { margin-top: 0; }

    .agents-live-card {
      position: relative;
      width: 100%;
      min-height: 72px;
      height: max-content;
      display: block;
      box-sizing: border-box;
      padding: 12px 45px 12px 11px;
      border: 1px solid #e0e8f5;
      border-radius: 13px;
      background: #fff;
      color: #29457b;
      text-align: left;
    }

    .agents-live-card > button[data-appointment-audit-id] {
      width: 100%;
      min-height: 0;
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 0;
      border: 0;
      background: transparent;
      color: inherit;
      text-align: left;
      cursor: pointer;
    }

    .agents-live-card strong,
    .agents-live-card small {
      display: block;
      max-width: 100%;
      white-space: normal;
      overflow-wrap: anywhere;
    }

    .agents-live-card strong {
      line-height: 1.25;
    }

    .agents-live-card small {
      margin-top: 0;
      color: #8290ad;
      line-height: 1.35;
    }

    .agents-live-setter {
      font-size: 10px;
      font-weight: 700;
    }

    .agents-live-card-copy {
      display: grid;
      align-content: start;
      gap: 3px;
      min-width: 0;
      flex: 1;
      padding: 1px 0;
    }

    .agents-live-card-copy strong,
    .agents-live-card-copy small {
      overflow: hidden;
      text-overflow: clip;
    }

    .agents-live-card .agents-processing-clock {
      margin-top: 3px;
    }

    .agents-processing-clock {
      position: relative;
      width: 26px;
      height: 26px;
      flex: 0 0 26px;
      box-sizing: border-box;
      border: 2px solid #b9c9e8;
      border-radius: 50%;
      background: #f3f7ff;
      box-shadow: 0 0 0 4px rgba(49, 87, 216, 0.07);
    }

    .agents-processing-clock::before {
      content: "";
      position: absolute;
      left: 11px;
      top: 5px;
      width: 2px;
      height: 7px;
      border-radius: 999px;
      background: #3157d8;
      transform-origin: 50% 7px;
      animation: agents-clock-tick 1.8s linear infinite;
    }

    .agents-processing-clock::after {
      content: "";
      position: absolute;
      left: 10px;
      top: 10px;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: #3157d8;
    }

    @keyframes agents-clock-tick {
      to { transform: rotate(360deg); }
    }

    @media (prefers-reduced-motion: reduce) {
      .agents-processing-clock::before { animation: none; }
    }

    .agents-actions-menu {
      position: relative;
      flex: 0 0 auto;
    }

    .agents-live-card > .agents-actions-menu {
      position: absolute;
      top: 7px;
      right: 7px;
    }

    .agents-actions-menu summary {
      width: 32px;
      height: 32px;
      display: grid;
      place-items: center;
      border: 1px solid transparent;
      border-radius: 10px;
      background: transparent;
      color: #60769e;
      cursor: pointer;
      list-style: none;
    }

    .agents-actions-menu summary::-webkit-details-marker { display: none; }

    .agents-actions-menu summary:hover,
    .agents-actions-menu[open] summary {
      border-color: #d8e3f3;
      background: #f5f8fd;
    }

    .agents-actions-menu summary svg {
      width: 18px;
      height: 18px;
      fill: currentColor;
    }

    .agents-actions-popover {
      position: absolute;
      z-index: 30;
      top: calc(100% + 5px);
      right: 0;
      width: max-content;
      min-width: 190px;
      padding: 6px;
      border: 1px solid #dce5f2;
      border-radius: 12px;
      background: #fff;
      box-shadow: 0 16px 34px rgba(25, 54, 111, 0.17);
    }

    .agents-actions-menu.is-floating .agents-actions-popover {
      position: fixed;
      z-index: 1200;
      top: var(--agents-menu-top, 0);
      left: var(--agents-menu-left, 0);
      right: auto;
      max-width: calc(100vw - 16px);
      max-height: calc(100vh - 16px);
      overflow-y: auto;
    }

    .agents-actions-popover a,
    .agents-actions-popover button {
      width: 100%;
      min-height: 34px;
      display: flex;
      align-items: center;
      padding: 7px 10px;
      border: 0;
      border-radius: 8px;
      background: transparent;
      color: #294b82;
      font: inherit;
      font-size: 11px;
      font-weight: 800;
      text-align: left;
      text-decoration: none;
      cursor: pointer;
    }

    .agents-actions-popover a:hover,
    .agents-actions-popover button:hover { background: #f1f5fc; }

    .agents-workflow-action {
      margin-top: 9px;
      padding: 7px 9px;
      border: 1px solid #cbd9ee;
      border-radius: 9px;
      background: #f4f8ff;
      color: #3157d8;
      font-size: 10px;
      font-weight: 900;
      cursor: pointer;
    }

    .agents-workflow-action-primary {
      border-color: #3157d8;
      background: #3157d8;
      color: #fff;
      box-shadow: 0 8px 18px rgba(49, 87, 216, 0.18);
    }

    .agents-workflow-action-primary:hover { background: #274bc3; }

    .agents-live-column.form_sent { background: #f5fbf7; border-color: #d8eee0; }
    .agents-live-column.review { background: #fffaf0; border-color: #efe3bd; }
    .agents-live-column.incoming { background: #f7faff; border-color: #dbe6f7; }

    .agents-live-controls {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
      min-height: 34px;
      margin-top: 12px;
    }

    .agents-live-controls .agents-workflow-action { margin-top: 0; }
    .agents-live-controls .agents-run-status { min-height: 0; margin-left: auto; }

    @media (max-width: 900px) {
      .agents-scheduling-summary { grid-template-columns: 1fr; }
      .agents-live-board { grid-template-columns: 1fr; }
    }

    .agents-source-flow {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 15px;
    }

    .agents-source-flow > div {
      display: grid;
      gap: 3px;
      min-width: 0;
      padding: 13px;
      border: 1px solid #e2eaf6;
      border-radius: 14px;
      background: #f8fbff;
    }

    .agents-source-flow span {
      width: 23px;
      height: 23px;
      display: grid;
      place-items: center;
      margin-bottom: 5px;
      border-radius: 8px;
      background: #e3ecff;
      color: #3157d8;
      font-size: 11px;
      font-weight: 900;
    }

    .agents-source-flow strong { color: #29457b; font-size: 12px; }
    .agents-source-flow small { color: #8290ad; font-size: 10px; }

    .agents-link-safety {
      margin-bottom: 15px;
      padding: 12px 13px;
      border: 1px solid #f0dfad;
      border-radius: 13px;
      background: #fff9e8;
      color: #725b1c;
      font-size: 12px;
      line-height: 1.5;
    }

    .agents-config-modal {
      position: fixed;
      inset: 0;
      z-index: 1000;
      display: grid;
      place-items: center;
      padding: 20px;
    }

    .agents-config-backdrop {
      position: absolute;
      inset: 0;
      border: 0;
      background: rgba(9, 23, 53, 0.52);
      backdrop-filter: blur(5px);
    }

    .agents-config-sheet {
      position: relative;
      z-index: 1;
      width: min(520px, 100%);
      display: grid;
      gap: 15px;
      padding: 24px;
      border: 1px solid #dce6f5;
      border-radius: 24px;
      background: #fff;
      box-shadow: 0 30px 80px rgba(10, 31, 75, 0.28);
    }

    .agents-config-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
    }

    .agents-config-head h3 { margin: 0; color: #152a50; font-size: 22px; }

    .agents-config-close {
      width: 38px;
      height: 38px;
      border: 1px solid #dfe7f3;
      border-radius: 12px;
      background: #f8faff;
      color: #5570a8;
      font-size: 24px;
      line-height: 1;
      cursor: pointer;
    }

    .agents-config-sheet .agents-field span {
      color: #29457b;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .agents-config-sheet input {
      width: 100%;
      box-sizing: border-box;
      padding: 12px 13px;
      border: 1px solid #dbe5f4;
      border-radius: 13px;
      background: #fbfdff;
      color: #1d3058;
      font: inherit;
    }

    .agents-config-sheet input:focus {
      outline: 2px solid rgba(49, 87, 216, 0.15);
      border-color: #7695ee;
    }

    .agents-config-sheet input[type="file"] {
      padding: 10px;
      font-size: 13px;
    }

    .agents-manual-appointment-sheet { width: min(560px, 100%); }

    .agents-manual-appointment-intro {
      margin: -5px 0 0;
      color: #64779a;
      font-size: 13px;
      line-height: 1.5;
    }

    .agents-config-guardrails {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
    }

    .agents-config-guardrails span {
      padding: 7px 9px;
      border-radius: 999px;
      background: #edf8f2;
      color: #24794a;
      font-size: 10px;
      font-weight: 850;
    }

    .agents-side-stack {
      display: grid;
      gap: 18px;
      align-content: start;
    }

    .agents-todo-list,
    .agents-history-list {
      display: grid;
      gap: 9px;
    }

    .agents-todo-item {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      padding: 11px 12px;
      border: 1px solid #e4ebf6;
      border-radius: 13px;
      background: #fbfdff;
      color: #40547d;
      font-size: 12px;
      line-height: 1.4;
    }

    .agents-todo-item::before {
      content: "";
      width: 14px;
      height: 14px;
      flex: 0 0 14px;
      margin-top: 1px;
      border: 2px solid #a9b8d3;
      border-radius: 5px;
    }

    .agents-history-item {
      width: 100%;
      padding: 11px 12px;
      border: 1px solid #e4ebf6;
      border-radius: 13px;
      background: #fff;
      color: #29457b;
      text-align: left;
      cursor: pointer;
    }

    .agents-history-item strong,
    .agents-history-item span {
      display: block;
    }

    .agents-history-item span {
      margin-top: 3px;
      color: #8290ad;
      font-size: 11px;
    }

    .agents-report-wrap {
      padding: 0 20px 20px;
    }

    .agents-report {
      padding: 22px;
      border: 1px solid #d9e5f5;
      border-radius: 22px;
      background: white;
      box-shadow: 0 16px 34px rgba(31, 75, 157, 0.08);
    }

    .agents-report-head {
      display: flex;
      justify-content: space-between;
      gap: 14px;
      align-items: flex-start;
      padding-bottom: 17px;
      border-bottom: 1px solid #e8eef7;
    }

    .agents-report-head h3 {
      margin: 0;
      color: #14284e;
      font-size: 21px;
    }

    .agents-report-head p {
      margin: 6px 0 0;
      color: #64769a;
      font-size: 13px;
      line-height: 1.5;
    }

    .agents-key-summary {
      margin-top: 18px;
    }

    .agents-audio-panel {
      display: grid;
      grid-template-columns: minmax(160px, 0.35fr) minmax(0, 1fr);
      gap: 16px;
      align-items: center;
      margin-top: 18px;
      padding: 14px 15px;
      border: 1px solid #dce7f4;
      border-radius: 15px;
      background: linear-gradient(135deg, #f7fbff, #ffffff);
    }

    .agents-audio-copy strong,
    .agents-audio-copy span {
      display: block;
    }

    .agents-audio-copy strong {
      color: #17315c;
      font-size: 13px;
    }

    .agents-audio-copy span {
      margin-top: 4px;
      color: #7585a2;
      font-size: 11px;
      line-height: 1.35;
    }

    .agents-audio-copy .agents-audio-analysis-note {
      color: #8a5c16;
      font-weight: 750;
    }

    .agents-audio-player {
      width: 100%;
      height: 42px;
      accent-color: #315ed3;
    }

    .agents-call-analysis {
      margin-top: 8px;
      border: 1px solid #dce7f4;
      border-radius: 13px;
      background: #f8fbff;
      overflow: hidden;
    }

    .agents-call-analysis summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-height: 42px;
      padding: 9px 14px;
      color: #315ed3;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
      list-style: none;
      user-select: none;
    }

    .agents-call-analysis summary::-webkit-details-marker {
      display: none;
    }

    .agents-call-analysis summary:hover {
      background: #f0f6ff;
    }

    .agents-call-analysis-chevron {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      border-radius: 999px;
      background: #e7efff;
      font-size: 15px;
      transition: transform 160ms ease;
    }

    .agents-call-analysis[open] .agents-call-analysis-chevron {
      transform: rotate(180deg);
    }

    .agents-call-analysis p {
      margin: 0;
      padding: 13px 14px 15px;
      border-top: 1px solid #e3ebf6;
      color: #516583;
      font-size: 13px;
      line-height: 1.6;
      white-space: pre-line;
    }

    .agents-key-summary h4 {
      margin: 0 0 11px;
      color: #29457b;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .agents-key-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 11px;
    }

    .agents-key-card {
      position: relative;
      min-height: 102px;
      padding: 13px 14px;
      border: 1px solid #e0e8f4;
      border-top: 3px solid #8da3c6;
      border-radius: 15px;
      background: linear-gradient(180deg, #ffffff, #f8fbff);
    }

    .agents-key-card.confirmed { border-top-color: #36a365; }
    .agents-key-card.stated_only { border-top-color: #5f82e5; }
    .agents-key-card.missing { border-top-color: #d3a52e; }
    .agents-key-card.needs_review { border-top-color: #d35656; }

    .agents-key-warning {
      position: absolute;
      top: 10px;
      right: 12px;
      color: #d93434;
      font-size: 17px;
      line-height: 1;
    }

    .agents-key-label {
      display: block;
      margin-bottom: 7px;
      color: #7181a0;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .agents-key-card strong,
    .agents-key-card small {
      display: block;
    }

    .agents-key-card strong {
      color: #17315c;
      font-size: 14px;
      line-height: 1.35;
    }

    .agents-key-card small {
      margin-top: 5px;
      color: #7383a1;
      font-size: 11px;
      line-height: 1.35;
    }

    .agents-key-detail {
      margin-top: 5px;
      color: #7383a1;
      font-size: 11px;
      line-height: 1.35;
    }

    .agents-key-detail summary {
      cursor: pointer;
      list-style: none;
    }

    .agents-key-detail summary::-webkit-details-marker { display: none; }

    .agents-key-detail summary span {
      display: inline-block;
      margin-left: 4px;
      color: #2b67cf;
      font-weight: 800;
      white-space: nowrap;
    }

    .agents-key-detail[open] summary { display: none; }

    .agents-key-detail small {
      margin-top: 0;
      color: inherit;
    }

    .agents-key-card.is-placeholder strong {
      color: #a4afc1;
      font-weight: 700;
    }

    .agents-key-address {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      margin-top: 7px;
      color: #2864c7;
      font-size: 10px;
      font-weight: 800;
      line-height: 1.3;
      text-decoration: none;
    }

    .agents-key-address:hover { text-decoration: underline; }

    .agents-crm-summary {
      display: flex;
      align-items: center;
      gap: 9px;
      margin-top: 11px;
      padding: 10px 12px;
      border: 1px solid #dce7f4;
      border-radius: 13px;
      background: #f7fbff;
      color: #53698f;
      font-size: 12px;
      line-height: 1.4;
    }

    .agents-crm-summary strong {
      flex: 0 0 auto;
      color: #264776;
    }

    .agents-crm-summary.is-connected::before {
      content: "";
      width: 8px;
      height: 8px;
      flex: 0 0 8px;
      border-radius: 50%;
      background: #36a365;
    }

    .agents-post-booking-analysis {
      margin-top: 16px;
      padding: 14px;
      border: 1px solid #d9e5f5;
      border-radius: 18px;
      background: #f7faff;
    }

    .agents-post-booking-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 10px;
    }

    .agents-post-booking-head h4 {
      margin: 0;
      color: #29457b;
      font-size: 12px;
      letter-spacing: 0.07em;
      text-transform: uppercase;
    }

    .agents-post-booking-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    .agents-closer-notes,
    .agents-confirmation-notes,
    .agents-setter-feedback {
      min-width: 0;
      margin: 0;
      padding: 16px;
      border: 1px solid #d9e5f5;
      border-radius: 16px;
      background: #ffffff;
    }

    .agents-closer-notes h4,
    .agents-confirmation-notes h4,
    .agents-setter-feedback h4 {
      margin: 0;
      color: #29457b;
      font-size: 13px;
    }

    .agents-closer-notes > p,
    .agents-confirmation-notes > p,
    .agents-setter-feedback > p {
      margin: 10px 0 0;
      color: #40577d;
      font-size: 11px;
      line-height: 1.55;
    }

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

    .agents-closer-note {
      padding: 12px 13px;
      border: 1px solid #e1e9f5;
      border-radius: 13px;
      background: #ffffff;
      color: #40577d;
      font-size: 12px;
      line-height: 1.5;
    }

    .agents-closer-note strong {
      display: block;
      margin-bottom: 4px;
      color: #17315c;
      font-size: 11px;
    }

    .agents-closer-handoff {
      margin: 10px 0 0;
    }

    .agents-post-booking-grid .agents-closer-handoff,
    .agents-post-booking-grid .agents-confirmation-notes p,
    .agents-post-booking-grid .agents-setter-feedback p {
      margin: 10px 0 0;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      font-size: 11px;
      line-height: 1.55;
    }

    .agents-human-review {
      margin-top: 16px;
      padding: 18px;
      border: 1px solid #cdddf3;
      border-radius: 18px;
      background: linear-gradient(145deg, #f7faff 0%, #eef5ff 100%);
    }

    .agents-human-review-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 16px;
    }

    .agents-human-review-head h4,
    .agents-human-review-head p {
      margin: 0;
    }

    .agents-human-review-head h4 {
      color: #17315c;
      font-size: 15px;
    }

    .agents-human-review-head p,
    .agents-human-review-head > span {
      margin-top: 5px;
      color: #657797;
      font-size: 11px;
      line-height: 1.45;
    }

    .agents-human-review-head > span {
      flex: 0 0 auto;
      margin-top: 1px;
    }

    .agents-human-review-form {
      display: grid;
      grid-template-columns: minmax(180px, 0.45fr) minmax(0, 1fr);
      gap: 14px;
    }

    .agents-human-review-form select,
    .agents-human-review-form textarea {
      width: 100%;
      box-sizing: border-box;
      border: 1px solid #d3e0f2;
      border-radius: 13px;
      background: #ffffff;
      color: #1d3058;
      font: inherit;
    }

    .agents-human-review-form select {
      min-height: 44px;
      padding: 0 12px;
    }

    .agents-human-review-form textarea {
      min-height: 112px;
      padding: 12px 13px;
      resize: vertical;
      line-height: 1.5;
    }

    .agents-human-review-form select:focus,
    .agents-human-review-form textarea:focus {
      outline: 2px solid rgba(49, 87, 216, 0.15);
      border-color: #7695ee;
    }

    .agents-human-review-wide {
      grid-column: 1 / -1;
    }

    .agents-human-calibration-toggle {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      color: #29457b;
      font-size: 12px;
      font-weight: 750;
      line-height: 1.45;
    }

    .agents-human-calibration-toggle input {
      width: 17px;
      height: 17px;
      margin: 0;
      accent-color: #3157d8;
    }

    .agents-human-review-actions {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .agents-human-review-actions .agents-run-status {
      min-height: 0;
      margin: 0;
    }

    .agents-inline-edit {
      margin-top: 10px;
      padding: 0;
      border: 0;
      background: transparent;
      color: #315ed3;
      font: inherit;
      font-size: 11px;
      font-weight: 800;
      cursor: pointer;
    }

    .agents-inline-edit:hover,
    .agents-inline-edit:focus-visible {
      text-decoration: underline;
    }

    .agents-system-feedback-card {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 14px;
      padding: 11px 12px;
      border: 1px solid #d7e3f5;
      border-radius: 15px;
      background: linear-gradient(135deg, #f8fbff, #f1f6ff);
    }

    .agents-system-feedback-card-icon {
      width: 34px;
      height: 34px;
      display: grid;
      flex: 0 0 34px;
      place-items: center;
      border-radius: 11px;
      background: #e4edff;
      color: #3157d8;
      font-size: 16px;
    }

    .agents-system-feedback-card-copy {
      min-width: 0;
      flex: 1 1 auto;
    }

    .agents-system-feedback-card h4,
    .agents-system-feedback-card p {
      margin: 0;
    }

    .agents-system-feedback-card h4 {
      color: #1d3764;
      font-size: 13px;
    }

    .agents-system-feedback-card p {
      margin-top: 2px;
      color: #71819e;
      font-size: 11px;
      line-height: 1.4;
    }

    .agents-system-feedback-card .agents-workflow-action {
      flex: 0 0 auto;
      min-height: 36px;
      padding: 8px 14px;
      background: #ffffff;
    }

    .agents-imported-review-note {
      margin: 8px 2px 0;
      color: #6e7f9d;
      font-size: 10px;
      line-height: 1.4;
    }

    body.appointment-audit-feedback-open {
      overflow: hidden;
    }

    .agents-system-feedback-modal {
      position: fixed;
      inset: 0;
      z-index: 1250;
      display: grid;
      place-items: center;
      padding: 20px;
    }

    .agents-system-feedback-backdrop {
      position: absolute;
      inset: 0;
      border: 0;
      background: rgba(9, 23, 53, 0.58);
      backdrop-filter: blur(5px);
      cursor: default;
    }

    .agents-system-feedback-dialog {
      position: relative;
      z-index: 1;
      width: min(720px, 100%);
      max-height: min(760px, calc(100vh - 40px));
      display: flex;
      flex-direction: column;
      border: 1px solid #dbe5f3;
      border-radius: 23px;
      background: #ffffff;
      overflow: hidden;
      box-shadow: 0 30px 90px rgba(10, 31, 75, 0.3);
    }

    .agents-system-feedback-dialog-compact {
      width: min(470px, 100%);
    }

    .agents-setter-feedback-dialog {
      width: min(620px, 100%);
    }

    .agents-system-feedback-dialog:focus {
      outline: none;
    }

    .agents-system-feedback-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
      padding: 21px 22px 17px;
      border-bottom: 1px solid #e5ebf4;
      background: linear-gradient(145deg, #f9fbff, #f2f6ff);
    }

    .agents-system-feedback-head h3,
    .agents-system-feedback-head p {
      margin: 0;
    }

    .agents-system-feedback-head h3 {
      margin-top: 3px;
      color: #152d56;
      font-size: 20px;
      line-height: 1.25;
    }

    .agents-system-feedback-head p {
      max-width: 590px;
      margin-top: 7px;
      color: #667997;
      font-size: 12px;
      line-height: 1.5;
    }

    .agents-system-feedback-dialog-compact .agents-system-feedback-head {
      align-items: center;
      padding: 16px 18px 13px;
    }

    .agents-system-feedback-dialog-compact .agents-system-feedback-head h3 {
      margin-top: 0;
      font-size: 17px;
    }

    .agents-system-feedback-dialog-compact .agents-system-feedback-body {
      padding: 14px 18px 18px;
    }

    .agents-system-feedback-eyebrow {
      color: #3157d8;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.09em;
      text-transform: uppercase;
    }

    .agents-system-feedback-body {
      min-height: 0;
      padding: 18px 22px 22px;
      overflow-y: auto;
    }

    .agents-system-feedback-section-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 10px;
    }

    .agents-system-feedback-section-head h4 {
      margin: 0;
      color: #264575;
      font-size: 13px;
    }

    .agents-system-feedback-section-head > span {
      color: #7b8ba6;
      font-size: 10px;
      font-weight: 750;
    }

    .agents-system-suggestion-history {
      display: grid;
      gap: 12px;
      max-height: 285px;
      padding-right: 3px;
      overflow-y: auto;
    }

    .agents-system-suggestion-empty {
      padding: 15px;
      border: 1px dashed #d5e0f0;
      border-radius: 14px;
      background: #fafcff;
      color: #71819d;
      font-size: 12px;
      line-height: 1.5;
    }

    .agents-system-suggestion-item {
      display: grid;
      gap: 7px;
    }

    .agents-system-suggestion-user,
    .agents-system-suggestion-answer {
      padding: 11px 13px;
      border-radius: 14px;
    }

    .agents-system-suggestion-user {
      max-width: 84%;
      justify-self: end;
      border: 1px solid #d8e3fa;
      border-bottom-right-radius: 5px;
      background: #edf3ff;
    }

    .agents-system-suggestion-answer {
      max-width: 90%;
      justify-self: start;
      border: 1px solid #dfe7f2;
      border-bottom-left-radius: 5px;
      background: #ffffff;
    }

    .agents-system-suggestion-user small,
    .agents-system-suggestion-answer small {
      color: #7a8ba7;
      font-size: 9px;
      font-weight: 700;
    }

    .agents-system-suggestion-user p,
    .agents-system-suggestion-answer p {
      margin: 4px 0 0;
      color: #344d73;
      font-size: 12px;
      line-height: 1.5;
      white-space: pre-line;
    }

    .agents-system-suggestion-answer > div {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .agents-system-suggestion-answer > div > span {
      display: inline-flex;
      align-items: center;
      min-height: 22px;
      padding: 3px 8px;
      border-radius: 999px;
      background: #edf1f7;
      color: #60718e;
      font-size: 9px;
      font-weight: 900;
      letter-spacing: 0.03em;
      text-transform: uppercase;
    }

    .agents-system-suggestion-answer[data-verdict="makes_sense"] > div > span {
      background: #e5f7eb;
      color: #267444;
    }

    .agents-system-suggestion-answer[data-verdict="needs_context"] > div > span {
      background: #fff4d9;
      color: #8a6411;
    }

    .agents-system-suggestion-answer[data-verdict="not_supported"] > div > span {
      background: #fbe9e9;
      color: #a34646;
    }

    .agents-system-suggestion-answer[data-verdict="stale"] {
      border-color: #e1d6b4;
      background: #fffdf7;
    }

    .agents-system-suggestion-answer[data-verdict="stale"] > div > span {
      background: #f8edcf;
      color: #765b16;
    }

    .agents-system-suggestion-limit {
      color: #7b8ba5;
      font-size: 10px;
      text-align: center;
    }

    .agents-system-suggestion-form {
      display: grid;
      gap: 8px;
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px solid #e6ecf5;
    }

    .agents-system-suggestion-form-minimal {
      margin-top: 0;
      padding-top: 0;
      border-top: 0;
    }

    .agents-system-suggestion-notes {
      margin-bottom: 14px;
      padding-bottom: 14px;
      border-bottom: 1px solid #e6ecf5;
    }

    .agents-system-suggestion-notes-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .agents-system-suggestion-notes-head h4 {
      margin: 0;
      color: #294575;
      font-size: 11px;
      font-weight: 850;
    }

    .agents-system-suggestion-notes-head > span {
      color: #7a8ba7;
      font-size: 10px;
      font-weight: 750;
    }

    .agents-system-suggestion-notes-list {
      display: grid;
      gap: 7px;
      max-height: 148px;
      margin: 9px 0 0;
      padding: 0 3px 0 0;
      list-style: none;
      overflow-y: auto;
    }

    .agents-system-suggestion-note {
      padding: 9px 10px;
      border: 1px solid #dce6f5;
      border-radius: 11px;
      background: #f7faff;
    }

    .agents-system-suggestion-note p {
      margin: 0;
      color: #30486f;
      font-size: 11px;
      line-height: 1.45;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }

    .agents-system-suggestion-note time {
      display: block;
      margin-top: 4px;
      color: #7a8ba7;
      font-size: 9px;
      font-weight: 700;
    }

    .agents-system-suggestion-note-status {
      border-style: dashed;
      color: #71819d;
      font-size: 10px;
      line-height: 1.4;
      text-align: center;
    }

    .agents-system-suggestion-note-status.is-error {
      border-color: #edc9c9;
      background: #fff8f8;
      color: #a14b4b;
    }

    .agents-system-suggestion-confirmation {
      display: grid;
      justify-items: center;
      gap: 11px;
      padding: 13px 0 3px;
      text-align: center;
    }

    .agents-system-suggestion-confirmation-icon {
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: #e4f6eb;
      color: #227648;
      font-size: 22px;
      font-weight: 900;
    }

    .agents-system-suggestion-confirmation p {
      margin: 0;
      color: #667997;
      font-size: 11px;
      font-weight: 750;
    }

    .agents-system-suggestion-confirmation blockquote {
      width: 100%;
      max-height: 150px;
      box-sizing: border-box;
      margin: 0;
      padding: 11px 12px;
      border: 1px solid #dce6f5;
      border-radius: 12px;
      background: #f7faff;
      color: #30486f;
      font-size: 12px;
      line-height: 1.5;
      text-align: left;
      white-space: pre-wrap;
      overflow: auto;
      overflow-wrap: anywhere;
    }

    .agents-system-suggestion-confirmation-actions {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 9px;
      margin-top: 2px;
    }

    .agents-system-suggestion-form-minimal .agents-system-suggestion-actions {
      justify-content: flex-end;
    }

    .agents-system-suggestion-form .agents-field > span,
    .agents-human-review-form-compact .agents-field > span {
      color: #294575;
      font-size: 11px;
      font-weight: 850;
    }

    .agents-system-suggestion-form textarea {
      width: 100%;
      min-height: 88px;
      box-sizing: border-box;
      padding: 12px 13px;
      border: 1px solid #cfddf0;
      border-radius: 13px;
      background: #fbfdff;
      color: #1e355d;
      font: inherit;
      font-size: 12px;
      line-height: 1.5;
      resize: vertical;
    }

    .agents-system-suggestion-form textarea:focus {
      outline: 2px solid rgba(49, 87, 216, 0.14);
      border-color: #7695ee;
    }

    .agents-system-suggestion-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .agents-system-suggestion-actions small {
      color: #7888a3;
      font-size: 10px;
      line-height: 1.4;
    }

    .agents-system-suggestion-actions .agents-workflow-action {
      flex: 0 0 auto;
    }

    .agents-system-suggestion-form > .agents-run-status {
      min-height: 0;
      margin: 0;
      font-size: 10px;
    }

    .agents-setter-editor {
      margin-top: 17px;
      border: 1px solid #dce5f2;
      border-radius: 15px;
      background: #f9fbfe;
      overflow: hidden;
    }

    .agents-setter-editor > summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 13px 14px;
      cursor: pointer;
      list-style: none;
    }

    .agents-setter-editor > summary::-webkit-details-marker {
      display: none;
    }

    .agents-setter-editor > summary strong,
    .agents-setter-editor > summary small {
      display: block;
    }

    .agents-setter-editor > summary strong {
      color: #294777;
      font-size: 12px;
    }

    .agents-setter-editor > summary small {
      margin-top: 2px;
      color: #7888a3;
      font-size: 10px;
      font-weight: 500;
    }

    .agents-setter-editor > summary > span:last-child {
      color: #5271a8;
      transition: transform 160ms ease;
    }

    .agents-setter-editor[open] > summary > span:last-child {
      transform: rotate(180deg);
    }

    .agents-human-review-form-compact {
      grid-template-columns: 1fr;
      padding: 0 14px 15px;
    }

    .agents-setter-feedback-dialog .agents-human-review-form-compact {
      padding: 0;
    }

    .agents-human-review-form-compact textarea {
      min-height: 82px;
    }

    .agents-human-review-form-compact .agents-human-calibration-toggle {
      padding: 10px 11px;
      border: 1px solid #d9e3f1;
      border-radius: 12px;
      background: #ffffff;
    }

    .agents-human-review-advanced {
      border: 1px solid #dce5f2;
      border-radius: 13px;
      background: #ffffff;
      overflow: hidden;
    }

    .agents-human-review-advanced > summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 11px 12px;
      cursor: pointer;
      list-style: none;
    }

    .agents-human-review-advanced > summary::-webkit-details-marker {
      display: none;
    }

    .agents-human-review-advanced > summary strong,
    .agents-human-review-advanced > summary small {
      display: block;
    }

    .agents-human-review-advanced > summary strong {
      color: #34517d;
      font-size: 11px;
    }

    .agents-human-review-advanced > summary small {
      margin-top: 2px;
      color: #8592a8;
      font-size: 9px;
      font-weight: 500;
    }

    .agents-human-review-advanced > summary > span:last-child {
      color: #6178a1;
      transition: transform 160ms ease;
    }

    .agents-human-review-advanced[open] > summary > span:last-child {
      transform: rotate(180deg);
    }

    .agents-human-review-advanced-body {
      display: grid;
      gap: 11px;
      padding: 0 12px 12px;
      border-top: 1px solid #edf1f6;
    }

    .agents-human-review-advanced-body > .agents-field:first-child {
      margin-top: 12px;
    }

    .agents-human-review-advanced select,
    .agents-human-review-advanced textarea {
      width: 100%;
      box-sizing: border-box;
      padding: 10px 11px;
      border: 1px solid #d6e1f0;
      border-radius: 11px;
      background: #fbfdff;
      color: #243b63;
      font: inherit;
      font-size: 11px;
    }

    .agents-human-review-advanced textarea {
      min-height: 68px;
      resize: vertical;
    }

    .agents-audit-chat {
      position: fixed;
      z-index: 900;
      right: 24px;
      bottom: 92px;
    }

    .agents-audit-chat-launcher {
      width: 50px;
      height: 50px;
      display: grid;
      place-items: center;
      margin-left: auto;
      border: 0;
      border-radius: 50%;
      background: linear-gradient(135deg, #3157d8, #2b79ff);
      color: #fff;
      font-size: 21px;
      cursor: pointer;
      box-shadow: 0 14px 32px rgba(30, 68, 158, 0.3);
    }

    .agents-audit-chat-launcher:hover {
      transform: translateY(-1px);
      box-shadow: 0 17px 36px rgba(30, 68, 158, 0.36);
    }

    .agents-audit-chat-popover {
      position: absolute;
      right: 0;
      bottom: 60px;
      width: min(430px, calc(100vw - 32px));
      max-height: min(610px, calc(100vh - 140px));
      display: none;
      flex-direction: column;
      border: 1px solid #d9e5f5;
      border-radius: 18px;
      background: #fff;
      overflow: hidden;
      box-shadow: 0 24px 70px rgba(20, 49, 105, 0.25);
    }

    .agents-audit-chat.is-open .agents-audit-chat-popover {
      display: flex;
    }

    .agents-audit-chat-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 13px 14px;
      border-bottom: 1px solid #e5ecf7;
    }

    .agents-audit-chat-title strong {
      color: #17315c;
      font-size: 14px;
    }

    .agents-audit-chat-actions {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .agents-audit-chat-reset,
    .agents-audit-chat-close {
      width: 30px;
      height: 30px;
      display: grid;
      place-items: center;
      padding: 0;
      border: 1px solid #d7e2f2;
      border-radius: 10px;
      background: #fff;
      color: #5c7197;
      font: inherit;
      font-size: 15px;
      font-weight: 800;
      cursor: pointer;
    }

    .agents-audit-chat-suggestions {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      padding: 12px 14px;
      border-bottom: 1px solid #edf1f7;
    }

    .agents-audit-chat-suggestions button {
      padding: 7px 10px;
      border: 1px solid #d6e2f4;
      border-radius: 999px;
      background: #fff;
      color: #315eaa;
      font: inherit;
      font-size: 10px;
      font-weight: 800;
      cursor: pointer;
    }

    .agents-audit-chat-suggestions button:hover:not(:disabled) {
      border-color: #adc4eb;
      background: #f1f6ff;
    }

    .agents-audit-chat-thread {
      display: grid;
      gap: 8px;
      max-height: 330px;
      overflow-y: auto;
      padding: 10px 12px;
      scroll-behavior: smooth;
    }

    .agents-audit-chat-message {
      width: fit-content;
      max-width: min(82%, 680px);
      padding: 8px 10px;
      border-radius: 12px;
      color: #30496f;
      font-size: 11px;
      line-height: 1.45;
      white-space: pre-line;
      overflow-wrap: anywhere;
    }

    .agents-audit-chat-message.user {
      justify-self: end;
      border-bottom-right-radius: 5px;
      background: linear-gradient(135deg, #3157d8, #2c73ed);
      color: #fff;
    }

    .agents-audit-chat-message.assistant {
      justify-self: start;
      border: 1px solid #dfe8f5;
      border-bottom-left-radius: 5px;
      background: #fff;
    }

    .agents-audit-chat-citations {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 7px;
    }

    .agents-audit-chat-citation {
      max-width: 100%;
      padding: 5px 8px;
      border: 1px solid #cbdaf0;
      border-radius: 999px;
      background: #f4f8ff;
      color: #315eaa;
      font: inherit;
      font-size: 9px;
      font-weight: 850;
      line-height: 1.3;
      text-align: left;
    }

    button.agents-audit-chat-citation { cursor: pointer; }

    .agents-audit-chat-sources {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 7px;
    }

    .agents-audit-chat-source {
      max-width: 100%;
      padding: 5px 8px;
      border: 1px solid #c7dbc9;
      border-radius: 999px;
      background: #f4fbf5;
      color: #287044;
      font-size: 9px;
      font-weight: 850;
      line-height: 1.3;
      text-decoration: none;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .agents-audit-chat-source:hover {
      border-color: #90bd98;
      background: #eaf7ec;
    }

    .agents-audit-chat-loading {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      color: #687b9d;
    }

    .agents-audit-chat-loading::after {
      content: "";
      width: 12px;
      height: 12px;
      border: 2px solid #c6d4ea;
      border-top-color: #3157d8;
      border-radius: 50%;
      animation: agents-chat-spin 800ms linear infinite;
    }

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

    .agents-audit-chat-error {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin: 0 14px 10px;
      color: #b43e3e;
      font-size: 11px;
    }

    .agents-audit-chat-error button {
      flex: 0 0 auto;
      padding: 5px 9px;
      border: 1px solid #e4b8b8;
      border-radius: 999px;
      background: #fff8f8;
      color: #a63838;
      font: inherit;
      font-weight: 850;
      cursor: pointer;
    }

    .agents-audit-chat-form {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 9px;
      padding: 12px 14px 14px;
      border-top: 1px solid #edf1f7;
    }

    .agents-audit-chat-form textarea {
      width: 100%;
      min-height: 44px;
      max-height: 130px;
      box-sizing: border-box;
      padding: 11px 12px;
      border: 1px solid #d4e0f1;
      border-radius: 13px;
      background: #fff;
      color: #20385f;
      font: inherit;
      font-size: 12px;
      line-height: 1.45;
      resize: vertical;
    }

    .agents-audit-chat-form textarea:focus {
      outline: 2px solid rgba(49, 87, 216, 0.14);
      border-color: #7695ee;
    }

    .agents-audit-chat-send {
      align-self: end;
      width: 44px;
      height: 44px;
      min-height: 44px;
      display: grid;
      place-items: center;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: #3157d8;
      color: #fff;
      font: inherit;
      font-size: 20px;
      font-weight: 900;
      cursor: pointer;
    }

    .agents-audit-chat-send:disabled,
    .agents-audit-chat-suggestions button:disabled {
      cursor: wait;
      opacity: 0.58;
    }

    .agents-audio-clip-button {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 8px;
      padding: 7px 10px;
      border: 1px solid #b9cdf4;
      border-radius: 999px;
      background: #f3f7ff;
      color: #2855b7;
      font-size: 11px;
      font-weight: 800;
      cursor: pointer;
    }

    .agents-report-details {
      margin-top: 16px;
      border: 1px solid #e1e9f4;
      border-radius: 15px;
      overflow: hidden;
      background: #fbfdff;
    }

    .agents-report-details > summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 13px 15px;
      color: #29457b;
      font-size: 12px;
      font-weight: 900;
      cursor: pointer;
      list-style: none;
    }

    .agents-report-details > summary::-webkit-details-marker { display: none; }
    .agents-report-details > summary::after { content: "+"; font-size: 18px; }
    .agents-report-details[open] > summary::after { content: "−"; }

    .agents-report-summary-copy {
      margin: 0 16px 2px;
      padding: 13px 14px;
      border-radius: 13px;
      background: #f3f7fd;
      color: #53698f;
      font-size: 12px;
      line-height: 1.55;
    }

    .agents-report-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
      margin-top: 18px;
    }

    .agents-report-section {
      padding: 16px;
      border: 1px solid #e5ebf5;
      border-radius: 16px;
      background: #fbfdff;
    }

    .agents-report-section.full {
      grid-column: 1 / -1;
    }

    .agents-report-section h4 {
      margin: 0 0 11px;
      color: #29457b;
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    .agents-check-list {
      display: grid;
      gap: 9px;
    }

    .agents-check {
      padding: 10px 11px;
      border-left: 3px solid #b9c5d9;
      border-radius: 9px;
      background: white;
      color: #34496f;
      font-size: 12px;
      line-height: 1.45;
    }

    .agents-check.confirmed { border-left-color: #36a365; }
    .agents-check.missing { border-left-color: #d3a52e; }
    .agents-check.needs_review { border-left-color: #d35656; }
    .agents-check.stated_only { border-left-color: #5f82e5; }
    .agents-check.coaching_note { border-left-color: #d3a52e; background: #fffdf5; }
    .agents-check.material_risk { border-left-color: #d35656; background: #fff8f8; }

    .agents-check strong {
      color: #1e355f;
    }

    .agents-check-evidence {
      display: block;
      margin-top: 4px;
      color: #7b89a5;
    }

    .agents-external-pending {
      color: #946b00;
      font-weight: 800;
    }

    @media (max-width: 1100px) {
      .agents-key-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 900px) {
      .agents-catalog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .agents-workspace,
      .agents-report-grid,
      .agents-post-booking-grid,
      .agents-human-review-form {
        grid-template-columns: 1fr;
      }

      .agents-report-section.full {
        grid-column: auto;
      }

      .agents-hero {
        flex-direction: column;
      }

      .agents-audio-panel {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 620px) {
      .agents-catalog-view { padding: 20px; }
      .agents-catalog-head { flex-direction: column; }
      .agents-catalog-grid,
      .agents-source-flow,
      .agents-closer-grid { grid-template-columns: 1fr; }
      .agents-key-grid { grid-template-columns: 1fr; }
      .agents-crm-summary { align-items: flex-start; }
      .agents-audit-chat { right: 14px; bottom: 86px; }
      .agents-audit-chat-popover { width: calc(100vw - 24px); }
      .agents-audit-chat-message { max-width: 90%; }
      .agents-system-feedback-card {
        align-items: flex-start;
        flex-wrap: wrap;
      }
      .agents-system-feedback-card-copy {
        flex: 1 1 calc(100% - 50px);
      }
      .agents-system-feedback-card .agents-workflow-action {
        width: 100%;
      }
      .agents-system-feedback-modal {
        align-items: end;
        padding: 10px;
      }
      .agents-system-feedback-dialog {
        max-height: calc(100vh - 20px);
        border-radius: 21px 21px 13px 13px;
      }
      .agents-system-feedback-head {
        padding: 18px 17px 14px;
      }
      .agents-system-feedback-head h3 { font-size: 18px; }
      .agents-system-feedback-body { padding: 15px 17px 18px; }
      .agents-system-suggestion-user,
      .agents-system-suggestion-answer { max-width: 94%; }
      .agents-system-suggestion-actions {
        align-items: stretch;
        flex-direction: column;
      }
      .agents-system-suggestion-actions .agents-workflow-action {
        width: 100%;
      }
      .agents-system-suggestion-confirmation-actions {
        align-items: stretch;
        flex-direction: column;
      }
      .agents-system-suggestion-confirmation-actions .agents-workflow-action {
        width: 100%;
      }
    }

    .practice-hero-card {
      display: grid;
      grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr);
      gap: 18px;
      align-items: stretch;
      overflow: hidden;
      position: relative;
    }

    .practice-hero-card::after {
      content: "";
      position: absolute;
      left: -4%;
      right: -4%;
      bottom: -52px;
      height: 140px;
      background:
        radial-gradient(circle at 16% 30%, rgba(117, 154, 255, 0.22), transparent 38%),
        radial-gradient(circle at 60% 60%, rgba(44, 143, 214, 0.14), transparent 34%),
        linear-gradient(180deg, rgba(230, 240, 255, 0.05), rgba(210, 226, 255, 0.55));
      border-radius: 50% 50% 0 0 / 100% 100% 0 0;
      pointer-events: none;
    }

    .practice-hero-copy,
    .practice-hero-form {
      position: relative;
      z-index: 1;
    }

    .practice-hero-copy h2 {
      margin: 0 0 10px;
      font-size: 22px;
      letter-spacing: -0.03em;
      color: #162b52;
    }

    .practice-hero-copy p {
      margin: 0;
      color: var(--muted);
      line-height: 1.6;
      max-width: 520px;
    }

    .practice-hero-visual {
      margin-top: 14px;
      min-height: 196px;
      border-radius: 28px;
      background:
        linear-gradient(180deg, rgba(236, 243, 255, 0.92), rgba(220, 232, 255, 0.7)),
        linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(244, 249, 255, 0.94));
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(211, 225, 246, 0.75);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
    }

    .practice-hero-preview-frame {
      position: absolute;
      left: 22px;
      top: 18px;
      width: 148px;
      height: 148px;
      border-radius: 28px;
      overflow: hidden;
      background: linear-gradient(135deg, #d5e3ff, #f4f8ff);
      border: 1px solid rgba(201, 217, 244, 0.92);
      box-shadow: 0 18px 34px rgba(76, 110, 194, 0.16);
    }

    .practice-hero-preview-frame img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
    }

    .practice-hero-preview-frame.hidden {
      display: none;
    }

    .practice-hero-preview-plate {
      position: absolute;
      left: 172px;
      right: 12px;
      top: 74px;
      width: auto;
      max-width: none;
      min-width: 0;
      padding: 10px 12px;
      box-sizing: border-box;
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.96);
      border: 1px solid rgba(201, 217, 244, 0.85);
      box-shadow: 0 16px 30px rgba(76, 110, 194, 0.14);
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .practice-hero-preview-name {
      color: #173057;
      font-size: 15px;
      font-weight: 800;
      line-height: 1.2;
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
      word-break: break-word;
    }

    .practice-hero-preview-persona {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.4;
    }

    .practice-hero-preview-address,
    .prospect-address,
    .persona-address-line {
      color: #4f6289;
      font-size: 11px;
      line-height: 1.35;
      font-weight: 700;
    }

    .practice-hero-preview-address {
      overflow-wrap: anywhere;
    }

    .persona-address-line {
      margin-top: 4px;
      color: #6b7c9f;
      font-size: 12px;
    }

    .practice-hero-visual::before,
    .practice-hero-visual::after {
      content: "";
      position: absolute;
      border-radius: 999px;
      background: rgba(114, 143, 255, 0.16);
    }

    .practice-hero-visual::before {
      width: 240px;
      height: 240px;
      left: -80px;
      bottom: -158px;
    }

    .practice-hero-visual::after {
      width: 260px;
      height: 260px;
      right: -90px;
      bottom: -172px;
    }

    .practice-visual-card,
    .practice-visual-audio,
    .practice-visual-orb {
      display: none;
    }

    .practice-hero-form {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .form-label-kicker {
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: #6f83a9;
      margin-bottom: 8px;
    }

    .practice-hero-cta {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 12px;
      margin-top: 2px;
    }

    .workspace-primary-btn {
      min-width: 260px;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      gap: 12px;
      padding: 16px 22px;
      border-radius: 18px;
      background: linear-gradient(135deg, #1f3f96, #295fd6);
      color: white;
      font-weight: 800;
      box-shadow: 0 20px 36px rgba(31, 63, 150, 0.26);
    }

    .workspace-primary-btn::after {
      content: "›";
      font-size: 20px;
      line-height: 1;
    }

    .roleplay-quota-status {
      flex: 1 1 auto;
      min-width: 0;
      min-height: 18px;
      margin-top: 0;
      color: #627392;
      font-size: 10px;
      font-weight: 750;
      text-align: right;
    }

    .roleplay-quota-status:empty {
      display: none;
    }

    .roleplay-quota-status[data-blocked="true"] {
      color: #b33f3f;
    }

    .history-dashboard-card {
      display: flex;
      flex-direction: column;
      gap: 12px;
      grid-column: 1 / -1;
      position: relative;
      padding-right: 22px;
    }

    .history-dashboard-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 18px;
    }

    .history-dashboard-head h2 {
      margin: 0;
      font-size: 22px;
      letter-spacing: -0.03em;
      color: #162b52;
    }

    .history-dashboard-head p {
      margin: 8px 0 0;
      color: var(--muted);
      line-height: 1.6;
    }

    .history-summary-card {
      display: none;
    }

    .history-summary-chart {
      width: 68px;
      height: 32px;
      position: relative;
      overflow: hidden;
    }

    .history-summary-chart svg {
      width: 100%;
      height: 100%;
    }

    .history-summary-label {
      color: #8a9ab6;
      font-size: 13px;
      font-weight: 700;
    }

    .history-summary-score {
      font-size: 34px;
      line-height: 1;
      letter-spacing: -0.05em;
      font-weight: 800;
      color: #17253b;
    }

    .history-summary-trend {
      color: var(--success);
      font-size: 13px;
      font-weight: 700;
    }

    .practice-main {
      width: 100%;
    }

    .panel {
      padding: 24px;
    }

    .panel-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
    }

    .panel-head-copy {
      min-width: 0;
    }

    .panel-head-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .panel h2 {
      margin: 0 0 10px;
      font-size: 28px;
      letter-spacing: -0.03em;
    }

    .muted {
      color: var(--muted);
      font-size: 14px;
      line-height: 1.55;
    }

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

    .form-grid.single-column {
      grid-template-columns: 1fr;
    }

    .field-label {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 8px;
    }

    .primary-button {
      width: 100%;
      margin-top: 18px;
      padding: 16px 20px;
      background: linear-gradient(135deg, var(--primary), var(--primary-deep));
      color: white;
      font-weight: 700;
      box-shadow: 0 16px 30px rgba(44, 143, 214, 0.24);
    }

    .secondary-button {
      padding: 13px 16px;
      background: var(--primary-soft);
      color: var(--primary-deep);
      font-weight: 700;
    }

    .status-line {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 16px;
    }

    .status-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-radius: 999px;
      background: var(--primary-soft);
      color: var(--primary-deep);
      font-size: 13px;
      font-weight: 700;
    }

    .status {
      margin-top: 14px;
      color: #51667f;
      font-size: 14px;
    }

    .saved-sessions {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 14px;
    }

    .setup-options-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
      align-items: start;
    }

    .saved-session-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: 20px;
      background: linear-gradient(180deg, #ffffff, #f8fbff);
    }

    .saved-session-copy {
      font-size: 14px;
      line-height: 1.55;
      color: #51667f;
    }

    .saved-session-copy strong {
      display: block;
      font-size: 15px;
      color: var(--ink);
    }

    .pronunciation-panel {
      margin-top: 0;
    }

    .pronunciation-header {
      display: flex;
      justify-content: space-between;
      align-items: start;
      gap: 14px;
      flex-wrap: wrap;
    }

    .pronunciation-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      margin-top: 18px;
    }

    .pronunciation-card {
      border: 1px solid var(--line);
      background: linear-gradient(180deg, #ffffff, #f8fbff);
      border-radius: 22px;
      padding: 18px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-height: 210px;
    }

    .pronunciation-term {
      font-size: 24px;
      font-weight: 800;
      letter-spacing: -0.03em;
    }

    .pronunciation-phonetic {
      display: inline-flex;
      width: fit-content;
      padding: 6px 10px;
      border-radius: 999px;
      background: var(--primary-soft);
      color: var(--primary-deep);
      font-size: 13px;
      font-weight: 700;
    }

    .pronunciation-meta {
      color: var(--muted);
      font-size: 14px;
      line-height: 1.55;
    }

    .pronunciation-example {
      padding: 12px 14px;
      border-radius: 16px;
      background: var(--panel-soft);
      border: 1px solid var(--line);
      font-size: 14px;
      line-height: 1.55;
      color: var(--ink);
    }

    .pronunciation-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: auto;
    }

    .pronunciation-status {
      margin-top: 14px;
      color: var(--muted);
      font-size: 14px;
      min-height: 22px;
    }

    .pronunciation-trainer {
      border-radius: 8px;
      padding: 18px;
      border: 1px solid var(--line);
      background: #ffffff;
    }

    .pronunciation-target-card {
      margin-top: 18px;
      padding: 18px;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: linear-gradient(180deg, #f8fbff, #ffffff);
    }

    .pronunciation-target-text {
      font-size: clamp(22px, 3vw, 30px);
      line-height: 1.12;
      letter-spacing: 0;
      font-weight: 800;
    }

    .pronunciation-target-hint {
      margin-top: 10px;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.55;
    }

    .pronunciation-session-brief {
      padding: 14px 16px;
      border-radius: 8px;
      background: rgba(24, 84, 184, 0.08);
      border: 1px solid rgba(24, 84, 184, 0.14);
      color: var(--ink);
      font-size: 14px;
      line-height: 1.55;
    }

    .pronunciation-progress-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 16px;
    }

    .pronunciation-progress-text {
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--primary-deep);
    }

    .pronunciation-step-track {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(34px, 1fr));
      gap: 6px;
      margin-top: 12px;
    }

    .pronunciation-step {
      height: 8px;
      border-radius: 999px;
      background: #dce6fb;
      overflow: hidden;
    }

    .pronunciation-step.active {
      background: var(--primary);
    }

    .pronunciation-feedback-map {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 10px;
    }

    .pronunciation-word-chip {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 9px 10px;
      background: #ffffff;
      min-width: 96px;
      flex: 1 1 120px;
    }

    .pronunciation-word-chip.good {
      border-color: rgba(41, 151, 100, 0.28);
      background: #f0fbf5;
    }

    .pronunciation-word-chip.practice {
      border-color: rgba(214, 149, 35, 0.35);
      background: #fff8e9;
    }

    .pronunciation-word-chip.missing {
      border-color: rgba(199, 70, 70, 0.35);
      background: #fff1f1;
    }

    .pronunciation-word-chip strong {
      display: block;
      color: var(--ink);
      font-size: 14px;
      line-height: 1.25;
    }

    .pronunciation-word-chip span {
      display: block;
      margin-top: 4px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
    }

    .pronunciation-admin-layout {
      display: grid;
      grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
      gap: 18px;
      align-items: start;
      margin-top: 16px;
    }

    .pronunciation-admin-sidebar {
      display: grid;
      gap: 12px;
      align-content: start;
    }

    .pronunciation-admin-search {
      width: 100%;
      border-radius: 16px;
      border: 1px solid rgba(188, 206, 234, 0.96);
      background: rgba(255, 255, 255, 0.94);
      box-shadow: inset 0 1px 2px rgba(21, 40, 76, 0.04);
    }

    .pronunciation-admin-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
      max-height: 72vh;
      overflow: auto;
      padding-right: 4px;
    }

    .pronunciation-admin-card {
      width: 100%;
      border: 1px solid var(--line);
      background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
      border-radius: 20px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      text-align: left;
      cursor: pointer;
      transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    }

    .pronunciation-admin-card:hover,
    .pronunciation-admin-card.active {
      border-color: rgba(24, 84, 184, 0.24);
      box-shadow: 0 14px 28px rgba(20, 45, 90, 0.08);
      transform: translateY(-1px);
    }

    .pronunciation-admin-card-title {
      font-size: 18px;
      font-weight: 800;
      letter-spacing: -0.02em;
      color: var(--ink);
    }

    .pronunciation-admin-card-meta {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .pronunciation-admin-form {
      display: grid;
      gap: 14px;
    }

    .pronunciation-admin-form-head {
      display: flex;
      justify-content: space-between;
      align-items: start;
      gap: 14px;
      flex-wrap: wrap;
    }

    .pronunciation-admin-form-title {
      margin: 0;
      font-size: 24px;
      letter-spacing: -0.03em;
    }

    .pronunciation-admin-form-copy {
      margin: 6px 0 0;
      max-width: 720px;
    }

    .pronunciation-admin-inline-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items: center;
    }

    .audio-action-button {
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }

    .audio-action-button svg {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
    }

    .pronunciation-admin-toolbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 14px;
    }

    .pronunciation-actions-row {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 18px;
      align-items: center;
    }

    .pronunciation-term-input {
      font-size: 28px;
      font-weight: 800;
      letter-spacing: -0.03em;
      line-height: 1.1;
      padding-top: 18px;
      padding-bottom: 18px;
    }

    .practice-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 22px;
      align-items: start;
    }

    .page-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 22px;
      align-items: start;
    }

    .page-shell-panel {
      background: var(--panel);
      backdrop-filter: blur(14px);
      border: 1px solid rgba(255, 255, 255, 0.8);
      border-radius: 30px;
      box-shadow: var(--shadow);
      padding: 24px;
    }

    .feedback-loading-stage {
      min-height: 420px;
      display: grid;
      align-items: center;
    }

    .feedback-loading-shell {
      width: min(560px, 100%);
      margin: 0 auto;
    }

    .feedback-loading-main {
      position: relative;
      overflow: hidden;
      border-radius: 28px;
      border: 1px solid rgba(198, 214, 240, 0.92);
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.96));
      box-shadow: 0 20px 44px rgba(31, 75, 157, 0.08);
      padding: 34px 30px 28px;
      text-align: center;
    }

    .feedback-loading-main::before {
      content: "";
      position: absolute;
      inset: auto -40px -72px auto;
      width: 160px;
      height: 160px;
      border-radius: 999px;
      background: rgba(44, 143, 214, 0.06);
      pointer-events: none;
    }

    .feedback-loading-side,
    .feedback-loading-meta {
      display: none !important;
    }

    .feedback-loading-kicker {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      color: var(--primary-deep);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .feedback-loading-kicker .mini-spinner {
      width: 14px;
      height: 14px;
    }

    .feedback-loading-copy {
      position: relative;
      z-index: 1;
      margin-top: 16px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: center;
    }

    .feedback-loading-stage h2 {
      margin: 0;
      font-size: 34px;
      letter-spacing: -0.04em;
      line-height: 1.02;
    }

    .feedback-loading-stage p {
      margin: 0;
      max-width: 420px;
      color: var(--muted);
      line-height: 1.55;
      font-size: 14px;
    }

    .feedback-loading-estimate {
      margin-top: 2px;
      color: #38558a;
      font-size: 13px;
      font-weight: 800;
    }

    .feedback-loading-elapsed {
      margin-top: 2px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }

    .feedback-loading-progress {
      position: relative;
      z-index: 1;
      margin-top: 10px;
      display: flex;
      flex-direction: column;
      gap: 0;
      align-items: center;
    }

    .feedback-step-list {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .feedback-step {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 16px;
      border-radius: 18px;
      border: 1px solid rgba(208, 219, 239, 0.92);
      background: rgba(255, 255, 255, 0.82);
      transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
    }

    .feedback-step.active {
      transform: translateY(-1px);
      border-color: rgba(44, 143, 214, 0.28);
      background: linear-gradient(180deg, rgba(245, 250, 255, 1), rgba(236, 245, 255, 0.92));
      box-shadow: 0 16px 30px rgba(31, 75, 157, 0.08);
    }

    .feedback-step.done {
      border-color: rgba(53, 182, 93, 0.24);
      background: linear-gradient(180deg, rgba(248, 255, 250, 1), rgba(239, 251, 243, 0.92));
    }

    .feedback-step-marker {
      flex: 0 0 auto;
      width: 34px;
      height: 34px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(31, 75, 157, 0.08);
      border: 1px solid rgba(31, 75, 157, 0.12);
      color: var(--primary-deep);
      font-size: 13px;
      font-weight: 900;
    }

    .feedback-step.active .feedback-step-marker {
      background: linear-gradient(135deg, #1f4b9d, #2c8fd6);
      border-color: transparent;
      color: white;
    }

    .feedback-step.done .feedback-step-marker {
      background: linear-gradient(135deg, #35b65d, #208945);
      border-color: transparent;
      color: white;
    }

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

    .feedback-step-copy strong {
      font-size: 14px;
      color: var(--ink);
    }

    .feedback-step-copy span {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.45;
    }

    .feedback-loading-meta {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 18px;
    }

    .feedback-meta-chip {
      padding: 10px 12px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.88);
      border: 1px solid rgba(208, 219, 239, 0.92);
      color: var(--primary-deep);
      font-size: 12px;
      font-weight: 800;
    }

    .feedback-side-kicker {
      position: relative;
      z-index: 1;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--primary-deep);
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .feedback-side-title {
      position: relative;
      z-index: 1;
      margin: 0;
      font-size: 22px;
      letter-spacing: -0.03em;
      color: var(--ink);
    }

    .feedback-side-list {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .feedback-side-list li {
      padding: 14px 14px 14px 42px;
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.82);
      border: 1px solid rgba(208, 219, 239, 0.92);
      color: var(--muted);
      line-height: 1.55;
      position: relative;
    }

    .feedback-side-list li::before {
      content: "";
      position: absolute;
      left: 16px;
      top: 18px;
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: linear-gradient(135deg, #1f4b9d, #2c8fd6);
      box-shadow: 0 0 0 5px rgba(44, 143, 214, 0.1);
    }

    .feedback-side-note {
      position: relative;
      z-index: 1;
      padding: 16px 18px;
      border-radius: 20px;
      background: linear-gradient(180deg, rgba(31, 75, 157, 0.08), rgba(44, 143, 214, 0.04));
      border: 1px solid rgba(44, 143, 214, 0.14);
      color: var(--primary-deep);
      font-size: 13px;
      line-height: 1.6;
      font-weight: 600;
    }

    .topbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 14px;
      margin-bottom: 18px;
    }

    .title-stack h1 {
      margin: 0;
      font-size: clamp(28px, 4vw, 42px);
      letter-spacing: -0.04em;
    }

    .title-stack .sub {
      margin-top: 8px;
      color: var(--muted);
      font-size: 15px;
    }

    .back-link {
      padding: 11px 15px;
      background: rgba(255, 255, 255, 0.88);
      color: var(--ink);
      border: 1px solid rgba(216, 227, 245, 0.92);
      font-weight: 700;
      border-radius: 14px;
      box-shadow: 0 10px 20px rgba(31, 75, 157, 0.05);
    }

    .ghost-button {
      padding: 12px 16px;
      background: white;
      color: var(--primary-deep);
      border: 1px solid var(--line);
      font-weight: 700;
    }

    .user-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 14px;
      border-radius: 999px;
      background: var(--primary-soft);
      color: var(--primary-deep);
      border: 1px solid rgba(44, 143, 214, 0.18);
      font-size: 13px;
      font-weight: 800;
      white-space: nowrap;
      cursor: pointer;
    }

    .user-menu {
      position: relative;
      display: inline-flex;
      align-items: center;
    }

    .user-menu-trigger {
      appearance: none;
      -webkit-appearance: none;
      background: var(--primary-soft);
    }

    .user-menu-trigger::after {
      content: "▾";
      font-size: 11px;
      opacity: 0.78;
      margin-left: 2px;
    }

    .user-menu-panel {
      position: absolute;
      top: calc(100% + 10px);
      right: 0;
      min-width: 180px;
      padding: 8px;
      border-radius: 18px;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.98);
      box-shadow: 0 20px 40px rgba(35, 84, 153, 0.18);
      display: flex;
      flex-direction: column;
      gap: 4px;
      z-index: 40;
    }

    .user-menu-item {
      width: 100%;
      border-radius: 14px;
      padding: 12px 14px;
      background: transparent;
      color: var(--ink);
      text-align: left;
      font-weight: 700;
    }

    .user-menu-item:hover {
      background: var(--panel-soft);
    }

    .user-menu-item-submenu {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }

    .user-menu-item-submenu[aria-expanded="true"] {
      background: var(--panel-soft);
    }

    .view-as-user-panel {
      position: fixed;
      z-index: 200;
      width: min(360px, calc(100vw - 24px));
      max-height: calc(100dvh - 24px);
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 16px;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: #fff;
      box-shadow: 0 20px 48px rgba(14, 30, 70, 0.24);
      color: var(--ink);
    }

    .view-as-user-search-label {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }

    .view-as-user-search {
      width: 100%;
      min-height: 42px;
      padding: 9px 12px;
      border: 1px solid #b7cbed;
      border-radius: 8px;
      font: inherit;
      font-size: 14px;
      background: #fff;
      color: var(--ink);
    }

    .view-as-user-search:focus-visible {
      outline: 2px solid var(--primary);
      outline-offset: 2px;
    }

    .view-as-user-list-heading {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .05em;
      color: var(--muted);
    }

    .view-as-user-list {
      min-height: 0;
      max-height: 390px;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .view-as-user-option {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px;
      border: 1px solid #dbe5f5;
      border-radius: 9px;
      background: #fff;
      color: var(--ink);
      text-align: left;
    }

    .view-as-user-option:hover,
    .view-as-user-option:focus-visible {
      border-color: var(--primary);
      background: var(--panel-soft);
    }

    .view-as-user-initials {
      width: 34px;
      height: 34px;
      flex: none;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: #e9eef8;
      color: #506280;
      font-size: 11px;
      font-weight: 800;
    }

    .view-as-user-option-copy {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .view-as-user-option-copy strong,
    .view-as-user-option-copy small {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .view-as-user-option-copy strong { font-size: 13px; }
    .view-as-user-option-copy small { color: var(--muted); font-size: 11px; }
    .view-as-user-status { color: var(--muted); font-size: 12px; line-height: 1.4; }
    .view-as-user-status:empty { display: none; }

    .user-menu-item.danger {
      color: var(--danger);
    }

    .admin-panel {
      border: 1px solid var(--line);
      background: linear-gradient(180deg, #ffffff, #f8fbff);
      border-radius: 24px;
      padding: 20px;
    }

    .settings-team-panel {
      display: flex;
      flex-direction: column;
      gap: 22px;
      padding: 0;
      border: none;
      background: transparent;
      box-shadow: none;
    }

    .team-admin-shell {
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    .team-admin-card {
      padding: 22px;
      border-radius: 24px;
      border: 1px solid rgba(214, 223, 237, 0.95);
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 251, 255, 0.98));
      box-shadow: 0 12px 26px rgba(31, 75, 157, 0.06);
    }

    .mass-notification-audience {
      margin-bottom: 16px;
      color: #3157d8;
      font-size: 13px;
      font-weight: 800;
    }

    .mass-notification-form { display: grid; gap: 8px; }
    .mass-notification-form .field-label { margin: 8px 0 0; }
    .mass-notification-form input,
    .mass-notification-form textarea {
      width: 100%;
      padding: 12px 14px;
      border: 1px solid #cbd8ec;
      border-radius: 12px;
      background: #fff;
      color: #172b55;
      font: inherit;
      resize: vertical;
    }

    .mass-notification-form textarea { min-height: 110px; }
    .mass-notification-form .primary-button { width: auto; justify-self: start; margin-top: 10px; }

    .team-admin-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 18px;
      margin-bottom: 16px;
    }

    .team-admin-head h4 {
      margin: 0 0 8px;
      font-size: 22px;
      letter-spacing: -0.03em;
      color: #17315c;
    }

    .team-admin-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .team-admin-status {
      margin-top: 0;
      min-height: 20px;
    }

    .team-admin-meta {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .team-admin-count {
      display: inline-flex;
      align-items: center;
      padding: 8px 12px;
      border-radius: 999px;
      background: var(--panel-soft);
      color: var(--primary-deep);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .team-admin-form-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
    }

    .team-admin-form-grid .field-span-2 {
      grid-column: span 2;
    }

    .admin-users-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 0;
    }

    .admin-user-item {
      display: grid;
      grid-template-columns: minmax(240px, 1fr) minmax(300px, 0.85fr) auto;
      align-items: center;
      gap: 22px;
      padding: 18px;
      border-radius: 18px;
      border: 1px solid rgba(214, 223, 237, 0.95);
      background: white;
      box-shadow: 0 12px 28px rgba(36, 72, 128, 0.045);
    }

    .admin-user-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 14px;
    }

    .admin-user-copy {
      line-height: 1.55;
      color: var(--muted);
      font-size: 14px;
    }

    .admin-user-copy strong {
      display: block;
      color: var(--ink);
      font-size: 16px;
      margin-bottom: 4px;
    }

    .admin-user-handle,
    .admin-user-email {
      display: block;
      overflow-wrap: anywhere;
    }

    .admin-user-email {
      margin-top: 2px;
      color: #6c7da0;
    }

    .admin-user-meta {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 10px;
      min-width: 0;
    }

    .admin-user-pill-row {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .admin-user-tag {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: max-content;
      min-height: 30px;
      padding: 6px 11px;
      border-radius: 999px;
      background: #f3f7ff;
      color: #5b6f93;
      font-size: 12px;
      font-weight: 800;
    }

    .admin-user-tag.active {
      background: #eef8f1;
      color: #2c7a45;
    }

    .admin-user-tag.paused {
      background: #fff3f1;
      color: #b34539;
    }

    .admin-user-operational-row {
      display: grid;
      grid-template-columns: auto minmax(150px, 1fr);
      align-items: center;
      gap: 10px;
      width: 100%;
      max-width: 330px;
    }

    .admin-user-operational-label {
      color: var(--muted);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .admin-user-agent-access {
      display: grid;
      gap: 7px;
      width: min(100%, 430px);
      padding: 10px 12px;
      border: 1px solid #dfe8f6;
      border-radius: 14px;
      background: #f8fbff;
    }

    .admin-user-agent-access-title {
      color: #667b9f;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .admin-user-agent-access-option {
      display: flex;
      align-items: center;
      gap: 9px;
      color: #20385e;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
    }

    .admin-user-agent-access-option input {
      width: 17px;
      height: 17px;
      accent-color: #2f6dea;
    }

    .admin-users-toolbar {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin: 12px 0;
      align-items: center;
    }

    .admin-users-toolbar input,
    .admin-users-toolbar select {
      min-width: 190px;
      max-width: 260px;
    }

    .team-status-overview {
      display: grid;
      grid-template-columns: repeat(3, minmax(150px, 1fr));
      gap: 10px;
      margin: 16px 0 14px;
    }

    .team-status-view {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
      min-height: 76px;
      padding: 13px 14px;
      border: 1px solid #dfe8f6;
      border-radius: 16px;
      background: #f8fbff;
      color: #496285;
      text-align: left;
      cursor: pointer;
    }

    .team-status-view:hover,
    .team-status-view.active {
      border-color: #7ea7ff;
      background: #edf4ff;
      color: #1f56c2;
      box-shadow: 0 8px 20px rgba(47, 109, 234, 0.09);
    }

    .team-status-view strong {
      font-size: 20px;
      line-height: 1;
    }

    .team-status-view span {
      font-size: 12px;
      font-weight: 850;
      line-height: 1.25;
    }

    .admin-user-tag.directory-active {
      background: #eef8f1;
      color: #2c7a45;
    }

    .admin-user-tag.directory-unlisted {
      background: #eef4ff;
      color: #2f62c8;
    }

    .admin-user-tag.directory-inactive {
      background: #fff3f1;
      color: #b34539;
    }

    .admin-user-status-select {
      width: 100%;
      min-width: 150px;
      padding: 8px 34px 8px 12px;
      border-radius: 12px;
      font-size: 12px;
      font-weight: 800;
    }

    .admin-user-login {
      font-size: 13px;
      color: var(--muted);
      padding-top: 2px;
    }

    .admin-user-menu-wrap {
      position: relative;
      justify-self: end;
    }

    .admin-user-menu-trigger {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 12px;
      border: 1px solid rgba(214, 223, 237, 0.95);
      background: #fff;
      color: #3757a6;
      font-size: 20px;
      font-weight: 800;
      cursor: pointer;
      box-shadow: 0 8px 18px rgba(31, 75, 157, 0.08);
    }

    .admin-user-menu {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      min-width: 180px;
      padding: 10px;
      border-radius: 16px;
      border: 1px solid rgba(214, 223, 237, 0.95);
      background: #fff;
      box-shadow: 0 18px 36px rgba(18, 40, 76, 0.16);
      display: none;
      flex-direction: column;
      gap: 8px;
      z-index: 20;
    }

    .admin-user-menu.open {
      display: flex;
    }

    .admin-user-actions {
      display: contents;
    }

    .admin-user-menu .secondary-button {
      width: 100%;
      justify-content: flex-start;
      text-align: left;
      min-height: 40px;
    }

    @media (max-width: 960px) {
      .team-status-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .admin-user-item {
        grid-template-columns: 1fr;
        align-items: flex-start;
      }

      .admin-user-meta,
      .admin-user-operational-row {
        width: 100%;
        max-width: none;
      }

      .admin-user-menu-wrap {
        justify-self: stretch;
      }

      .admin-user-menu {
        left: 0;
        right: auto;
      }
    }

    .role-chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 6px 10px;
      border-radius: 999px;
      background: var(--panel-soft);
      color: var(--primary-deep);
      font-size: 12px;
      font-weight: 800;
    }

    .history-library {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 14px;
      max-height: 470px;
      overflow-y: auto;
      padding-right: 4px;
    }

    .history-library::-webkit-scrollbar {
      width: 8px;
    }

    .history-library::-webkit-scrollbar-thumb {
      background: rgba(72, 122, 223, 0.24);
      border-radius: 999px;
    }

    .history-pagination {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-top: 14px;
      padding-top: 10px;
      border-top: 1px solid rgba(197, 211, 238, 0.6);
    }

    .history-pagination-copy {
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
    }

    .history-load-more-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      padding: 0 16px;
      border-radius: 12px;
      border: 1px solid rgba(72, 122, 223, 0.24);
      background: rgba(255, 255, 255, 0.96);
      color: var(--primary);
      font-weight: 800;
      cursor: pointer;
    }

    .history-load-more-btn:disabled {
      opacity: 0.6;
      cursor: wait;
    }

    .history-toolbar {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 0;
      margin-left: auto;
      align-items: center;
      justify-content: flex-end;
    }

    .history-filter-trigger {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      min-height: 44px;
      padding: 0 16px;
      border-radius: 14px;
      border: 1px solid rgba(197, 211, 238, 0.92);
      background: rgba(255, 255, 255, 0.92);
      color: #1a315f;
      font-weight: 850;
      box-shadow: 0 10px 22px rgba(15, 37, 83, 0.06);
      cursor: pointer;
    }

    .history-filter-trigger svg {
      width: 16px;
      height: 16px;
      stroke-width: 2;
    }

    .history-filter-count {
      min-width: 22px;
      height: 22px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      background: #2f5bd7;
      color: #fff;
      font-size: 12px;
      font-weight: 900;
    }

    .history-filter-count.hidden {
      display: none;
    }

    .history-sort-select {
      min-width: 210px;
    }

    .history-filter-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(15, 23, 42, 0.34);
      backdrop-filter: blur(3px);
      z-index: 95;
    }

    .history-filter-backdrop.hidden {
      display: none;
    }

    .history-filter-drawer {
      position: fixed;
      top: 0;
      right: 0;
      width: min(440px, 100vw);
      height: 100vh;
      display: flex;
      flex-direction: column;
      background: rgba(255, 255, 255, 0.98);
      border-left: 1px solid rgba(199, 214, 238, 0.95);
      box-shadow: -28px 0 60px rgba(18, 35, 73, 0.18);
      z-index: 96;
      transform: translateX(0);
      transition: transform 180ms ease;
    }

    .history-filter-drawer.hidden {
      display: flex;
      transform: translateX(104%);
      pointer-events: none;
    }

    .history-filter-head {
      min-height: 76px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 0 24px;
      border-bottom: 1px solid rgba(218, 226, 242, 0.92);
    }

    .history-filter-head h3 {
      margin: 0;
      color: #152748;
      font-size: 19px;
      letter-spacing: -0.02em;
    }

    .history-filter-close {
      width: 34px;
      height: 34px;
      border: 0;
      border-radius: 10px;
      background: #eef3fb;
      color: #61708d;
      font-size: 24px;
      line-height: 1;
      cursor: pointer;
    }

    .history-filter-body {
      overflow-y: auto;
      padding: 18px 24px 24px;
    }

    .history-filter-search {
      position: relative;
      margin-bottom: 18px;
    }

    .history-filter-search svg {
      position: absolute;
      left: 14px;
      top: 50%;
      width: 18px;
      height: 18px;
      transform: translateY(-50%);
      color: #7a8baa;
      pointer-events: none;
    }

    .history-filter-search input {
      width: 100%;
      padding-left: 42px;
      border-color: rgba(173, 195, 245, 0.95);
      box-shadow: 0 0 0 3px rgba(74, 111, 245, 0.06);
    }

    .history-filter-section {
      border-top: 1px solid rgba(226, 232, 243, 0.96);
      padding: 16px 0;
    }

    .history-filter-section:first-of-type {
      border-top: 0;
    }

    .history-filter-section-title {
      margin-bottom: 10px;
      color: #435675;
      font-size: 12px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .history-filter-field {
      display: grid;
      gap: 8px;
      margin-top: 12px;
    }

    .history-filter-field:first-of-type {
      margin-top: 0;
    }

    .history-filter-field label {
      color: #637491;
      font-size: 13px;
      font-weight: 800;
    }

    .history-filter-field select {
      width: 100%;
    }

    .history-filter-footer {
      margin-top: 8px;
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      border-top: 1px solid rgba(226, 232, 243, 0.96);
      padding-top: 16px;
    }

    .roleplay-code-note {
      margin-top: 10px;
      padding: 8px 10px;
      border-radius: 12px;
      border: 1px solid rgba(199, 214, 238, 0.9);
      background: rgba(246, 249, 255, 0.92);
      color: #54698f;
      font-size: 12px;
      font-weight: 800;
      overflow-wrap: anywhere;
    }

    .history-item {
      display: grid;
      grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(92px, 0.55fr)) 52px;
      gap: 12px;
      align-items: center;
      padding: 14px 16px;
      border: 1px solid var(--line);
      border-radius: 20px;
      background: linear-gradient(180deg, #ffffff, #f8fbff);
    }

    .practice-shell {
      display: grid;
      grid-template-columns: 220px minmax(0, 1fr);
      gap: 24px;
      align-items: start;
    }

    .practice-page-main {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    .practice-page-topbar {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
    }

    .practice-breadcrumb {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: #6f83a9;
      font-size: 14px;
      font-weight: 700;
    }

    .practice-breadcrumb strong {
      color: #193257;
    }

    .practice-page-status {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 18px 20px;
      border-radius: 22px;
      border: 1px solid rgba(213, 225, 244, 0.95);
      background: rgba(255, 255, 255, 0.88);
      box-shadow: 0 18px 38px rgba(31, 75, 157, 0.06);
    }

    .practice-page-status-copy {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .practice-page-status-copy strong {
      font-size: 16px;
      color: #173057;
    }

    .practice-page-status-copy span {
      color: var(--muted);
      font-size: 13px;
    }

    .practice-status-icon {
      width: 40px;
      height: 40px;
      border-radius: 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(57, 201, 116, 0.12);
      color: #2da062;
      font-size: 18px;
      font-weight: 800;
      flex-shrink: 0;
    }

    .practice-stage-card {
      width: 100%;
      max-width: none;
      margin: 0;
      padding: 18px;
      border-radius: 26px;
      box-shadow: 0 20px 44px rgba(26, 52, 104, 0.1);
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(245, 249, 255, 0.94));
    }

    .practice-stage-card .call-stage-header {
      margin-bottom: 6px;
      justify-content: flex-end;
    }

    .practice-stage-card .call-stage-title,
    .practice-stage-card .call-stage-header > div:first-child {
      display: none;
    }

    .practice-stage-card .call-board {
      grid-template-columns: 172px 1fr;
      min-height: 292px;
      padding: 12px;
      border-radius: 22px;
      background: linear-gradient(180deg, #f7f9ff 0%, #fbfcff 100%);
      border: 1px solid rgba(219, 229, 246, 0.9);
    }

    .practice-stage-card .prospect-card {
      padding: 12px;
      border-radius: 20px;
      background: linear-gradient(180deg, #f6f8ff 0%, #eef3ff 100%);
      border-color: rgba(218, 228, 246, 0.95);
      box-shadow: none;
      gap: 6px;
    }

    .practice-stage-card .avatar-block {
      height: 160px;
      border-radius: 18px;
    }

    .practice-stage-card .prospect-identity {
      margin-top: 8px;
      text-align: center;
      align-items: center;
      padding: 8px 10px;
      border-radius: 14px;
    }

    .practice-stage-card .avatar-meta span:first-child {
      font-size: 17px;
      font-weight: 800;
      color: #173057;
    }

    .practice-stage-card .avatar-meta span:last-child {
      font-size: 12px;
      color: #7e90b1;
    }

    .practice-stage-card .avatar-meta span:last-child:empty {
      display: none;
    }

    .practice-stage-card .avatar-meta .prospect-address {
      color: #4f6289;
      font-size: 11px;
      white-space: normal;
      overflow-wrap: anywhere;
    }

    .practice-stage-card .prospect-timer {
      align-self: center;
      margin-top: 6px;
      background: white;
      color: #1f4b9d;
      border: 1px solid rgba(206, 220, 250, 0.95);
      box-shadow: 0 8px 16px rgba(91, 114, 255, 0.06);
    }

    .practice-stage-card .conversation-screen {
      border-radius: 20px;
      background:
        radial-gradient(circle at 50% 112%, rgba(76, 124, 255, 0.09), transparent 32%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 252, 255, 0.98));
      border-color: rgba(224, 232, 246, 0.95);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
    }

    .practice-stage-card .conversation-screen::after {
      content: "";
      position: absolute;
      left: 12%;
      right: 12%;
      bottom: 10px;
      height: 84px;
      border-radius: 50%;
      background:
        radial-gradient(circle, rgba(87, 127, 255, 0.09) 1px, transparent 1.5px);
      background-size: 13px 13px;
      opacity: 0.22;
      pointer-events: none;
      transform: perspective(260px) rotateX(68deg);
      transform-origin: center bottom;
    }

    .practice-stage-card .screen-center {
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: 10px;
      padding: 18px 20px 16px;
    }

    .practice-stage-card .thinking-dots {
      width: auto;
      height: auto;
      min-height: 0;
      padding: 7px 10px;
      border-radius: 999px;
      background: rgba(245, 249, 255, 0.92);
      border: 1px solid rgba(214, 225, 246, 0.95);
      box-shadow: 0 8px 18px rgba(31, 75, 157, 0.04);
    }

    .practice-stage-card .screen-headline {
      font-size: 15px;
      color: #173057;
      line-height: 1.2;
      letter-spacing: -0.01em;
    }

    .practice-stage-card .screen-subline {
      display: none;
    }

    .practice-control-row {
      display: flex;
      justify-content: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 12px;
    }

    .practice-control-card {
      min-width: 88px;
      padding: 10px 12px;
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.92);
      border: 1px solid rgba(214, 225, 245, 0.98);
      box-shadow: 0 10px 22px rgba(31, 75, 157, 0.05);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
    }

    .practice-control-card:hover {
      transform: translateY(-1px);
      box-shadow: 0 14px 26px rgba(31, 75, 157, 0.08);
    }

    .practice-control-card.primary {
      min-width: 156px;
      background: linear-gradient(135deg, #20439d, #2a66e1);
      color: white;
      border-color: transparent;
      box-shadow: 0 14px 28px rgba(32, 67, 157, 0.22);
    }

    .practice-control-card .icon-button {
      width: 38px;
      height: 38px;
      padding: 0;
      border: 1px solid rgba(216, 227, 245, 0.96);
      border-radius: 12px;
      background: linear-gradient(180deg, #ffffff, #f6f9ff);
      box-shadow: 0 8px 16px rgba(31, 75, 157, 0.06);
      font-size: 0;
      color: inherit;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .practice-control-card .control-label {
      font-size: 12px;
      font-weight: 800;
      color: inherit;
    }

    .practice-control-card .control-subtext {
      display: none;
    }

    .practice-control-card.primary .icon-button {
      background: rgba(255, 255, 255, 0.14);
      border-color: rgba(255, 255, 255, 0.18);
      box-shadow: none;
    }

    .practice-control-icon {
      width: 16px;
      height: 16px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: currentColor;
    }

    .practice-control-icon svg {
      width: 16px;
      height: 16px;
      display: block;
    }

    .practice-stage-card.speaking .conversation-screen {
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 0 0 1px rgba(88, 126, 245, 0.08),
        0 20px 40px rgba(64, 98, 190, 0.08);
    }

    .practice-stage-card.speaking .screen-headline {
      color: #12306b;
    }

    .practice-stage-card.speaking .speaker-chip {
      background: linear-gradient(135deg, #2149a7, #2d68e3);
      color: white;
      border-color: transparent;
      box-shadow: 0 12px 22px rgba(45, 104, 227, 0.18);
    }

    .practice-stage-card.speaking .thinking-dots {
      background: linear-gradient(180deg, rgba(236, 243, 255, 1), rgba(222, 233, 255, 0.98));
      border-color: rgba(161, 186, 245, 0.95);
      box-shadow: 0 16px 28px rgba(45, 104, 227, 0.12);
    }

    .history-main strong {
      display: block;
      color: var(--ink);
      font-size: 15px;
      margin-bottom: 4px;
      line-height: 1.35;
      word-break: break-word;
    }

    .history-subrow {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .history-difficulty {
      display: inline-flex;
      align-items: center;
      padding: 4px 9px;
      border-radius: 999px;
      background: var(--panel-soft);
      color: var(--primary-deep);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.02em;
    }

    .history-team-status {
      display: inline-flex;
      align-items: center;
      padding: 4px 9px;
      border-radius: 999px;
      background: rgba(76, 112, 245, 0.12);
      color: #2e4faf;
      font-size: 11px;
      font-weight: 850;
      letter-spacing: 0.01em;
    }

    .history-team-status.gestion {
      background: rgba(239, 155, 40, 0.14);
      color: #995e10;
    }

    .admin-roleplay-flag {
      display: inline-flex;
      align-items: center;
      padding: 4px 9px;
      border-radius: 999px;
      background: rgba(178, 75, 28, 0.12);
      color: #9c431e;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.01em;
    }

    .admin-roleplay-flag.insult-warning {
      background: rgba(198, 45, 45, 0.13);
      color: #a62f2f;
    }

    .admin-roleplay-flag.resource-warning {
      background: rgba(239, 155, 40, 0.16);
      color: #91570b;
    }

    .history-reviewed-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 4px 9px;
      border-radius: 999px;
      background: rgba(46, 155, 93, 0.12);
      color: #24794a;
      font-size: 11px;
      font-weight: 850;
      letter-spacing: 0.01em;
    }

    .history-reviewed-badge.in-review {
      background: rgba(239, 155, 40, 0.16);
      color: #91570b;
    }

    .history-item.in-review-by-me {
      border-color: rgba(239, 155, 40, 0.34);
      box-shadow:
        inset 4px 0 0 rgba(239, 155, 40, 0.78),
        0 12px 28px rgba(14, 32, 72, 0.05);
    }

    .history-item.reviewed-by-me {
      border-color: rgba(46, 155, 93, 0.28);
      box-shadow:
        inset 4px 0 0 rgba(46, 155, 93, 0.72),
        0 12px 28px rgba(14, 32, 72, 0.05);
    }

    .history-meta,
    .history-cell {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.45;
    }

    .history-cell strong {
      display: block;
      color: var(--ink);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 4px;
    }

    .history-score {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 72px;
      padding: 6px 10px;
      border-radius: 12px;
      font-weight: 800;
      color: white;
    }

    .history-score.good {
      background: #2e9b5d;
    }

    .history-score.mid {
      background: #ef9b28;
    }

    .history-score.low {
      background: #d45b5b;
    }

    .dashboard-grid {
      display: grid;
      gap: 18px;
      margin-top: 18px;
    }

    .dashboard-section {
      border: 1px solid var(--line);
      border-radius: 22px;
      background: linear-gradient(180deg, #ffffff, #f8fbff);
      padding: 18px;
    }

    .dashboard-section-title {
      font-size: 13px;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--primary-deep);
      margin-bottom: 14px;
    }

    .dashboard-health-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
    }

    .dashboard-health-card {
      border-radius: 18px;
      background: #eef4ff;
      padding: 16px;
      border: 1px solid rgba(38, 84, 190, 0.08);
    }

    .dashboard-health-label {
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 6px;
    }

    .dashboard-health-value {
      font-size: 32px;
      font-weight: 900;
      line-height: 1;
      color: var(--ink);
    }

    .dashboard-bars {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .dashboard-bar-row {
      display: grid;
      grid-template-columns: minmax(160px, 220px) minmax(0, 1fr) 64px;
      gap: 12px;
      align-items: center;
    }

    .dashboard-bar-label {
      font-size: 14px;
      font-weight: 700;
      color: var(--ink);
    }

    .dashboard-bar-track {
      height: 14px;
      border-radius: 999px;
      background: #e9eef7;
      overflow: hidden;
    }

    .dashboard-bar-fill {
      height: 100%;
      border-radius: 999px;
      background: linear-gradient(90deg, #d45757 0%, #ef9b28 48%, #2e9b5d 100%);
    }

    .dashboard-bar-value {
      text-align: right;
      font-size: 13px;
      font-weight: 800;
      color: var(--ink);
    }

    .dashboard-split {
      display: grid;
      grid-template-columns: 1.5fr 1fr;
      gap: 18px;
    }

    .dashboard-agent-lists {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }

    .dashboard-agent-card {
      border-radius: 18px;
      background: #f7faff;
      padding: 14px;
      border: 1px solid var(--line);
    }

    .dashboard-agent-title {
      font-size: 13px;
      font-weight: 900;
      color: var(--primary-deep);
      margin-bottom: 10px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    .dashboard-agent-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .dashboard-agent-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      border-radius: 14px;
      background: white;
      border: 1px solid var(--line);
      padding: 12px;
    }

    .dashboard-agent-name {
      font-size: 14px;
      font-weight: 800;
      color: var(--ink);
    }

    .dashboard-agent-meta {
      font-size: 12px;
      color: var(--muted);
      margin-top: 2px;
    }

    .dashboard-agent-score {
      font-size: 16px;
      font-weight: 900;
      color: var(--primary-deep);
      white-space: nowrap;
    }

    .dashboard-insights {
      display: grid;
      gap: 12px;
    }

    .dashboard-insight {
      border-radius: 18px;
      background: #f7faff;
      border: 1px solid var(--line);
      padding: 14px;
    }

    .dashboard-insight-label {
      font-size: 12px;
      font-weight: 800;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-bottom: 6px;
    }

    .dashboard-insight-value {
      font-size: 18px;
      font-weight: 900;
      color: var(--ink);
      margin-bottom: 4px;
    }

    .dashboard-insight-meta {
      font-size: 13px;
      color: var(--muted);
    }

    .leaderboard-card {
      display: grid;
      gap: 18px;
      overflow: visible;
      background:
        radial-gradient(circle at top left, rgba(255, 217, 164, 0.18), transparent 28%),
        linear-gradient(180deg, #fffefb, #f7f9fe);
      border: 1px solid #e3eaf5;
      box-shadow: 0 24px 60px rgba(84, 104, 145, 0.10);
      color: #22304f;
    }

    .leaderboard-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 16px;
      flex-wrap: wrap;
    }

    .leaderboard-head h2 {
      margin: 0;
      font-size: 34px;
      color: #2d2417;
      letter-spacing: -0.04em;
    }

    .leaderboard-head p {
      margin: 6px 0 0;
      color: #6b5b43;
      max-width: 620px;
      line-height: 1.55;
    }

    .leaderboard-controls {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: end;
      justify-content: flex-end;
    }

    .leaderboard-filter-group {
      display: grid;
      gap: 4px;
    }

    .leaderboard-filter-label {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: #7382a4;
      font-weight: 850;
    }

    .leaderboard-filter-input {
      min-width: 150px;
      border-radius: 14px;
      border: 1px solid #d9e2f0;
      background: rgba(255, 255, 255, 0.96);
      color: #22304f;
      padding: 10px 12px;
      font: inherit;
    }

    .leaderboard-filter-button {
      border: 0;
      border-radius: 14px;
      padding: 11px 16px;
      background: linear-gradient(135deg, #ffb05f, #ff9651);
      color: #fffdf9;
      font-weight: 900;
      cursor: pointer;
      box-shadow: 0 10px 20px rgba(207, 129, 60, 0.18);
    }

    .leaderboard-status {
      margin: 0;
      color: #7a6750;
      font-size: 13px;
    }

    .leaderboard-total {
      display: grid;
      place-items: center;
      min-height: 118px;
      border-radius: 24px;
      border: 1px solid #ead8bc;
      background: linear-gradient(180deg, #fffaf0, #f7e8cb);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
      text-align: center;
    }

    .leaderboard-total-label {
      font-size: 12px;
      font-weight: 950;
      color: #8f7652;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .leaderboard-total-value {
      margin-top: 8px;
      color: #bc5e25;
      font-size: clamp(34px, 5vw, 52px);
      font-weight: 950;
      line-height: 1;
      text-shadow: 0 10px 20px rgba(226, 156, 64, 0.18);
    }

    .leaderboard-total-value span {
      font-size: 0.5em;
      font-weight: 900;
    }

    .leaderboard-podium-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
    }

    .leaderboard-podium {
      border-radius: 24px;
      padding: 18px;
      border: 1px solid #dde5f1;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.96));
      box-shadow: 0 14px 30px rgba(79, 104, 148, 0.08);
      display: grid;
      gap: 14px;
    }

    .leaderboard-podium-header {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: baseline;
    }

    .leaderboard-podium-title-wrap {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    .leaderboard-podium-title {
      font-size: 20px;
      font-weight: 950;
      color: #2f2618;
      letter-spacing: -0.03em;
    }

    .leaderboard-info-chip {
      position: relative;
      display: inline-grid;
      place-items: center;
      width: 20px;
      height: 20px;
      border-radius: 999px;
      border: 1px solid #cfd9eb;
      background: #f9fbff;
      color: #5571a8;
      font-size: 11px;
      font-weight: 900;
      cursor: help;
      flex: 0 0 auto;
    }

    .leaderboard-info-chip::after {
      content: attr(data-tooltip);
      position: absolute;
      right: 0;
      bottom: calc(100% + 10px);
      transform: translateY(0);
      width: min(360px, 82vw);
      max-width: 360px;
      padding: 10px 12px;
      border-radius: 14px;
      background: #2f3547;
      color: #fffdfb;
      font-size: 12px;
      line-height: 1.45;
      font-weight: 700;
      text-align: left;
      box-shadow: 0 14px 24px rgba(47, 38, 24, 0.24);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.18s ease, transform 0.18s ease;
      white-space: normal;
      z-index: 20;
    }

    .leaderboard-info-chip:hover::after,
    .leaderboard-info-chip:focus-visible::after {
      opacity: 1;
      transform: translateY(-2px);
    }

    .leaderboard-podium-subtitle {
      font-size: 12px;
      font-weight: 800;
      color: #7c8aaa;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .leaderboard-podium-featured {
      border-radius: 22px;
      padding: 18px;
      border: 1px solid #e6ecf7;
      background: linear-gradient(180deg, #fffdf7, #f7faff);
      box-shadow: 0 14px 24px rgba(95, 120, 164, 0.08);
      display: grid;
      gap: 10px;
      text-align: center;
      justify-items: center;
    }

    .leaderboard-podium-featured.is-empty {
      min-height: 132px;
      align-content: center;
      border-style: dashed;
      border-color: #d8e0eb;
      background: #f3f5f8;
      box-shadow: none;
    }

    .leaderboard-podium-medal {
      display: grid;
      place-items: center;
      font-size: 30px;
      line-height: 1;
      color: #4f3614;
    }

    .leaderboard-podium-medal.is-empty {
      width: 42px;
      height: 42px;
      border-radius: 14px;
      background: #e1e6ed;
      color: #8d99a9;
      font-size: 20px;
      font-weight: 950;
    }

    .leaderboard-podium-placeholder {
      width: min(176px, 70%);
      display: grid;
      gap: 7px;
    }

    .leaderboard-podium-placeholder::before,
    .leaderboard-podium-placeholder::after {
      content: "";
      display: block;
      height: 10px;
      margin-inline: auto;
      border-radius: 999px;
      background: #dfe4eb;
    }

    .leaderboard-podium-placeholder::before {
      width: 100%;
    }

    .leaderboard-podium-placeholder::after {
      width: 58%;
      background: #e7ebf0;
    }

    .leaderboard-podium-agent {
      font-size: 18px;
      font-weight: 900;
      color: #302519;
      line-height: 1.15;
    }

    .leaderboard-podium-avatar {
      position: relative;
      width: 48px;
      height: 48px;
      border-radius: 999px;
      overflow: hidden;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0)),
        var(--leaderboard-avatar-bg, #dfe7ef);
      border: 3px solid rgba(255, 255, 255, 0.96);
      box-shadow: 0 8px 18px rgba(66, 85, 119, 0.18);
      color: #4e4438;
      font-size: 14px;
      font-weight: 950;
    }

    .leaderboard-podium-avatar.is-featured {
      width: 78px;
      height: 78px;
      border-width: 4px;
      font-size: 21px;
      box-shadow: 0 12px 26px rgba(66, 85, 119, 0.2);
    }

    .leaderboard-podium-avatar > span {
      display: grid;
      width: 100%;
      height: 100%;
      place-items: center;
    }

    .leaderboard-podium-avatar > img {
      position: absolute;
      inset: 0;
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }

    .leaderboard-podium-highlight {
      font-size: 16px;
      font-weight: 950;
      color: #bf632a;
      line-height: 1.05;
      text-align: center;
    }

    .leaderboard-podium-list {
      display: grid;
      gap: 8px;
    }

    .leaderboard-podium-row {
      display: grid;
      grid-template-columns: 52px 48px minmax(0, 1fr);
      gap: 12px;
      align-items: center;
      border-radius: 18px;
      padding: 10px 12px;
      border: 1px solid #e8eef8;
      background: rgba(255, 255, 255, 0.94);
      box-shadow: 0 8px 16px rgba(95, 120, 164, 0.04);
    }

    .leaderboard-podium-place {
      width: 52px;
      height: 52px;
      border-radius: 16px;
      display: grid;
      place-items: center;
      font-size: 22px;
      font-weight: 950;
      color: #4f3614;
      background: linear-gradient(180deg, #ffe19f, #ffbc4d);
    }

    .leaderboard-podium-row.place-2 .leaderboard-podium-place {
      background: linear-gradient(180deg, #edf1f6, #c7d1dd);
      color: #415265;
    }

    .leaderboard-podium-row.place-3 .leaderboard-podium-place {
      background: linear-gradient(180deg, #ffc697, #e07a36);
      color: #fff8f0;
    }

    .leaderboard-podium-row.is-empty {
      grid-template-columns: 52px minmax(0, 1fr);
      border-style: dashed;
      border-color: #dce3ec;
      background: #f4f6f9;
      box-shadow: none;
    }

    .leaderboard-podium-row.is-empty .leaderboard-podium-place {
      background: #e1e6ed;
      color: #8d99a9;
    }

    .leaderboard-podium-row.is-empty .leaderboard-podium-placeholder {
      width: min(150px, 72%);
    }

    .leaderboard-podium-name {
      font-size: 16px;
      font-weight: 900;
      color: #302519;
    }

    .leaderboard-podium-meta {
      margin-top: 2px;
      font-size: 12px;
      color: #857258;
    }

    .leaderboard-podium-value {
      font-size: 13px;
      font-weight: 800;
      color: #8b7558;
      white-space: nowrap;
    }

    .leaderboard-list {
      display: grid;
      gap: 12px;
    }

    .leaderboard-row {
      display: grid;
      grid-template-columns: 54px 46px minmax(0, 1fr);
      gap: 12px;
      align-items: start;
      padding: 14px 16px;
      min-height: 78px;
      border-radius: 22px;
      border: 1px solid #eadcc6;
      background: linear-gradient(180deg, #fffdfa, #f8f2e7);
      box-shadow: 0 10px 24px rgba(137, 107, 66, 0.09);
    }

    .leaderboard-rank {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      background: linear-gradient(180deg, #ffd789, #ffb648);
      color: #5b3900;
      font-weight: 950;
      font-size: 18px;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
    }

    .leaderboard-rank.rank-1 {
      background: linear-gradient(180deg, #ffc83d, #f0a911);
      color: #5b3900;
    }

    .leaderboard-rank.rank-2 {
      background: linear-gradient(180deg, #ced9e8, #9fb0c4);
      color: #3c4b5e;
    }

    .leaderboard-rank.rank-3 {
      background: linear-gradient(180deg, #e46e25, #b64b13);
      color: #fff4e8;
    }

    .leaderboard-avatar {
      width: 42px;
      height: 42px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0)),
        var(--leaderboard-avatar-bg, #dfe7ef);
      color: #54412a;
      font-size: 13px;
      font-weight: 950;
      border: 2px solid rgba(255, 250, 240, 0.9);
      overflow: hidden;
    }

    .leaderboard-name {
      font-size: 17px;
      font-weight: 900;
      color: #2d2417;
    }

    .leaderboard-meta {
      margin-top: 3px;
      color: #7a6950;
      font-size: 12px;
      line-height: 1.4;
    }

    .leaderboard-row-main {
      display: grid;
      gap: 8px;
    }

    .leaderboard-metrics {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .leaderboard-metric {
      border-radius: 16px;
      padding: 10px 12px;
      background: rgba(255, 255, 255, 0.82);
      border: 1px solid #eadac1;
      min-width: 0;
    }

    .leaderboard-metric-label {
      font-size: 11px;
      font-weight: 850;
      color: #8b7557;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    .leaderboard-metric-value {
      margin-top: 4px;
      color: #c06229;
      font-size: 22px;
      font-weight: 950;
      line-height: 1;
    }

    .leaderboard-flag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      width: fit-content;
      padding: 5px 9px;
      border-radius: 999px;
      background: rgba(255, 199, 61, 0.18);
      border: 1px solid rgba(196, 134, 37, 0.22);
      color: #96611e;
      font-size: 11px;
      font-weight: 850;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .dashboard-scatter-wrap {
      min-height: 280px;
      border-radius: 18px;
      background: #f7faff;
      border: 1px solid var(--line);
      padding: 10px;
    }

    .dashboard-scatter-svg {
      width: 100%;
      height: 260px;
      display: block;
    }

    .dashboard-empty {
      font-size: 14px;
      color: var(--muted);
      padding: 18px 4px;
    }

    .history-date {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .history-date-timezone {
      font-size: 11px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .transition-card {
      margin-top: 14px;
    }

    .transition-score-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;
      flex-wrap: wrap;
    }

    .transition-score-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 74px;
      padding: 8px 12px;
      border-radius: 999px;
      background: var(--panel-soft);
      color: var(--primary-deep);
      font-weight: 800;
      font-size: 13px;
    }

    .transition-moments {
      display: grid;
      gap: 10px;
      max-height: 560px;
      overflow-y: auto;
      padding-right: 4px;
      align-content: start;
    }

    .transition-moments::-webkit-scrollbar {
      width: 8px;
    }

    .transition-moments::-webkit-scrollbar-track {
      background: #edf3ff;
      border-radius: 999px;
    }

    .transition-moments::-webkit-scrollbar-thumb {
      background: #c1d4fb;
      border-radius: 999px;
    }

    .transition-moment {
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 12px 14px;
      background: linear-gradient(180deg, #f6f9ff, #ecf2ff);
      border-color: #d5e2fb;
    }

    .transition-moment summary {
      list-style: none;
      cursor: pointer;
    }

    .transition-moment summary::-webkit-details-marker {
      display: none;
    }

    .transition-moment-top {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: center;
      margin-bottom: 8px;
      flex-wrap: wrap;
    }

    .transition-moment-type {
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--primary-deep);
    }

    .transition-moment-score {
      font-size: 12px;
      font-weight: 800;
      color: var(--ink);
      background: #dde9ff;
      border-radius: 999px;
      padding: 6px 10px;
    }

    .transition-moment-excerpt {
      font-size: 12px;
      color: #ffffff;
      font-weight: 700;
      line-height: 1.5;
      margin-bottom: 8px;
      white-space: pre-line;
      padding: 10px 12px;
      border-radius: 12px;
      background: #1f4fa3;
      border: 1px solid #173f84;
    }

    .transition-moment-meta {
      font-size: 11px;
      color: var(--muted);
      line-height: 1.5;
      margin-bottom: 8px;
    }

    .transition-moment-summary {
      font-size: 13px;
      color: var(--ink);
      line-height: 1.5;
      margin-top: 6px;
    }

    .transition-moment-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 8px;
      font-size: 12px;
      font-weight: 800;
      color: var(--primary-deep);
    }

    .transition-moment-body {
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      padding-top: 0;
      margin-top: 0;
      border-top: 1px solid transparent;
      transition: max-height 0.28s ease, opacity 0.22s ease, padding-top 0.22s ease, margin-top 0.22s ease, border-color 0.22s ease;
    }

    #practiceView .topbar > div {
      width: 100%;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }

    #practiceView .user-menu {
      display: none !important;
    }

    .transition-moment[open] .transition-moment-body {
      max-height: 1200px;
      opacity: 1;
      padding-top: 10px;
      margin-top: 10px;
      border-top-color: #e7eefc;
    }

    .history-main .history-prospect {
      display: inline-flex;
      margin-top: 6px;
      padding: 6px 10px;
      border-radius: 999px;
      background: var(--panel-soft);
      color: var(--primary-deep);
      font-size: 12px;
      font-weight: 700;
    }

    .modal-shell {
      position: fixed;
      inset: 0;
      background: rgba(14, 24, 45, 0.46);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      z-index: 50;
      overflow: auto;
    }

    .modal-card {
      width: min(980px, 100%);
      max-height: calc(100vh - 48px);
      overflow: auto;
      background: white;
      border-radius: 28px;
      box-shadow: 0 28px 60px rgba(16, 39, 88, 0.28);
      border: 1px solid rgba(255, 255, 255, 0.8);
      padding: 24px;
    }

    .roleplay-environment-modal {
      position: fixed;
      inset: 0;
      z-index: 900;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: rgba(7, 16, 34, 0.72);
      backdrop-filter: blur(5px);
    }

    body.roleplay-environment-modal-open {
      overflow: hidden;
    }

    .roleplay-environment-modal-card {
      width: min(480px, 100%);
      padding: 32px;
      border-radius: 28px;
      border: 1px solid rgba(255, 255, 255, 0.82);
      background:
        radial-gradient(circle at top right, rgba(190, 232, 218, 0.34), transparent 38%),
        linear-gradient(180deg, #ffffff, #f4faf7);
      box-shadow: 0 32px 90px rgba(2, 10, 25, 0.42);
      text-align: center;
    }

    .roleplay-environment-modal-icon {
      width: 66px;
      height: 66px;
      margin: 0 auto 18px;
      border-radius: 22px;
      display: grid;
      place-items: center;
      background: rgba(213, 240, 228, 0.82);
      font-size: 31px;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }

    .roleplay-environment-modal-kicker {
      color: #64837a;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .roleplay-environment-modal-card h2 {
      margin: 9px 0 12px;
      color: #183c35;
      font-size: clamp(25px, 4vw, 32px);
      line-height: 1.12;
      letter-spacing: -0.04em;
    }

    .roleplay-environment-modal-card p {
      margin: 0;
      color: #59726c;
      font-size: 15px;
      line-height: 1.65;
    }

    .roleplay-environment-modal-card .workspace-primary-btn {
      width: 100%;
      min-width: 0;
      margin-top: 24px;
      background: linear-gradient(135deg, #2d7465, #3f947d);
      box-shadow: 0 18px 34px rgba(45, 116, 101, 0.24);
    }

    @media (max-width: 560px) {
      .roleplay-environment-modal {
        padding: 16px;
      }

      .roleplay-environment-modal-card {
        padding: 26px 22px;
        border-radius: 24px;
      }
    }

    .modal-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 16px;
      margin-bottom: 16px;
    }

    .modal-head-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
    }

    .settings-page-view {
      position: static;
      inset: auto;
      background: transparent;
      display: block;
      padding: 0;
      z-index: auto;
    }

    .settings-workspace {
      min-height: 100vh;
      padding: 0;
      background:
        radial-gradient(circle at top right, rgba(82, 140, 255, 0.12), transparent 30%),
        linear-gradient(180deg, #eff4ff 0%, #f8fbff 100%);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

    .settings-workspace .modal-card {
      width: 100%;
      min-height: 100vh;
      max-height: none;
      border-radius: 0;
      padding: 28px;
      box-shadow: none;
      border: 0;
      background: transparent;
      overflow: visible;
    }

    .settings-workspace .modal-head {
      margin-bottom: 0;
      padding: 0;
      border-radius: 0;
      background: transparent;
      border: 0;
      box-shadow: none;
    }

    .detail-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      margin-top: 14px;
    }

    .detail-box {
      border: 1px solid var(--line);
      border-radius: 18px;
      background: var(--panel-soft);
      padding: 14px;
    }

    .history-section {
      margin-top: 18px;
      padding: 20px;
    }

    .history-summary-row {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      margin-top: 14px;
    }

    .history-summary-card {
      border: 1px solid var(--line);
      border-radius: 18px;
      background: var(--panel-soft);
      padding: 16px;
    }

    .history-summary-card .label {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--muted);
      font-weight: 800;
    }

    .history-summary-card .value {
      margin-top: 8px;
      color: var(--ink);
      font-size: 18px;
      font-weight: 800;
      line-height: 1.3;
    }

    .history-score-grid,
    .history-columns {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      margin-top: 14px;
    }

    .history-copy-card {
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 16px;
      background: #fff;
    }

    .history-copy-card h4 {
      margin: 0 0 10px;
      font-size: 16px;
      color: var(--ink);
    }

    .history-copy-card p {
      margin: 0;
      color: var(--ink);
      line-height: 1.7;
    }

    .history-copy-card ul,
    .history-score-list {
      margin: 0;
      padding-left: 18px;
      line-height: 1.7;
      color: var(--ink);
    }

    .history-rubric-list {
      display: grid;
      gap: 10px;
      margin-top: 12px;
    }

    .history-rubric-item {
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 14px 16px;
      background: #fff;
    }

    .history-rubric-top {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      margin-bottom: 8px;
    }

    .history-rubric-label {
      font-weight: 700;
      color: var(--ink);
      line-height: 1.4;
    }

    .history-rubric-status {
      padding: 6px 10px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .history-rubric-status.hit {
      background: #eaf7ef;
      color: #18794e;
    }

    .history-rubric-status.partial {
      background: #fff4de;
      color: #a35f00;
    }

    .history-rubric-status.miss {
      background: #fdecec;
      color: #b42318;
    }

    .history-empty-note {
      color: var(--muted);
      line-height: 1.6;
    }

    .settings-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
      gap: 18px;
      margin-top: 18px;
      align-items: start;
    }

    .settings-stack {
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    .settings-card {
      padding: 18px;
      border-radius: 22px;
      border: 1px solid var(--line);
      background: linear-gradient(180deg, #ffffff, #f8fbff);
    }

    .settings-card h3 {
      margin: 0 0 8px;
      font-size: 22px;
      letter-spacing: -0.03em;
    }

    .account-danger-card {
      border-color: rgba(207, 79, 74, 0.28);
      background: linear-gradient(180deg, #fffafa, #fff5f4);
    }

    .account-danger-card h3 {
      color: #a93632;
    }

    .danger-button {
      min-height: 42px;
      padding: 0 16px;
      border: 1px solid #bd3f3a;
      border-radius: 14px;
      background: #bd3f3a;
      color: #fff;
      font: inherit;
      font-weight: 850;
      cursor: pointer;
      box-shadow: 0 8px 20px rgba(189, 63, 58, 0.18);
    }

    .danger-button:hover {
      background: #a9332f;
    }

    .danger-button:disabled {
      opacity: 0.58;
      cursor: wait;
    }

    .settings-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 14px;
    }

    .check-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-top: 14px;
    }

    .check-chip {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 14px;
      border-radius: 16px;
      background: white;
      border: 1px solid var(--line);
      color: var(--ink);
      font-size: 14px;
    }

    .check-chip input {
      width: auto;
      margin: 0;
      accent-color: var(--primary-deep);
    }

    .settings-output {
      min-height: 170px;
      font-family: "SFMono-Regular", "Menlo", monospace;
      font-size: 12px;
      line-height: 1.55;
      background: #f8fbff;
    }

    .settings-helper {
      margin-top: 12px;
      padding: 12px 14px;
      border-radius: 16px;
      background: var(--panel-soft);
      border: 1px solid var(--line);
      color: var(--muted);
      font-size: 13px;
      line-height: 1.55;
    }

    .embed-builder-guide {
      margin-top: 14px;
      padding: 16px 18px;
      border-radius: 18px;
      background: linear-gradient(180deg, #ffffff, #f8fbff);
      border: 1px solid var(--line);
    }

    .embed-builder-guide strong {
      display: block;
      margin-bottom: 8px;
      font-size: 14px;
    }

    .embed-builder-guide ul {
      margin: 0;
      padding-left: 18px;
      color: var(--muted);
      line-height: 1.6;
      font-size: 14px;
    }

    .icon-ghost-button {
      width: 44px;
      height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      background: white;
      color: var(--primary-deep);
      border: 1px solid var(--line);
      font-size: 18px;
      font-weight: 700;
      padding: 0;
    }

    .settings-page {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .settings-page-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
      padding: 10px 4px 0;
    }

    .settings-page-head h1 {
      margin: 0 0 10px;
      color: #14213d;
      font-size: clamp(30px, 3vw, 40px);
      line-height: 1.02;
      letter-spacing: -0.05em;
    }

    .settings-page-head p {
      margin: 0;
      max-width: 760px;
      color: #7281a7;
      font-size: 15px;
      line-height: 1.7;
    }

    .settings-shell {
      display: grid;
      grid-template-columns: 248px minmax(0, 1fr);
      gap: 22px;
      align-items: start;
    }

    .builder-app-column {
      display: flex;
      flex-direction: column;
      gap: 14px;
      position: sticky;
      top: 20px;
    }

    @media (min-width: 1101px) {
      .settings-workspace .builder-app-column {
        width: 276px;
        margin-left: -28px;
      }

      .settings-workspace .builder-side-card {
        border-radius: 0 28px 28px 0;
      }
    }

    .builder-side-card {
      border-radius: 28px;
      border: 1px solid rgba(8, 28, 77, 0.24);
      background:
        radial-gradient(circle at top right, rgba(70, 114, 241, 0.28), transparent 26%),
        linear-gradient(180deg, #0b1d52 0%, #0e245f 100%);
      box-shadow: 0 26px 44px rgba(10, 29, 82, 0.24);
      overflow: hidden;
    }

    .builder-side-card-head {
      padding: 22px 20px 16px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .builder-side-card-head h3 {
      margin: 0 0 6px;
      font-size: 18px;
      letter-spacing: -0.03em;
      color: #ffffff;
    }

    .builder-side-card-body {
      padding: 14px 14px 18px;
    }

    .builder-section-nav {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .builder-section-nav-title {
      padding: 0 2px 8px;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(214, 226, 255, 0.58);
    }

    .settings-page {
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    .settings-page-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 16px;
      padding: 18px 22px;
      border-radius: 24px;
      border: 1px solid var(--line);
      background: linear-gradient(180deg, #ffffff, #f8fbff);
      box-shadow: var(--shadow);
    }

    .settings-page-head h1 {
      margin: 0 0 8px;
      font-size: 34px;
      letter-spacing: -0.04em;
    }

    .settings-nav {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .settings-tab {
      width: 100%;
      text-align: left;
      padding: 12px 14px;
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.04);
      color: rgba(231, 239, 255, 0.84);
      border: 1px solid rgba(255, 255, 255, 0.06);
      font-weight: 800;
      box-shadow: none;
    }

    .settings-tab.active {
      background: linear-gradient(180deg, #2964ff, #2354dd);
      color: #ffffff;
      border-color: rgba(70, 120, 255, 0.4);
      box-shadow: 0 14px 26px rgba(35, 84, 221, 0.28);
    }

    .settings-tab.active .builder-section-nav-title,
    .settings-tab.active .muted {
      color: rgba(255, 255, 255, 0.8);
    }

    .settings-pane {
      display: none;
    }

    .settings-pane.active {
      display: block;
    }

    .settings-content {
      display: flex;
      flex-direction: column;
      gap: 18px;
      min-width: 0;
    }

    .settings-stage-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 18px;
      padding: 18px 22px;
      border-radius: 24px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 251, 255, 0.96));
      border: 1px solid rgba(214, 223, 237, 0.95);
      box-shadow: 0 12px 26px rgba(31, 75, 157, 0.06);
    }

    .settings-stage-head h2 {
      margin: 0 0 8px;
      font-size: 16px;
      font-weight: 900;
      color: #17315c;
      letter-spacing: -0.02em;
      text-transform: uppercase;
    }

    .settings-stage-head p {
      margin: 0;
      max-width: 720px;
      color: #7b89ad;
      line-height: 1.65;
      font-size: 14px;
    }

    .settings-stage-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 42px;
      height: 42px;
      border-radius: 14px;
      background: linear-gradient(180deg, #eef4ff, #dfe9ff);
      color: #2758ce;
      font-size: 18px;
      font-weight: 900;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }

    .builder-pane-shell {
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    .settings-summary-rail {
      display: none;
    }

    .settings-summary-card {
      padding: 22px 20px;
      border-radius: 24px;
      border: 1px solid rgba(214, 223, 237, 0.95);
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 251, 255, 0.98));
      box-shadow: 0 12px 26px rgba(31, 75, 157, 0.06);
    }

    .settings-summary-kicker {
      margin: 0 0 10px;
      color: #7d89aa;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .settings-summary-title {
      margin: 0;
      color: #17315c;
      font-size: 22px;
      line-height: 1.1;
      letter-spacing: -0.04em;
    }

    .settings-summary-text {
      margin: 10px 0 0;
      color: #7281a7;
      font-size: 14px;
      line-height: 1.65;
    }

    .settings-summary-list {
      display: grid;
      gap: 12px;
      margin-top: 16px;
    }

    .settings-summary-item {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      color: #17315c;
      font-size: 14px;
      line-height: 1.55;
    }

    .settings-summary-item::before {
      content: "";
      width: 8px;
      height: 8px;
      margin-top: 8px;
      border-radius: 999px;
      background: linear-gradient(180deg, #2964ff, #2354dd);
      box-shadow: 0 0 0 4px rgba(41, 100, 255, 0.1);
      flex-shrink: 0;
    }

    .settings-summary-cta {
      width: 100%;
      justify-content: center;
    }

    .embed-simplified-layout {
      display: block;
    }

    .embed-summary-card {
      padding: 16px;
      border-radius: 18px;
      border: 1px solid rgba(214, 223, 237, 0.95);
      background: linear-gradient(180deg, #ffffff, #f8fbff);
      box-shadow: 0 10px 24px rgba(31, 75, 157, 0.05);
    }

    .embed-summary-card.primary {
      background: linear-gradient(180deg, #2553a6, #2f73cb);
      color: #ffffff;
      box-shadow: 0 18px 36px rgba(31, 75, 157, 0.18);
      border-color: rgba(45, 115, 203, 0.45);
    }

    .embed-summary-kicker {
      margin: 0 0 8px;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      font-weight: 900;
      opacity: 0.74;
    }

    .embed-summary-title {
      margin: 0;
      font-size: 22px;
      line-height: 1.08;
      letter-spacing: -0.05em;
    }

    .embed-summary-text {
      margin: 10px 0 0;
      font-size: 13px;
      line-height: 1.55;
      color: var(--muted);
    }

    .embed-summary-card.primary .embed-summary-text {
      color: rgba(255, 255, 255, 0.82);
    }

    .embed-pane-card {
      padding: 16px;
      border-radius: 24px;
      box-shadow: 0 18px 34px rgba(31, 75, 157, 0.08);
    }

    .embed-pane-intro {
      margin-bottom: 12px;
    }

    .embed-pane-kicker {
      margin-bottom: 8px;
      color: var(--primary);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .embed-pane-intro h3 {
      margin: 0 0 6px;
      font-size: 22px;
      letter-spacing: -0.04em;
      color: #17315c;
    }

    .embed-pane-intro p {
      margin: 0;
      max-width: 760px;
      color: #7281a7;
      line-height: 1.55;
      font-size: 14px;
    }

    .embed-mini-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
      margin-top: 12px;
    }

    .embed-mini-stat {
      padding: 12px;
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.14);
      border: 1px solid rgba(255, 255, 255, 0.18);
    }

    .embed-mini-stat-label {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      font-weight: 900;
      opacity: 0.74;
    }

    .embed-mini-stat-value {
      margin-top: 8px;
      font-size: 18px;
      font-weight: 900;
      letter-spacing: -0.03em;
    }

    .embed-form-stack {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .embed-step-card {
      padding: 0;
      border-radius: 18px;
      border: 1px solid rgba(214, 223, 237, 0.95);
      background: linear-gradient(180deg, #ffffff, #f8fbff);
      box-shadow: 0 7px 18px rgba(31, 75, 157, 0.04);
      overflow: hidden;
      transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    }

    .embed-step-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      width: 100%;
      margin: 0;
      padding: 16px 18px;
      border: 0;
      background: transparent;
      text-align: left;
      cursor: pointer;
    }

    .embed-step-head h3 {
      margin: 0 0 4px;
      font-size: 16px;
    }

    .embed-step-description {
      margin: 0 0 16px;
      max-width: 720px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.55;
    }

    .embed-cases-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
    }

    .embed-case-list {
      display: grid;
      gap: 14px;
    }

    .embed-case-card {
      padding: 14px;
      border-radius: 16px;
      border: 1px solid rgba(214, 223, 237, 0.9);
      background: #fbfdff;
    }

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

    .embed-case-title {
      margin: 0;
      color: #17315c;
      font-size: 14px;
      font-weight: 900;
      letter-spacing: -0.02em;
    }

    .embed-case-remove {
      width: auto;
      padding-inline: 12px;
    }

    .embed-case-rubric {
      display: grid;
      gap: 10px;
      margin-top: 14px;
    }

    .embed-case-rubric-item {
      padding: 14px;
      border-radius: 16px;
      border: 1px solid rgba(214, 223, 237, 0.9);
      background: #fbfdff;
    }

    .embed-case-rubric-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      margin-bottom: 8px;
    }

    .embed-case-rubric-title {
      margin: 0;
      color: #17315c;
      font-size: 14px;
      font-weight: 900;
    }

    .embed-case-rubric-status {
      padding: 6px 10px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .embed-case-rubric-status.hit {
      background: #eaf7ef;
      color: #18794e;
    }

    .embed-case-rubric-status.partial {
      background: #fff4de;
      color: #a35f00;
    }

    .embed-case-rubric-status.miss {
      background: #fdecec;
      color: #b42318;
    }

    .embed-case-rubric-status.not-seen {
      background: #eef4ff;
      color: #3559a8;
    }

    .embed-case-rubric-copy {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.55;
    }

    .embed-case-rubric-copy strong {
      color: #17315c;
    }

    .embed-step-badge {
      flex-shrink: 0;
      min-width: 36px;
      height: 36px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      background: linear-gradient(180deg, #2553a6, #2f73cb);
      color: #ffffff;
      font-size: 14px;
      font-weight: 900;
      box-shadow: 0 10px 18px rgba(31, 75, 157, 0.18);
    }

    .embed-step-head-meta {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
    }

    .embed-step-chevron {
      color: #6780b8;
      font-size: 26px;
      line-height: 1;
      transform: rotate(90deg);
      transition: transform 0.2s ease;
    }

    .embed-step-body {
      padding: 0 18px 18px;
      border-top: 1px solid rgba(214, 223, 237, 0.72);
    }

    .embed-step-body .embed-form-grid {
      margin-top: 4px;
    }

    .embed-step-card.collapsed {
      box-shadow: 0 6px 16px rgba(31, 75, 157, 0.04);
    }

    .embed-step-card.collapsed .embed-step-body {
      display: none;
    }

    .embed-step-card.collapsed .embed-step-chevron {
      transform: rotate(0deg);
    }

    .embed-step-card.active {
      border-color: rgba(44, 143, 214, 0.26);
      box-shadow: 0 12px 22px rgba(31, 75, 157, 0.08);
      transform: translateY(-1px);
    }

    .embed-form-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
    }

    .embed-field-span {
      grid-column: 1 / -1;
    }

    .embed-chip-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .embed-advanced-toggle {
      margin-top: 16px;
      border-radius: 18px;
      border: 1px solid rgba(214, 223, 237, 0.95);
      background: #f8fbff;
      overflow: hidden;
    }

    .embed-advanced-toggle summary {
      cursor: pointer;
      list-style: none;
      padding: 14px 16px;
      font-weight: 800;
      color: var(--primary-deep);
    }

    .embed-advanced-toggle summary::-webkit-details-marker {
      display: none;
    }

    .embed-advanced-content {
      padding: 0 16px 16px;
    }

    .embed-output-box {
      min-height: 112px;
      margin-top: 12px;
    }

    .embed-delivery-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 18px;
    }

    .embed-delivery-actions .primary-button,
    .embed-delivery-actions .secondary-button {
      width: auto;
    }

    .embed-preview-card {
      margin-top: 18px;
      padding: 18px;
      border-radius: 22px;
      border: 1px solid rgba(214, 223, 237, 0.95);
      background: linear-gradient(180deg, #eef5ff, #f8fbff);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
    }

    .embed-preview-kicker {
      margin: 0 0 8px;
      color: var(--primary);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      font-weight: 900;
    }

    .embed-preview-shell {
      padding: 18px;
      border-radius: 20px;
      background: #ffffff;
      border: 1px solid rgba(214, 223, 237, 0.9);
    }

    .embed-preview-shell h4 {
      margin: 0 0 10px;
      font-size: 24px;
      line-height: 1.05;
      letter-spacing: -0.04em;
      color: var(--primary-deep);
    }

    .embed-preview-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
      margin-top: 14px;
    }

    .embed-preview-item {
      padding: 14px 16px;
      border-radius: 18px;
      background: #f8fbff;
      border: 1px solid rgba(214, 223, 237, 0.88);
    }

    .embed-preview-item strong {
      display: block;
      margin-bottom: 6px;
      color: var(--primary-deep);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
    }

    .embed-preview-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 14px;
    }

    .embed-preview-pill {
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(37, 83, 166, 0.08);
      color: var(--primary-deep);
      border: 1px solid rgba(37, 83, 166, 0.14);
      font-size: 12px;
      font-weight: 800;
    }

    .embed-library-toolbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
      padding: 18px 20px;
      border-radius: 20px;
      border: 1px solid rgba(214, 223, 237, 0.92);
      background: linear-gradient(180deg, #ffffff, #f8fbff);
    }

    .embed-library-toolbar-copy {
      max-width: 700px;
    }

    .embed-library-toolbar-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .embed-showcase-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 16px;
      margin-top: 16px;
    }

    .embed-showcase-card {
      position: relative;
      border-radius: 22px;
      border: 1px solid var(--line);
      background: #fff;
      overflow: visible;
      box-shadow: 0 10px 24px rgba(31, 75, 157, 0.05);
      text-align: left;
      padding: 18px;
      display: grid;
      grid-template-columns: 52px minmax(0, 1fr);
      align-items: start;
      gap: 14px;
      min-height: 188px;
    }

    .embed-showcase-card.active {
      border-color: rgba(44, 143, 214, 0.28);
      box-shadow: 0 16px 34px rgba(44, 143, 214, 0.12);
    }

    .embed-showcase-cover {
      width: 52px;
      height: 52px;
      background: linear-gradient(180deg, #f4f8ff, #eaf2ff);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border-radius: 14px;
      border: 1px solid rgba(214, 223, 237, 0.9);
      flex-shrink: 0;
    }

    .embed-showcase-cover img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .embed-showcase-name {
      padding: 0;
      padding-right: 34px;
      font-size: 20px;
      font-weight: 800;
      line-height: 1.1;
      letter-spacing: -0.03em;
      color: var(--primary-deep);
      min-width: 0;
    }

    .embed-showcase-body {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .embed-showcase-top {
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-width: 0;
    }

    .embed-showcase-summary {
      margin: 0;
      color: #7281a7;
      font-size: 13px;
      line-height: 1.5;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .embed-showcase-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .embed-showcase-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 6px 10px;
      border-radius: 999px;
      background: #eef4ff;
      color: #2553a6;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .embed-showcase-link {
      margin-top: auto;
      color: #2553a6;
      font-size: 13px;
      font-weight: 800;
    }

    .embed-library-empty {
      padding: 28px;
      border-radius: 22px;
      border: 1px dashed var(--line);
      background: #fbfdff;
      color: var(--muted);
      font-weight: 600;
      line-height: 1.6;
      margin-top: 16px;
    }

    .embed-editor-modal-card {
      width: min(1120px, calc(100vw - 48px));
      max-height: calc(100vh - 32px);
      padding: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .embed-editor-modal-head,
    .embed-editor-body,
    .embed-editor-footer {
      padding-inline: 24px;
    }

    .embed-editor-modal-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 16px;
      padding-top: 24px;
      padding-bottom: 18px;
      border-bottom: 1px solid rgba(214, 223, 237, 0.9);
      background: linear-gradient(180deg, #ffffff, #f8fbff);
    }

    .embed-editor-modal-head h2 {
      margin: 0 0 8px;
      color: #17315c;
      font-size: 28px;
      letter-spacing: -0.04em;
    }

    .embed-editor-modal-subtitle {
      margin: 0;
      max-width: 720px;
      color: #7281a7;
      line-height: 1.55;
    }

    .embed-editor-body {
      padding-top: 18px;
      padding-bottom: 18px;
      overflow: auto;
      background: #f8fbff;
    }

    .embed-editor-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      padding-top: 16px;
      padding-bottom: 20px;
      border-top: 1px solid rgba(214, 223, 237, 0.9);
      background: #ffffff;
    }

    .embed-editor-footer-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .persona-modal-card,
    .scenario-modal-card {
      max-width: 980px;
      width: min(980px, calc(100vw - 48px));
    }

    @media (max-width: 1120px) {
      .settings-shell {
        grid-template-columns: 248px minmax(0, 1fr);
      }

      .settings-summary-rail {
        grid-column: 2;
        position: static;
      }

      .embed-simplified-layout {
        grid-template-columns: 1fr;
      }

      .embed-summary-stack {
        position: static;
      }

      .embed-editor-modal-card {
        width: min(100vw - 20px, 1180px);
        max-height: calc(100vh - 20px);
      }

      .embed-editor-modal-head,
      .embed-editor-body,
      .embed-editor-footer,
      .embed-editor-step-nav {
        padding-inline: 16px;
      }

      .embed-editor-modal-head,
      .embed-editor-footer {
        align-items: stretch;
      }

      .embed-editor-modal-actions,
      .embed-editor-footer-actions {
        justify-content: stretch;
      }

      .embed-editor-modal-actions > *,
      .embed-editor-footer-actions > * {
        width: 100%;
      }
    }

    @media (max-width: 760px) {
      .embed-form-grid,
      .embed-chip-grid,
      .embed-mini-grid {
        grid-template-columns: 1fr;
      }
    }

    .builder-section-title {
      margin: 0 0 10px;
      color: var(--primary-deep);
      font-size: 18px;
      letter-spacing: -0.02em;
    }

    .builder-empty-state {
      padding: 28px;
      border-radius: 22px;
      border: 1px dashed var(--line);
      background: #fbfdff;
      color: var(--muted);
      font-weight: 600;
      line-height: 1.6;
    }

    .resource-library {
      display: grid;
      grid-template-columns: minmax(290px, 350px) minmax(0, 1fr);
      gap: 22px;
      align-items: start;
    }

    .resource-sidebar {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .resource-sidebar-card {
      padding: 18px;
      border-radius: 24px;
      border: 1px solid var(--line);
      background: linear-gradient(180deg, #ffffff, #f8fbff);
    }

    .resource-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .resource-item {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      text-align: left;
      padding: 14px 14px 14px 12px;
      border-radius: 22px;
      border: 1px solid var(--line);
      background: linear-gradient(180deg, #ffffff, #fbfdff);
      color: var(--text);
      box-shadow: 0 12px 28px rgba(35, 84, 153, 0.04);
    }

    .resource-item.dragging {
      opacity: 0.5;
      transform: scale(0.99);
    }

    .resource-item-main {
      flex: 1;
      min-width: 0;
      background: transparent;
      border: 0;
      padding: 0;
      text-align: left;
      color: inherit;
      cursor: pointer;
    }

    .resource-item.active {
      border-color: rgba(44, 143, 214, 0.28);
      background: linear-gradient(180deg, #f6fbff, #eef6ff);
      box-shadow: 0 12px 28px rgba(44, 143, 214, 0.08);
    }

    .resource-drag-handle {
      flex-shrink: 0;
      width: 34px;
      height: 34px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--muted);
      cursor: grab;
      font-size: 16px;
      user-select: none;
    }

    .resource-drag-handle:active {
      cursor: grabbing;
    }

    .resource-item-head {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 12px;
      margin-bottom: 4px;
    }

    .resource-type-pill {
      display: inline-flex;
      align-items: center;
      padding: 6px 10px;
      border-radius: 999px;
      background: var(--panel-soft);
      color: var(--primary-deep);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.03em;
      text-transform: uppercase;
    }

    .resource-item-title {
      font-weight: 800;
      color: var(--primary-deep);
      margin: 0;
      font-size: 15px;
    }

    .resource-item-meta {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.45;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .resource-item-kicker {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 8px;
    }

    .resource-editor-card {
      min-height: 760px;
      display: flex;
      flex-direction: column;
    }

    .resource-editor-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 18px;
    }

    .resource-editor-top-actions {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .resource-editor-top-actions .secondary-button,
    .resource-editor-top-actions .ghost-button {
      margin-top: 0;
      width: auto;
      padding-inline: 16px;
    }

    .resource-editor-meta {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin-top: 0;
      margin-bottom: 14px;
    }

    .resource-guidance-note {
      margin: 12px 0 14px;
      padding: 14px 16px;
      border-radius: 18px;
      background: #f5f9ff;
      border: 1px solid rgba(44, 143, 214, 0.14);
      color: var(--muted);
      line-height: 1.55;
      font-size: 13px;
    }

    .resource-editor-textarea {
      min-height: 470px;
      font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
      line-height: 1.6;
      resize: vertical;
    }

    .resource-editor-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid var(--line);
    }

    .resource-editor-footer .primary-button {
      margin-top: 0;
      width: auto;
      min-width: 210px;
      padding-inline: 22px;
    }

    .resource-editor-spacer {
      flex: 1;
    }

    @media (max-width: 1080px) {
      .resource-library {
        grid-template-columns: 1fr;
      }

      .resource-editor-meta {
        grid-template-columns: 1fr;
      }

      .resource-editor-head,
      .resource-editor-footer {
        flex-direction: column;
        align-items: stretch;
      }
    }

    .resource-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 10px;
    }

    .resource-badge {
      padding: 6px 10px;
      border-radius: 999px;
      background: var(--panel-soft);
      color: var(--primary-deep);
      font-size: 11px;
      font-weight: 800;
    }

    .resource-editor-card {
      margin: 0;
      border-radius: 28px;
      background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(244,249,255,0.98));
    }

    .resource-guidance-note {
      margin-bottom: 14px;
      padding: 14px 16px;
      border-radius: 18px;
      background: linear-gradient(180deg, #f2f8ff, #ebf4ff);
      border: 1px solid rgba(44, 143, 214, 0.16);
      color: var(--muted);
      line-height: 1.6;
      font-size: 13px;
    }

    .resource-editor-head {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      align-items: flex-start;
      margin-bottom: 14px;
    }

    .resource-editor-path {
      font-size: 12px;
      color: var(--muted);
      margin-top: 6px;
      word-break: break-all;
    }

    .resource-editor-textarea {
      width: 100%;
      min-height: 420px;
      resize: vertical;
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 13px;
      line-height: 1.6;
    }

    .resource-empty {
      padding: 28px;
      border-radius: 20px;
      border: 1px dashed var(--line);
      color: var(--muted);
      background: #fbfdff;
      font-weight: 600;
    }

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

    .playbook-card {
      padding: 18px;
      border-radius: 20px;
      background: linear-gradient(180deg, #ffffff, #f8fbff);
      border: 1px solid var(--line);
    }

    .playbook-card h4 {
      margin: 0 0 10px;
      color: var(--primary-deep);
      font-size: 18px;
      letter-spacing: -0.02em;
    }

    .playbook-card ul {
      margin: 0;
      padding-left: 18px;
      color: var(--muted);
      line-height: 1.65;
    }

    .playbook-card p {
      margin: 0;
      color: var(--muted);
      line-height: 1.65;
    }

    .persona-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .persona-item {
      width: 100%;
      text-align: left;
      padding: 14px 16px;
      border-radius: 18px;
      border: 1px solid var(--line);
      background: #fff;
      color: var(--text);
    }

    .persona-item.active {
      border-color: rgba(44, 143, 214, 0.28);
      background: linear-gradient(180deg, #f6fbff, #eef6ff);
      box-shadow: 0 12px 28px rgba(44, 143, 214, 0.08);
    }

    .builder-grid {
      display: grid;
      grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
      gap: 18px;
      align-items: start;
    }

    .builder-sidebar {
      padding: 18px;
      border-radius: 22px;
      border: 1px solid var(--line);
      background: linear-gradient(180deg, #ffffff, #f8fbff);
    }

    .builder-sidebar h4 {
      margin: 0 0 10px;
      color: var(--primary-deep);
      font-size: 18px;
    }

    .builder-sidebar-copy {
      color: var(--muted);
      line-height: 1.6;
      font-size: 14px;
    }

    .builder-panel {
      padding: 20px;
      border-radius: 22px;
      border: 1px solid var(--line);
      background: #fff;
    }

    .builder-section {
      margin-top: 18px;
      padding-top: 18px;
      border-top: 1px solid var(--line);
    }

    .builder-section:first-child {
      margin-top: 0;
      padding-top: 0;
      border-top: 0;
    }

    .builder-section h4 {
      margin: 0 0 8px;
      color: var(--primary-deep);
      font-size: 18px;
      letter-spacing: -0.02em;
    }

    .builder-section p {
      margin: 0 0 12px;
      color: var(--muted);
      line-height: 1.6;
    }

    .catalog-card-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }

    .catalog-card {
      padding: 16px;
      border-radius: 20px;
      border: 1px solid var(--line);
      background: #fff;
      text-align: left;
      color: var(--text);
    }

    .catalog-card.active {
      border-color: rgba(44, 143, 214, 0.28);
      background: linear-gradient(180deg, #f6fbff, #eef6ff);
      box-shadow: 0 12px 28px rgba(44, 143, 214, 0.08);
    }

    .catalog-card-title {
      font-weight: 800;
      color: var(--primary-deep);
      margin-bottom: 4px;
    }

    .catalog-card-subtitle {
      font-size: 13px;
      color: var(--muted);
      margin-bottom: 10px;
    }

    .catalog-chip {
      display: inline-flex;
      align-items: center;
      padding: 6px 10px;
      border-radius: 999px;
      background: var(--panel-soft);
      color: var(--primary-deep);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .builder-workspace {
      display: grid;
      grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
      gap: 18px;
      align-items: start;
      margin-top: 18px;
      width: 100%;
    }

    .builder-workspace > * {
      min-width: 0;
    }

    .builder-overview {
      display: flex;
      flex-direction: column;
      gap: 16px;
      position: sticky;
      top: 24px;
    }

    .builder-overview-card {
      padding: 18px;
      border-radius: 22px;
      border: 1px solid var(--line);
      background: #fff;
      box-shadow: 0 12px 28px rgba(31, 75, 157, 0.06);
    }

    .builder-overview-kicker {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 12px;
    }

    .builder-overview-title {
      font-size: 24px;
      font-weight: 800;
      letter-spacing: -0.03em;
      line-height: 1.1;
      color: var(--primary-deep);
      margin-bottom: 8px;
    }

    .builder-overview-subtitle {
      color: var(--muted);
      font-size: 14px;
      line-height: 1.6;
    }

    .builder-overview-list {
      margin-top: 16px;
      border-top: 1px solid var(--line);
      padding-top: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .builder-overview-item {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      font-weight: 700;
      color: var(--ink);
    }

    .builder-overview-check {
      width: 20px;
      height: 20px;
      border-radius: 999px;
      background: #eaf7ef;
      color: #18794e;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 900;
      flex-shrink: 0;
    }

    .builder-main-stack {
      display: flex;
      flex-direction: column;
      gap: 18px;
      min-width: 0;
      width: 100%;
    }

    .builder-main-card {
      padding: 22px;
      border-radius: 22px;
      border: 1px solid var(--line);
      background: #fff;
      box-shadow: 0 12px 28px rgba(31, 75, 157, 0.04);
      min-width: 0;
      width: 100%;
    }

    .builder-main-card h3 {
      margin: 0 0 8px;
      color: var(--primary-deep);
      font-size: 18px;
      letter-spacing: -0.02em;
    }

    .builder-main-card p {
      margin: 0 0 14px;
      color: var(--muted);
      line-height: 1.6;
    }

    .builder-editor-shell {
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    .builder-editor-hero {
      padding: 20px;
      border-radius: 22px;
      border: 1px solid var(--line);
      background: linear-gradient(180deg, #f8fbff, #ffffff);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }

    .builder-editor-hero-top {
      display: flex;
      justify-content: space-between;
      gap: 14px;
      align-items: flex-start;
    }

    .builder-editor-identity {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      min-width: 0;
    }

    .builder-editor-kicker {
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 8px;
    }

    .builder-editor-name {
      margin: 0;
      font-size: 30px;
      line-height: 1.08;
      letter-spacing: -0.04em;
      color: var(--primary-deep);
    }

    .builder-editor-meta {
      margin-top: 8px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.55;
    }

    .builder-editor-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 14px;
    }

    .builder-editor-tag {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 7px 10px;
      border-radius: 999px;
      background: rgba(44, 143, 214, 0.10);
      color: var(--primary-deep);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .builder-editor-grid {
      display: grid;
      grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
      gap: 18px;
      align-items: start;
    }

    .builder-editor-side {
      padding: 18px;
      border-radius: 20px;
      border: 1px solid var(--line);
      background: linear-gradient(180deg, #ffffff, #f9fbff);
    }

    .builder-editor-side h4 {
      margin: 0 0 10px;
      color: var(--primary-deep);
      font-size: 18px;
      letter-spacing: -0.02em;
    }

    .builder-editor-side p {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.6;
    }

    .builder-editor-checklist {
      margin-top: 14px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .builder-editor-check {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      color: var(--ink);
      font-weight: 700;
      font-size: 14px;
    }

    .builder-editor-check span:last-child {
      width: 20px;
      height: 20px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #eaf7ef;
      color: #18794e;
      font-size: 12px;
      font-weight: 900;
      flex-shrink: 0;
    }

    .builder-editor-main {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .builder-editor-block {
      padding: 18px;
      border-radius: 20px;
      border: 1px solid var(--line);
      background: #fff;
    }

    .builder-editor-block h4 {
      margin: 0 0 8px;
      color: var(--primary-deep);
      font-size: 18px;
      letter-spacing: -0.02em;
    }

    .builder-editor-block p {
      margin: 0 0 12px;
      color: var(--muted);
      line-height: 1.6;
    }

    .scenario-rubric-note {
      margin-top: -4px;
      margin-bottom: 12px;
      font-size: 12px;
      font-weight: 700;
      color: #5a6f9a;
      background: #f3f7ff;
      border: 1px solid #d9e4fb;
      border-radius: 14px;
      padding: 10px 12px;
    }

    .scenario-rubric-toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
    }

    .scenario-rubric-count {
      font-size: 13px;
      font-weight: 700;
      color: var(--muted);
    }

    .scenario-rubric-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .scenario-rubric-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .scenario-rubric-item {
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr) auto;
      gap: 10px;
      align-items: flex-start;
      padding: 12px;
      border-radius: 16px;
      border: 1px solid var(--line);
      background: linear-gradient(180deg, #ffffff, #f9fbff);
    }

    .scenario-rubric-index {
      width: 34px;
      height: 34px;
      border-radius: 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #edf3ff;
      color: var(--primary-deep);
      font-weight: 800;
      font-size: 13px;
      flex-shrink: 0;
    }

    .scenario-rubric-fields {
      display: grid;
      gap: 8px;
    }

    .scenario-rubric-item input,
    .scenario-rubric-item select {
      min-height: 42px;
    }

    .scenario-rubric-item-actions {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .scenario-rubric-empty {
      padding: 14px;
      border-radius: 16px;
      border: 1px dashed var(--line);
      color: var(--muted);
      font-size: 14px;
      background: #fbfcff;
    }


    .builder-card-head {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: flex-start;
      margin-bottom: 14px;
    }

    .builder-card-head.compact {
      margin-bottom: 10px;
    }

    .builder-library-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }

    .builder-library-grid.personas {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .builder-library-card {
      padding: 18px;
      border-radius: 22px;
      border: 1px solid var(--line);
      background: #fff;
      text-align: left;
      color: var(--ink);
      box-shadow: 0 10px 22px rgba(31, 75, 157, 0.05);
    }

    .builder-library-card.active {
      border-color: rgba(44, 143, 214, 0.35);
      background: linear-gradient(180deg, #f6fbff, #eef6ff);
      box-shadow: 0 14px 30px rgba(44, 143, 214, 0.10);
    }

    .builder-library-card:hover {
      transform: translateY(-1px);
      box-shadow: 0 14px 28px rgba(31, 75, 157, 0.08);
    }

    .builder-library-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 12px;
    }

    .builder-library-top {
      display: flex;
      gap: 12px;
      align-items: center;
      min-width: 0;
    }

    .builder-avatar {
      width: 44px;
      height: 44px;
      border-radius: 999px;
      background: var(--avatar-bg, linear-gradient(135deg, #d8ebff, #eef6ff));
      border: 1px solid var(--avatar-border, #c9def5);
      color: var(--avatar-fg, var(--primary-deep));
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-weight: 800;
      flex-shrink: 0;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    }

    .builder-avatar.has-image {
      padding: 0;
      overflow: hidden;
      background: #f4f8ff;
      border-color: rgba(201, 222, 245, 0.9);
    }

    .builder-avatar.has-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .builder-avatar.scenario {
      border-radius: 14px;
      font-size: 16px;
    }

    .builder-avatar.hero {
      width: 64px;
      height: 64px;
      font-size: 24px;
    }

    .builder-avatar.theme-a {
      --avatar-bg: linear-gradient(135deg, #d8ebff, #eef6ff);
      --avatar-border: #c9def5;
      --avatar-fg: #214a98;
    }

    .builder-avatar.theme-b {
      --avatar-bg: linear-gradient(135deg, #dff7ea, #f2fff8);
      --avatar-border: #c9ebd6;
      --avatar-fg: #18794e;
    }

    .builder-avatar.theme-c {
      --avatar-bg: linear-gradient(135deg, #fff0db, #fff8ee);
      --avatar-border: #f3dfbc;
      --avatar-fg: #a35f00;
    }

    .builder-avatar.theme-d {
      --avatar-bg: linear-gradient(135deg, #f0e5ff, #faf6ff);
      --avatar-border: #ddcef7;
      --avatar-fg: #6b3db8;
    }

    .builder-avatar.theme-e {
      --avatar-bg: linear-gradient(135deg, #ffe3e8, #fff5f7);
      --avatar-border: #f2c7d0;
      --avatar-fg: #b23a59;
    }

    .builder-avatar.theme-f {
      --avatar-bg: linear-gradient(135deg, #e1f6f6, #f4ffff);
      --avatar-border: #c8e8e8;
      --avatar-fg: #146c72;
    }

    .builder-card-menu-wrap {
      position: relative;
      flex-shrink: 0;
    }

    .builder-card-menu-btn {
      width: 34px;
      height: 34px;
      border-radius: 999px;
      border: 1px solid rgba(214, 223, 237, 0.95);
      background: #fff;
      color: var(--primary-deep);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      line-height: 1;
      box-shadow: 0 6px 14px rgba(31, 75, 157, 0.04);
      cursor: pointer;
    }

    .builder-card-menu {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      min-width: 168px;
      padding: 8px;
      border-radius: 16px;
      background: white;
      border: 1px solid var(--line);
      box-shadow: 0 20px 40px rgba(31, 75, 157, 0.14);
      z-index: 12;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .builder-card-menu.is-floating {
      position: fixed;
      top: 0;
      right: auto;
      left: 0;
      z-index: 5000;
      max-width: calc(100vw - 24px);
      max-height: calc(100vh - 24px);
      overflow-y: auto;
      overscroll-behavior: contain;
      box-shadow: 0 24px 54px rgba(21, 51, 105, 0.24);
    }

    .builder-card-menu-section {
      padding: 6px 0;
      border-top: 1px solid rgba(226, 232, 243, 0.9);
    }

    .builder-card-menu-section:first-child {
      border-top: 0;
      padding-top: 0;
    }

    .builder-card-menu-label {
      padding: 4px 12px 6px;
      color: #71809a;
      font-size: 11px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .builder-card-menu button {
      width: 100%;
      border: 0;
      background: transparent;
      border-radius: 12px;
      padding: 10px 12px;
      text-align: left;
      color: var(--ink);
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
    }

    .builder-card-menu button:hover {
      background: #eef5ff;
      color: var(--primary-deep);
    }

    .builder-card-menu button.is-active {
      background: rgba(47, 91, 215, 0.1);
      color: #244aa8;
      cursor: default;
    }

    .builder-card-menu button.danger:hover {
      background: #fff1ef;
      color: #b24a3d;
    }

    .builder-library-copy {
      min-width: 0;
    }

    .builder-library-title {
      font-weight: 800;
      color: var(--primary-deep);
      line-height: 1.25;
      font-size: 18px;
      letter-spacing: -0.02em;
    }

    .builder-library-subtitle {
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      line-height: 1.5;
      margin-top: 4px;
    }

    .builder-library-description {
      margin-top: 12px;
      color: var(--ink);
      font-size: 14px;
      line-height: 1.65;
    }

    .builder-library-description.clamp-3 {
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .builder-library-footer {
      margin-top: 14px;
      padding-top: 12px;
      border-top: 1px solid rgba(214, 223, 237, 0.9);
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: center;
      flex-wrap: wrap;
    }

    .builder-library-footer-left {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }

    .builder-library-usage {
      font-size: 11px;
      color: var(--muted);
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .builder-library-row {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: center;
      margin-top: 10px;
      flex-wrap: wrap;
    }

    .builder-mini-note {
      font-size: 12px;
      color: var(--muted);
      line-height: 1.5;
    }

    .embed-quick-report {
      margin-top: 12px;
      padding: 18px;
      border-radius: 20px;
      background: white;
      border: 1px solid var(--line);
    }

    .embed-quick-report h4 {
      margin: 0 0 8px;
      font-size: 20px;
      letter-spacing: -0.03em;
    }

    .embed-quick-score {
      font-size: 42px;
      font-weight: 800;
      line-height: 1;
      color: var(--primary-deep);
    }

    .embed-quick-feedback {
      margin-top: 12px;
      color: var(--muted);
      line-height: 1.6;
      font-size: 15px;
    }

    .embed-quick-status {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 12px;
      padding: 8px 12px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      background: var(--panel-soft);
      color: var(--primary-deep);
    }

    .embed-quick-status.pass {
      background: rgba(18, 131, 90, 0.12);
      color: var(--success);
    }

    .embed-quick-status.fail {
      background: rgba(207, 79, 74, 0.12);
      color: var(--danger);
    }

    .embed-quick-points {
      margin-top: 14px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .embed-quick-card {
      padding: 14px 16px;
      border-radius: 18px;
      background: #f8fbff;
      border: 1px solid var(--line);
    }

    .embed-quick-card h5 {
      margin: 0 0 10px;
      font-size: 14px;
      letter-spacing: -0.01em;
    }

    .embed-quick-card ul {
      margin: 0;
      padding-left: 18px;
      color: var(--muted);
      line-height: 1.55;
      font-size: 14px;
    }

    .embed-quick-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 16px;
    }

    .embed-resource-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 14px;
      justify-content: center;
    }

    .embed-resource-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 10px 14px;
      border-radius: 999px;
      background: linear-gradient(180deg, #ff9b3d, #e56d17);
      color: white;
      text-decoration: none;
      border: 1px solid rgba(201, 98, 18, 0.35);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      box-shadow: 0 10px 20px rgba(229, 109, 23, 0.18);
    }

    .support-widget {
      position: fixed;
      right: 24px;
      bottom: 24px;
      z-index: 1200;
      display: none;
      flex-direction: column;
      align-items: flex-end;
      gap: 12px;
    }

    .support-widget.hidden {
      display: none;
    }

    .admin-online-widget {
      position: fixed;
      right: 24px;
      bottom: 24px;
      z-index: 1190;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      pointer-events: auto;
    }

    .admin-online-widget.hidden {
      display: none;
    }

    .admin-online-pill {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      min-height: 46px;
      padding: 0 16px 0 14px;
      border-radius: 999px;
      border: 1px solid rgba(37, 104, 202, 0.18);
      background: rgba(255, 255, 255, 0.96);
      color: #1f3766;
      box-shadow: 0 18px 36px rgba(31, 75, 157, 0.16);
      backdrop-filter: blur(14px);
      cursor: grab;
      touch-action: none;
      user-select: none;
    }

    .admin-online-pill:hover,
    .admin-online-pill:focus-visible {
      box-shadow: 0 22px 44px rgba(31, 75, 157, 0.2);
      border-color: rgba(37, 104, 202, 0.26);
    }

    .admin-online-pill:focus-visible {
      outline: 2px solid rgba(44, 143, 214, 0.22);
      outline-offset: 3px;
    }

    .admin-online-widget.is-dragging .admin-online-pill {
      cursor: grabbing;
    }

    .admin-online-dot {
      width: 11px;
      height: 11px;
      border-radius: 999px;
      background: linear-gradient(180deg, #38d77b, #18a956);
      box-shadow: 0 0 0 5px rgba(56, 215, 123, 0.14);
      flex-shrink: 0;
    }

    .admin-online-copy {
      display: flex;
      flex-direction: column;
      gap: 2px;
      line-height: 1;
    }

    .admin-online-eyebrow {
      font-size: 10px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: #6f84a8;
    }

    .admin-online-count {
      font-size: 13px;
      font-weight: 800;
      color: #1f3766;
      white-space: nowrap;
    }

    .admin-online-tooltip {
      position: absolute;
      right: 0;
      bottom: calc(100% + 12px);
      width: min(240px, calc(100vw - 48px));
      padding: 14px;
      border-radius: 18px;
      border: 1px solid rgba(37, 104, 202, 0.14);
      background: rgba(255, 255, 255, 0.98);
      box-shadow: 0 18px 38px rgba(31, 75, 157, 0.16);
      color: #284164;
      opacity: 0;
      transform: translateY(6px);
      pointer-events: none;
      transition: opacity 150ms ease, transform 150ms ease;
    }

    .admin-online-tooltip::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -14px;
      height: 14px;
    }

    .admin-online-widget[data-tooltip-side="left"] .admin-online-tooltip {
      right: auto;
      left: 0;
    }

    .admin-online-widget[data-tooltip-vertical="below"] .admin-online-tooltip {
      top: calc(100% + 12px);
      bottom: auto;
    }

    .admin-online-widget[data-tooltip-vertical="below"] .admin-online-tooltip::after {
      top: -14px;
      bottom: auto;
    }

    .admin-online-pill:hover .admin-online-tooltip,
    .admin-online-pill:focus-within .admin-online-tooltip {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    .admin-online-widget.is-dragging .admin-online-tooltip {
      opacity: 0 !important;
      pointer-events: none !important;
    }

    .admin-online-tooltip-title {
      margin: 0 0 8px;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #6f84a8;
    }

    .admin-online-tooltip-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
      max-height: min(300px, calc(100vh - 180px));
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-gutter: stable;
      touch-action: pan-y;
      padding-right: 4px;
    }

    .admin-online-tooltip-list::-webkit-scrollbar {
      width: 8px;
    }

    .admin-online-tooltip-list::-webkit-scrollbar-track {
      background: #edf3fb;
      border-radius: 999px;
    }

    .admin-online-tooltip-list::-webkit-scrollbar-thumb {
      background: #a9bddc;
      border-radius: 999px;
    }

    .admin-online-name {
      padding: 8px 10px;
      border-radius: 12px;
      background: linear-gradient(180deg, #f7fbff, #eef5ff);
      border: 1px solid rgba(174, 198, 233, 0.36);
      font-size: 13px;
      font-weight: 700;
      color: #284164;
    }

    .admin-online-empty {
      font-size: 13px;
      line-height: 1.5;
      color: #7486a2;
    }

    .support-panel {
      width: min(380px, calc(100vw - 28px));
      max-height: min(72vh, 720px);
      display: flex;
      flex-direction: column;
      border-radius: 24px;
      background: rgba(255, 255, 255, 0.96);
      border: 1px solid var(--line);
      box-shadow: 0 26px 60px rgba(21, 51, 105, 0.18);
      overflow: hidden;
      backdrop-filter: blur(18px);
    }

    .support-panel.hidden {
      display: none;
    }

    .support-head {
      display: flex;
      align-items: start;
      justify-content: space-between;
      gap: 12px;
      padding: 18px 18px 14px;
      border-bottom: 1px solid var(--line);
      background: linear-gradient(180deg, #ffffff, #f7fbff);
    }

    .support-title {
      font-size: 18px;
      font-weight: 800;
      color: var(--ink);
    }

    .support-title-row {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .support-badge-icon {
      width: 38px;
      height: 38px;
      border-radius: 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, rgba(44, 143, 214, 0.12), rgba(17, 52, 118, 0.14));
      color: var(--primary-deep);
      border: 1px solid rgba(44, 143, 214, 0.16);
      flex-shrink: 0;
    }

    .support-subtitle {
      margin-top: 4px;
      font-size: 13px;
      line-height: 1.45;
      color: var(--muted);
    }

    .support-close {
      width: 36px;
      height: 36px;
      border-radius: 999px;
      background: white;
      border: 1px solid var(--line);
      color: var(--muted);
      font-size: 18px;
      box-shadow: none;
    }

    .support-messages {
      padding: 14px 16px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      overflow-y: auto;
      min-height: 140px;
      max-height: 280px;
      background: linear-gradient(180deg, #fbfdff, #f5f9ff);
    }

    .support-quick-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      padding: 12px 16px 8px;
      border-bottom: 1px solid rgba(216, 229, 247, 0.8);
      background: linear-gradient(180deg, #fbfdff, #f7fbff);
    }

    .support-quick-chip {
      padding: 9px 12px;
      border-radius: 999px;
      background: white;
      border: 1px solid var(--line);
      color: var(--primary-deep);
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      box-shadow: none;
    }

    .support-empty {
      font-size: 14px;
      color: var(--muted);
      line-height: 1.55;
      padding: 8px 4px;
    }

    .support-bubble {
      max-width: 88%;
      padding: 12px 14px;
      border-radius: 18px;
      font-size: 14px;
      line-height: 1.5;
      white-space: pre-wrap;
      word-break: break-word;
    }

    .support-bubble.assistant {
      align-self: flex-start;
      background: white;
      border: 1px solid var(--line);
      color: var(--ink);
    }

    .support-bubble.user {
      align-self: flex-end;
      background: linear-gradient(135deg, var(--primary), var(--primary-deep));
      color: white;
      box-shadow: 0 10px 24px rgba(31, 75, 157, 0.18);
    }

    .support-status {
      padding: 0 16px 10px;
      font-size: 13px;
      color: var(--muted);
      min-height: 18px;
    }

    .support-status.error {
      color: #b13f32;
    }

    .support-actions {
      display: flex;
      gap: 10px;
      padding: 0 16px 12px;
      flex-wrap: wrap;
    }

    .support-secondary {
      padding: 10px 14px;
      border-radius: 999px;
      background: #fff5ea;
      color: #b35712;
      border: 1px solid rgba(229, 109, 23, 0.22);
      font-weight: 800;
      font-size: 13px;
    }

    .support-input-wrap {
      padding: 0 16px 16px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .support-input {
      min-height: 92px;
      resize: vertical;
    }

    .support-send {
      width: 100%;
      padding: 14px 16px;
      border-radius: 16px;
      background: linear-gradient(135deg, var(--primary), var(--primary-deep));
      color: white;
      font-weight: 800;
      box-shadow: 0 16px 30px rgba(44, 143, 214, 0.2);
    }

    .support-trigger {
      min-width: 58px;
      height: 58px;
      padding: 0 18px;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--primary-deep), var(--primary));
      color: white;
      font-size: 15px;
      font-weight: 800;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      box-shadow: 0 20px 42px rgba(31, 75, 157, 0.28);
    }

    .support-trigger svg {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
    }

    .support-trigger-label {
      line-height: 1;
    }

    body.embed-roleplay .support-widget {
      display: none !important;
    }

    body.embed-roleplay .admin-online-widget {
      display: none !important;
    }

    .embed-lesson-brief {
      margin-top: 16px;
      padding: 18px 20px;
      border-radius: 22px;
      background: linear-gradient(180deg, #f9fcff, #eef6ff);
      border: 1px solid var(--line);
    }

    .embed-lesson-brief h3 {
      margin: 0 0 12px;
      font-size: 20px;
      letter-spacing: -0.03em;
    }

    .embed-lesson-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
    }

    .embed-lesson-item {
      padding: 14px 16px;
      border-radius: 18px;
      background: linear-gradient(180deg, #214a98, #183a79);
      border: 1px solid rgba(255, 255, 255, 0.14);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }

    .embed-lesson-label {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.72);
      margin-bottom: 8px;
    }

    .embed-lesson-value {
      color: white;
      line-height: 1.55;
      font-size: 14px;
    }

    .embed-lesson-steps {
      margin: 14px 0 0;
      padding-left: 18px;
      color: var(--muted);
      line-height: 1.65;
      font-size: 14px;
    }

    .embed-lesson-steps li + li {
      margin-top: 6px;
    }

    .call-stage {
      background: rgba(255, 255, 255, 0.92);
      border-radius: 30px;
      padding: 22px;
      border: 1px solid rgba(255, 255, 255, 0.85);
      box-shadow: var(--shadow);
      width: min(100%, 1320px);
      max-width: 1320px;
      margin: 0 auto;
    }

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

    .call-stage-actions,
    .report-title-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .feedback-trigger-btn {
      min-height: 40px;
      padding: 0 14px;
      border-radius: 999px;
      border: 1px solid rgba(35, 84, 153, 0.18);
      background: linear-gradient(135deg, #ffffff, #eef4ff);
      color: var(--primary-deep);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: -0.01em;
      box-shadow: 0 12px 28px rgba(35, 84, 153, 0.14);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .feedback-trigger-btn:hover {
      background: linear-gradient(135deg, #ffffff, #e8f0ff);
      transform: translateY(-1px);
    }

    .feedback-trigger-btn::before {
      content: "!";
      width: 20px;
      height: 20px;
      border-radius: 999px;
      background: rgba(35, 84, 221, 0.12);
      color: var(--primary-deep);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 900;
      line-height: 1;
    }

    .practice-stage-card .call-stage-actions .status-pill {
      background: rgba(17, 30, 61, 0.92);
      color: rgba(255, 255, 255, 0.94);
      border: 1px solid rgba(23, 41, 84, 0.9);
      min-width: 132px;
      justify-content: center;
      box-shadow: none;
    }

    .practice-stage-card .call-stage-actions .status-pill::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: #44d17d;
      box-shadow: 0 0 0 0 rgba(68, 209, 125, 0.45);
      animation: livePulse 1.6s ease-in-out infinite;
      flex-shrink: 0;
    }

    .practice-stage-card.paused .call-stage-actions .status-pill::before,
    .practice-stage-card.ended .call-stage-actions .status-pill::before {
      background: #f0b44c;
      box-shadow: none;
      animation: none;
    }

    .practice-stage-card.error-state .call-stage-actions .status-pill::before {
      background: #f06767;
      animation: none;
    }

    .pause-coaching-alert {
      position: absolute;
      left: 18px;
      right: 18px;
      bottom: 18px;
      z-index: 8;
      display: flex;
      align-items: flex-start;
      gap: 10px;
      max-width: 520px;
      padding: 13px 15px;
      border-radius: 16px;
      border: 1px solid rgba(224, 162, 20, 0.52);
      background: rgba(255, 251, 235, 0.96);
      color: #713f12;
      box-shadow: 0 18px 38px rgba(36, 45, 82, 0.14);
      font-size: 13px;
      line-height: 1.45;
      backdrop-filter: blur(10px);
    }

    .pause-coaching-alert strong {
      display: block;
      margin-bottom: 2px;
      color: #513600;
      font-size: 12px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .pause-coaching-alert::before {
      content: "!";
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      width: 22px;
      height: 22px;
      border-radius: 999px;
      background: #f59e0b;
      color: #ffffff;
      font-weight: 900;
      line-height: 1;
    }

    .feedback-admin-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 16px;
      margin-bottom: 16px;
    }

    .feedback-copy-audit-notes {
      width: auto;
      min-height: 34px;
      padding: 7px 11px;
      font-size: 11px;
    }

    .feedback-filter-group {
      display: inline-flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .feedback-filter-btn {
      border: 1px solid var(--line);
      background: #fff;
      color: var(--muted);
      border-radius: 999px;
      padding: 10px 14px;
      font-size: 13px;
      font-weight: 800;
    }

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

    .feedback-admin-list {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .feedback-admin-card {
      border: 1px solid var(--line);
      border-radius: 22px;
      background: linear-gradient(180deg, #ffffff, #f8fbff);
      padding: 18px;
    }

    .feedback-admin-card.ai-safety {
      border-color: rgba(190, 61, 55, 0.28);
      box-shadow: 0 14px 35px rgba(126, 30, 28, 0.08);
    }

    .feedback-ai-snapshot {
      margin-top: 14px;
      padding: 14px 16px;
      border: 1px solid rgba(190, 61, 55, 0.2);
      border-radius: 14px;
      background: #fff7f6;
      color: #5b2927;
    }

    .feedback-ai-snapshot strong {
      display: block;
      margin-bottom: 6px;
      color: #8c2f2b;
      font-size: 0.78rem;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .feedback-ai-snapshot p {
      max-height: 210px;
      margin: 0;
      overflow: auto;
      white-space: pre-wrap;
    }

    .feedback-admin-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 12px;
    }

    .feedback-admin-title {
      font-size: 18px;
      font-weight: 800;
      color: var(--ink);
      line-height: 1.2;
    }

    .feedback-admin-meta {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.6;
      margin-top: 6px;
    }

    .feedback-admin-message {
      border: 1px solid var(--line);
      border-radius: 18px;
      background: #fff;
      padding: 14px 16px;
      color: var(--ink);
      line-height: 1.7;
      white-space: pre-wrap;
    }

    .feedback-admin-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin-top: 14px;
      flex-wrap: wrap;
    }

    .feedback-suggestion-status-actions {
      display: flex;
      justify-content: flex-end;
      gap: 7px;
      flex-wrap: wrap;
    }

    .feedback-suggestion-status-actions button {
      min-height: 34px;
      padding: 7px 11px;
      border: 1px solid #d5e0ee;
      border-radius: 999px;
      background: #ffffff;
      color: #496184;
      font: inherit;
      font-size: 11px;
      font-weight: 800;
      cursor: pointer;
    }

    .feedback-suggestion-status-actions button:hover:not(:disabled),
    .feedback-suggestion-status-actions button:focus-visible {
      border-color: #7896d9;
      color: #264f9f;
    }

    .feedback-suggestion-status-actions button[aria-current="true"] {
      border-color: #3157d8;
      background: #3157d8;
      color: #ffffff;
      opacity: 1;
      cursor: default;
    }

    .feedback-status-pill {
      display: inline-flex;
      align-items: center;
      padding: 8px 12px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 800;
      border: 1px solid var(--line);
      background: var(--panel-soft);
      color: var(--primary-deep);
    }

    .feedback-status-pill.resolved {
      background: #eef9f0;
      color: #277245;
      border-color: #cdebd3;
    }

    .feedback-modal-card {
      width: min(620px, 100%);
    }

    .feedback-helper {
      border: 1px solid var(--line);
      background: var(--panel-soft);
      color: var(--muted);
      border-radius: 18px;
      padding: 14px 16px;
      line-height: 1.6;
      font-size: 14px;
    }

    .call-stage-title {
      font-size: 22px;
      font-weight: 800;
      letter-spacing: -0.03em;
    }

    .call-board {
      display: grid;
      grid-template-columns: 142px 1fr;
      gap: 16px;
      min-height: 330px;
      padding: 12px;
      border-radius: 26px;
      background: linear-gradient(180deg, #f2f5ff 0%, #f8fbff 100%);
      border: 1px solid #dde6fb;
    }

    .prospect-card {
      background: linear-gradient(180deg, #f8fbff 0%, #edf3ff 100%);
      border: 1px solid #dde6fb;
      border-radius: 22px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 100%;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }

    .avatar-block {
      height: 154px;
      border-radius: 18px;
      background: linear-gradient(135deg, #c7d8ff, #eef4ff);
      display: block;
      color: white;
      position: relative;
      overflow: hidden;
      transition: box-shadow 180ms ease, transform 180ms ease;
    }

    .avatar-photo {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      filter: saturate(1.02) contrast(1.02);
      transform: scale(1);
      transition: transform 240ms ease, filter 240ms ease;
    }

    .avatar-photo.hidden {
      display: none;
    }

    .avatar-block::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(23, 40, 82, 0.02), rgba(23, 40, 82, 0.12));
    }

    .avatar-block.speaking {
      box-shadow:
        0 0 0 1px rgba(91, 114, 255, 0.18),
        0 0 0 8px rgba(91, 114, 255, 0.08),
        0 20px 38px rgba(76, 112, 255, 0.22);
      transform: translateY(-2px) scale(1.02);
    }

    .avatar-block.speaking::before {
      content: "";
      position: absolute;
      inset: -18px;
      border-radius: 26px;
      background: radial-gradient(circle, rgba(101, 129, 255, 0.28) 0%, rgba(101, 129, 255, 0.08) 42%, transparent 72%);
      animation: avatarGlowPulse 1.45s ease-in-out infinite;
      z-index: 0;
      pointer-events: none;
    }

    .avatar-block.speaking .avatar-photo {
      transform: scale(1.07);
      filter: saturate(1.08) contrast(1.04) brightness(1.05);
    }

    .prospect-identity {
      margin-top: 10px;
      padding: 10px 10px 9px;
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.96);
      border: 1px solid rgba(206, 220, 250, 0.92);
      box-shadow: 0 12px 24px rgba(35, 84, 153, 0.08);
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .avatar-meta {
      display: flex;
      flex-direction: column;
      gap: 2px;
      color: var(--primary-deep);
      font-size: 12px;
      font-weight: 700;
      min-width: 0;
    }

    .avatar-meta.single-line {
      padding: 0;
    }

    .avatar-meta span:first-child {
      font-size: 13px;
      line-height: 1.2;
      white-space: normal;
      word-break: break-word;
    }

    .avatar-meta span:last-child {
      font-size: 10px;
      line-height: 1.25;
      color: var(--muted);
    }

    .prospect-timer {
      align-self: flex-start;
      padding: 8px 10px;
      border-radius: 999px;
      background: rgba(20, 44, 89, 0.82);
      color: white;
      font-size: 12px;
      font-weight: 700;
    }

    .conversation-screen {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 100%;
      padding: 20px;
      border-radius: 22px;
      background: linear-gradient(180deg, rgba(245,247,255,0.92), rgba(251,253,255,0.98));
      border: 1px solid rgba(221, 230, 251, 0.95);
      overflow: hidden;
    }

    .conversation-screen::before {
      content: "";
      position: absolute;
      inset: 14px;
      border-radius: 18px;
      border: 1px dashed rgba(91, 114, 255, 0.12);
      pointer-events: none;
    }

    .screen-center {
      position: relative;
      z-index: 1;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      gap: 12px;
      padding: 28px;
    }

    .screen-headline {
      font-size: 28px;
      font-weight: 800;
      letter-spacing: -0.03em;
    }

    .screen-subline {
      max-width: 460px;
      font-size: 15px;
      color: var(--muted);
      line-height: 1.6;
    }

    .screen-live-line {
      width: min(920px, 100%);
      max-width: 920px;
      min-height: 52px;
      padding: 14px 18px;
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.8);
      border: 1px solid rgba(202, 214, 246, 0.95);
      color: var(--primary-deep);
      font-size: 18px;
      font-weight: 700;
      line-height: 1.5;
      box-shadow: 0 14px 26px rgba(31, 75, 157, 0.08);
      opacity: 0;
      transform: translateY(6px);
      transition: opacity 180ms ease, transform 180ms ease;
    }

    .screen-live-line.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .thinking-dots {
      display: inline-flex;
      gap: 9px;
      align-items: center;
      justify-content: center;
      min-height: 22px;
    }

    .thinking-dots span {
      width: 6px;
      height: 12px;
      border-radius: 999px;
      background: #1f4b9d;
      transform-origin: center bottom;
      opacity: 0.5;
      transition: height 90ms linear, opacity 120ms ease, transform 120ms ease;
    }

    .screen-footer {
      position: relative;
      z-index: 1;
      display: flex;
      justify-content: flex-end;
      align-items: flex-end;
      gap: 14px;
      margin-top: 18px;
    }

    .speaker-chip {
      padding: 10px 14px;
      border-radius: 999px;
      background: white;
      border: 1px solid var(--line);
      color: #1f4b9d;
      font-size: 12px;
      font-weight: 800;
      box-shadow: 0 10px 18px rgba(91, 114, 255, 0.08);
    }

    .voice-level {
      display: none;
    }

    .voice-level span {
      width: 6px;
      border-radius: 999px;
      background: linear-gradient(180deg, rgba(107, 166, 255, 0.95), rgba(44, 143, 214, 0.7));
      height: 8px;
      transform-origin: bottom center;
      transition: height 80ms linear, opacity 120ms ease;
      opacity: 0.75;
    }

    .voice-level.active {
      opacity: 1;
    }

    .call-controls {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 12px;
      margin-top: 18px;
      flex-wrap: wrap;
      width: 100%;
      margin-inline: auto;
    }

    .icon-button {
      width: 52px;
      height: 52px;
      border-radius: 999px;
      background: white;
      border: 1px solid var(--line);
      color: var(--muted);
      font-size: 20px;
      box-shadow: 0 8px 22px rgba(31, 75, 157, 0.08);
    }

    .control-group {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      min-width: 82px;
    }

    .control-label {
      text-align: center;
      font-size: 12px;
      font-weight: 700;
      color: var(--muted);
      line-height: 1.25;
    }

    .icon-button.active {
      color: white;
      background: linear-gradient(135deg, var(--primary), var(--primary-deep));
      border-color: transparent;
    }

    .icon-button.end {
      background: linear-gradient(135deg, #ff7a66, #d15244);
      color: white;
      border-color: transparent;
    }

    .icon-button.primary {
      background: linear-gradient(135deg, #35b65d, #208945);
      color: white;
      border-color: transparent;
    }

    .icon-button.pause {
      background: linear-gradient(135deg, #f7fbff, #dfeeff);
      color: var(--primary-deep);
      border-color: var(--line);
    }

    .icon-button.restart {
      background: linear-gradient(135deg, #fff7f1, #ffe4d2);
      color: #b85f2f;
      border-color: #ffd1b3;
    }

    .icon-button.mic-muted {
      background: linear-gradient(135deg, #fff1f1, #ffd9d9);
      color: #b83b3b;
      border-color: #ffc3c3;
    }

    #callBtn {
      width: auto;
      min-width: 132px;
      padding: 0 18px;
      font-size: 16px;
      font-weight: 800;
    }

    .loader-line {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
      margin: 12px auto 0;
      padding: 10px 14px;
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.76);
      border: 1px solid rgba(216, 227, 245, 0.9);
    }

    .practice-stage-card .loader-line {
      margin-top: 10px;
      background: transparent;
      border: 0;
      padding: 0;
      box-shadow: none;
      font-size: 12px;
      color: #6f83a9;
    }

    .roleplay-status-line {
      display: none !important;
    }

    .mini-spinner {
      width: 18px;
      height: 18px;
      border-radius: 999px;
      border: 2px solid rgba(44, 143, 214, 0.18);
      border-top-color: var(--primary);
      animation: spin 0.85s linear infinite;
    }

    .realtime-debug-panel {
      margin: 12px auto 0;
      width: min(920px, 100%);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 10px 12px;
      border-radius: 16px;
      background: rgba(31, 75, 157, 0.045);
      border: 1px solid rgba(44, 143, 214, 0.14);
    }

    .practice-stage-card .realtime-debug-panel,
    #realtimeDebugPanel {
      display: none !important;
    }

    .realtime-debug-copy {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
    }

    .realtime-debug-copy strong {
      font-size: 12px;
      color: var(--primary-deep);
    }

    .realtime-debug-copy span {
      font-size: 11px;
      color: var(--muted);
      line-height: 1.45;
    }

    .realtime-debug-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    @media (max-width: 720px) {
      .realtime-debug-panel {
        flex-direction: column;
        align-items: stretch;
      }

      .realtime-debug-actions {
        justify-content: stretch;
      }

      .realtime-debug-actions .ghost-button {
        width: 100%;
      }
    }

    .call-caption-line {
      margin-top: 12px;
      width: min(920px, 100%);
      margin-inline: auto;
      min-height: 24px;
      text-align: center;
      color: var(--primary-deep);
      font-size: 17px;
      font-weight: 800;
      line-height: 1.45;
    }

    .call-caption-line:empty {
      display: none;
    }

    .objection-tip-card {
      margin-top: 10px;
      width: min(760px, 100%);
      margin-inline: auto;
      padding: 12px 14px;
      border-radius: 16px;
      border: 1px solid #c9d8ff;
      background: linear-gradient(180deg, #f7faff 0%, #edf4ff 100%);
      box-shadow: 0 8px 18px rgba(32, 69, 140, 0.06);
    }

    .objection-tip-kicker {
      font-size: 11px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #3561b8;
      font-weight: 800;
      margin-bottom: 6px;
    }

    .objection-tip-text {
      font-size: 13px;
      line-height: 1.5;
      color: #183153;
      font-weight: 600;
    }

    .objection-resource-link {
      display: inline;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: #2149a7;
      font: inherit;
      font-weight: 900;
      text-decoration: underline;
      text-underline-offset: 3px;
      box-shadow: none;
      cursor: pointer;
    }

    .objection-resource-link:hover {
      transform: none;
      color: #17306d;
    }

    .objection-tip-meta {
      margin-top: 6px;
      font-size: 11px;
      line-height: 1.45;
      color: #587197;
    }

    .call-review-gate {
      margin-top: 18px;
      width: min(560px, 100%);
      padding: 26px 24px;
      border-radius: 24px;
      background: linear-gradient(180deg, rgba(49, 53, 65, 0.92), rgba(74, 79, 91, 0.97));
      color: white;
      text-align: center;
      box-shadow: 0 24px 48px rgba(17, 25, 48, 0.2);
    }

    .call-review-gate.hidden {
      display: none;
    }

    .call-review-gate h3 {
      margin: 0;
      font-size: 34px;
      line-height: 1.08;
      letter-spacing: -0.04em;
    }

    .call-review-gate p {
      margin: 12px 0 0;
      color: rgba(255, 255, 255, 0.82);
      font-size: 15px;
      line-height: 1.6;
    }

    .call-review-actions {
      margin-top: 20px;
      display: flex;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;
    }

    .call-review-primary {
      min-width: 260px;
      width: auto;
      margin-top: 0;
      padding-inline: 22px;
      background: linear-gradient(135deg, #2f6bc4, #1f4b9d);
    }

    .report-panel-hidden {
      display: none;
    }

    .call-stage.ended .conversation-screen {
      background: linear-gradient(180deg, rgba(73, 77, 88, 0.97), rgba(58, 63, 73, 0.98));
      border-color: rgba(77, 84, 99, 0.95);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }

    .call-stage.ended .conversation-screen::before {
      border-color: rgba(255, 255, 255, 0.08);
    }

    .call-stage.ended .screen-headline,
    .call-stage.ended .screen-subline {
      color: white;
    }

    .call-stage.ended .screen-subline {
      color: rgba(255, 255, 255, 0.76);
    }

    .call-stage.ended .speaker-chip,
    .call-stage.ended .prospect-timer {
      opacity: 0.72;
    }

    @keyframes livePulse {
      0% {
        box-shadow: 0 0 0 0 rgba(68, 209, 125, 0.45);
        opacity: 0.9;
      }
      70% {
        box-shadow: 0 0 0 8px rgba(68, 209, 125, 0);
        opacity: 1;
      }
      100% {
        box-shadow: 0 0 0 0 rgba(68, 209, 125, 0);
        opacity: 0.9;
      }
    }

    .audio-box {
      margin-top: 10px;
      width: min(920px, 100%);
      margin-inline: auto;
      padding: 12px 14px;
      border-radius: 16px;
      border: 1px solid rgba(216, 227, 245, 0.92);
      background: rgba(255, 255, 255, 0.82);
    }

    .stack {
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    .history {
      display: flex;
      flex-direction: column;
      gap: 12px;
      max-height: 320px;
      overflow-y: auto;
      padding-right: 6px;
    }

    .bubble {
      padding: 14px 16px;
      border-radius: 18px;
      max-width: 88%;
      line-height: 1.5;
      white-space: pre-wrap;
      border: 1px solid var(--line);
    }

    .rep {
      background: linear-gradient(180deg, #edf7ff, #e1f1ff);
      align-self: flex-end;
    }

    .prospect {
      background: linear-gradient(180deg, #ffffff, #f8fbff);
      align-self: flex-start;
    }

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

    .report {
      padding: 22px;
      border: 1px solid rgba(213, 223, 241, 0.95);
      border-radius: 30px;
      background:
        radial-gradient(circle at top right, rgba(112, 146, 255, 0.09), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 255, 0.98));
      box-shadow: 0 26px 52px rgba(26, 62, 138, 0.08);
    }

    .feedback-report-shell {
      display: grid;
      grid-template-columns: minmax(0, 1.38fr) minmax(370px, 0.92fr);
      gap: 26px;
      align-items: start;
    }

    #feedbackView,
    #feedbackView button,
    #feedbackView input,
    #feedbackView textarea,
    #feedbackView select,
    #feedbackView .report,
    #feedbackView .insight-card,
    #feedbackView .transcript-side-card,
    #feedbackView .audio-box,
    #feedbackView .report-list,
    #feedbackView .score-list,
    #feedbackView .transcript-thread,
    #feedbackView .transcript-bubble,
    #feedbackView .transcript-speaker,
    #feedbackView .transcript-text {
      font-family: "Nunito", "Avenir Next", "Segoe UI", sans-serif;
    }

    .feedback-report-main {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    .feedback-report-aside {
      position: sticky;
      top: 24px;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .transcript-side-card {
      padding: 20px 20px 18px;
      border-radius: 28px;
      border: 1px solid rgba(213, 223, 241, 0.95);
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.98));
      box-shadow: 0 22px 46px rgba(31, 75, 157, 0.08);
    }

    .transcript-side-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
      margin-bottom: 16px;
      padding-bottom: 14px;
      border-bottom: 1px solid rgba(223, 231, 245, 0.95);
    }

    .transcript-side-head h2 {
      margin: 0 0 6px;
      font-size: 28px;
      line-height: 1.02;
      letter-spacing: -0.05em;
    }

    .transcript-copy-button {
      width: 42px;
      height: 42px;
      display: inline-grid;
      place-items: center;
      flex: 0 0 auto;
      border-radius: 14px;
      border: 1px solid rgba(207, 219, 242, 0.95);
      background: rgba(255, 255, 255, 0.92);
      color: #284d9f;
      box-shadow: 0 10px 24px rgba(31, 75, 157, 0.1);
      cursor: pointer;
      transition: transform 140ms ease, background 140ms ease, border-color 140ms ease, color 140ms ease;
    }

    .transcript-copy-button:hover:not(:disabled) {
      transform: translateY(-1px);
      border-color: rgba(77, 111, 221, 0.42);
      background: #eef5ff;
      color: #1f43a0;
    }

    .transcript-copy-button:disabled {
      cursor: not-allowed;
      opacity: 0.58;
      box-shadow: none;
    }

    .transcript-copy-button svg {
      width: 19px;
      height: 19px;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .transcript-copy-button.copied {
      background: #eaf8f1;
      border-color: rgba(48, 134, 95, 0.34);
      color: #26775d;
    }

    .transcript-side-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 14px;
    }

    .transcript-side-card textarea {
      min-height: 560px;
      resize: vertical;
      background: rgba(255, 255, 255, 0.95);
    }

    .transcript-source-hidden {
      display: none;
    }

    .transcript-thread {
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-height: 560px;
      max-height: 68vh;
      overflow-y: auto;
      padding: 6px 4px 6px 0;
    }

    .transcript-thread.history {
      min-height: 320px;
      max-height: 52vh;
      padding: 2px 0;
    }

    .transcript-empty {
      padding: 18px;
      border-radius: 18px;
      border: 1px dashed rgba(117, 138, 180, 0.35);
      background: rgba(247, 250, 255, 0.95);
      color: #6d7f9c;
      line-height: 1.6;
    }

    .transcript-turn {
      display: grid;
      grid-template-columns: 176px minmax(0, 1fr);
      column-gap: 14px;
      row-gap: 0;
      align-items: start;
      align-self: stretch;
      justify-self: stretch;
      width: 100%;
      background: transparent;
      border: 0;
      border-radius: 0;
      box-shadow: none;
    }

    .transcript-meta {
      grid-column: 1;
      display: flex;
      flex-direction: column;
      gap: 0;
      padding-top: 0;
      min-width: 0;
      width: 100%;
    }

    .transcript-speaker-row {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
      user-select: none;
      width: 100%;
    }

    .transcript-bubble {
      grid-column: 2;
      width: 100%;
      max-width: 100%;
      min-width: 100%;
      box-sizing: border-box;
      justify-self: stretch;
      display: block;
      margin-left: 0;
      padding: 12px 15px;
      border-radius: 18px;
      border: 1px solid rgba(205, 216, 237, 0.9);
      background: linear-gradient(180deg, rgba(247, 249, 255, 0.98), rgba(240, 244, 251, 0.96));
      box-shadow: none;
      cursor: default;
      text-align: left;
      transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
    }

    .transcript-bubble:disabled {
      opacity: 1;
    }

    .transcript-avatar {
      width: 28px;
      height: 28px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      font-size: 13px;
      font-weight: 900;
      letter-spacing: 0;
      text-transform: uppercase;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.45);
      margin-top: 0;
      flex-shrink: 0;
    }

    .transcript-turn.rep .transcript-avatar {
      color: #ffffff;
      background: linear-gradient(135deg, #2f7d6c, #256b5e);
    }

    .transcript-turn.rep,
    .transcript-turn.prospect,
    .transcript-turn.unknown {
      align-self: stretch;
      justify-self: stretch;
      background: transparent;
    }

    .transcript-turn.prospect .transcript-avatar {
      color: #ffffff;
      background: linear-gradient(135deg, #4768f0, #3654cf);
    }

    .transcript-turn.unknown .transcript-avatar {
      color: #ffffff;
      background: linear-gradient(135deg, #7f93b7, #687da5);
    }

    .transcript-speaker {
      font-size: 14px;
      font-weight: 900;
      letter-spacing: 0.01em;
      text-transform: uppercase;
      color: #20324d;
      white-space: nowrap;
    }

    .transcript-turn.rep .transcript-speaker {
      color: #2e6ce0;
    }

    .transcript-turn.prospect .transcript-speaker {
      color: #1f2d44;
    }

    .transcript-text-wrap {
      min-width: 0;
      width: 100%;
    }

    .transcript-text {
      white-space: pre-wrap;
      line-height: 1.58;
      color: #1c2a44;
      font-size: 15px;
      font-weight: 500;
      word-break: break-word;
    }

    .transcript-seek-hint {
      margin-top: 4px;
      font-size: 11px;
      color: #71829e;
      font-weight: 600;
    }

    .transcript-seek-hint:empty {
      display: none;
    }

    @media (max-width: 780px) {
      .report {
        padding: 18px;
        border-radius: 24px;
      }

      .transcript-side-card {
        padding: 18px 16px 16px;
      }

      .transcript-side-head h2,
      .insight-title {
        font-size: 24px;
      }

      .transcript-turn {
        grid-template-columns: 1fr;
        gap: 4px;
      }

      .transcript-meta {
        grid-column: auto;
        gap: 6px;
        padding-left: 0;
      }

      .transcript-bubble {
        grid-column: auto;
        margin-left: 0;
        padding: 10px 12px;
      }

      .transcript-speaker {
        font-size: 12px;
      }

      .transcript-text {
        font-size: 14px;
      }

      .transition-carousel-shell {
        grid-template-columns: 1fr;
      }

      .transition-gallery-btn-side {
        display: none;
      }
    }

    .report-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-top: 12px;
    }

    .report-metric {
      padding: 14px;
      border-radius: 16px;
      background: var(--panel-soft);
      border: 1px solid var(--line);
    }

    .report-label {
      font-size: 11px;
      font-weight: 800;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    .report-value {
      margin-top: 8px;
      font-size: 28px;
      font-weight: 800;
    }

    .ready-yes { color: var(--success); }
    .ready-no { color: var(--danger); }

    .score-list, .report-list {
      margin: 10px 0 0;
      padding-left: 18px;
    }

    .report-copy {
      margin-top: 14px;
      line-height: 1.55;
    }

    .feedback-loading {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-top: 12px;
      color: var(--muted);
      font-size: 14px;
      font-weight: 700;
    }

    .report-title-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 14px;
      margin-bottom: 10px;
    }

    .report-hero {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(220px, 0.62fr);
      gap: 20px;
      align-items: stretch;
      padding: 22px;
      border-radius: 28px;
      background:
        radial-gradient(circle at top right, rgba(160, 188, 255, 0.32), transparent 28%),
        linear-gradient(135deg, #eef4ff 0%, #e6eeff 48%, #f4f8ff 100%);
      border: 1px solid rgba(164, 184, 231, 0.85);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
      margin-top: 14px;
    }

    .report-hero-copy {
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-width: 0;
    }

    .report-hero-title {
      font-size: clamp(30px, 3vw, 38px);
      font-weight: 800;
      line-height: 0.98;
      letter-spacing: -0.06em;
      color: #15284c;
    }

    .report-hero-subtitle {
      margin-top: 10px;
      color: #66789f;
      font-size: 15px;
      line-height: 1.6;
      max-width: 540px;
    }

    .report-hero-score {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 180px;
      padding: 18px;
      border-radius: 24px;
      border: 1px solid rgba(176, 192, 229, 0.95);
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(241, 246, 255, 0.98));
      box-shadow: 0 16px 34px rgba(58, 92, 165, 0.1);
    }

    .report-hero-score .report-grid {
      grid-template-columns: 1fr;
      width: 100%;
      margin-top: 0;
    }

    .report-hero-score .report-metric {
      padding: 0;
      background: transparent;
      border: 0;
      text-align: center;
    }

    .report-hero-score .report-label {
      font-size: 12px;
      color: #6f7fa4;
    }

    .report-hero-score .report-value {
      margin-top: 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 66px;
      padding: 12px 18px;
      border-radius: 20px;
      font-size: clamp(27px, 3vw, 38px);
      line-height: 1.02;
      letter-spacing: -0.05em;
      color: #10264e;
      background: #edf2fb;
      border: 1px solid #d7e0ef;
    }

    .report-value[data-level="mastered"],
    .transition-score-pill[data-level="mastered"],
    .transition-moment-score[data-level="mastered"] {
      color: #ffffff;
      background: #176846;
      border-color: #176846;
    }

    .report-value[data-level="achieved"],
    .transition-score-pill[data-level="achieved"],
    .transition-moment-score[data-level="achieved"] {
      color: #1f6549;
      background: #dff4e8;
      border-color: #b6dfc8;
    }

    .report-value[data-level="developing"],
    .transition-score-pill[data-level="developing"],
    .transition-moment-score[data-level="developing"] {
      color: #725500;
      background: #fff2b8;
      border-color: #edd575;
    }

    .report-value[data-level="priority"],
    .transition-score-pill[data-level="priority"],
    .transition-moment-score[data-level="priority"] {
      color: #93400e;
      background: #ffe1c7;
      border-color: #f1b880;
    }

    .report-value[data-level="critical"],
    .transition-score-pill[data-level="critical"],
    .transition-moment-score[data-level="critical"] {
      color: #9b2828;
      background: #ffe0e0;
      border-color: #efb2b2;
    }

    .report-tabs {
      display: inline-flex;
      gap: 8px;
      padding: 6px;
      border-radius: 999px;
      background: white;
      border: 1px solid var(--line);
      margin-top: 16px;
    }

    .report-tab {
      padding: 10px 16px;
      border-radius: 999px;
      background: transparent;
      color: var(--muted);
      font-weight: 800;
      font-size: 14px;
    }

    .report-tab.active {
      background: var(--panel-soft);
      color: var(--primary-deep);
    }

    .report-section {
      margin-top: 18px;
    }

    .coach-top-grid {
      display: grid;
      grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
      gap: 18px;
      align-items: start;
    }

    #coachView > .coach-top-grid {
      margin-top: 18px;
    }

    .compact-rubric-card {
      margin-top: 0;
      padding: 18px;
      border-radius: 24px;
      border: 1px solid rgba(214, 223, 237, 0.95);
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.98));
      box-shadow: 0 14px 28px rgba(31, 75, 157, 0.05);
    }

    .compact-rubric-card strong:first-child {
      display: block;
      font-size: 24px;
      line-height: 1.04;
      letter-spacing: -0.04em;
      color: #15284c;
    }

    .rubric-score {
      margin-top: 12px;
      font-size: 15px;
      color: #6f7fa4;
    }

    .rubric-score strong {
      color: #10264e;
      font-size: 38px;
      line-height: 0.95;
      letter-spacing: -0.06em;
      margin-right: 8px;
    }

    .rubric-items {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 14px;
      max-height: 388px;
      overflow: auto;
      padding-right: 6px;
    }

    .repetition-insight-card {
      margin-top: 14px;
      padding: 14px;
      border-radius: 18px;
      border: 1px solid rgba(204, 217, 240, 0.95);
      background: linear-gradient(180deg, #f8fbff, #eef5ff);
    }

    .observable-metrics-details summary {
      cursor: pointer;
      color: #36527f;
      font-size: 13px;
      font-weight: 850;
      list-style-position: inside;
    }

    .observable-metrics-details[open] summary {
      margin-bottom: 6px;
    }

    .repetition-insight-kicker {
      font-size: 11px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: #6f83a9;
    }

    .repetition-insight-main {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 12px;
      margin-top: 8px;
    }

    .repetition-insight-label {
      min-width: 0;
      color: #15284c;
      font-size: 18px;
      font-weight: 900;
      line-height: 1.15;
      overflow-wrap: anywhere;
    }

    .repetition-insight-count {
      flex: 0 0 auto;
      color: #3159bd;
      font-size: 24px;
      font-weight: 900;
      letter-spacing: -0.04em;
    }

    .repetition-insight-note {
      margin-top: 8px;
      color: #66789f;
      font-size: 13px;
      line-height: 1.45;
    }

    .conversation-metrics-card {
      margin-top: 18px;
      padding: 20px;
      border-color: rgba(195, 211, 239, 0.96);
      background:
        radial-gradient(circle at top right, rgba(70, 113, 214, 0.12), transparent 32%),
        linear-gradient(180deg, #fbfdff, #f2f7ff);
    }

    .conversation-metrics-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(260px, 0.95fr);
      gap: 18px;
      margin-top: 16px;
    }

    .talk-balance-panel,
    .filler-metrics-panel {
      min-width: 0;
      padding: 16px;
      border-radius: 20px;
      border: 1px solid rgba(210, 222, 243, 0.96);
      background: rgba(255, 255, 255, 0.86);
    }

    .conversation-metric-heading {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 10px;
      color: #18335f;
      font-size: 15px;
      font-weight: 900;
    }

    .conversation-metric-heading span {
      color: #65789d;
      font-size: 12px;
      font-weight: 800;
    }

    .talk-balance-labels {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      margin-top: 18px;
      color: #617394;
      font-size: 14px;
    }

    .talk-balance-labels strong {
      color: #234f9f;
    }

    .talk-balance-track {
      display: flex;
      height: 14px;
      margin-top: 9px;
      overflow: hidden;
      border-radius: 999px;
      background: #edf1f7;
      box-shadow: inset 0 1px 2px rgba(30, 58, 110, 0.12);
    }

    .talk-balance-rep {
      background: linear-gradient(90deg, #265bb9, #4a78db);
    }

    .talk-balance-prospect {
      background: linear-gradient(90deg, #8bb2ee, #b7d1f5);
    }

    .talk-balance-status {
      margin-top: 13px;
      color: #8a4a14;
      font-size: 13px;
      font-weight: 850;
      line-height: 1.45;
    }

    .talk-balance-status[data-status="balanced"] {
      color: #277055;
    }

    .conversation-metric-note {
      margin-top: 9px;
      color: #7483a0;
      font-size: 11px;
      line-height: 1.45;
    }

    .filler-metric-list {
      display: flex;
      flex-direction: column;
      gap: 9px;
      margin-top: 12px;
    }

    .filler-metric-row {
      padding: 10px 11px;
      border-radius: 14px;
      background: #f7faff;
      border: 1px solid #e1e9f7;
    }

    .filler-metric-name {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      color: #263e67;
      font-size: 13px;
      font-weight: 800;
    }

    .filler-metric-name strong {
      color: #244fa4;
      font-size: 14px;
    }

    .filler-metric-times {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 8px;
    }

    .metric-timestamp-button {
      padding: 5px 9px;
      border-radius: 999px;
      border: 1px solid #cbdaf4;
      background: #ffffff;
      color: #2451a6;
      font-size: 11px;
      font-weight: 900;
      box-shadow: none;
    }

    .metric-timestamp-button:hover {
      transform: none;
      background: #eaf1ff;
    }

    .metric-no-timestamp,
    .metric-time-label,
    .metric-empty-state {
      color: #7d8ca6;
      font-size: 11px;
      line-height: 1.4;
    }

    .conversation-metrics-foot {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 14px;
    }

    .conversation-metrics-foot > span {
      padding: 7px 10px;
      border-radius: 999px;
      background: #eaf1ff;
      color: #526b96;
      font-size: 11px;
    }

    .conversation-metrics-foot strong {
      color: #244c99;
    }

    .rubric-items::-webkit-scrollbar,
    .transition-moments::-webkit-scrollbar {
      width: 8px;
    }

    .rubric-items::-webkit-scrollbar-thumb,
    .transition-moments::-webkit-scrollbar-thumb {
      background: rgba(88, 122, 255, 0.24);
      border-radius: 999px;
    }

    .rubric-item {
      padding: 12px 14px;
      border-radius: 18px;
      border: 1px solid rgba(220, 228, 242, 0.98);
      background: #ffffff;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
    }

    .rubric-item summary {
      list-style: none;
      cursor: pointer;
    }

    .rubric-item summary::-webkit-details-marker {
      display: none;
    }

    .rubric-item-top {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
    }

    .rubric-item-label {
      font-weight: 700;
      line-height: 1.45;
      font-size: 15px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .rubric-item-badge {
      padding: 6px 10px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 800;
      white-space: nowrap;
    }

    .rubric-item-badge.hit {
      background: rgba(18, 131, 90, 0.12);
      color: var(--success);
    }

    .rubric-item-badge.partial {
      background: rgba(44, 143, 214, 0.12);
      color: var(--primary-deep);
    }

    .rubric-item-badge.miss {
      background: rgba(207, 79, 74, 0.12);
      color: var(--danger);
    }

    .rubric-item-feedback {
      margin-top: 6px;
      color: #617397;
      font-size: 13px;
      line-height: 1.5;
      white-space: pre-line;
    }

    .rubric-item-summary {
      margin-top: 6px;
      color: var(--ink);
      font-size: 13px;
      line-height: 1.5;
    }

    .rubric-item-body {
      padding-top: 10px;
      margin-top: 10px;
      border-top: 1px solid #e7eefc;
    }

    .rubric-item-evidence {
      margin-top: 8px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.5;
      white-space: pre-line;
      padding: 10px 12px;
      border-radius: 12px;
      background: #f7faff;
      border: 1px solid #e7eefc;
    }

    .insight-card {
      margin-top: 16px;
      padding: 18px 20px;
      border-radius: 24px;
      border: 1px solid rgba(214, 223, 237, 0.95);
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 251, 255, 0.98));
      box-shadow: 0 14px 28px rgba(31, 75, 157, 0.05);
    }

    .coach-top-grid .insight-card {
      margin-top: 0;
    }

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

    .insight-title {
      font-size: 28px;
      font-weight: 800;
      line-height: 1;
      letter-spacing: -0.05em;
      color: #15284c;
    }

    .insight-summary {
      margin-top: 10px;
      color: #66789f;
      line-height: 1.7;
    }

    .insight-subtitle {
      margin-top: 16px;
      color: #2d456d;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .coach-detail-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.06fr) minmax(280px, 0.94fr);
      gap: 18px;
      align-items: start;
      margin-top: 16px;
    }

    .coach-support-stack {
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    .coach-detail-grid .insight-card,
    .coach-support-stack .insight-card {
      margin-top: 0;
    }

    .transition-gallery-controls {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      margin-top: 18px;
      padding-top: 14px;
      border-top: 1px solid rgba(223, 231, 245, 0.95);
    }

    .transition-gallery-controls.hidden {
      display: none;
    }

    .transition-gallery-btn {
      width: 38px;
      height: 38px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: var(--panel-soft);
      color: var(--primary-deep);
      font-size: 18px;
      font-weight: 800;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .transition-gallery-btn:disabled {
      opacity: 0.45;
      cursor: default;
    }

    .transition-gallery-count {
      font-size: 13px;
      font-weight: 800;
      color: #62749a;
      min-width: 96px;
      text-align: center;
    }

    .transition-carousel-shell {
      display: grid;
      grid-template-columns: 74px minmax(0, 1fr) 74px;
      align-items: center;
      gap: 22px;
      margin-top: 16px;
    }

    .transition-carousel-viewport {
      min-width: 0;
      padding: 0 2px;
    }

    .transition-score-row {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 14px;
      margin-top: 12px;
      flex-wrap: wrap;
    }

    .transition-score-pill {
      min-width: 112px;
      padding: 10px 14px;
      border-radius: 999px;
      background: linear-gradient(180deg, #eef4ff, #e3ebff);
      border: 1px solid rgba(206, 220, 247, 0.98);
      color: #1a4da3;
      text-align: center;
      font-size: 14px;
      font-weight: 900;
      letter-spacing: 0.01em;
    }

    .transition-card .transition-moments {
      margin-top: 0;
      max-height: none;
      overflow: visible;
      padding-right: 0;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 0;
      align-items: stretch;
    }

    .transition-card {
      padding: 20px 22px 18px;
      border-radius: 28px;
      border: 1px solid rgba(44, 87, 179, 0.3);
      background:
        radial-gradient(circle at top right, rgba(133, 171, 255, 0.24), transparent 26%),
        linear-gradient(180deg, #163a80 0%, #1d4da3 100%);
      box-shadow: 0 28px 46px rgba(24, 58, 128, 0.2);
    }

    .transition-card .insight-title {
      color: #ffffff;
      font-size: 30px;
      letter-spacing: -0.06em;
    }

    .transition-card .insight-summary {
      color: rgba(235, 242, 255, 0.88);
      max-width: 880px;
    }

    .transition-card .transition-score-row {
      align-items: center;
      margin-top: 12px;
    }

    .transition-card .transition-score-pill {
      background: rgba(255, 255, 255, 0.16);
      border-color: rgba(255, 255, 255, 0.22);
      color: #ffffff;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
    }

    .transition-card .transition-gallery-controls {
      border-top-color: rgba(219, 230, 255, 0.16);
      margin-top: 14px;
      padding-top: 12px;
    }

    .transition-card .transition-gallery-btn {
      border-color: rgba(255, 255, 255, 0.18);
      background: rgba(255, 255, 255, 0.1);
      color: #ffffff;
      backdrop-filter: blur(10px);
    }

    .transition-card .transition-gallery-count {
      color: rgba(235, 242, 255, 0.9);
    }

    .transition-gallery-btn-side {
      width: 48px;
      height: 48px;
      font-size: 20px;
      flex-shrink: 0;
      transform: translateX(0);
      opacity: 0.68;
    }

    #transitionPrevBtn.transition-gallery-btn-side {
      margin-left: 0;
    }

    #transitionNextBtn.transition-gallery-btn-side {
      margin-right: 0;
    }

    .transition-moment {
      border: 1px solid rgba(210, 222, 245, 0.98);
      border-radius: 24px;
      padding: 16px 18px;
      background: linear-gradient(180deg, #f7faff, #edf3ff);
      border-color: #d6e2fb;
      height: 100%;
    }

    .transition-card .transition-moment {
      border-radius: 26px;
      border-color: rgba(255, 255, 255, 0.14);
      background: linear-gradient(180deg, rgba(244, 248, 255, 0.97), rgba(233, 241, 255, 0.97));
      box-shadow: 0 14px 24px rgba(10, 29, 71, 0.12);
    }

    .transition-card .transition-moment-top {
      gap: 18px;
      margin-bottom: 12px;
    }

    .transition-card .transition-moment-type {
      font-size: 14px;
      letter-spacing: 0.08em;
    }

    .transition-card .transition-moment-type {
      color: #2152a9;
    }

    .transition-card .transition-moment-score {
      background: #dce8ff;
      color: #12387c;
      font-size: 13px;
      padding: 7px 11px;
    }

    .transition-card .transition-moment-excerpt {
      background: linear-gradient(180deg, #2458b6, #1d4692);
      border-color: #173a78;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
      font-size: 13px;
      line-height: 1.65;
      padding: 12px 14px;
    }

    .transition-card .transition-moment-summary {
      color: #17315c;
      font-weight: 700;
      font-size: 16px;
      line-height: 1.5;
      max-width: 920px;
    }

    .transition-card .transition-moment-link {
      color: #1f56b2;
      margin-top: 10px;
      font-size: 13px;
    }

    .transition-card .transition-moment-body {
      background: rgba(255, 255, 255, 0.62);
      border-radius: 14px;
      padding-left: 0;
      padding-right: 0;
    }

    .transition-card .transition-moment-body .insight-summary {
      font-size: 14px;
      line-height: 1.65;
      color: #28446f;
    }

    .transition-moment-timestamp {
      margin-top: 10px;
      padding: 7px 11px;
      border-radius: 999px;
      border: 1px solid #cbdaf4;
      background: #ffffff;
      color: #2451a6;
      font-size: 11px;
      font-weight: 900;
      box-shadow: none;
    }

    .transition-moment-timestamp:hover {
      transform: none;
      background: #eaf1ff;
    }

    .transition-checks {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 14px 0 12px;
    }

    .transition-check {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 10px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 900;
    }

    .transition-check.passed {
      color: #266a4f;
      background: #e4f5eb;
      border: 1px solid #bce1cc;
    }

    .transition-check.missed {
      color: #8d4b18;
      background: #fff0df;
      border: 1px solid #f0c89f;
    }

    .transition-methodology-guidance {
      margin-top: 14px;
      padding: 15px;
      border-radius: 18px;
      border: 1px solid #bad0f5;
      background: linear-gradient(180deg, #ffffff, #edf4ff);
      color: #24446f;
    }

    .transition-guidance-kicker {
      color: #1d4d9f;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .transition-guidance-response {
      margin-top: 9px;
      color: #17335f;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.58;
    }

    .transition-guidance-redirect {
      margin-top: 9px;
      color: #385783;
      font-size: 12px;
      line-height: 1.5;
    }

    .transition-guidance-source {
      margin-top: 9px;
      color: #7282a0;
      font-size: 10px;
      font-weight: 800;
    }

    .feedback-general-card {
      background:
        radial-gradient(circle at top right, rgba(187, 205, 244, 0.24), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #f4f7ff 100%);
      border-color: rgba(201, 214, 239, 0.96);
      box-shadow: 0 18px 34px rgba(24, 58, 128, 0.08);
    }

    .feedback-general-card .insight-title,
    .feedback-general-card .report-list {
      color: #15284c;
    }

    .feedback-general-card .insight-summary {
      color: #4f6288;
    }

    .operational-warning-card {
      margin-top: 14px;
      padding: 14px 15px;
      border-radius: 16px;
      border: 1px solid rgba(220, 38, 38, 0.26);
      background: linear-gradient(180deg, #fff1f1 0%, #fff7f4 100%);
      color: #8f1f1b;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
    }

    .operational-warning-top {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #b42318;
    }

    .operational-warning-body {
      margin-top: 8px;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.55;
      color: #8f1f1b;
    }

    .operational-warning-card a {
      display: inline-flex;
      align-items: center;
      margin-top: 10px;
      color: #1f4ea8;
      font-size: 13px;
      font-weight: 900;
      text-decoration: none;
    }

    .operational-warning-card a:hover {
      text-decoration: underline;
    }

    .strength-card {
      background:
        radial-gradient(circle at top right, rgba(167, 221, 201, 0.28), transparent 30%),
        linear-gradient(180deg, #f5fffb 0%, #ebfbf3 100%);
      border-color: rgba(163, 209, 189, 0.9);
    }

    .strength-card .insight-title,
    .strength-card .insight-summary,
    .strength-card .report-list {
      color: #173f3a;
    }

    .strength-card .insight-summary {
      color: #416f65;
    }

    .growth-card {
      background:
        radial-gradient(circle at top right, rgba(168, 223, 189, 0.26), transparent 30%),
        linear-gradient(180deg, #f4fff7 0%, #e9f9ee 100%);
      border-color: rgba(167, 212, 179, 0.92);
    }

    .growth-card .insight-title,
    .growth-card .report-list {
      color: #173f2d;
    }

    .growth-card .insight-summary {
      color: #4d765f;
    }

    .growth-card .report-list {
      padding-left: 0;
      list-style: none;
    }

    .growth-card .report-list .primary-correction {
      padding: 15px 16px;
      border: 1px solid rgba(55, 132, 82, 0.2);
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.68);
      color: #173f2d;
      font-size: 16px;
      font-weight: 800;
      line-height: 1.6;
    }

    .growth-card .report-list .secondary-correction {
      margin: 13px 2px 0;
      padding: 11px 12px 0;
      border-top: 1px solid rgba(55, 132, 82, 0.16);
      color: #557563;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.55;
    }

    .correction-hierarchy-label {
      display: block;
      margin-bottom: 7px;
      color: #6c8876;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .followup-card {
      background:
        radial-gradient(circle at top right, rgba(255, 219, 140, 0.28), transparent 30%),
        linear-gradient(180deg, #fffaf0 0%, #fff2cf 100%);
      border-color: rgba(234, 205, 132, 0.95);
    }

    .followup-card .insight-title,
    .followup-card .report-list {
      color: #5c430d;
    }

    .followup-card .insight-summary {
      color: #8a6a1f;
    }

    .followup-card .report-list {
      display: grid;
      gap: 9px;
      margin: 15px 0 0;
      padding: 0;
      list-style: none;
    }

    .next-attempt-plan-item {
      display: grid;
      grid-template-columns: 78px minmax(0, 1fr);
      gap: 10px;
      align-items: start;
      margin: 0 !important;
      padding: 11px 12px;
      border: 1px solid rgba(151, 112, 24, 0.14);
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.64);
    }

    .next-attempt-plan-label {
      display: inline-flex;
      justify-content: center;
      padding: 5px 8px;
      border-radius: 999px;
      background: rgba(151, 112, 24, 0.11);
      color: #795812;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.05em;
      line-height: 1.2;
      text-transform: uppercase;
    }

    .next-attempt-plan-item.keep .next-attempt-plan-label {
      background: rgba(35, 132, 91, 0.11);
      color: #277052;
    }

    .next-attempt-plan-item.correct .next-attempt-plan-label {
      background: rgba(202, 76, 54, 0.1);
      color: #a43d2a;
    }

    .next-attempt-plan-item.practice .next-attempt-plan-label {
      background: rgba(42, 91, 184, 0.1);
      color: #2954a4;
    }

    .next-attempt-plan-text {
      color: #614b1d;
      font-size: 13px;
      font-weight: 750;
      line-height: 1.55;
    }

    .transition-moment-summary {
      font-size: 14px;
      line-height: 1.6;
    }

    .critical-report-flag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 14px;
      padding: 12px 14px;
      border-radius: 16px;
      border: 1px solid rgba(240, 109, 78, 0.28);
      background: linear-gradient(180deg, rgba(255, 236, 232, 0.95), rgba(255, 246, 244, 0.95));
      color: #b33c24;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.55;
    }

    .critical-report-flag.hidden {
      display: none;
    }

    .report-list li.critical-mistake {
      list-style: none;
      margin-left: -18px;
      padding: 14px 16px;
      border-radius: 16px;
      border: 1px solid rgba(240, 109, 78, 0.24);
      background: rgba(255, 243, 240, 0.9);
      color: #8e2d1b;
      font-weight: 700;
    }

    .report-list li.critical-mistake + li {
      margin-top: 10px;
    }

    .feedback-evidence-item {
      position: relative;
      padding-right: 2px;
    }

    .mistake-evidence-button {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      margin-left: 8px;
      padding: 4px 8px;
      border: 1px solid rgba(49, 89, 189, 0.2);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.72);
      color: #2753a8;
      font-size: 11px;
      font-weight: 900;
      line-height: 1;
      cursor: pointer;
      vertical-align: middle;
      box-shadow: 0 4px 12px rgba(31, 75, 157, 0.08);
    }

    .mistake-evidence-button:hover,
    .mistake-evidence-button:focus-visible {
      background: #eef5ff;
      border-color: rgba(49, 89, 189, 0.36);
      outline: none;
    }

    .mistake-evidence-popover {
      position: absolute;
      left: 50%;
      bottom: calc(100% + 8px);
      z-index: 10;
      width: min(280px, 78vw);
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid rgba(39, 83, 168, 0.16);
      background: #122a55;
      color: #f5f8ff;
      font-size: 12px;
      font-weight: 750;
      line-height: 1.45;
      text-align: left;
      transform: translateX(-50%) translateY(4px);
      opacity: 0;
      pointer-events: none;
      box-shadow: 0 16px 34px rgba(17, 38, 75, 0.24);
      transition: opacity 140ms ease, transform 140ms ease;
      white-space: normal;
    }

    .mistake-evidence-button:hover .mistake-evidence-popover,
    .mistake-evidence-button:focus-visible .mistake-evidence-popover {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    .transcript-turn.feedback-highlight .transcript-bubble {
      border-color: rgba(245, 158, 11, 0.65);
      background: linear-gradient(180deg, #fff8e6, #fff2c2);
      box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.16);
    }

    .transcript-turn.conduct-evidence .transcript-bubble {
      border-color: rgba(220, 38, 38, 0.42);
      background: linear-gradient(180deg, #fff5f5, #ffe9e9);
      box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.08);
    }

    .transcript-flag-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 8px;
      padding: 5px 10px;
      border-radius: 999px;
      background: rgba(220, 38, 38, 0.1);
      color: #b42318;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .transcript-inline-flag {
      background: rgba(220, 38, 38, 0.16);
      color: #8f1d1d;
      border-radius: 8px;
      padding: 0 2px;
      font-weight: 800;
    }

    .history-callout-danger {
      margin-top: 12px;
      padding: 12px 14px;
      border-radius: 14px;
      border: 1px solid rgba(220, 38, 38, 0.18);
      background: linear-gradient(180deg, rgba(255, 245, 245, 0.98), rgba(255, 236, 236, 0.98));
    }

    .history-callout-danger strong {
      display: block;
      margin-bottom: 6px;
      color: #9f1239;
    }

    .critical-mistake-tag {
      display: inline-flex;
      align-items: center;
      margin-right: 8px;
      padding: 6px 10px;
      border-radius: 999px;
      background: rgba(228, 68, 37, 0.1);
      color: #b33c24;
      font-size: 12px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      vertical-align: middle;
    }

    .insight-card .report-list {
      margin-top: 14px;
      color: #21314e;
      line-height: 1.7;
    }

    .insight-card .report-list li + li {
      margin-top: 8px;
    }

    .feedback-report-aside .audio-box {
      border-radius: 24px;
      border: 1px solid rgba(213, 223, 241, 0.95);
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.98));
      box-shadow: 0 14px 28px rgba(31, 75, 157, 0.05);
    }

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

      .coach-detail-grid {
        grid-template-columns: 1fr;
      }

      .conversation-metrics-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 900px) {
      .feedback-report-shell {
        grid-template-columns: 1fr;
      }

      .feedback-report-aside {
        position: static;
      }

      .coach-top-grid {
        grid-template-columns: 1fr;
      }

      .transition-carousel-shell {
        grid-template-columns: 50px minmax(0, 1fr) 50px;
        gap: 10px;
      }

      .transition-gallery-btn-side {
        width: 50px;
        height: 50px;
        font-size: 24px;
      }
    }

    @media (max-width: 600px) {
      .report-hero {
        padding: 17px;
        border-radius: 22px;
      }

      .report-hero-score {
        min-height: 128px;
      }

      .transition-card {
        padding: 17px;
        border-radius: 22px;
      }

      .transition-carousel-shell {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
      }

      .transition-gallery-btn-side {
        display: none;
      }

      .transition-card .transition-moment {
        min-width: 0;
        padding: 14px;
        border-radius: 20px;
      }

      .transition-card .transition-moment-top {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
      }

      .coach-detail-grid .insight-card,
      .coach-support-stack .insight-card {
        padding: 16px;
        border-radius: 20px;
      }

      .coach-detail-grid .insight-title {
        font-size: 24px;
      }

      .next-attempt-plan-item {
        grid-template-columns: 1fr;
        gap: 7px;
      }

      .next-attempt-plan-label {
        width: fit-content;
      }

      .mistake-evidence-button {
        margin: 8px 0 0;
      }

      .mistake-evidence-popover {
        left: 0;
        width: min(250px, calc(100vw - 64px));
        transform: translateY(4px);
      }

      .mistake-evidence-button:hover .mistake-evidence-popover,
      .mistake-evidence-button:focus-visible .mistake-evidence-popover {
        transform: translateY(0);
      }
    }

    .pill-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 12px;
    }

    .tone-pill {
      padding: 8px 12px;
      border-radius: 999px;
      background: var(--panel-soft);
      color: var(--primary-deep);
      font-size: 13px;
      font-weight: 800;
    }

    .analytics-columns {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-top: 16px;
    }

    .analytics-group {
      padding: 16px;
      border-radius: 18px;
      background: white;
      border: 1px solid var(--line);
    }

    .analytics-group h4 {
      margin: 0 0 12px;
      font-size: 18px;
      letter-spacing: -0.02em;
    }

    .analytics-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .analytics-item {
      padding: 14px;
      border-radius: 16px;
      background: linear-gradient(180deg, #ffffff, #f8fbff);
      border: 1px solid var(--line);
    }

    .analytics-item-top {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
    }

    .analytics-item-label {
      font-weight: 700;
    }

    .analytics-item-value {
      color: var(--primary-deep);
      font-weight: 800;
      white-space: nowrap;
    }

    .analytics-item-detail {
      margin-top: 8px;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.55;
    }

    body.embed-roleplay {
      min-height: 0 !important;
      padding: 12px 12px 14px;
      background:
        radial-gradient(circle at top left, rgba(44, 143, 214, 0.1), transparent 28%),
        linear-gradient(180deg, #f6f9ff 0%, #edf3fb 100%);
    }

    body.embed-roleplay .app-shell {
      max-width: 1120px;
      padding: 0 !important;
      min-height: 0 !important;
    }

    body.embed-roleplay .auth-layout,
    body.embed-roleplay .setup-layout,
    body.embed-roleplay .workspace-shell,
    body.embed-roleplay .practice-shell,
    body.embed-roleplay .practice-layout {
      grid-template-columns: 1fr;
      max-width: 100%;
      min-height: 0 !important;
    }

    body.embed-roleplay .auth-brand,
    body.embed-roleplay .brand-panel,
    body.embed-roleplay .workspace-sidebar,
    body.embed-roleplay .setup-options-grid,
    body.embed-roleplay .practice-shell > .workspace-sidebar,
    body.embed-roleplay .practice-side,
    body.embed-roleplay #logoutBtn,
    body.embed-roleplay #practiceLogoutBtn,
    body.embed-roleplay #setupUserBadge,
    body.embed-roleplay #practiceUserBadge,
    body.embed-roleplay .auth-help,
    body.embed-roleplay .title-stack {
      display: none !important;
    }

    body.embed-roleplay .auth-panel,
    body.embed-roleplay .setup-main,
    body.embed-roleplay .workspace-main,
    body.embed-roleplay .practice-page-main,
    body.embed-roleplay .practice-main {
      max-width: 100%;
      min-height: 0 !important;
    }

    body.embed-roleplay #setupView,
    body.embed-roleplay #practiceView {
      min-height: 0 !important;
    }

    body.embed-roleplay .workspace-shell,
    body.embed-roleplay .workspace-main {
      gap: 10px;
    }

    body.embed-roleplay .workspace-header {
      display: none !important;
    }

    body.embed-roleplay .panel,
    body.embed-roleplay .call-stage,
    body.embed-roleplay .panel.stack {
      border-radius: 24px;
    }

    body.embed-roleplay .panel.stack > :not(#evaluationReport):not(.feedback-report-shell) {
      display: none !important;
    }

    body.embed-roleplay.embed-show-transcript .panel.stack > #finalTranscriptHeader,
    body.embed-roleplay.embed-show-transcript .panel.stack > #finalTranscript,
    body.embed-roleplay.embed-show-recording .panel.stack > #fullRecordingBox {
      display: block !important;
    }

    body.embed-roleplay.script-reading-embed .feedback-report-aside {
      display: none !important;
    }

    body.embed-roleplay.script-reading-embed .feedback-report-shell {
      grid-template-columns: minmax(0, 1fr);
    }

    body.embed-roleplay .topbar {
      justify-content: flex-start;
      margin-bottom: 18px;
    }

    body.embed-roleplay .practice-page-topbar,
    body.embed-roleplay .practice-page-status {
      display: none !important;
    }

    body.embed-roleplay .panel-head-copy h2,
    body.embed-roleplay .auth-panel h2 {
      font-size: 30px;
    }

    body.embed-roleplay .embed-lesson-brief {
      width: min(100%, 980px);
      margin: 0 auto 8px;
      padding: 12px 14px;
      border-radius: 24px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 250, 255, 0.94));
      border: 1px solid rgba(205, 220, 245, 0.9);
      box-shadow: 0 16px 32px rgba(27, 62, 130, 0.08);
    }

    body.embed-roleplay .loader-line {
      display: none !important;
    }

    body.embed-roleplay .practice-stage-card {
      max-width: 980px;
      margin-inline: auto;
      padding: 16px;
      border-radius: 28px;
      border: 1px solid rgba(206, 220, 246, 0.92);
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.98));
      box-shadow: 0 20px 40px rgba(24, 52, 106, 0.08);
    }

    body.embed-roleplay #setupPracticeHeroCard {
      max-width: 980px;
      margin: 0 auto;
      padding: 16px;
      border-radius: 26px;
      gap: 12px;
      align-items: center;
      box-shadow: 0 16px 34px rgba(24, 52, 106, 0.08);
    }

    body.embed-roleplay #setupPracticeHeroCard::after {
      height: 82px;
      bottom: -34px;
      opacity: 0.72;
    }

    body.embed-roleplay .practice-hero-copy h2 {
      margin-bottom: 8px;
      font-size: 20px;
    }

    body.embed-roleplay .practice-hero-visual {
      min-height: 138px;
      margin-top: 10px;
      border-radius: 24px;
    }

    body.embed-roleplay .practice-hero-preview-frame {
      left: 18px;
      top: 16px;
      width: 106px;
      height: 106px;
      border-radius: 24px;
    }

    body.embed-roleplay .practice-hero-preview-plate {
      left: 142px;
      top: 38px;
      width: min(260px, calc(100% - 158px));
      max-width: none;
      padding: 9px 12px;
      border-radius: 16px;
    }

    body.embed-roleplay .practice-hero-form {
      gap: 10px;
    }

    body.embed-roleplay .practice-hero-cta {
      margin-top: 0;
    }

    body.embed-roleplay #startSessionBtn {
      min-width: 220px;
      padding: 13px 18px;
      border-radius: 16px;
      color: #111827;
      text-shadow: none;
    }

    body.embed-roleplay .practice-stage-card .call-stage-header {
      margin-bottom: 14px;
      padding-bottom: 10px;
      border-bottom: 1px solid rgba(215, 226, 246, 0.9);
      align-items: center;
    }

    body.embed-roleplay .practice-stage-card .call-stage-actions {
      gap: 10px;
    }

    body.embed-roleplay .feedback-trigger-btn {
      width: auto;
      min-height: 38px;
      padding: 0 14px;
      border-radius: 999px;
      font-size: 12px;
      box-shadow: none;
    }

    body.embed-roleplay .practice-stage-card .call-stage-actions .status-pill {
      min-height: 38px;
      padding: 7px 14px 7px 12px;
      gap: 8px;
      font-size: 12px;
      letter-spacing: 0;
      box-shadow: none;
    }

    body.embed-roleplay .practice-stage-card .call-board {
      display: block;
      grid-template-columns: 1fr;
      min-height: 0;
      gap: 0;
      padding: 14px;
      border-radius: 28px;
      background:
        radial-gradient(circle at bottom left, rgba(157, 183, 255, 0.22), transparent 26%),
        radial-gradient(circle at bottom right, rgba(157, 183, 255, 0.18), transparent 24%),
        linear-gradient(180deg, #edf5ff 0%, #deebff 100%);
      border: 1px solid rgba(197, 216, 248, 0.95);
    }

    body.embed-roleplay .practice-stage-card .prospect-card {
      flex-direction: row;
      align-items: center;
      padding: 16px 18px;
      border-radius: 24px;
      gap: 18px;
      justify-content: flex-start;
      min-height: auto;
      background: transparent;
      border: 0;
      box-shadow: none;
    }

    body.embed-roleplay .practice-stage-card .avatar-block {
      flex: 0 0 118px;
      width: 118px;
      height: 118px;
      min-height: 118px;
      aspect-ratio: 1 / 1;
      border-radius: 28px;
      box-shadow: 0 14px 26px rgba(31, 75, 157, 0.08);
    }

    body.embed-roleplay .practice-stage-card .prospect-identity {
      flex: 1 1 auto;
      min-width: 0;
      margin-top: 0;
      padding: 18px 22px;
      text-align: left;
      align-items: flex-start;
      gap: 6px;
      border-radius: 24px;
      background: rgba(255, 255, 255, 0.92);
      border: 1px solid rgba(198, 214, 246, 0.95);
      box-shadow: 0 12px 24px rgba(31, 75, 157, 0.05);
    }

    body.embed-roleplay .practice-stage-card .avatar-meta span:first-child {
      font-size: 20px;
      line-height: 1.08;
    }

    body.embed-roleplay .practice-stage-card .avatar-meta span:last-child {
      font-size: 12px;
      line-height: 1.35;
    }

    body.embed-roleplay .practice-stage-card .prospect-timer {
      display: none;
    }

    body.embed-roleplay .practice-stage-card .conversation-screen {
      display: none !important;
      min-height: 0 !important;
      height: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      overflow: hidden !important;
    }

    body.embed-roleplay .practice-stage-card .screen-center {
      display: none !important;
    }

    body.embed-roleplay .practice-stage-card.compact-precall .call-board {
      min-height: 0;
    }

    body.embed-roleplay .practice-stage-card.compact-precall .conversation-screen {
      display: none;
    }

    body.embed-roleplay .practice-stage-card.compact-precall .screen-center {
      flex: 0 0 auto;
      min-height: 0;
      padding: 0;
    }

    body.embed-roleplay .practice-stage-card.compact-precall .thinking-dots {
      min-height: 0;
      padding: 0;
      background: transparent;
      border-color: transparent;
      box-shadow: none;
    }

    body.embed-roleplay .practice-stage-card .thinking-dots {
      min-height: 18px;
    }

    body.embed-roleplay .practice-stage-card .screen-headline {
      font-size: 30px;
      line-height: 1.02;
      letter-spacing: -0.04em;
    }

    body.embed-roleplay .practice-stage-card .screen-live-line {
      min-height: 42px;
      max-height: 72px;
      padding: 8px 12px;
      font-size: 13px;
      width: min(100%, 560px);
      margin-inline: auto;
      overflow-y: auto;
    }

    body.embed-roleplay .practice-stage-card .screen-footer {
      display: none;
    }

    body.embed-roleplay .practice-stage-card .speaker-chip {
      padding: 9px 14px;
      font-size: 12px;
    }

    body.embed-roleplay .practice-control-row {
      max-width: 100%;
      margin: 8px auto 0;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      align-items: center;
      justify-content: stretch;
      gap: 8px;
      padding: 6px 8px;
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.94);
      border: 1px solid rgba(216, 227, 247, 0.92);
      box-shadow: 0 8px 16px rgba(31, 75, 157, 0.035);
    }

    body.embed-roleplay .practice-control-card {
      width: 100%;
      min-width: 0;
      min-height: 0;
      padding: 0;
      gap: 4px;
      border-radius: 0;
      background: transparent;
      border: 0;
      box-shadow: none;
    }

    body.embed-roleplay .practice-control-card.pause-only {
      display: none;
    }

    body.embed-roleplay .practice-control-card.call-only {
      order: 1;
    }

    body.embed-roleplay .practice-control-card.mic-only {
      order: 2;
    }

    body.embed-roleplay .practice-control-card.restart-only {
      order: 3;
    }

    body.embed-roleplay .practice-control-card.primary {
      padding: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    body.embed-roleplay .practice-control-card.primary::before {
      content: none;
    }

    body.embed-roleplay .practice-control-card .icon-button {
      width: 100%;
      height: 36px;
      border-radius: 11px;
      box-shadow: none;
      background: #f8fbff;
    }

    body.embed-roleplay .practice-control-card.primary .icon-button {
      width: 100%;
      height: 36px;
      border-radius: 11px;
      background: linear-gradient(135deg, #1d4fd1, #2f79ff);
      border-color: transparent;
      box-shadow: 0 10px 18px rgba(33, 92, 220, 0.2);
    }

    body.embed-roleplay .practice-control-card .control-label {
      font-size: 10.5px;
      font-weight: 800;
      line-height: 1.1;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    body.embed-roleplay .practice-control-card.primary .control-label {
      font-size: 11px;
      letter-spacing: -0.01em;
      color: #111827 !important;
    }

    body.embed-roleplay .practice-control-card.call-only .control-label,
    body.embed-roleplay #callControlLabel {
      color: #111827 !important;
    }

    body.embed-roleplay .practice-control-row .practice-control-card.call-only #callControlLabel.control-label {
      color: #111827 !important;
      -webkit-text-fill-color: #111827 !important;
      text-shadow: none !important;
    }

    body.embed-roleplay .practice-control-card .control-subtext {
      display: none;
      font-size: 11px;
      line-height: 1.35;
      color: #6c7b99;
      text-align: center;
    }

    body.embed-roleplay .practice-control-card.primary .control-subtext {
      display: none;
    }

    body.embed-roleplay .call-caption-line,
    body.embed-roleplay .objection-tip-card,
    body.embed-roleplay #prospectPersona,
    body.embed-roleplay #realtimeDebugPanel,
    body.embed-roleplay #feedbackDebugPanel {
      display: none !important;
    }

    body.embed-roleplay #setupPanelSubtitle,
    body.embed-roleplay #embedModuleNote,
    body.embed-roleplay #prospectRow,
    body.embed-roleplay .workspace-header-subtitle,
    body.embed-roleplay #setupView .form-grid {
      display: none !important;
    }

    body.embed-roleplay .icon-ghost-button {
      display: none !important;
    }

    body.embed-roleplay #backToSetupBtn {
      display: inline-flex !important;
    }

    body.embed-roleplay .prospect-card {
      width: auto;
      min-width: 0;
      min-height: auto;
      padding: 16px 18px;
      justify-content: flex-start;
      gap: 18px;
    }

    body.embed-roleplay .prospect-card .avatar-block {
      display: block !important;
      height: 118px;
      min-height: 118px;
    }

    body.embed-roleplay .prospect-card .prospect-identity {
      margin-top: 0;
      align-items: flex-start;
    }

    body.embed-roleplay .prospect-card .avatar-meta {
      min-height: auto;
    }

    body.embed-roleplay .prospect-card .avatar-meta.single-line span {
      font-size: 18px;
      line-height: 1.1;
    }

    body.embed-roleplay .prospect-card .avatar-meta .prospect-address {
      font-size: 12px;
      line-height: 1.35;
      color: #556b93;
    }

    body.embed-roleplay .embed-resource-row {
      gap: 6px;
      margin-top: 8px;
      padding: 6px 8px;
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.88);
      border: 1px solid rgba(216, 227, 247, 0.95);
    }

    body.embed-roleplay #practiceEmbedResources {
      justify-content: center;
      align-items: center;
      align-content: center;
      flex-wrap: wrap;
      min-height: 0;
      margin: 10px 0 0;
      padding: 6px 8px;
      border-radius: 14px;
      background: transparent;
      border: 0;
      box-shadow: none;
    }

    body.embed-roleplay .embed-resource-link {
      background: #f8fbff;
      color: #20448f;
      border: 1px solid rgba(159, 186, 239, 0.95);
      border-radius: 999px;
      padding: 5px 10px;
      font-size: 10px;
      font-weight: 800;
      line-height: 1.1;
      letter-spacing: 0;
      text-transform: none;
      box-shadow: none;
    }

    body.embed-roleplay .embed-resource-link:hover {
      transform: translateY(-1px);
      box-shadow: 0 10px 18px rgba(31, 75, 157, 0.12);
    }

    body.embed-roleplay #authEmbedBrief .embed-resource-row,
    body.embed-roleplay #setupEmbedBrief .embed-resource-row,
    body.embed-roleplay #practiceEmbedBrief .embed-resource-row {
      justify-content: flex-start;
      margin-top: 12px;
      padding: 0;
      border: 0;
      background: transparent;
    }

    body.embed-roleplay #authEmbedBrief .embed-resource-link,
    body.embed-roleplay #setupEmbedBrief .embed-resource-link,
    body.embed-roleplay #practiceEmbedBrief .embed-resource-link {
      min-height: 38px;
      padding: 8px 14px;
      border-color: #9eb6e9;
      border-radius: 9px;
      background: #edf3ff;
      color: #214aa7;
      font-size: 11px;
      box-shadow: 0 5px 12px rgba(31, 75, 157, 0.1);
    }

    body.embed-roleplay #authEmbedBrief .embed-resource-link::before,
    body.embed-roleplay #setupEmbedBrief .embed-resource-link::before,
    body.embed-roleplay #practiceEmbedBrief .embed-resource-link::before {
      content: "▤";
      margin-right: 7px;
      font-size: 13px;
    }

    @media (max-width: 920px) {
      body.embed-roleplay {
        padding: 18px 12px 24px;
      }

      body.embed-roleplay .embed-lesson-brief,
      body.embed-roleplay .practice-stage-card {
        border-radius: 24px;
        padding: 18px;
      }

      body.embed-roleplay .practice-stage-card .prospect-card,
      body.embed-roleplay .prospect-card {
        padding: 12px;
        gap: 12px;
      }

      body.embed-roleplay .practice-stage-card .avatar-block,
      body.embed-roleplay .prospect-card .avatar-block {
        flex-basis: 88px;
        width: 88px;
        height: 88px;
        min-height: 88px;
      }

      body.embed-roleplay .practice-stage-card .prospect-identity {
        padding: 14px 16px;
      }
    }

    @media (max-width: 640px) {
      body.embed-roleplay .practice-stage-card .prospect-card,
      body.embed-roleplay .prospect-card {
        align-items: flex-start;
      }

      body.embed-roleplay .practice-stage-card .avatar-block,
      body.embed-roleplay .prospect-card .avatar-block {
        flex-basis: 68px;
        width: 68px;
        height: 68px;
        min-height: 68px;
        border-radius: 17px;
      }

      body.embed-roleplay .practice-stage-card .prospect-identity {
        padding: 10px 12px;
      }

      body.embed-roleplay .practice-control-row {
        gap: 5px;
        padding: 5px;
      }

      body.embed-roleplay .practice-control-card .icon-button,
      body.embed-roleplay .practice-control-card.primary .icon-button {
        height: 34px;
      }

      body.embed-roleplay .practice-control-card .control-label,
      body.embed-roleplay .practice-control-card.primary .control-label {
        font-size: 10px;
      }
    }

    @media (max-width: 420px) {
      body.embed-roleplay .practice-stage-card {
        padding: 12px;
      }

      body.embed-roleplay .practice-stage-card .call-board {
        padding: 10px;
        border-radius: 14px;
      }

      body.embed-roleplay .practice-stage-card .prospect-card,
      body.embed-roleplay .prospect-card {
        gap: 9px;
        padding: 9px;
      }

      body.embed-roleplay .practice-stage-card .avatar-block,
      body.embed-roleplay .prospect-card .avatar-block {
        flex-basis: 58px;
        width: 58px;
        height: 58px;
        min-height: 58px;
        border-radius: 15px;
      }

      body.embed-roleplay .practice-stage-card .prospect-identity {
        padding: 9px 10px;
        border-radius: 18px;
      }

      body.embed-roleplay .practice-stage-card .avatar-meta span:first-child,
      body.embed-roleplay .prospect-card .avatar-meta.single-line span {
        font-size: 14px;
      }

      body.embed-roleplay .prospect-card .avatar-meta .prospect-address {
        font-size: 10px;
      }

      body.embed-roleplay .embed-resource-link {
        padding: 4px 9px;
        font-size: 9.5px;
      }

      body.embed-roleplay .practice-control-card .icon-button,
      body.embed-roleplay .practice-control-card.primary .icon-button {
        height: 32px;
      }

      body.embed-roleplay .practice-control-card .control-label,
      body.embed-roleplay .practice-control-card.primary .control-label {
        font-size: 9.5px;
      }
    }

    /* La práctica integrada se comporta como una actividad de Academia, no como otro portal. */
    body.embed-roleplay .workspace-mobile-topbar,
    body.embed-roleplay .workspace-mobile-backdrop,
    body.embed-roleplay #mobileBottomNav {
      display: none !important;
    }

    body.embed-roleplay #setupPracticeHeroCard {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 14px;
      padding: 20px;
      border: 1px solid rgba(202, 216, 240, 0.92);
      border-radius: 22px;
      background: #fff;
      box-shadow: 0 14px 30px rgba(24, 52, 106, 0.07);
    }

    body.embed-roleplay #setupPracticeHeroCard::after { display: none; }
    body.embed-roleplay #setupPracticeHeroCard .practice-hero-copy,
    body.embed-roleplay #setupPracticeHeroCard .practice-hero-form { display: contents; }
    body.embed-roleplay #setupPanelTitle { display: none !important; }

    body.embed-roleplay #setupEmbedBrief {
      order: 1;
      width: 100%;
      margin: 0;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    body.embed-roleplay #setupEmbedBrief .embed-lesson-grid { gap: 8px; }
    body.embed-roleplay #setupEmbedBrief .embed-lesson-item {
      padding: 16px 18px;
      border: 1px solid #d7e3f6;
      border-radius: 16px;
      background: #edf4ff;
      box-shadow: none;
    }

    body.embed-roleplay #setupEmbedBrief .embed-lesson-label {
      margin-bottom: 6px;
      color: #31538b;
      font-size: 10px;
    }

    body.embed-roleplay #setupEmbedBrief .embed-lesson-value {
      color: #172b4f;
      font-size: 14px;
      line-height: 1.5;
    }

    body.embed-roleplay #setupEmbedBrief .embed-resource-row {
      justify-content: flex-start;
      margin: 8px 0 0;
      padding: 0;
      border: 0;
      background: transparent;
    }

    body.embed-roleplay #setupPracticeHeroCard .practice-hero-cta {
      order: 2;
      display: grid;
      grid-template-columns: 1fr;
      gap: 7px;
      width: 100%;
      margin: 0;
    }

    body.embed-roleplay #startSessionBtn {
      width: 100%;
      min-width: 0;
      min-height: 52px;
      padding: 14px 20px;
      border-radius: 14px;
      background: linear-gradient(135deg, #173f96, #2766e6);
      color: #fff;
      font-size: 16px;
      font-weight: 900;
      text-shadow: none;
      box-shadow: 0 12px 24px rgba(31, 83, 190, 0.2);
    }

    body.embed-roleplay #setupPracticeHeroCard .roleplay-quota-status {
      order: 2;
      width: 100%;
      min-height: 0;
      text-align: center;
    }

    body.embed-roleplay #setupPracticeHeroCard .practice-hero-visual {
      order: 3;
      width: 100%;
      min-height: 112px;
      margin: 0;
      border-radius: 17px;
      background: #f4f7fc;
      box-shadow: none;
    }

    body.embed-roleplay #setupPracticeHeroCard .practice-hero-preview-frame {
      left: 14px;
      top: 12px;
      width: 88px;
      height: 88px;
      border-radius: 18px;
      box-shadow: none;
    }

    body.embed-roleplay #setupPracticeHeroCard .practice-hero-preview-plate {
      left: 116px;
      top: 25px;
      width: calc(100% - 130px);
      padding: 10px 13px;
      border-radius: 14px;
      box-shadow: none;
    }

    body.embed-roleplay .practice-stage-card {
      padding: 14px;
      border-radius: 22px;
      background: #fff;
      box-shadow: 0 14px 30px rgba(24, 52, 106, 0.07);
    }

    body.embed-roleplay .practice-stage-card .call-stage-header { display: none !important; }
    body.embed-roleplay .practice-stage-card .call-board {
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
    }

    body.embed-roleplay .practice-stage-card .prospect-card {
      padding: 13px;
      border: 1px solid #d7e3f6;
      border-radius: 18px;
      background: #edf4ff;
    }

    body.embed-roleplay .practice-stage-card .avatar-block {
      flex-basis: 92px;
      width: 92px;
      height: 92px;
      min-height: 92px;
      border-radius: 19px;
      box-shadow: none;
    }

    body.embed-roleplay .practice-stage-card .prospect-identity {
      padding: 14px 16px;
      border-radius: 16px;
      box-shadow: none;
    }

    body.embed-roleplay .practice-control-row {
      margin-top: 12px;
      padding: 8px;
      gap: 8px;
      border-radius: 16px;
      background: #f8faff;
      box-shadow: none;
    }

    body.embed-roleplay .practice-control-card.primary .icon-button { height: 42px; }
    body.embed-roleplay .practice-control-card.primary .control-label {
      font-size: 11px;
      white-space: normal;
    }

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

    @keyframes dotPulse {
      0%, 80%, 100% { transform: translateY(0); opacity: 0.34; }
      40% { transform: translateY(-6px); opacity: 1; }
    }

    @keyframes avatarGlowPulse {
      0%, 100% { opacity: 0.52; transform: scale(0.98); }
      50% { opacity: 0.95; transform: scale(1.02); }
    }

    @keyframes levelBounce {
      0%, 100% { transform: scaleY(0.7); opacity: 0.5; }
      50% { transform: scaleY(1.18); opacity: 1; }
    }

    @keyframes barPulse {
      0%, 100% { transform: scaleY(0.55); opacity: 0.5; }
      50% { transform: scaleY(1.08); opacity: 1; }
    }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @media (min-width: 1101px) {
      #setupView:not([hidden]),
      #practiceView:not([hidden]) {
        width: 100vw;
        margin: -24px 0 -24px calc(50% - 50vw);
      }

      #setupView:not([hidden]) .workspace-shell,
      #practiceView:not([hidden]) .practice-shell {
        grid-template-columns: 280px minmax(0, 1fr);
        gap: 32px;
      }

      #setupView:not([hidden]) .workspace-sidebar,
      #practiceView:not([hidden]) .workspace-sidebar {
        top: 0;
        height: 100vh;
        min-height: 100vh;
        padding: 28px 18px;
        border-radius: 0;
        box-shadow: 12px 0 36px rgba(7, 23, 63, 0.2);
      }

      body.view-as-active #setupView:not([hidden]) .workspace-sidebar,
      body.view-as-active #practiceView:not([hidden]) .workspace-sidebar {
        top: var(--view-as-banner-height, 0px);
        height: calc(100dvh - var(--view-as-banner-height, 0px));
        min-height: 0;
      }

      #setupView:not([hidden]) .workspace-main,
      #practiceView:not([hidden]) .practice-page-main {
        padding: 24px 24px 40px 0;
      }
    }

    @media (max-width: 1100px) {
      .auth-layout,
      .setup-layout,
      .practice-layout,
      .feedback-loading-shell,
      .feedback-report-shell {
        grid-template-columns: 1fr;
      }

      .workspace-shell,
      .practice-shell,
      .practice-hero-card {
        grid-template-columns: 1fr;
      }

      .workspace-sidebar {
        position: relative;
        top: 0;
        min-height: auto;
      }

      .team-chat-workspace-card {
        height: calc(100dvh - 190px);
        min-height: 520px;
        border-radius: 20px;
      }

      #setupView .workspace-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 180;
        width: min(86vw, 360px);
        height: 100svh;
        min-height: 100svh;
        padding: max(22px, env(safe-area-inset-top)) 18px calc(104px + env(safe-area-inset-bottom, 0px));
        border-radius: 0 30px 30px 0;
        transform: translateX(calc(-100% - 28px));
        visibility: hidden;
        transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), visibility 240ms;
        box-shadow: 20px 0 60px rgba(7, 23, 63, 0.35);
        overflow: hidden;
        overscroll-behavior: contain;
      }

      #setupView .workspace-sidebar .workspace-profile-menu {
        flex: 0 0 auto;
      }

      body.view-as-active #setupView .workspace-sidebar {
        top: var(--view-as-banner-height, 0px);
        height: calc(100svh - var(--view-as-banner-height, 0px));
        min-height: 0;
      }

      #setupView .workspace-sidebar.mobile-open {
        transform: translateX(0);
        visibility: visible;
      }

      .workspace-mobile-topbar {
        position: sticky;
        top: 12px;
        z-index: 120;
        min-height: 64px;
        padding: 9px 10px 9px 14px;
        border: 1px solid rgba(209, 222, 244, 0.92);
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.9);
        box-shadow: 0 16px 40px rgba(24, 58, 130, 0.12);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
      }

      .workspace-mobile-brand {
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 10px;
        color: #14284e;
      }

      .workspace-mobile-brand img {
        width: 38px;
        height: 38px;
        object-fit: contain;
        filter: drop-shadow(0 8px 14px rgba(20, 40, 78, 0.16));
      }

      .workspace-mobile-brand-copy {
        min-width: 0;
        display: flex;
        flex-direction: column;
        line-height: 1.1;
      }

      .workspace-mobile-brand-copy strong {
        font-size: 13px;
        letter-spacing: 0.05em;
        text-transform: uppercase;
      }

      .workspace-mobile-brand-copy span {
        margin-top: 3px;
        color: #687aa1;
        font-size: 11px;
      }

      .workspace-mobile-menu-toggle,
      .workspace-mobile-menu-close {
        width: 44px;
        height: 44px;
        min-width: 44px;
        padding: 0;
        border-radius: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }

      .workspace-mobile-menu-toggle {
        border: 0;
        background: linear-gradient(135deg, #3157d8, #2b79ff);
        color: white;
        box-shadow: 0 10px 22px rgba(43, 99, 226, 0.28);
      }

      .workspace-mobile-menu-toggle:hover,
      .workspace-mobile-menu-close:hover {
        transform: none;
      }

      .workspace-mobile-menu-toggle svg,
      .workspace-mobile-menu-close svg {
        width: 22px;
        height: 22px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
      }

      .workspace-mobile-menu-close {
        margin-left: auto;
        border: 1px solid rgba(255, 255, 255, 0.14);
        background: rgba(255, 255, 255, 0.1);
        color: white;
        box-shadow: none;
      }

      .workspace-mobile-backdrop {
        position: fixed;
        inset: 0;
        z-index: 170;
        width: 100%;
        height: 100%;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: rgba(7, 20, 52, 0.48);
        opacity: 0;
        visibility: hidden;
        display: block;
        cursor: default;
        transition: opacity 200ms ease, visibility 200ms;
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
      }

      .workspace-mobile-backdrop.mobile-open {
        opacity: 1;
        visibility: visible;
      }

      body.workspace-mobile-menu-open {
        overflow: hidden;
      }

      body.workspace-mobile-menu-open .admin-online-widget,
      body.workspace-mobile-menu-open .support-widget {
        visibility: hidden;
        pointer-events: none;
      }

      .workspace-logo {
        padding-right: 0;
      }

      .leaderboard-card {
        gap: 20px;
        padding: 24px;
      }

      .leaderboard-head,
      .leaderboard-controls {
        width: 100%;
      }

      .leaderboard-controls {
        justify-content: flex-start;
      }

      .leaderboard-podium-grid {
        grid-template-columns: 1fr;
        gap: 14px;
      }

      .leaderboard-podium {
        grid-template-columns: minmax(210px, 0.72fr) minmax(0, 1.28fr);
        grid-template-rows: auto 1fr;
        gap: 14px 18px;
        padding: 20px;
      }

      .leaderboard-podium-header {
        grid-column: 1 / -1;
      }

      .leaderboard-podium-featured {
        grid-column: 1;
        grid-row: 2;
        min-height: 148px;
        align-content: center;
      }

      .leaderboard-podium-list {
        grid-column: 2;
        grid-row: 2;
        align-content: stretch;
      }

      .leaderboard-podium-row {
        min-height: 66px;
      }

      .calendar-card {
        --calendar-surface-height: 660px;
        --calendar-hour-height: 42px;
        min-width: 0;
        padding: 22px;
        gap: 16px;
        scroll-margin-top: 92px;
      }

      .calendar-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: center;
        gap: 14px;
      }

      .calendar-controls {
        width: 100%;
        justify-content: flex-start;
        gap: 8px;
      }

      .calendar-view-toggle {
        margin-left: auto;
      }

      .calendar-grid {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-color: #b9c9ea transparent;
        scrollbar-width: thin;
      }

      .calendar-grid.week-view {
        grid-template-columns: 56px repeat(7, minmax(148px, 1fr));
      }

      .calendar-grid.week-view .calendar-day-name,
      .week-day-column {
        min-width: 148px;
      }

      .calendar-grid.day-view {
        grid-template-columns: 56px minmax(420px, 1fr);
      }

      .calendar-grid.day-view .calendar-day-name,
      .calendar-grid.day-view .week-day-column {
        min-width: 420px;
      }

      .calendar-grid:not(.day-view):not(.week-view) {
        grid-template-columns: repeat(7, minmax(112px, 1fr));
      }

      .week-time-corner,
      .week-time-axis {
        position: sticky;
        left: 0;
      }

      .week-time-corner {
        z-index: 8;
      }

      .week-time-axis {
        z-index: 7;
      }

      .suggested-slots-top {
        margin-bottom: 4px;
        padding: 14px;
      }

      .suggested-slots-grid,
      .suggested-slots-grid.day-view {
        grid-template-columns: repeat(7, minmax(166px, 1fr));
        gap: 8px;
        padding: 2px 0 6px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: x proximity;
        scrollbar-color: #b9c9ea transparent;
        scrollbar-width: thin;
      }

      .suggested-slots-grid.day-view {
        grid-template-columns: minmax(220px, 1fr);
      }

      .suggested-slots-grid::before {
        display: none;
      }

      .suggested-slot-day {
        margin: 0;
        scroll-snap-align: start;
      }

      .practice-stage-card .call-board {
        grid-template-columns: 1fr;
      }

      .history-dashboard-head {
        flex-direction: column;
      }

      .history-dashboard-card {
        padding-right: 22px;
      }

      .history-summary-card {
        position: static;
      }

      .settings-shell {
        grid-template-columns: 1fr;
      }

      .builder-app-column {
        position: static;
      }

      .settings-summary-rail {
        grid-column: auto;
      }

      .setup-options-grid {
        grid-template-columns: 1fr;
      }

      .dashboard-health-grid,
      .dashboard-agent-lists,
      .dashboard-split {
        grid-template-columns: 1fr;
      }

      .brand-panel {
        min-height: auto;
        position: relative;
        top: 0;
      }

      .auth-layout {
        gap: 24px;
        padding: 0;
        background-position: center;
        min-height: 100vh;
      }

      .auth-login-card {
        max-width: min(560px, calc(100vw - 48px));
        justify-self: center;
        order: 1;
      }

      .auth-brand {
        order: 2;
        min-height: auto;
        align-items: flex-start;
        padding-top: 220px;
        padding-right: 0;
        padding-left: 0;
      }

      .auth-brand-copy,
      .auth-brand-card {
        padding-left: 24px;
        padding-right: 24px;
      }

      .auth-brand-title {
        max-width: 680px;
        font-size: clamp(44px, 7vw, 64px);
        line-height: 0.97;
      }

      .auth-brand-subtitle {
        max-width: 620px;
        font-size: 16px;
      }

      .auth-tagline {
        top: 96px;
        right: 28px;
        font-size: 16px;
      }

      .feedback-report-aside {
        position: static;
      }
    }

    @media (max-width: 1100px) and (prefers-reduced-motion: reduce) {
      .workspace-sidebar,
      .workspace-mobile-backdrop {
        transition: none;
      }
    }

    @media (max-width: 760px) {
      #authView {
        width: auto;
        margin-left: 0;
        margin-top: -16px;
        margin-bottom: -16px;
        min-height: 100svh;
      }

      .app-shell {
        padding: 16px;
      }

      #authView.app-shell,
      #authView .app-shell {
        padding: 0;
      }

      .auth-layout {
        min-height: 100svh;
        padding: max(18px, env(safe-area-inset-top)) 18px max(22px, env(safe-area-inset-bottom));
        border-radius: 0;
        align-content: start;
        gap: 16px;
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(16, 52, 100, 0.12) 38%, rgba(14, 47, 91, 0.58) 100%),
          linear-gradient(135deg, rgba(53, 215, 173, 0.55) 0%, rgba(60, 156, 214, 0.46) 42%, rgba(35, 84, 153, 0.74) 100%),
          url("/static/assets/amess-login-bg-mobile.webp?v=1") center center / cover no-repeat;
      }

      .auth-login-card {
        width: min(100%, 390px);
        max-width: none;
        margin: 0 auto;
        padding: 26px 22px 22px;
        border-radius: 26px;
        order: 2;
        box-shadow: 0 22px 46px rgba(12, 41, 88, 0.2);
      }

      .auth-login-brand {
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 20px;
      }

      .auth-login-brand img {
        width: 112px;
      }

      .auth-login-kicker {
        font-size: 10px;
        letter-spacing: 0.16em;
      }

      .auth-login-card h2 {
        font-size: 30px;
        line-height: 1.04;
        margin-bottom: 8px;
      }

      .auth-stage {
        min-height: 0;
        margin-top: 14px;
      }

      .auth-stage-panel.active {
        position: relative;
        inset: auto;
      }

      .auth-stage-panel.hidden {
        position: absolute;
        inset: 0;
      }

      .auth-actions {
        gap: 12px;
        margin-top: 16px;
      }

      .auth-actions .primary-button {
        min-height: 54px;
        margin-top: 8px;
        border-radius: 16px;
      }

      .auth-status {
        min-height: 18px;
        font-size: 13px;
      }

      .auth-secondary-link {
        align-self: center;
        min-height: 32px;
        padding: 4px 0;
        font-size: 13px;
      }

      .auth-reset-panel {
        padding: 16px;
        border-radius: 20px;
      }

      .auth-inline-actions {
        gap: 10px;
      }

      .auth-inline-actions .secondary-button,
      .auth-inline-actions .primary-button {
        width: 100%;
        min-width: 0;
      }

      .auth-login-card .field-label {
        font-size: 11px;
        letter-spacing: 0.07em;
      }

      .auth-login-card input {
        min-height: 54px;
        border-radius: 15px;
      }

      .password-visibility-toggle {
        right: 10px;
      }

      .auth-brand {
        order: 1;
        width: min(100%, 390px);
        min-height: auto;
        align-items: flex-start;
        margin: 0 auto;
        padding: 8px 2px 0;
      }

      .auth-brand-title {
        max-width: 320px;
        font-size: clamp(31px, 10vw, 43px);
        line-height: 0.98;
        margin: 0 0 10px;
      }

      .auth-brand-copy,
      .auth-brand-card {
        padding-left: 0;
        padding-right: 0;
      }

      .auth-brand-subtitle {
        max-width: 300px;
        font-size: 13px;
        line-height: 1.45;
      }

      .auth-brand-ecosystem,
      .auth-brand-card {
        display: none;
      }

      .auth-tagline {
        display: none;
      }


      .workspace-shell {
        gap: 18px;
      }

      .practice-shell {
        gap: 18px;
      }

      .workspace-sidebar,
      .workspace-card {
        border-radius: 24px;
      }

      #setupView .workspace-sidebar {
        border-radius: 0 26px 26px 0;
      }

      .workspace-header {
        align-items: center;
      }

      .workspace-header-title {
        font-size: 32px;
        letter-spacing: -0.03em;
      }

      .workspace-dashboard-btn,
      .workspace-primary-btn {
        width: 100%;
      }

      .practice-hero-cta {
        flex-direction: column;
        align-items: stretch;
      }

      .practice-hero-cta .workspace-primary-btn {
        order: 1;
      }

      .practice-hero-cta .roleplay-quota-status {
        order: 2;
        align-self: flex-end;
      }

      .practice-hero-visual {
        min-height: 160px;
      }

      .practice-hero-preview-frame {
        left: 14px;
        top: 14px;
        width: 56%;
        max-width: 190px;
        height: 104px;
      }

      .practice-visual-card {
        left: 148px;
        top: 22px;
      }

      .practice-visual-audio {
        left: 152px;
        bottom: 22px;
      }

      .practice-visual-orb {
        right: 24px;
        top: 56px;
        width: 72px;
        height: 72px;
      }

      .workspace-nav-button {
        padding: 12px 13px;
      }

      .practice-page-topbar,
      .practice-page-status {
        flex-direction: column;
        align-items: stretch;
      }

      .practice-control-card,
      .practice-control-card.primary {
        width: 100%;
        min-width: 0;
      }

      .settings-workspace .modal-card {
        padding: 18px;
      }

      .builder-overview {
        position: static;
      }

      .form-grid,
      .report-grid,
      .call-board,
      .pronunciation-grid,
      .analytics-columns,
      .settings-grid,
      .settings-shell,
      .builder-grid,
      .builder-workspace,
      .builder-editor-grid,
      .resource-library,
      .catalog-card-grid,
      .builder-library-grid,
      .builder-library-grid.personas,
      .playbook-grid,
      .check-grid,
      .detail-grid,
      .history-summary-row,
      .history-score-grid,
      .history-columns {
        grid-template-columns: 1fr;
      }

      .history-item {
        grid-template-columns: 1fr;
      }

      .modal-head,
      .modal-head-actions {
        flex-direction: column;
        align-items: stretch;
      }

      .saved-session-item,
      .topbar,
      .call-stage-header,
      .screen-footer {
        flex-direction: column;
        align-items: stretch;
      }

      .feedback-loading-main,
      .feedback-loading-side {
        padding: 20px;
        border-radius: 24px;
      }

      .transcript-side-card textarea {
        min-height: 360px;
      }

      .feedback-loading-stage h2 {
        font-size: 30px;
      }

      .feedback-side-title {
        font-size: 20px;
      }

      .call-controls {
        gap: 10px;
      }

      .dashboard-bar-row {
        grid-template-columns: 1fr;
      }

      .calendar-card {
        --calendar-surface-height: 620px;
        --calendar-header-row-height: 68px;
        --calendar-hour-height: 39px;
        padding: 14px;
        border-radius: 22px;
      }

      .calendar-controls {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
      }

      .calendar-period-nav {
        grid-column: 1;
        justify-self: start;
      }

      .calendar-today-btn {
        height: 34px;
        padding-inline: 12px;
      }

      .calendar-agent-menu {
        grid-column: 2;
        justify-self: end;
      }

      .calendar-view-toggle {
        width: 100%;
        margin-left: 0;
      }

      .calendar-view-btn {
        flex: 1;
      }

      .calendar-agent-panel {
        position: fixed;
        top: auto;
        right: 16px;
        bottom: max(16px, env(safe-area-inset-bottom));
        left: 16px;
        width: auto;
        min-width: 0;
        z-index: 190;
      }

      .suggested-slots-head {
        align-items: flex-start;
        gap: 10px;
      }

      .suggested-slots-head h3 {
        font-size: 19px;
      }

      .suggested-slots-range {
        min-width: 0;
        white-space: normal;
        font-size: 10px;
      }

      .suggested-slots-grid,
      .suggested-slots-grid.day-view {
        grid-template-columns: repeat(7, minmax(174px, 72vw));
      }

      .suggested-slots-grid.day-view {
        grid-template-columns: minmax(220px, 1fr);
      }

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

      .calendar-details-toolbar {
        align-items: stretch;
        justify-content: flex-start;
        gap: 10px;
        padding: 4px 0 0;
      }

      .calendar-details-period-label {
        width: 100%;
        padding-inline: 2px;
        color: #202124;
        font-size: 18px;
        font-weight: 700;
      }

      .calendar-details-toolbar .calendar-view-toggle {
        display: flex;
        flex: 1 1 auto;
        flex-direction: row;
        flex-wrap: nowrap;
        width: 100%;
        margin-left: 0;
        padding: 2px;
        border: 1px solid #dadce0;
        border-radius: 10px;
        background: #fff;
      }

      .calendar-details-toolbar .calendar-view-btn {
        flex: 1 1 0;
        min-width: 0;
        height: 36px;
        padding-inline: 4px;
        border-radius: 8px;
        color: #5f6368;
        font-size: 12px;
        font-weight: 700;
      }

      .calendar-details-toolbar .calendar-view-btn:hover {
        background: #f1f3f4;
        color: #202124;
        box-shadow: none;
      }

      .calendar-details-toolbar .calendar-view-btn.active {
        background: #e8f0fe;
        color: #1967d2;
        box-shadow: none;
      }

      .calendar-grid {
        border-color: #dadce0;
        border-radius: 8px;
        background: #fff;
      }

      .calendar-grid.week-view {
        grid-template-columns: 36px repeat(7, minmax(0, 1fr));
        overflow-x: hidden;
      }

      .calendar-grid.week-view .calendar-day-name,
      .calendar-grid.week-view .week-day-column {
        min-width: 0;
      }

      .calendar-grid.week-view.three-day-view {
        grid-template-columns: 44px repeat(3, minmax(0, 1fr));
        overflow-x: hidden;
      }

      .calendar-grid.week-view.three-day-view .calendar-day-name,
      .calendar-grid.week-view.three-day-view .week-day-column {
        min-width: 0;
      }

      .calendar-grid.day-view {
        grid-template-columns: 44px minmax(calc(100vw - 92px), 1fr);
      }

      .calendar-grid.day-view .calendar-day-name,
      .calendar-grid.day-view .week-day-column {
        min-width: calc(100vw - 92px);
      }

      .calendar-grid:not(.day-view):not(.week-view) {
        grid-template-columns: repeat(7, minmax(0, 1fr));
        overflow-x: hidden;
      }

      .calendar-day-name,
      .week-time-corner {
        background: #fff;
      }

      .calendar-grid.week-view .calendar-day-name {
        min-height: 62px;
        padding: 7px 3px;
      }

      .week-header-stack,
      .day-header-stack {
        gap: 4px;
      }

      .week-header-weekday,
      .day-header-name {
        color: #5f6368;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.04em;
      }

      .week-header-date,
      .day-header-date {
        width: 30px;
        min-width: 30px;
        height: 30px;
        color: #3c4043;
        font-size: 18px;
        font-weight: 500;
        letter-spacing: 0;
      }

      .calendar-day-name.is-today .week-header-date,
      .calendar-day-name.is-today .day-header-date {
        border-radius: 50%;
        background: #1a73e8;
        color: #fff;
      }

      .calendar-day-name.is-today .week-header-date::after,
      .calendar-day-name.is-today .day-header-date::after {
        display: none;
      }

      .week-day-column,
      .week-day-column.is-today {
        background-color: #fff;
        background-image: repeating-linear-gradient(
          to bottom,
          #dadce0 0,
          #dadce0 1px,
          #fff 1px,
          #fff var(--calendar-hour-height)
        );
      }

      .week-time-axis {
        z-index: 9;
        background: #fff;
      }

      .week-day-column.is-today {
        box-shadow: inset 0 0 0 1px rgba(26, 115, 232, 0.12);
      }

      .week-time-label {
        right: 5px;
        color: #70757a;
        font-size: 9px;
        font-weight: 500;
      }

      .calendar-grid.week-view:not(.three-day-view) .calendar-day-name {
        padding-inline: 1px;
      }

      .calendar-grid.week-view:not(.three-day-view) .week-header-weekday {
        font-size: 8px;
        letter-spacing: 0;
      }

      .calendar-grid.week-view:not(.three-day-view) .week-header-date {
        width: 25px;
        min-width: 25px;
        height: 25px;
        font-size: 14px;
      }

      .calendar-grid.week-view:not(.three-day-view) .week-time-label {
        right: 2px;
        font-size: 7px;
      }

      .calendar-grid.week-view:not(.three-day-view) .week-event {
        left: var(--event-left, 1px);
        right: var(--event-right, 1px);
        min-height: 20px;
        padding: 2px 1px;
        border-left-width: 2px;
        border-radius: 3px;
        box-shadow: none;
      }

      .calendar-grid.week-view:not(.three-day-view) .week-event-time,
      .calendar-grid.week-view:not(.three-day-view) .week-event-title {
        font-size: 7px;
        line-height: 1.1;
        letter-spacing: 0;
      }

      .calendar-grid.week-view:not(.three-day-view) .week-event-agent,
      .calendar-grid.week-view:not(.three-day-view) .week-event-address,
      .calendar-grid.week-view:not(.three-day-view) .calendar-member-status-label,
      .calendar-grid.week-view:not(.three-day-view) .calendar-history-label,
      .calendar-grid.week-view:not(.three-day-view) .calendar-visit-label,
      .calendar-grid.week-view:not(.three-day-view) .calendar-audit-clock {
        display: none;
      }

      .calendar-grid.week-view.three-day-view .week-event {
        left: var(--event-left, 3px);
        right: var(--event-right, 3px);
        padding: 4px;
        border-left-width: 3px;
        border-radius: 5px;
        box-shadow: none;
      }

      .calendar-grid.week-view.three-day-view .week-event-title {
        font-size: 9px;
      }

      .calendar-grid.week-view.three-day-view .week-event-agent,
      .calendar-grid.week-view.three-day-view .week-event-address {
        display: none;
      }

      .calendar-grid:not(.day-view):not(.week-view) .calendar-day-name {
        padding: 8px 2px;
        font-size: 9px;
        letter-spacing: 0.04em;
        text-align: center;
      }

      .calendar-grid:not(.day-view):not(.week-view) .calendar-cell {
        min-width: 0;
        padding: 4px 3px;
        background: #fff;
        box-shadow: none;
      }

      .calendar-grid:not(.day-view):not(.week-view) .calendar-date-label {
        justify-content: center;
        font-size: 11px;
      }

      .calendar-grid:not(.day-view):not(.week-view) .calendar-cell.is-today .calendar-date-label span {
        display: inline-flex;
        width: 24px;
        height: 24px;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: #1a73e8;
        color: #fff;
      }

      .calendar-grid:not(.day-view):not(.week-view) .calendar-events {
        gap: 3px;
        margin-top: 4px;
      }

      .calendar-grid:not(.day-view):not(.week-view) .calendar-event {
        min-width: 0;
        padding: 3px;
        border-left-width: 2px;
        border-radius: 4px;
        box-shadow: none;
      }

      .calendar-grid:not(.day-view):not(.week-view) .calendar-event-time {
        display: none;
      }

      .calendar-grid:not(.day-view):not(.week-view) .calendar-event-name {
        overflow: hidden;
        font-size: 8px;
        line-height: 1.15;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .leaderboard-card {
        padding: 16px;
        border-radius: 24px;
      }

      .leaderboard-head {
        align-items: stretch;
      }

      .leaderboard-controls {
        width: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
      }

      .leaderboard-filter-group,
      .leaderboard-filter-input {
        width: 100%;
      }

      .leaderboard-filter-button {
        width: auto;
        min-height: 46px;
      }

      .leaderboard-total {
        min-height: 96px;
      }

      .leaderboard-podium-grid {
        grid-template-columns: 1fr;
      }

      .leaderboard-podium {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        padding: 16px;
      }

      .leaderboard-podium-header,
      .leaderboard-podium-featured,
      .leaderboard-podium-list {
        grid-column: 1;
        grid-row: auto;
      }

      .leaderboard-podium-featured {
        min-height: 126px;
      }

      .leaderboard-podium-title {
        font-size: 19px;
      }

      .leaderboard-podium-row {
        grid-template-columns: 46px 42px minmax(0, 1fr);
        gap: 10px;
      }

      .leaderboard-podium-row.is-empty {
        grid-template-columns: 46px minmax(0, 1fr);
      }

      .leaderboard-podium-place {
        width: 46px;
        height: 46px;
      }

      .leaderboard-podium-avatar {
        width: 42px;
        height: 42px;
        font-size: 12px;
      }

      .leaderboard-podium-avatar.is-featured {
        width: 68px;
        height: 68px;
        font-size: 18px;
      }

      .leaderboard-podium-value {
        grid-column: 1 / -1;
        padding-left: 58px;
        font-size: 20px;
      }

      .leaderboard-row {
        grid-template-columns: 42px 38px minmax(0, 1fr);
        gap: 10px;
        padding: 10px;
      }

      .leaderboard-rank {
        width: 40px;
        height: 40px;
        font-size: 15px;
      }

      .leaderboard-avatar {
        width: 34px;
        height: 34px;
        font-size: 11px;
      }

      .leaderboard-name {
        font-size: 15px;
      }

      .leaderboard-metrics {
        grid-template-columns: 1fr 1fr;
      }

      .control-group {
        min-width: 72px;
      }

      .icon-button {
        width: 48px;
        height: 48px;
      }
    }

    /* Seguimientos dashboard */
    #setupFollowupsCard {
      position: relative;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      overflow: visible;
    }

    .followups-metrics {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
      margin-bottom: 24px;
    }

    .followups-metric {
      display: grid;
      grid-template-columns: 56px minmax(0, 1fr);
      gap: 0 15px;
      min-height: 154px;
      padding: 25px 24px 21px;
      border: 1px solid #dce4f1;
      border-radius: 13px;
      background: rgba(255, 255, 255, 0.96);
      box-shadow: 0 8px 22px rgba(24, 42, 78, 0.06);
    }

    .followups-metric-icon {
      width: 56px;
      height: 56px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 13px;
      background: #eef4ff;
      color: #1769e8;
    }

    .followups-metric-icon svg {
      width: 30px;
      height: 30px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .followups-metric-copy {
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 6px;
    }

    .followups-metric-copy span {
      color: #35568d;
      font-size: 14px;
      font-weight: 700;
      white-space: nowrap;
    }

    .followups-metric-copy strong {
      color: #1265e9;
      font-size: 34px;
      line-height: 1;
      font-weight: 850;
      letter-spacing: -0.04em;
    }

    .followups-metric-note {
      grid-column: 1 / -1;
      align-self: end;
      margin-top: 18px;
      color: #36588e;
      font-size: 13px;
      font-weight: 700;
    }

    .followups-metric.is-overdue .followups-metric-icon {
      background: #ffe9e9;
      color: #f0242f;
    }

    .followups-metric.is-overdue .followups-metric-copy strong,
    .followups-metric.is-overdue .followups-metric-note {
      color: #ef202c;
    }

    .followups-metric.is-completed .followups-metric-icon {
      background: #e2f7e9;
      color: #0bab5c;
    }

    .followups-metric.is-completed .followups-metric-copy strong,
    .followups-metric.is-completed .followups-metric-note {
      color: #09a954;
    }

    .followups-adoption-note {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: -8px 0 24px;
      padding: 12px 15px;
      border: 1px solid #cfe0ff;
      border-radius: 12px;
      background: #f4f8ff;
      color: #315684;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.45;
    }

    .followups-adoption-note-icon {
      width: 28px;
      height: 28px;
      display: inline-grid;
      place-items: center;
      flex: 0 0 28px;
      border-radius: 9px;
      background: #e1ecff;
      color: #1769e8;
      font-size: 15px;
    }

    #setupFollowupsCard .followups-shell,
    #setupFollowupsCard .followups-main-stack {
      gap: 0;
    }

    .followups-tabs {
      display: flex;
      align-items: flex-end;
      gap: 8px;
      min-height: 54px;
      padding: 0 4px;
      border-bottom: 1px solid #dce4f1;
    }

    .followups-tabs-row {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
      padding-right: 12px;
      border-bottom: 1px solid #dce4f1;
    }

    .followups-tabs-row .followups-tabs {
      flex: 1 1 auto;
      min-width: 0;
      border-bottom: 0;
    }

    .followups-tabs-row .followups-add-btn {
      flex: 0 0 auto;
      width: 44px;
      height: 44px;
      border-radius: 13px;
    }

    .followups-tab {
      position: relative;
      min-width: 132px;
      min-height: 54px;
      padding: 0 20px;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: #315181;
      font-size: 14px;
      font-weight: 750;
      box-shadow: none;
      cursor: grab;
      transition: color 140ms ease, opacity 140ms ease, background 140ms ease;
    }

    .followups-tab:active {
      cursor: grabbing;
    }

    .followups-tab.is-dragging {
      opacity: 0.38;
    }

    .followups-tab.is-drop-target {
      background: #f1f6ff;
    }

    .followups-tab:hover {
      transform: none;
      color: #0f5ed8;
    }

    .followups-tab.active {
      color: #f0202b;
    }

    .followups-tab.active::after {
      content: "";
      position: absolute;
      left: 10px;
      right: 10px;
      bottom: -1px;
      height: 2px;
      border-radius: 999px 999px 0 0;
      background: #f0202b;
    }

    .followups-tab-label {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .followups-tab-attention-badge {
      min-width: 22px;
      height: 22px;
      padding: 0 7px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(202, 138, 4, 0.26);
      border-radius: 999px;
      background: #facc15;
      color: #513700;
      font-size: 11px;
      font-weight: 900;
      line-height: 1;
      box-shadow: 0 5px 12px rgba(202, 138, 4, 0.2);
    }

    .followups-tab-attention-badge.is-due {
      background: #fbbf24;
      box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.18), 0 6px 14px rgba(202, 138, 4, 0.28);
      animation: followupsAttentionPulse 1.6s ease-in-out infinite;
    }

    @keyframes followupsAttentionPulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.14); }
    }

    @media (prefers-reduced-motion: reduce) {
      .workspace-nav-attention-dot.is-due,
      .followups-tab-attention-badge.is-due {
        animation: none;
      }
    }

    #setupFollowupsCard .followups-table-card {
      display: block;
      margin-top: 0;
      padding: 0;
      border: 1px solid #dce4f1;
      border-top: 0;
      border-radius: 0 0 13px 13px;
      background: rgba(255, 255, 255, 0.97);
      box-shadow: 0 10px 26px rgba(24, 42, 78, 0.06);
      overflow-x: auto;
    }

    .followups-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      min-width: 820px;
      padding: 22px 18px;
      border-bottom: 1px solid #e3e9f2;
    }

    .followups-search-box {
      position: relative;
      width: min(330px, 45vw);
      display: block;
    }

    .followups-search-box svg {
      position: absolute;
      left: 15px;
      top: 50%;
      z-index: 1;
      width: 19px;
      height: 19px;
      transform: translateY(-50%);
      fill: none;
      stroke: #496ba5;
      stroke-width: 2;
      stroke-linecap: round;
      pointer-events: none;
    }

    #setupFollowupsCard .followups-search-box .followups-input {
      min-height: 46px;
      padding: 0 16px 0 46px;
      border-color: #d7e0ed;
      border-radius: 9px;
      color: #17335f;
      font-size: 14px;
      box-shadow: none;
    }

    #setupFollowupsCard .followups-search-box .followups-input::placeholder {
      color: #7890b5;
    }

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

    .followups-resolve-all-btn {
      min-height: 46px;
      padding: 0 16px;
      border: 1px solid #b9dfc9;
      border-radius: 9px;
      background: #effaf3;
      color: #087a42;
      font-size: 13px;
      font-weight: 850;
      white-space: nowrap;
      cursor: pointer;
      transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
    }

    .followups-resolve-all-btn:hover,
    .followups-resolve-all-btn:focus-visible {
      border-color: #83cda3;
      background: #e2f6ea;
      transform: translateY(-1px);
    }

    .followups-resolve-all-btn:disabled {
      cursor: wait;
      opacity: 0.62;
      transform: none;
    }

    #setupFollowupsCard .followups-filter-trigger {
      width: auto;
      min-width: 116px;
      min-height: 46px;
      gap: 10px;
      padding: 0 16px;
      border-radius: 9px;
      color: #31558e;
      font-size: 14px;
      font-weight: 800;
    }

    #setupFollowupsCard .followups-filter-trigger > span {
      display: inline-flex;
    }

    #setupFollowupsCard .followups-main-head,
    #setupFollowupsCard .followup-row {
      grid-template-columns: minmax(225px, 1.15fr) minmax(220px, 1.1fr) minmax(190px, 0.95fr) minmax(180px, 0.9fr) 58px;
      gap: 18px;
      min-width: 980px;
    }

    #setupFollowupsCard .followups-main-head {
      min-height: 48px;
      margin: 0;
      padding: 0 24px;
      border-bottom: 1px solid #e3e9f2;
      color: #395987;
      font-size: 12px;
      font-weight: 850;
      letter-spacing: 0;
      text-transform: none;
      align-items: center;
    }

    #setupFollowupsCard .followups-main-head > * {
      min-height: auto;
      align-items: center;
    }

    #setupFollowupsCard .followup-row {
      min-height: 78px;
      padding: 16px 24px;
      align-items: center;
      border-bottom: 1px solid #e7edf5;
      background: #fff;
    }

    #setupFollowupsCard .followup-row:hover {
      background: #f9fbff;
    }

    #setupFollowupsCard .followup-row.is-tour-demo {
      border-color: rgba(77, 112, 224, 0.35);
      background: linear-gradient(90deg, rgba(239, 244, 255, 0.96), #ffffff 48%);
      box-shadow: inset 3px 0 0 #4d70e0;
    }

    .followups-tour-demo-badge {
      display: inline-flex;
      align-items: center;
      width: fit-content;
      margin-top: 3px;
      padding: 2px 7px;
      border-radius: 999px;
      background: #e7edff;
      color: #3157c9;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    #setupFollowupsCard .followup-row-cell {
      display: flex;
      align-items: center;
      gap: 8px;
      color: #18345e;
      font-size: 13px;
    }

    #setupFollowupsCard .followup-row .followup-client-avatar,
    #setupFollowupsCard .followup-row .followup-agent-avatar {
      display: none;
    }

    .followup-client-avatar,
    .followup-agent-avatar {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      border-radius: 999px;
      background: var(--avatar-bg, #e6efff);
      color: var(--avatar-color, #2563d9);
      font-weight: 850;
    }

    .followup-client-avatar {
      width: 42px;
      height: 42px;
      font-size: 13px;
    }

    .followup-agent-avatar {
      width: 30px;
      height: 30px;
      font-size: 11px;
    }

    .followup-row-stack {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    #setupFollowupsCard .followup-row-client {
      overflow: hidden;
      color: #142d57;
      font-size: 13px;
      font-weight: 850;
      line-height: 1.35;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    #setupFollowupsCard .followup-row-subtle {
      margin: 0;
      color: #69788f;
      font-size: 12px;
      line-height: 1.35;
    }

    .followup-assignment-warning {
      width: fit-content;
      max-width: 100%;
      padding: 3px 7px;
      border-radius: 999px;
      background: #fff3bf;
      color: #805c00;
      font-size: 10px;
      font-weight: 850;
      line-height: 1.25;
      white-space: normal;
    }

    .followup-identity-warning {
      width: fit-content;
      max-width: 100%;
      padding: 3px 7px;
      border: 1px solid #f3c276;
      border-radius: 999px;
      background: #fff5e6;
      color: #8a4b08;
      font-size: 10px;
      font-weight: 850;
      line-height: 1.25;
      white-space: normal;
    }

    .followup-reason-title,
    .followup-date-title {
      color: #193862;
      font-size: 13px;
      font-weight: 750;
      line-height: 1.35;
    }

    .followup-reason-heading {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-width: 0;
    }

    .followup-audio-indicator {
      width: 22px;
      height: 22px;
      flex: 0 0 22px;
      display: inline-grid;
      place-items: center;
      border-radius: 7px;
      background: #edf4ff;
      color: #1769e8;
    }

    .followup-audio-indicator svg {
      width: 13px;
      height: 13px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    #setupFollowupsCard .followup-row .followup-date-state {
      width: fit-content;
      margin-top: 2px;
      padding: 0;
      border-radius: 0;
      background: transparent;
      color: #69788f;
      font-size: 11px;
      font-weight: 800;
      line-height: 1.2;
    }

    #setupFollowupsCard .followup-row .followup-date-state.overdue {
      background: transparent;
      color: #a4434a;
    }

    #setupFollowupsCard .followup-row .followup-date-state.today {
      background: transparent;
      color: #526985;
    }

    #setupFollowupsCard .followup-row-menu-btn {
      width: 40px;
      height: 40px;
      border: 1px solid #d9e2ee;
      border-radius: 9px;
      background: #fff;
      color: #32578d;
      font-size: 20px;
    }

    #setupFollowupsCard .followup-row-menu-btn:hover {
      border-color: #bfcde2;
      background: #f7faff;
    }

    #setupFollowupsCard .followup-row-menu {
      z-index: 30;
    }

    #setupFollowupsCard .followup-row.is-editing .followup-inline-edit {
      grid-column: 1 / -1;
    }

    #setupFollowupsCard .followups-status,
    #setupFollowupsCard #followupsStatus:not(.hidden) {
      margin: 0;
      padding: 18px 24px;
    }

    .followups-pagination {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      min-width: 820px;
      min-height: 66px;
      padding: 12px 24px;
      color: #54719f;
      font-size: 12px;
      font-weight: 700;
    }

    .followups-pagination-controls,
    #followupsPaginationPages {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .followups-pagination-controls button,
    #followupsPaginationPages button {
      width: 36px;
      height: 36px;
      padding: 0;
      border: 1px solid #dce4ef;
      border-radius: 8px;
      background: #fff;
      color: #355990;
      font-size: 13px;
      font-weight: 800;
      box-shadow: none;
    }

    #followupsPaginationPages button {
      border-color: transparent;
    }

    #followupsPaginationPages button.active {
      border-color: #d9e6ff;
      background: #e9f1ff;
      color: #1769e8;
    }

    .followups-pagination-controls button:disabled {
      opacity: 0.38;
    }

    #setupFollowupsCard .followup-row-menu {
      width: 218px;
      min-width: 218px;
      padding: 8px;
      border: 1px solid #dce4ef;
      border-radius: 11px;
      background: #fff;
      box-shadow: 0 18px 44px rgba(22, 42, 78, 0.16);
    }

    #setupFollowupsCard .followup-row-menu.is-floating {
      position: fixed;
      right: auto;
      z-index: 150;
    }

    #setupFollowupsCard .followup-row-menu button {
      min-height: 39px;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 10px;
      color: #1d3966;
      font-size: 12px;
      font-weight: 750;
    }

    #setupFollowupsCard .followup-row-menu button svg {
      width: 18px;
      height: 18px;
      flex: 0 0 18px;
      fill: none;
      stroke: #28599d;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    #setupFollowupsCard .followup-row-menu button:hover {
      background: #f3f7ff;
      color: #105ecf;
    }

    #setupFollowupsCard .followup-row-menu button.danger svg {
      stroke: #c83d46;
    }

    .followup-row-menu-divider {
      height: 1px;
      margin: 5px 4px;
      background: #e8edf5;
    }

    #setupFollowupsCard .followups-detail-backdrop {
      background: rgba(17, 35, 69, 0.1);
      backdrop-filter: blur(1px);
    }

    #setupFollowupsCard .followups-detail-panel {
      inset: 0 0 0 auto;
      top: 0;
      right: 0;
      width: min(410px, 100vw);
      height: 100vh;
      max-height: 100vh;
      padding: 0;
      gap: 0;
      border: 0;
      border-left: 1px solid #dfe7f2;
      border-radius: 0;
      background: #fff;
      box-shadow: -20px 0 50px rgba(19, 39, 75, 0.14);
      transform: none;
      overflow-y: auto;
    }

    #setupFollowupsCard .followups-detail-head {
      min-height: 126px;
      padding: 28px 18px 22px 24px;
      align-items: center;
      border-bottom: 1px solid #e7edf5;
    }

    .followups-detail-identity {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 14px;
    }

    #setupFollowupsCard .followups-detail-identity .followup-client-avatar {
      width: 52px;
      height: 52px;
      font-size: 14px;
    }

    #setupFollowupsCard .followups-detail-title {
      margin: 0;
      overflow: hidden;
      color: #102c58;
      font-size: 16px;
      line-height: 1.35;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .followups-detail-phone {
      margin-top: 5px;
      color: #5073aa;
      font-size: 13px;
      font-weight: 650;
    }

    #setupFollowupsCard .followups-detail-head-actions {
      align-self: flex-start;
    }

    #setupFollowupsCard .followups-detail-close {
      width: 38px;
      height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      border: 1px solid #dce5f1;
      border-radius: 9px;
      background: #fff;
      color: #1769e8;
      border-color: transparent;
      font-size: 25px;
      font-weight: 400;
    }

    #setupFollowupsCard .followups-detail-grid {
      padding: 20px 24px 28px;
    }

    #setupFollowupsCard .followups-detail-item {
      padding: 0;
      border: 0;
    }

    .followups-detail-section-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 18px;
    }

    .followups-detail-tabs {
      display: flex;
      align-items: center;
      gap: 22px;
    }

    .followups-detail-tab {
      position: relative;
      min-height: 36px;
      padding: 0 1px;
      border: 0;
      background: transparent;
      color: #7185a7;
      font-size: 14px;
      font-weight: 750;
    }

    .followups-detail-tab::after {
      content: "";
      position: absolute;
      right: 0;
      bottom: -1px;
      left: 0;
      height: 2px;
      border-radius: 999px;
      background: transparent;
    }

    .followups-detail-tab:hover,
    .followups-detail-tab.is-active {
      color: #102c58;
    }

    .followups-detail-tab.is-active::after {
      background: #1769e8;
    }

    .followups-detail-note-btn {
      min-height: 34px;
      padding: 0 10px;
      border: 1px solid #dbe5f2;
      border-radius: 8px;
      background: #fff;
      color: #1769e8;
      font-size: 11px;
      font-weight: 800;
    }

    #setupFollowupsCard .followups-detail-quick {
      margin-bottom: 20px;
      padding: 14px;
      border-radius: 10px;
    }

    #setupFollowupsCard .followups-detail-history {
      max-height: none;
      gap: 0;
      overflow: visible;
      padding: 0;
    }

    .followups-timeline {
      position: relative;
      display: flex;
      flex-direction: column;
    }

    .followups-timeline-event {
      position: relative;
      display: grid;
      grid-template-columns: 30px minmax(0, 1fr);
      gap: 12px;
      min-height: 92px;
      padding-bottom: 18px;
    }

    .followups-timeline-event:not(:last-child)::after {
      content: "";
      position: absolute;
      left: 14px;
      top: 31px;
      bottom: 0;
      width: 2px;
      background: #dde7f4;
    }

    .followups-timeline-icon {
      position: relative;
      z-index: 1;
      width: 30px;
      height: 30px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      background: #fff;
      color: #1769e8;
    }

    .followups-timeline-icon svg,
    .followups-detail-summary-title svg {
      width: 22px;
      height: 22px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .followups-timeline-event.is-overdue .followups-timeline-icon {
      color: #f0242f;
    }

    .followups-timeline-event.is-completed .followups-timeline-icon,
    .followups-timeline-event.is-call .followups-timeline-icon {
      color: #0eae5b;
    }

    .followups-timeline-event.is-rescheduled .followups-timeline-icon,
    .followups-timeline-event.is-reassigned .followups-timeline-icon {
      color: #8b2be2;
    }

    .followups-timeline-copy {
      min-width: 0;
    }

    .followups-timeline-time {
      margin-bottom: 7px;
      color: #4f72a7;
      font-size: 12px;
      font-weight: 700;
    }

    .followups-timeline-copy strong {
      display: block;
      color: #132e59;
      font-size: 13px;
      font-weight: 850;
    }

    .followups-timeline-copy p {
      margin: 6px 0 0;
      color: #45679c;
      font-size: 12px;
      line-height: 1.45;
    }

    .followups-timeline-copy > span {
      display: block;
      margin-top: 5px;
      color: #8a9ab5;
      font-size: 10px;
      font-weight: 700;
    }

    .followups-timeline-event.is-note_added .followups-timeline-copy p {
      margin-top: 6px;
      color: #45679c;
      font-size: 12px;
      font-weight: 600;
      line-height: 1.45;
    }

    .followups-timeline-event.is-note_added .followups-timeline-copy > span {
      margin-top: 7px;
      color: #778aa9;
      font-size: 10px;
      font-weight: 650;
    }

    .followups-timeline-date-change {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 7px;
      margin-top: 7px;
    }

    .followups-timeline-date-change > div {
      min-width: 0;
      padding: 8px 9px;
      border-radius: 9px;
      background: #f4f7fc;
    }

    .followups-timeline-date-change span,
    .followups-timeline-date-change strong {
      display: block;
    }

    .followups-timeline-date-change span {
      color: #7a8cab;
      font-size: 9px;
      font-weight: 850;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .followups-timeline-date-change strong {
      margin-top: 3px;
      color: #2c4d7d;
      font-size: 11px;
      line-height: 1.35;
    }

    .followups-timeline-audio {
      width: fit-content;
      max-width: 100%;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      margin-top: 9px;
      padding: 7px 10px;
      border-radius: 9px;
      background: #eef5ff;
      color: #1769e8;
      font-size: 11px;
      font-weight: 850;
      text-decoration: none;
    }

    .followups-timeline-audio:hover {
      background: #e1edff;
    }

    .followups-timeline-audio svg {
      width: 15px;
      height: 15px;
      flex: 0 0 auto;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

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

    }

    @media (max-width: 780px) {
      .followups-metrics {
        grid-template-columns: 1fr;
        gap: 12px;
      }

      .followups-metric {
        min-height: 128px;
        padding: 20px;
      }

      .followups-tabs {
        overflow-x: auto;
      }

      .followups-tab {
        min-width: 112px;
      }

      #setupFollowupsCard .followups-main-head,
      #setupFollowupsCard .followup-row {
        grid-template-columns: minmax(225px, 1.15fr) minmax(220px, 1.1fr) minmax(190px, 0.95fr) minmax(180px, 0.9fr) 58px;
      }

      #setupFollowupsCard .followup-row.is-tour-demo {
        position: relative;
        grid-template-columns: 1fr;
        min-width: 0;
        gap: 12px;
        padding: 16px;
      }

      #setupFollowupsCard .followup-row.is-tour-demo .followup-row-menu-wrap {
        position: absolute;
        top: 14px;
        right: 14px;
      }

    }

    /* Keep Academy methodology links visibly actionable inside embedded practices. */
    body.embed-roleplay #authEmbedBrief .embed-resource-link,
    body.embed-roleplay #setupEmbedBrief .embed-resource-link,
    body.embed-roleplay #practiceEmbedBrief .embed-resource-link {
      min-width: 176px;
      min-height: 38px;
      padding: 9px 14px;
      border: 1px solid #8faee9;
      border-radius: 10px;
      background: #eaf2ff;
      color: #17469f;
      font-size: 11px;
      font-weight: 900;
      line-height: 1.2;
      box-shadow: 0 6px 14px rgba(31, 75, 157, 0.12);
    }

    body.embed-roleplay #authEmbedBrief .embed-resource-link::before,
    body.embed-roleplay #setupEmbedBrief .embed-resource-link::before,
    body.embed-roleplay #practiceEmbedBrief .embed-resource-link::before {
      content: "▤";
      margin-right: 7px;
      font-size: 14px;
    }

    .transition-card .transition-score-pill[data-level="mastered"],
    .transition-card .transition-moment-score[data-level="mastered"] {
      color: #ffffff;
      background: #176846;
      border-color: #4c9877;
    }

    .transition-card .transition-score-pill[data-level="achieved"],
    .transition-card .transition-moment-score[data-level="achieved"] {
      color: #1f6549;
      background: #dff4e8;
      border-color: #b6dfc8;
    }

    .transition-card .transition-score-pill[data-level="developing"],
    .transition-card .transition-moment-score[data-level="developing"] {
      color: #725500;
      background: #fff2b8;
      border-color: #edd575;
    }

    .transition-card .transition-score-pill[data-level="priority"],
    .transition-card .transition-moment-score[data-level="priority"] {
      color: #93400e;
      background: #ffe1c7;
      border-color: #f1b880;
    }

    .transition-card .transition-score-pill[data-level="critical"],
    .transition-card .transition-moment-score[data-level="critical"] {
      color: #9b2828;
      background: #ffe0e0;
      border-color: #efb2b2;
    }

    /* Report visual system v2: calmer hierarchy, denser evidence and stage-led color. */
    #feedbackView {
      --report-ink: #132238;
      --report-muted: #627086;
      --report-line: #dfe5ec;
      --report-surface: #ffffff;
      --report-surface-soft: #f6f8fb;
      --report-navy: #142641;
      --report-blue: #315eae;
      --report-teal: #2f8378;
      --report-critical: #c44141;
      --report-priority: #dd6b2c;
      --report-developing: #d4a521;
      --report-achieved: #6aa878;
      --report-mastered: #176747;
      color: var(--report-ink);
    }

    #feedbackView .feedback-page-topbar,
    #feedbackView .page-layout {
      width: min(1480px, 100%);
      margin-left: auto;
      margin-right: auto;
    }

    #feedbackView .feedback-page-topbar {
      align-items: center;
      margin-bottom: 24px;
      padding: 4px 2px 0;
    }

    #feedbackView .feedback-page-eyebrow,
    #feedbackView .report-title-context,
    #feedbackView .report-hero-eyebrow,
    #feedbackView .report-section-kicker,
    #feedbackView .transcript-side-kicker {
      color: #52709f;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.11em;
      line-height: 1.2;
      text-transform: uppercase;
    }

    #feedbackView .feedback-title-stack h1 {
      margin-top: 0;
      color: var(--report-ink);
      font-size: clamp(34px, 4vw, 48px);
      font-weight: 850;
      letter-spacing: -0.045em;
      line-height: 1;
    }

    #feedbackView .feedback-page-subtitle {
      margin: 9px 0 0;
      color: var(--report-muted);
      font-size: 14px;
      line-height: 1.5;
    }

    #feedbackView .feedback-topbar-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    #feedbackView .feedback-topbar-actions .back-link {
      min-height: 44px;
      padding: 11px 17px;
      border-color: #d5dde8;
      border-radius: 13px;
      background: rgba(255, 255, 255, 0.96);
      color: #263952;
      box-shadow: 0 6px 18px rgba(19, 34, 56, 0.06);
    }

    #feedbackView #practiceReportPanel {
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    #feedbackView .feedback-report-shell {
      grid-template-columns: minmax(0, 1fr) minmax(330px, 380px);
      gap: 24px;
    }

    #feedbackView .feedback-report-main {
      gap: 0;
    }

    #feedbackView .report {
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    #feedbackView .report-title-row {
      min-height: 42px;
      margin: 0 0 12px;
      padding: 0 2px;
    }

    #feedbackView .report-title-actions-only {
      min-height: 38px;
      justify-content: flex-end;
      margin-bottom: 10px;
    }

    #feedbackView .report-title-context {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #65758d;
    }

    #feedbackView .report-title-context > span {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: #57a08f;
      box-shadow: 0 0 0 5px rgba(87, 160, 143, 0.12);
    }

    #feedbackView .feedback-trigger-btn {
      min-height: 38px;
      padding: 9px 13px;
      border: 1px solid #d9e0e9;
      border-radius: 11px;
      background: #ffffff;
      color: #52637a;
      font-size: 12px;
      font-weight: 800;
      box-shadow: none;
    }

    #feedbackView .report-hero {
      position: relative;
      grid-template-columns: minmax(0, 1fr) minmax(220px, 260px);
      gap: 24px;
      margin: 0;
      padding: 28px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 24px;
      background:
        radial-gradient(circle at 86% 8%, rgba(105, 151, 220, 0.3), transparent 30%),
        linear-gradient(135deg, #172d4d 0%, #102038 100%);
      box-shadow: 0 18px 42px rgba(16, 32, 56, 0.16);
    }

    #feedbackView .report-hero::after {
      content: "";
      position: absolute;
      right: -72px;
      bottom: -105px;
      width: 250px;
      height: 250px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 999px;
      pointer-events: none;
    }

    #feedbackView .report-hero-copy,
    #feedbackView .report-hero-score,
    #feedbackView .performance-scale {
      position: relative;
      z-index: 1;
    }

    #feedbackView .report-hero-eyebrow {
      margin-bottom: 10px;
      color: #9fb7dc;
    }

    #feedbackView .report-hero-title {
      color: #ffffff;
      font-size: clamp(28px, 3vw, 38px);
      font-weight: 850;
      letter-spacing: -0.04em;
      line-height: 1.05;
    }

    #feedbackView .report-hero-subtitle {
      max-width: 640px;
      margin-top: 11px;
      color: #c2cee0;
      font-size: 14px;
      line-height: 1.6;
    }

    #feedbackView .report-hero-subtitle:empty {
      display: none;
    }

    #feedbackView .report-hero-audio {
      width: min(520px, 100%);
      margin-top: 20px;
      padding: 13px 14px;
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 15px;
      background: rgba(255, 255, 255, 0.075);
    }

    #feedbackView .report-hero-audio-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      color: #eef4ff;
      font-size: 11px;
      line-height: 1.3;
    }

    #feedbackView .report-hero-audio-head > span {
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    #feedbackView .report-hero-audio-head > strong {
      color: #b9c8dd;
      font-weight: 800;
    }

    #feedbackView .report-hero-audio audio {
      display: block;
      width: 100%;
      height: 36px;
      margin-top: 11px;
    }

    #feedbackView .report-hero-audio audio.hidden {
      display: none;
    }

    #feedbackView .report-hero-score {
      min-height: 126px;
      padding: 16px;
      border: 1px solid rgba(255, 255, 255, 0.16);
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.08);
      box-shadow: none;
      backdrop-filter: blur(8px);
    }

    #feedbackView .report-hero-score .report-label {
      color: #bac8dc;
      font-size: 10px;
      letter-spacing: 0.1em;
    }

    #feedbackView .report-hero-score .report-value {
      min-height: 54px;
      margin-top: 10px;
      padding: 10px 14px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: 15px;
      font-size: clamp(21px, 2.3vw, 29px);
      font-weight: 900;
      letter-spacing: -0.035em;
      box-shadow: 0 8px 18px rgba(4, 12, 27, 0.16);
    }

    #feedbackView .report-hero-score .report-value[data-level="neutral"] {
      color: #eef4ff;
      background: rgba(255, 255, 255, 0.12);
    }

    #feedbackView .performance-scale {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 7px;
      padding-top: 17px;
      border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    #feedbackView .performance-scale-step {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      min-width: 0;
      padding: 8px 7px;
      border: 1px solid transparent;
      border-radius: 10px;
      color: #b9c6d9;
      font-size: 10px;
      font-weight: 800;
      line-height: 1.2;
      text-align: center;
      opacity: 0.62;
    }

    #feedbackView .performance-scale-step i {
      width: 8px;
      height: 8px;
      flex: 0 0 auto;
      border-radius: 999px;
      background: #7d8ba0;
    }

    #feedbackView .performance-scale-step[data-level="critical"] i { background: #eb7777; }
    #feedbackView .performance-scale-step[data-level="priority"] i { background: #f49a59; }
    #feedbackView .performance-scale-step[data-level="developing"] i { background: #e9c95b; }
    #feedbackView .performance-scale-step[data-level="achieved"] i { background: #8bc69a; }
    #feedbackView .performance-scale-step[data-level="mastered"] i { background: #4fa57f; }

    #feedbackView .performance-scale-step.active {
      border-color: rgba(255, 255, 255, 0.18);
      background: rgba(255, 255, 255, 0.1);
      color: #ffffff;
      opacity: 1;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }

    #feedbackView .performance-scale-step.active i {
      box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.11);
    }

    #feedbackView .report-section {
      margin-top: 18px;
    }

    #feedbackView .coach-detail-grid {
      grid-template-columns: minmax(0, 1.22fr) minmax(280px, 0.78fr);
      gap: 16px;
      margin-top: 0;
    }

    #feedbackView .coach-support-stack {
      gap: 16px;
      height: 100%;
    }

    #feedbackView .insight-card,
    #feedbackView .compact-rubric-card {
      padding: 22px;
      border: 1px solid var(--report-line);
      border-radius: 20px;
      background: var(--report-surface);
      box-shadow: 0 8px 24px rgba(19, 34, 56, 0.055);
    }

    #feedbackView .insight-title,
    #feedbackView .compact-rubric-card > strong:first-of-type {
      color: var(--report-ink);
      font-size: 21px;
      font-weight: 850;
      letter-spacing: -0.025em;
      line-height: 1.16;
    }

    #feedbackView .insight-summary {
      margin-top: 9px;
      color: var(--report-muted);
      font-size: 14px;
      line-height: 1.6;
    }

    #feedbackView .growth-card,
    #feedbackView .followup-card,
    #feedbackView .feedback-general-card,
    #feedbackView .conversation-metrics-card {
      background: #ffffff;
    }

    #feedbackView .growth-card {
      position: relative;
      overflow: hidden;
      border-color: #e8d6c8;
      box-shadow: 0 10px 28px rgba(97, 53, 25, 0.07);
    }

    #feedbackView .growth-card::before,
    #feedbackView .followup-card::before,
    #feedbackView .conversation-metrics-card::before,
    #feedbackView .feedback-general-card::before,
    #feedbackView .transition-card::before {
      display: block;
      margin-bottom: 9px;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.11em;
      line-height: 1.2;
      text-transform: uppercase;
    }

    #feedbackView .growth-card::before {
      content: "Primero corrige esto";
      color: #b35a2d;
    }

    #feedbackView .growth-card::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 4px;
      height: 100%;
      background: #e78142;
    }

    #feedbackView .growth-card .insight-title,
    #feedbackView .growth-card .report-list {
      color: var(--report-ink);
    }

    #feedbackView .growth-card .insight-summary {
      color: var(--report-muted);
    }

    #feedbackView .growth-card .report-list .primary-correction {
      padding: 14px 15px;
      border: 1px solid #f0ddd0;
      border-radius: 14px;
      background: #fff9f5;
      color: #38251a;
      font-size: 15px;
      line-height: 1.58;
    }

    #feedbackView .growth-card .report-list .secondary-correction {
      border-top-color: #eee3da;
      color: #6d625a;
    }

    #feedbackView .correction-hierarchy-label {
      color: #a2613e;
    }

    #feedbackView .followup-card {
      flex: 1;
      border-color: #d9e2f2;
      background: #f7f9fd;
      box-shadow: none;
    }

    #feedbackView .followup-card::before {
      content: "Llévalo a la práctica";
      color: #4c6ea5;
    }

    #feedbackView .followup-card .insight-title,
    #feedbackView .followup-card .report-list {
      color: var(--report-ink);
    }

    #feedbackView .followup-card .report-list {
      gap: 8px;
      margin-top: 13px;
    }

    #feedbackView .next-attempt-plan-item {
      grid-template-columns: 70px minmax(0, 1fr);
      padding: 10px;
      border-color: #e0e6ef;
      border-radius: 12px;
      background: #ffffff;
    }

    #feedbackView .next-attempt-plan-label {
      color: #4f647f;
      background: #edf1f6;
    }

    #feedbackView .conversation-metrics-card {
      margin-top: 16px;
    }

    #feedbackView .conversation-metrics-card::before {
      content: "Cómo fluyó la llamada";
      color: #367b74;
    }

    #feedbackView .conversation-metrics-grid {
      grid-template-columns: minmax(0, 1.08fr) minmax(260px, 0.92fr);
      gap: 14px;
      margin-top: 14px;
    }

    #feedbackView .talk-balance-panel,
    #feedbackView .filler-metrics-panel {
      padding: 16px;
      border-color: #e2e7ee;
      border-radius: 15px;
      background: var(--report-surface-soft);
    }

    #feedbackView .conversation-metric-heading {
      color: #2b3e55;
      font-size: 13px;
    }

    #feedbackView .talk-balance-labels {
      margin-top: 17px;
      color: #5f6d80;
      font-size: 13px;
    }

    #feedbackView .talk-balance-labels strong {
      color: #285b86;
    }

    #feedbackView .talk-balance-track {
      height: 11px;
      background: #dfe5ed;
      box-shadow: none;
    }

    #feedbackView .talk-balance-rep {
      background: #315f91;
    }

    #feedbackView .talk-balance-prospect {
      background: #5ea294;
    }

    #feedbackView .talk-balance-status {
      margin-top: 12px;
      color: #9a4d20;
      font-size: 12px;
    }

    #feedbackView .talk-balance-status[data-status="balanced"] {
      color: #26705c;
    }

    #feedbackView .conversation-metric-note {
      color: #7c8797;
      font-size: 10px;
    }

    #feedbackView .filler-metric-row {
      padding: 9px 10px;
      border-color: #e1e6ed;
      border-radius: 11px;
      background: #ffffff;
    }

    #feedbackView .filler-metric-name {
      color: #37485e;
      font-size: 12px;
    }

    #feedbackView .filler-metric-name strong,
    #feedbackView .conversation-metrics-foot strong {
      color: #2f5b85;
    }

    #feedbackView .metric-timestamp-button,
    #feedbackView .transition-moment-timestamp {
      border-color: #d5dee9;
      background: #ffffff;
      color: #315f91;
    }

    #feedbackView .conversation-metrics-foot {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin-top: 10px;
    }

    #feedbackView .conversation-metrics-foot > span {
      display: flex;
      min-height: 46px;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 9px 11px;
      border: 1px solid #e3e8ef;
      border-radius: 11px;
      background: #ffffff;
      color: #687587;
      font-size: 10px;
    }

    #feedbackView .conversation-metrics-foot > span strong {
      font-size: 12px;
      text-align: right;
    }

    #feedbackView .coach-top-grid {
      grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
      gap: 16px;
    }

    #feedbackView #coachView > .coach-top-grid {
      margin-top: 16px;
    }

    #feedbackView .compact-rubric-card {
      margin-top: 0;
    }

    #feedbackView .report-section-kicker {
      display: block;
      margin-bottom: 9px;
      color: #617289;
    }

    #feedbackView .rubric-score {
      display: flex;
      align-items: baseline;
      gap: 8px;
      margin-top: 10px;
      color: #788496;
      font-size: 12px;
    }

    #feedbackView .rubric-score strong,
    #feedbackView .compact-rubric-card .rubric-score strong {
      margin: 0;
      color: #28405d;
      font-size: 21px;
      font-weight: 900;
      letter-spacing: -0.025em;
      line-height: 1.1;
    }

    #feedbackView .rubric-items {
      gap: 7px;
      max-height: 430px;
      margin-top: 14px;
    }

    #feedbackView .rubric-item {
      padding: 11px 12px;
      border-color: #e3e8ef;
      border-radius: 12px;
      box-shadow: none;
    }

    #feedbackView .rubric-item-label {
      color: #33465d;
      font-size: 13px;
    }

    #feedbackView .rubric-item-badge {
      padding: 5px 8px;
      font-size: 10px;
    }

    #feedbackView .rubric-item-feedback,
    #feedbackView .rubric-item-summary {
      font-size: 12px;
    }

    #feedbackView .feedback-general-card {
      position: relative;
      overflow: hidden;
      border-color: #d7e6df;
      box-shadow: 0 8px 24px rgba(28, 92, 69, 0.055);
    }

    #feedbackView .feedback-general-card::before {
      content: "Lo que debes conservar";
      color: #3c7d64;
    }

    #feedbackView .feedback-general-card::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 4px;
      height: 100%;
      background: #64a889;
    }

    #feedbackView .feedback-general-card .insight-title,
    #feedbackView .feedback-general-card .report-list {
      color: var(--report-ink);
    }

    #feedbackView .feedback-general-card .insight-summary {
      color: var(--report-muted);
    }

    #feedbackView .insight-subtitle {
      color: #557369;
      font-size: 10px;
      letter-spacing: 0.09em;
    }

    #feedbackView .insight-card .report-list {
      color: #35465c;
      font-size: 14px;
      line-height: 1.62;
    }

    #feedbackView .transition-card {
      margin-top: 16px;
      padding: 22px;
      border: 1px solid #d8e1ed;
      border-radius: 20px;
      background: #ffffff;
      box-shadow: 0 10px 28px rgba(19, 46, 83, 0.075);
    }

    #feedbackView .transition-card::before {
      content: "Manejo de la conversación";
      color: #456ca7;
    }

    #feedbackView .transition-card .insight-title {
      color: var(--report-ink);
      font-size: 21px;
      letter-spacing: -0.025em;
    }

    #feedbackView .transition-card .insight-summary {
      color: var(--report-muted);
    }

    #feedbackView .transition-card .transition-score-row {
      align-items: flex-start;
      margin-top: 8px;
    }

    #feedbackView .transition-card .transition-score-pill {
      border-color: #d7e0ec;
      background: #f2f5f9;
      color: #41536a;
      box-shadow: none;
    }

    #feedbackView .transition-card .transition-gallery-controls {
      border-top-color: #e6eaf0;
    }

    #feedbackView .transition-card .transition-gallery-count {
      color: #69788c;
    }

    #feedbackView .transition-carousel-shell {
      grid-template-columns: 42px minmax(0, 1fr) 42px;
      gap: 10px;
      margin-top: 14px;
    }

    #feedbackView .transition-card .transition-gallery-btn {
      width: 42px;
      height: 42px;
      border-color: #d9e1eb;
      background: #f5f7fa;
      color: #315f91;
      font-size: 17px;
      backdrop-filter: none;
    }

    #feedbackView .transition-card .transition-moment {
      padding: 16px;
      border: 1px solid #e0e6ee;
      border-radius: 15px;
      background: #f7f9fc;
      box-shadow: none;
    }

    #feedbackView .transition-card .transition-moment-type {
      color: #41658f;
      font-size: 11px;
      letter-spacing: 0.08em;
    }

    #feedbackView .transition-card .transition-moment-summary {
      color: #263a52;
      font-size: 14px;
      line-height: 1.55;
    }

    #feedbackView .transition-card .transition-moment-link {
      color: #456f9f;
      font-size: 11px;
    }

    #feedbackView .transition-card .transition-moment-body {
      margin-top: 13px;
      padding: 13px 0 0;
      border-top: 1px solid #e0e6ee;
      border-radius: 0;
      background: transparent;
    }

    #feedbackView .transition-card .transition-moment-excerpt {
      padding: 13px 14px;
      border: 1px solid #243c5c;
      border-radius: 12px;
      background: #1d304a;
      color: #eef4fb;
      font-size: 12px;
      line-height: 1.65;
      box-shadow: none;
    }

    #feedbackView .transition-check {
      padding: 6px 9px;
      font-size: 10px;
    }

    #feedbackView .transition-methodology-guidance {
      padding: 14px;
      border-color: #cddbea;
      border-radius: 13px;
      background: #eef4f9;
      color: #2c4765;
    }

    #feedbackView .transition-guidance-kicker {
      color: #315f91;
    }

    #feedbackView .feedback-report-aside {
      top: 16px;
      gap: 12px;
    }

    #feedbackView .transcript-side-card {
      padding: 18px;
      border: 1px solid var(--report-line);
      border-radius: 20px;
      background: #ffffff;
      box-shadow: 0 10px 28px rgba(19, 34, 56, 0.07);
    }

    #feedbackView .transcript-side-head {
      align-items: center;
      margin-bottom: 12px;
      padding-bottom: 13px;
      border-bottom-color: #e5e9ef;
    }

    #feedbackView .transcript-side-kicker {
      display: block;
      margin-bottom: 6px;
      color: #60748f;
    }

    #feedbackView .transcript-side-head h2 {
      margin: 0;
      color: var(--report-ink);
      font-size: 19px;
      font-weight: 850;
      letter-spacing: -0.025em;
      line-height: 1.15;
    }

    #feedbackView .transcript-side-head p {
      margin: 5px 0 0;
      color: #7a8696;
      font-size: 11px;
      line-height: 1.4;
    }

    #feedbackView .transcript-copy-button {
      width: 38px;
      height: 38px;
      border-color: #dae1e9;
      border-radius: 11px;
      color: #456482;
      box-shadow: none;
    }

    #feedbackView .transcript-thread {
      gap: 12px;
      min-height: 520px;
      max-height: calc(100vh - 250px);
      padding: 4px 7px 4px 0;
    }

    #feedbackView .feedback-report-aside .transcript-turn {
      grid-template-columns: minmax(0, 1fr);
      gap: 6px;
    }

    #feedbackView .feedback-report-aside .transcript-meta,
    #feedbackView .feedback-report-aside .transcript-bubble {
      grid-column: 1;
    }

    #feedbackView .feedback-report-aside .transcript-speaker-row {
      gap: 7px;
    }

    #feedbackView .feedback-report-aside .transcript-seek-hint {
      margin: 0 0 0 auto;
      color: #748196;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.01em;
      white-space: nowrap;
    }

    #feedbackView .feedback-report-aside .transcript-avatar {
      width: 23px;
      height: 23px;
      font-size: 10px;
    }

    #feedbackView .feedback-report-aside .transcript-speaker {
      color: #53647a;
      font-size: 10px;
      letter-spacing: 0.07em;
    }

    #feedbackView .feedback-report-aside .transcript-bubble {
      min-width: 0;
      padding: 10px 12px;
      border-color: #e1e6ed;
      border-radius: 12px;
      background: #f6f8fa;
    }

    #feedbackView .feedback-report-aside .transcript-turn.rep .transcript-bubble {
      border-color: #d4e2ee;
      background: #f1f6fa;
    }

    #feedbackView .feedback-report-aside .transcript-turn.prospect .transcript-bubble {
      border-color: #e1e5eb;
      background: #f8f8f7;
    }

    #feedbackView .feedback-report-aside .transcript-text {
      color: #33445a;
      font-size: 12px;
      line-height: 1.55;
    }

    #feedbackView .feedback-report-aside .audio-box {
      padding: 16px;
      border-color: var(--report-line);
      border-radius: 16px;
      background: #ffffff;
      box-shadow: 0 6px 18px rgba(19, 34, 56, 0.04);
    }

    .history-item .history-result-cell {
      min-width: 132px;
    }

    .history-score {
      min-width: 0;
      max-width: 100%;
      padding: 5px 9px;
      border-radius: 10px;
      font-size: 11px;
      line-height: 1.2;
      white-space: nowrap;
    }

    .history-score.no-evidence {
      border: 1px solid #dbe2ea;
      background: #eef2f6;
      color: #566478;
    }

    #feedbackView #feedbackLoadingStage {
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
    }

    #feedbackView .feedback-loading-stage {
      min-height: min(540px, 65vh);
    }

    #feedbackView .feedback-loading-shell {
      width: min(500px, 100%);
    }

    #feedbackView .feedback-loading-main {
      padding: 36px 28px;
      border-color: #dfe5ec;
      border-radius: 22px;
      background: #ffffff;
      box-shadow: 0 16px 40px rgba(19, 34, 56, 0.09);
    }

    #feedbackView .feedback-loading-main::before {
      display: none;
    }

    #feedbackView .feedback-loading-kicker .mini-spinner {
      width: 20px;
      height: 20px;
      border-width: 2px;
    }

    #feedbackView .feedback-loading-copy {
      margin-top: 18px;
      gap: 8px;
    }

    #feedbackView .feedback-loading-stage h2 {
      color: var(--report-ink);
      font-size: 30px;
      font-weight: 850;
      letter-spacing: -0.035em;
    }

    #feedbackView .feedback-loading-estimate {
      color: #718096;
      font-size: 12px;
      font-weight: 750;
    }

    @media (max-width: 1180px) {
      #feedbackView .feedback-report-shell {
        grid-template-columns: minmax(0, 1fr);
      }

      #feedbackView .feedback-report-aside {
        position: static;
      }

      #feedbackView .transcript-thread {
        min-height: 360px;
        max-height: 560px;
      }
    }

    @media (max-width: 900px) {
      #feedbackView .coach-detail-grid,
      #feedbackView .coach-top-grid,
      #feedbackView .conversation-metrics-grid {
        grid-template-columns: minmax(0, 1fr);
      }

      #feedbackView .coach-support-stack {
        height: auto;
      }
    }

    @media (max-width: 680px) {
      #feedbackView .feedback-page-topbar {
        align-items: stretch;
        gap: 16px;
      }

      #feedbackView .feedback-title-stack h1 {
        font-size: 32px;
      }

      #feedbackView .feedback-page-subtitle {
        max-width: 32rem;
        font-size: 13px;
      }

      #feedbackView .feedback-topbar-actions,
      #feedbackView .feedback-topbar-actions .back-link {
        width: 100%;
      }

      #feedbackView .report-title-row {
        align-items: center;
      }

      #feedbackView .feedback-trigger-btn {
        font-size: 11px;
      }

      #feedbackView .report-hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        padding: 20px;
        border-radius: 19px;
      }

      #feedbackView .report-hero-audio {
        width: auto;
        margin-top: 16px;
        padding: 12px;
      }

      #feedbackView .report-hero-score {
        min-height: 98px;
      }

      #feedbackView .performance-scale {
        grid-template-columns: repeat(5, minmax(52px, 1fr));
        gap: 4px;
        overflow-x: auto;
        padding-bottom: 2px;
      }

      #feedbackView .performance-scale-step {
        flex-direction: column;
        gap: 5px;
        padding: 7px 4px;
        font-size: 8px;
      }

      #feedbackView .insight-card,
      #feedbackView .compact-rubric-card,
      #feedbackView .transition-card {
        padding: 17px;
        border-radius: 17px;
      }

      #feedbackView .insight-title,
      #feedbackView .compact-rubric-card > strong:first-of-type,
      #feedbackView .transition-card .insight-title {
        font-size: 19px;
      }

      #feedbackView .conversation-metrics-foot {
        grid-template-columns: minmax(0, 1fr);
      }

      #feedbackView .next-attempt-plan-item {
        grid-template-columns: minmax(0, 1fr);
      }

      #feedbackView .transition-carousel-shell {
        grid-template-columns: minmax(0, 1fr);
      }

      #feedbackView .transition-gallery-btn-side {
        display: none;
      }

      #feedbackView .transcript-side-card {
        padding: 16px;
        border-radius: 17px;
      }

      #feedbackView .transcript-thread {
        min-height: 300px;
        max-height: 500px;
      }
    }

    /* Report visual system v4: AMESS palette, balanced panels and warmer dialogue. */
    #feedbackView .report-hero {
      background: #14375f;
      background-image: none;
      border-color: #14375f;
      box-shadow: 0 18px 38px rgba(20, 55, 95, 0.18);
    }

    #feedbackView .report-hero::after {
      display: none;
      content: none;
    }

    #feedbackView .report-hero-audio,
    #feedbackView .report-hero-score {
      border-color: #31577f;
      background: #1d456f;
      backdrop-filter: none;
    }

    #feedbackView .performance-scale-step.active {
      border-color: #3a6087;
      background: #234b76;
      box-shadow: none;
    }

    #feedbackView .coach-detail-grid,
    #feedbackView .coach-top-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #feedbackView .growth-card,
    #feedbackView .followup-card {
      display: flex;
      min-height: 100%;
      flex-direction: column;
    }

    #feedbackView .growth-card {
      border-color: #f0c9ad;
      background: #fffdfb;
    }

    #feedbackView .growth-card .report-list {
      display: flex;
      flex: 1;
      flex-direction: column;
    }

    #feedbackView .growth-card .report-list .primary-correction {
      flex: 1;
      border-color: #f2cfb5;
      background: #fff4eb;
      color: #3b281d;
    }

    #feedbackView .critical-report-flag,
    #feedbackView .critical-mistake-tag,
    #feedbackView #rubricSection .rubric-score {
      display: none !important;
    }

    #feedbackView .followup-card {
      border-color: #efcfb8;
      background: #fffaf6;
    }

    #feedbackView .followup-card::before {
      color: #b85820;
    }

    #feedbackView .followup-card .report-list {
      display: flex;
      flex: 0 0 auto;
      flex-direction: column;
    }

    #feedbackView .next-attempt-plan-item {
      height: auto;
      padding: 12px 0;
      border: 0;
      border-top: 1px solid #efd9c9;
      border-radius: 0;
      background: transparent;
      box-sizing: border-box;
    }

    #feedbackView .next-attempt-plan-item:first-child {
      padding-top: 2px;
      border-top: 0;
    }

    #feedbackView .next-attempt-plan-label {
      color: #9e4c1e;
      background: #fff0e4;
    }

    #feedbackView .conversation-metrics-card,
    #feedbackView .compact-rubric-card,
    #feedbackView .feedback-general-card {
      border-color: #e8d8cb;
      box-shadow: 0 9px 24px rgba(70, 45, 27, 0.055);
    }

    #feedbackView .talk-balance-panel,
    #feedbackView .filler-metrics-panel,
    #feedbackView .agent-questions-panel {
      border-color: #f0dac9;
      background: #fffaf6;
    }

    #feedbackView .talk-balance-track {
      background: #ffe0c7;
    }

    #feedbackView .talk-balance-rep {
      background: #c95718;
    }

    #feedbackView .talk-balance-prospect {
      background: #f4a56d;
    }

    #feedbackView .conversation-metric-note {
      color: #805d46;
      font-size: 11px;
      line-height: 1.45;
    }

    #feedbackView .agent-question-time,
    #feedbackView .metric-timestamp-button {
      border-color: #edc5a8;
      background: #fff6ef;
      color: #a44718;
    }

    #feedbackView .agent-question-time:hover,
    #feedbackView .metric-timestamp-button:hover {
      border-color: #dc8d58;
      background: #ffeadb;
    }

    #feedbackView .feedback-report-aside .transcript-avatar {
      box-shadow: 0 0 0 4px rgba(237, 113, 40, 0.1);
    }

    #feedbackView .feedback-report-aside .transcript-turn.rep .transcript-avatar {
      border-color: #bd4b12;
      background: #bd4b12;
      color: #ffffff;
    }

    #feedbackView .feedback-report-aside .transcript-turn.prospect .transcript-avatar {
      border-color: #ffc79f;
      background: #ffd9bd;
      color: #963f13;
    }

    #feedbackView .feedback-report-aside .transcript-turn.rep .transcript-bubble {
      border-color: #efc7aa;
      background: #fff7f1;
    }

    #feedbackView .feedback-report-aside .transcript-turn.prospect .transcript-bubble {
      border-color: #efb98f;
      background: #ffeadb;
    }

    #feedbackView .feedback-report-aside .transcript-seek-hint,
    #feedbackView .feedback-report-aside .transcript-speaker {
      color: #9b4a1e;
    }

    #feedbackView .feedback-report-aside .transcript-bubble[role="button"]:hover,
    #feedbackView .feedback-report-aside .transcript-bubble[role="button"]:focus-visible {
      border-color: #d77c43;
      box-shadow: 0 7px 18px rgba(192, 79, 21, 0.12);
    }

    #feedbackView .transcript-copy-button {
      border-color: #efc7aa;
      color: #ad4f1d;
      background: #fff7f1;
    }

    @media (max-width: 900px) {
      #feedbackView .coach-detail-grid,
      #feedbackView .coach-top-grid {
        grid-template-columns: 1fr;
      }

    }

    /* Report visual system v3: balanced coaching cards and true dialogue alignment. */
    #feedbackView .report-hero-audio {
      margin-top: 0;
    }

    #feedbackView .report-hero-title.hidden + .report-hero-subtitle:empty + .report-hero-audio {
      margin-top: 0;
    }

    #feedbackView .coach-detail-grid,
    #feedbackView .coach-top-grid {
      align-items: stretch;
    }

    #feedbackView .growth-card,
    #feedbackView .coach-support-stack,
    #feedbackView .followup-card,
    #feedbackView .compact-rubric-card,
    #feedbackView .feedback-general-card {
      height: 100%;
      box-sizing: border-box;
    }

    #feedbackView .coach-support-stack {
      display: flex;
      flex-direction: column;
    }

    #feedbackView .growth-card .insight-summary:empty {
      display: none;
    }

    #feedbackView .growth-card .report-list .primary-correction {
      white-space: pre-line;
    }

    #feedbackView .conversation-metrics-card::before {
      display: none;
      content: none;
    }

    #feedbackView .transition-card::before {
      display: none;
      content: none;
    }

    #feedbackView .agent-questions-panel {
      margin-top: 14px;
      padding: 16px;
      border: 1px solid #e2e7ee;
      border-radius: 15px;
      background: var(--report-surface-soft);
    }

    #feedbackView .agent-question-list {
      display: grid;
      gap: 7px;
      max-height: 310px;
      margin: 12px 0 0;
      padding: 0;
      overflow-y: auto;
      list-style: none;
    }

    #feedbackView .agent-question-list li {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 11px;
      border: 1px solid #e1e6ed;
      border-radius: 11px;
      background: #ffffff;
      color: #37485e;
      font-size: 12px;
      line-height: 1.5;
    }

    #feedbackView .agent-question-time {
      flex: 0 0 auto;
      min-height: 28px;
      padding: 5px 8px;
      border: 1px solid #d5dee9;
      border-radius: 8px;
      background: #ffffff;
      color: #315f91;
      font: inherit;
      font-size: 10px;
      font-weight: 850;
      cursor: pointer;
    }

    #feedbackView .agent-question-time:hover {
      border-color: #9fb8d2;
      background: #edf4fa;
    }

    #feedbackView .transcript-side-head {
      margin-bottom: 10px;
      padding-bottom: 11px;
    }

    #feedbackView .feedback-report-aside .transcript-turn {
      display: flex;
      flex-direction: column;
      width: 100%;
      gap: 5px;
    }

    #feedbackView .feedback-report-aside .transcript-turn.rep {
      align-items: flex-start;
    }

    #feedbackView .feedback-report-aside .transcript-turn.prospect {
      align-items: flex-end;
    }

    #feedbackView .feedback-report-aside .transcript-meta,
    #feedbackView .feedback-report-aside .transcript-bubble {
      width: min(91%, 330px);
      min-width: 0;
    }

    #feedbackView .feedback-report-aside .transcript-turn.rep .transcript-meta,
    #feedbackView .feedback-report-aside .transcript-turn.rep .transcript-bubble {
      margin-right: auto;
      margin-left: 0;
    }

    #feedbackView .feedback-report-aside .transcript-turn.prospect .transcript-meta,
    #feedbackView .feedback-report-aside .transcript-turn.prospect .transcript-bubble {
      margin-right: 0;
      margin-left: auto;
    }

    #feedbackView .feedback-report-aside .transcript-turn.rep .transcript-speaker-row {
      justify-content: flex-start;
    }

    #feedbackView .feedback-report-aside .transcript-turn.prospect .transcript-speaker-row {
      justify-content: flex-end;
    }

    #feedbackView .feedback-report-aside .transcript-turn.rep .transcript-seek-hint {
      margin-left: auto;
    }

    #feedbackView .feedback-report-aside .transcript-turn.prospect .transcript-seek-hint {
      margin: 0;
    }

    #feedbackView .feedback-report-aside .transcript-bubble[role="button"] {
      cursor: pointer;
    }

    #feedbackView .feedback-report-aside .transcript-bubble[role="button"]:hover,
    #feedbackView .feedback-report-aside .transcript-bubble[role="button"]:focus-visible {
      border-color: #9fb8d2;
      box-shadow: 0 7px 18px rgba(38, 72, 111, 0.1);
      outline: none;
      transform: translateY(-1px);
    }

    #feedbackView .retry-evaluation-button {
      min-height: 42px;
      padding: 10px 16px;
      border: 1px solid #b9cbea;
      border-radius: 12px;
      background: linear-gradient(135deg, #315eae, #244c92);
      color: #ffffff;
      font-size: 12px;
      font-weight: 850;
      box-shadow: 0 8px 18px rgba(49, 94, 174, 0.2);
    }

    #feedbackView .retry-evaluation-button:hover:not(:disabled) {
      border-color: #244c92;
      background: linear-gradient(135deg, #3768bd, #294f94);
      transform: translateY(-1px);
    }

    #feedbackView .retry-evaluation-button:disabled {
      border-color: #d9e0e9;
      background: #eef2f6;
      color: #7b8798;
      box-shadow: none;
    }

    @media (max-width: 900px) {
      #feedbackView .growth-card,
      #feedbackView .coach-support-stack,
      #feedbackView .followup-card,
      #feedbackView .compact-rubric-card,
      #feedbackView .feedback-general-card {
        height: auto;
      }
    }

    @media (max-width: 680px) {
      #feedbackView .report-hero-audio {
        margin-top: 0;
      }

      #feedbackView .feedback-report-aside .transcript-meta,
      #feedbackView .feedback-report-aside .transcript-bubble {
        width: min(94%, 360px);
      }
    }

    .embed-report-problem-btn {
      display: none;
    }

    body.embed-roleplay .embed-report-problem-btn {
      display: inline-flex;
      position: fixed;
      top: 12px;
      right: 14px;
      z-index: 30;
      align-items: center;
      justify-content: center;
      min-height: 38px;
      padding: 8px 14px;
      border: 1px solid #bdd0ef;
      border-radius: 999px;
      background: #ffffff;
      color: #244c92;
      box-shadow: 0 5px 16px rgba(27, 62, 130, 0.12);
      font: inherit;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
    }

    body.embed-roleplay .embed-report-problem-btn:hover,
    body.embed-roleplay .embed-report-problem-btn:focus-visible {
      background: #edf4ff;
      border-color: #7799d5;
    }

    body.embed-roleplay #feedbackModal {
      padding: 8px;
    }

    body.embed-roleplay .feedback-modal-card {
      padding: 18px;
    }

    body.embed-roleplay #feedbackMessageInput {
      min-height: 100px !important;
    }

    #feedbackReporterNameInput {
      width: 100%;
      min-height: 42px;
      padding: 9px 12px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #ffffff;
      color: var(--ink);
      font: inherit;
    }

    .feedback-admin-diagnostics {
      margin-top: 14px;
      padding: 14px 16px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #f5f8ff;
      color: var(--ink);
      font-size: 13px;
      line-height: 1.6;
      overflow-wrap: anywhere;
    }

    .feedback-admin-diagnostics details {
      margin-top: 9px;
    }

    .feedback-admin-diagnostics summary {
      cursor: pointer;
      font-weight: 700;
    }

    .feedback-admin-log {
      max-height: 230px;
      margin-top: 8px;
      overflow-y: auto;
      white-space: pre-wrap;
    }

    .feedback-admin-log p {
      margin: 0 0 7px;
    }