/* /css/styles.css — Course Portal — Quizlet-inspired redesign */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;1,9..40,400&family=DM+Mono:wght@400;500&display=swap');

/* =========================================================
   DESIGN TOKENS — Quizlet-inspired
   ========================================================= */
:root {
  /* Aliases used by some mobile patches */
  --pastel-blue: var(--accent-soft);
  --pastel-blue-text: var(--accent);

  /* Core palette — bright whites, soft lavender tints */
  --bg: #f6f7fb;
  --panel: #ffffff;
  --text: #1a1d28;
  --muted: #6b7394;
  --border: #e3e6f0;
  --shadow: 0 2px 8px rgba(60, 68, 120, .07), 0 8px 32px rgba(60, 68, 120, .05);
  --radius: 16px;

  /* Quizlet purple accent */
  --accent: #4255ff;
  --accent-soft: rgba(66, 85, 255, .1);
  --accent-mid: rgba(66, 85, 255, .18);
  --accent-glow: rgba(66, 85, 255, .22);

  /* Buttons */
  --btn: #4255ff;
  --btnText: #ffffff;
  --ghostBg: transparent;
  --ghostText: #1a1d28;
  --danger: #d93025;
  --danger-soft: rgba(217, 48, 37, .1);
  --danger-glow: rgba(217, 48, 37, .15);

  /* Sidebar — warm off-white */
  --side-bg: #ffffff;
  --side-top-bg: #f0f1fa;
  --side-border: #e3e6f0;

  /* Hover */
  --hover: rgba(66, 85, 255, .05);
  --hover-strong: rgba(66, 85, 255, .1);

  /* Tooltip */
  --tooltip-bg: rgba(26, 29, 40, .93);

  /* Meet button */
  --meet-bg: #1a73e8;
  --meet-text: #fff;
  --meet-dot: #34a853;

  /* Tab accent colors — more saturated, friendly */
  --tab-color-0: #4255ff;
  --tab-color-1: #00a3bf;
  --tab-color-2: #00c98e;
  --tab-color-3: #f4a100;
  --tab-color-4: #ff4b4b;
  --tab-color-5: #8c52ff;
  --tab-color-6: #ff7043;
  --tab-color-7: #0288d1;

  /* Avatar */
  --avatar-size: 52px;
  --avatar-bg: #eef0fb;
  --avatar-shape: #a5aee8;
}

/* =========================================================
   RESET & BASE
   ========================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  font-family: 'DM Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  line-height: 1.6;
}

.hidden {
  display: none !important;
}

#app {
  min-height: 100vh;
}

/* =========================================================
   TOPBAR
   ========================================================= */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(246, 247, 251, .92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -.4px;
  color: var(--accent);
}

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

.topbar-user {
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
}

/* =========================================================
   VIEWS
   ========================================================= */
.view {
  padding: 36px 20px;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
}

/* =========================================================
   CARDS
   ========================================================= */
.card {
  background: var(--panel);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px;
}

.login-card {
  max-width: 440px;
  margin: 80px auto 0;
}

.h1 {
  margin: 0 0 10px;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.6px;
  line-height: 1.2;
}

.muted {
  margin: 0 0 20px;
  color: var(--muted);
  line-height: 1.65;
  font-size: 15px;
  font-weight: 400;
}

/* =========================================================
   FORMS
   ========================================================= */
.form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.input {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  outline: none;
  background: #fff;
  font-size: 15px;
  font-family: inherit;
  color: var(--text);
  transition: border-color .15s ease, box-shadow .15s ease;
  font-weight: 400;
}

.input::placeholder {
  color: #b0b5cc;
}

.input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.error {
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--danger-soft);
  color: var(--danger);
  border: 1.5px solid rgba(217, 48, 37, .2);
  font-size: 14px;
  font-weight: 500;
}

/* =========================================================
   BUTTONS — base
   ========================================================= */
.btn {
  border: 1.5px solid transparent;
  border-radius: 12px;
  padding: 11px 20px;
  font-weight: 700;
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease,
    box-shadow .14s ease, opacity .14s ease, transform .08s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -.1px;
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: var(--btn);
  color: var(--btnText);
  box-shadow: 0 2px 8px var(--accent-glow);
}

.btn-primary:hover {
  background: #3344ee;
  box-shadow: 0 4px 16px var(--accent-glow);
  opacity: 1;
}

.btn-ghost {
  background: var(--ghostBg);
  color: var(--ghostText);
  border-color: var(--border);
  font-weight: 600;
}

.btn-ghost:hover {
  background: var(--hover);
  border-color: #c5cadf;
}

.empty {
  margin-top: 24px;
  color: var(--muted);
  text-align: center;
  padding: 36px 0;
  font-size: 15px;
  font-weight: 500;
}

/* =========================================================
   AVATAR — lavender monochrome silhouette
   ========================================================= */
.avatar {
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: 14px;
  background: var(--avatar-bg);
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
}

.avatar::before {
  content: "";
  position: absolute;
  width: 44%;
  height: 44%;
  border-radius: 50%;
  background: var(--avatar-shape);
  top: 16%;
  left: 50%;
  transform: translateX(-50%);
}

.avatar::after {
  content: "";
  position: absolute;
  width: 72%;
  height: 46%;
  border-radius: 22px 22px 0 0;
  background: var(--avatar-shape);
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

/* =========================================================
   TOOLTIP
   ========================================================= */
[data-tip] {
  position: relative;
}

[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%);
  background: var(--tooltip-bg);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 10px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .14s ease, transform .14s ease;
  z-index: 50;
}

[data-tip]::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--tooltip-bg);
  opacity: 0;
  pointer-events: none;
  transition: opacity .14s ease;
  z-index: 50;
}

[data-tip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(-2px);
}

[data-tip]:hover::before {
  opacity: 1;
}

/* =========================================================
   BODY MODES
   ========================================================= */
body.dashboard-mode #topbar {
  display: none !important;
}

body.course-mode #topbar {
  display: none !important;
}

body.dashboard-mode #view-dashboard.view {
  padding: 0 !important;
}

body.course-mode #view-course.view {
  padding: 0 !important;
}

/* =========================================================
   DASHBOARD LAYOUT
   ========================================================= */
.dash-layout {
  width: 100%;
  height: 100vh;
  display: grid;
  grid-template-columns: 292px 1fr;
  gap: 0;
  overflow: hidden;
}

.dash-sidebar {
  height: 100%;
  background: var(--side-bg);
  border-right: 1.5px solid var(--side-border);
  padding: 28px 0 24px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.dash-sidebar-top {
  padding: 0 22px 18px;
}

.dash-brand {
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -.4px;
  color: var(--accent);
}

.dash-logo {
  display: block;
  height: 32px;
  width: auto;
  object-fit: contain;
  object-position: left center;
}

.dash-user {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 0 22px 22px;
  border-bottom: 1.5px solid var(--side-border);
  margin-bottom: 10px;
}

.dash-user .avatar {
  --avatar-size: 50px;
}

.dash-user-name {
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -.3px;
  line-height: 1.2;
}

.dash-user-meta {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.dash-tabs {
  display: flex;
  flex-direction: column;
  overflow: auto;
  flex: 1;
  padding: 6px 0 0;
}

.dash-tab {
  text-align: left;
  width: 100%;
  border: 0;
  background: transparent;
  border-radius: 0;
  padding: 16px 22px 16px 26px;
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  border-bottom: 1px solid rgba(227, 230, 240, .8);
  transition: background .14s ease, padding-left .2s cubic-bezier(.34, 1.56, .64, 1);
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: inherit;
  letter-spacing: -.15px;
}

.dash-tab::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 22%;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: transparent;
  transition: background .14s ease, top .2s ease, bottom .2s ease, width .2s ease;
}

.dash-tab:nth-child(1)::before {
  --strip: var(--tab-color-0);
}

.dash-tab:nth-child(2)::before {
  --strip: var(--tab-color-1);
}

.dash-tab:nth-child(3)::before {
  --strip: var(--tab-color-2);
}

.dash-tab:nth-child(4)::before {
  --strip: var(--tab-color-3);
}

.dash-tab:nth-child(5)::before {
  --strip: var(--tab-color-4);
}

.dash-tab:nth-child(6)::before {
  --strip: var(--tab-color-5);
}

.dash-tab:nth-child(7)::before {
  --strip: var(--tab-color-6);
}

.dash-tab:hover {
  background: var(--hover);
}

.dash-tab:hover::before {
  background: var(--strip);
  top: 27%;
  bottom: 27%;
}

.dash-tab.active {
  background: var(--accent-soft);
  padding-left: 30px;
  color: var(--text);
  font-weight: 700;
}

.dash-tab.active::before {
  background: var(--strip);
  width: 4px;
  top: 18%;
  bottom: 18%;
}

.dash-sidebar-bottom {
  margin-top: auto;
  padding: 18px 22px 0;
  border-top: 1.5px solid var(--side-border);
}

/* Mobile logout — hidden by default on desktop, shown inside mobile media query */
.dash-logout-mobile {
  display: none !important;
}

#btn-logout-dash.btn-ghost {
  border-color: rgba(217, 48, 37, .22) !important;
  box-shadow: 0 0 0 2px rgba(217, 48, 37, .07) inset;
  transition: box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

#btn-logout-dash.btn-ghost:hover {
  background: rgba(217, 48, 37, .05) !important;
  border-color: rgba(217, 48, 37, .32) !important;
  box-shadow: 0 0 0 2px rgba(217, 48, 37, .1) inset, 0 4px 14px rgba(217, 48, 37, .1);
}

/* Dashboard content */
.dash-content {
  height: 100%;
  background: var(--bg);
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  -webkit-overflow-scrolling: touch;
}

body.dashboard-mode .dash-container.container {
  max-width: none !important;
  width: 100%;
  margin: 0;
  padding: 36px 40px;
}

/* Dashboard header */
.dashboard-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 24px;
  border-bottom: 1.5px solid var(--border);
  margin-bottom: 24px;
}

.dashboard-search {
  display: flex;
  justify-content: flex-end;
}

#dashboard-search {
  width: 230px;
  max-width: 40vw;
  transition: width .22s ease, box-shadow .18s ease, border-color .18s ease;
}

#dashboard-search:focus {
  width: 400px;
}

/* =========================================================
   DASHBOARD — COURSE CARDS
   ========================================================= */
body.dashboard-mode #courses-grid.grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding-bottom: 32px;
}

body.dashboard-mode #courses-grid .course-card,
body.dashboard-mode #courses-grid .card {
  width: 100%;
  border-radius: 16px;
  box-shadow: none;
  border: 1.5px solid var(--border);
  padding: 20px 24px;
  background: #fff;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

body.dashboard-mode #courses-grid .course-card:hover,
body.dashboard-mode #courses-grid .card:hover {
  border-color: #c0c5e0;
  box-shadow: 0 4px 20px rgba(66, 85, 255, .09);
  transform: translateY(-1px);
}

/* Top row layout */
body.dashboard-mode #courses-grid .course-top {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

/* Course symbol — main heading */
body.dashboard-mode #courses-grid .course-title {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -.4px;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: 8px;
}

/* Left KV block */
body.dashboard-mode #courses-grid .course-left {
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

body.dashboard-mode #courses-grid .course-kv {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

body.dashboard-mode #courses-grid .course-kv-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
}

body.dashboard-mode #courses-grid .course-kv-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

body.dashboard-mode #courses-grid .course-kv-value {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.2px;
  color: var(--text);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Right badge */
body.dashboard-mode #courses-grid .course-right {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  flex-shrink: 0;
}

/* Badge wrapper */
body.dashboard-mode #courses-grid .course-badge {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  flex-shrink: 0;
}

/* Badge — layout only, colors come from .badge--* variants */
body.dashboard-mode #courses-grid .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 13px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  line-height: 1;
}

/* Force color variants to win over grid specificity */
body.dashboard-mode #courses-grid .badge.badge--paid {
  background: #c8f5db;
  border-color: #22a85a;
  color: #0a4a22;
  box-shadow: 0 2px 8px rgba(34, 168, 90, .25);
}

body.dashboard-mode #courses-grid .badge.badge--due {
  background: #fff3cd;
  border-color: #e09000;
  color: #6b3d00;
  box-shadow: 0 2px 8px rgba(224, 144, 0, .20);
}

body.dashboard-mode #courses-grid .badge.badge--overdue {
  background: #ffe0e0;
  border-color: #d42020;
  color: #7a0000;
  box-shadow: 0 2px 10px rgba(212, 32, 32, .30);
  animation: payShake 6s ease-in-out infinite;
  animation-delay: 2s;
}

body.dashboard-mode #courses-grid .badge.badge--unpaid {
  background: #ffd6d6;
  border-color: #c81010;
  color: #6b0000;
  box-shadow: 0 2px 10px rgba(200, 16, 16, .25);
  animation: payShake 7s ease-in-out infinite;
  animation-delay: 3s;
}

body.dashboard-mode #courses-grid .badge.badge--info {
  background: #e8e8f0;
  border-color: #9090b0;
  color: #303050;
}

/* Actions */
body.dashboard-mode #courses-grid .course-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

/* =========================================================
   COURSE LAYOUT
   ========================================================= */
body.course-mode .course-layout {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: 308px 1fr;
  gap: 0;
  padding: 0;
  margin: 0;
  align-items: stretch;
  transition: grid-template-columns .2s cubic-bezier(.4, 0, .2, 1);
}

body.course-mode .sidebar {
  height: 100%;
  background: var(--side-bg);
  border-right: 1.5px solid var(--side-border);
  border-radius: 0;
  box-shadow: none;
  padding: 0 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: grid-template-columns .2s cubic-bezier(.4, 0, .2, 1);
}

/* ── Visual order trick: move .sidebar-bottom (toggle+back) to the top ──
   DOM order is: sidebar-top → sidebar-actions → sidebar-tabs → sidebar-bottom
   We use flex order to visually show sidebar-bottom FIRST                   */
.sidebar-top {
  order: 2;
}

.sidebar-actions {
  order: 3;
}

.sidebar-tabs {
  order: 4;
}

.sidebar-bottom {
  order: 1;
}

/* ── Sidebar-bottom styled as a top bar ── */
.sidebar-bottom {
  display: flex;
  gap: 0;
  align-items: center;
  padding: 0;
  border-bottom: 1px solid var(--side-border);
  border-top: none;
  margin-bottom: 0;
  flex-shrink: 0;
  height: 54px;
  background: var(--side-bg);
}

/* ── #btn-sidebar-toggle: SVG icon button — monochrome, like Meet button style ── */
#btn-sidebar-toggle {
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  padding: 0;
  border: none;
  border-right: 1px solid var(--side-border);
  border-radius: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-size: 0;
  color: transparent;

  /* Frosted tile — same idea as the camera icon tile in #btn-meet::before */
  background-color: rgba(66, 85, 255, .08);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Crect x='2' y='4' width='16' height='2.2' rx='1.1' fill='%234255ff'/%3E%3Crect x='2' y='8.9' width='11' height='2.2' rx='1.1' fill='%234255ff'/%3E%3Crect x='2' y='13.8' width='16' height='2.2' rx='1.1' fill='%234255ff'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;

  transition: background-color .18s ease, background-image .18s ease, transform .1s ease,
    box-shadow .18s ease;
  box-shadow: inset -1px 0 0 rgba(66, 85, 255, .12);
}

/* Hover — brighter bg, icon gets a slight brightness bump via opacity of the tile */
#btn-sidebar-toggle:hover {
  background-color: rgba(66, 85, 255, .15);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Crect x='2' y='4' width='16' height='2.2' rx='1.1' fill='%233344ee'/%3E%3Crect x='2' y='8.9' width='11' height='2.2' rx='1.1' fill='%233344ee'/%3E%3Crect x='2' y='13.8' width='16' height='2.2' rx='1.1' fill='%233344ee'/%3E%3C/svg%3E");
  box-shadow: inset -1px 0 0 rgba(66, 85, 255, .25);
}

#btn-sidebar-toggle:active {
  transform: scale(.9);
}

#btn-sidebar-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft) inset;
}

/* Collapsed state — show chevron-right SVG instead of hamburger */
.course-layout.sidebar-collapsed #btn-sidebar-toggle {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M7 4l6 6-6 6' fill='none' stroke='%234255ff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.course-layout.sidebar-collapsed #btn-sidebar-toggle:hover {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M7 4l6 6-6 6' fill='none' stroke='%233344ee' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Expanded state (default) — show chevron-left on hover as a subtle affordance */
/* Expanded state hover: hamburger color handled by #btn-sidebar-toggle:hover above */

/* ── sidebar-top: the user card — spacing below the top bar ── */
.sidebar-top {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  margin: 14px 14px 0;
  border-radius: 16px;
  background: var(--side-top-bg);
  border: 1.5px solid rgba(66, 85, 255, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 2px 6px rgba(66, 85, 255, .06);
  flex-shrink: 0;
}

.sidebar-top .avatar {
  --avatar-size: 52px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .8);
  border: 1.5px solid rgba(66, 85, 255, .15);
  box-shadow: 0 2px 8px rgba(66, 85, 255, .1);
}

.sidebar-top .avatar::before {
  background: #8993cc;
}

.sidebar-top .avatar::after {
  background: #8993cc;
}

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

.sidebar-user .sidebar-name {
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -.3px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user .sidebar-meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .6px;
}

/* ── sidebar-actions: contains #btn-meet and #btn-repo ── */
.sidebar-actions {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 14px 14px 0;
  /* 14px top gap separates from the user card */
  flex-shrink: 0;
}

/* ── #btn-meet: full card-style blue button ── */
#btn-meet {
  /* Complete visual reset */
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  border-radius: 14px !important;
  border: none !important;
  padding: 0 18px 0 16px !important;
  min-height: 66px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  font-family: inherit;
  gap: 0 !important;

  /* Rich blue gradient */
  background: linear-gradient(135deg, #1a73e8 0%, #1451b8 100%) !important;

  /* Typography — the button text "Join Meet" */
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #fff !important;
  letter-spacing: -.1px !important;
  text-indent: 54px;
  /* push text right to make room for icon */
  text-align: left !important;
  line-height: 1.25 !important;

  box-shadow: 0 4px 18px rgba(26, 115, 232, .35), 0 1px 4px rgba(26, 115, 232, .2);
  transition: box-shadow .18s ease, transform .12s ease;
}

#btn-meet:hover {
  background: linear-gradient(135deg, #1e7ef0 0%, #1557c0 100%) !important;
  box-shadow: 0 8px 28px rgba(26, 115, 232, .45), 0 2px 6px rgba(26, 115, 232, .2) !important;
  transform: translateY(-1px);
  opacity: 1 !important;
  border: none !important;
}

#btn-meet:active {
  transform: translateY(0) !important;
}

/* ── Camera icon tile — absolutely positioned left side ── */
#btn-meet::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .3);
  /* Frosted square + video camera icon as background layers */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M17 10.5V7a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-3.5l4 4v-11l-4 4z'/%3E%3C/svg%3E") center / 20px 20px no-repeat,
    rgba(255, 255, 255, .18);
  z-index: 2;
  pointer-events: none;
}

/* ── Sweeping shimmer line — flush to very top edge, left→right — runs TWICE then stops ── */
#btn-meet::after {
  content: "";
  position: absolute;
  top: 0;
  left: -55%;
  width: 55%;
  height: 3px;
  border-radius: 0;
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, .9) 50%,
      rgba(255, 255, 255, 0) 100%);
  animation: meetProgressLine 1.6s ease-in-out 2;
  /* 2 passes, then stops */
  animation-fill-mode: forwards;
  z-index: 10;
  pointer-events: none;
}

@keyframes meetProgressLine {
  0% {
    left: -55%;
    opacity: 1;
  }

  100% {
    left: 110%;
    opacity: 0;
  }
}

/* ── #btn-repo: hidden per design ── */
#btn-repo {
  display: none !important;
}

/* ── Tabs ── */
.sidebar-tabs {
  display: flex;
  flex-direction: column;
  overflow: auto;
  flex: 1;
  padding: 10px 0 0;
  gap: 0;
}

.tab-btn {
  text-align: left;
  width: 100%;
  border: 0;
  background: transparent;
  border-radius: 0;
  padding: 18px 22px 18px 26px;
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -.15px;
  border-bottom: 1px solid rgba(227, 230, 240, .8);
  transition: background .14s ease, padding-left .2s cubic-bezier(.34, 1.56, .64, 1);
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--text);
  font-family: inherit;
}

.tab-btn::before {
  content: "";
  position: absolute;
  left: 0;
  top: 25%;
  bottom: 25%;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: transparent;
  transition: background .14s ease, top .2s cubic-bezier(.34, 1.56, .64, 1),
    bottom .2s cubic-bezier(.34, 1.56, .64, 1), width .2s ease;
}

.tab-btn:nth-child(1)::before {
  --strip: var(--tab-color-0);
}

.tab-btn:nth-child(2)::before {
  --strip: var(--tab-color-1);
}

.tab-btn:nth-child(3)::before {
  --strip: var(--tab-color-2);
}

.tab-btn:nth-child(4)::before {
  --strip: var(--tab-color-3);
}

.tab-btn:nth-child(5)::before {
  --strip: var(--tab-color-4);
}

.tab-btn:nth-child(6)::before {
  --strip: var(--tab-color-5);
}

.tab-btn:nth-child(7)::before {
  --strip: var(--tab-color-6);
}

.tab-btn:hover {
  background: var(--hover);
}

.tab-btn:hover::before {
  background: var(--strip);
  top: 20%;
  bottom: 20%;
}

.tab-btn.active {
  background: var(--accent-soft);
  padding-left: 30px;
  font-weight: 700;
}

.tab-btn.active::before {
  background: var(--strip);
  top: 12%;
  bottom: 12%;
  width: 4px;
}

.tab-btn-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: .45;
  transition: opacity .14s ease;
}

.tab-btn.active .tab-btn-icon,
.tab-btn:hover .tab-btn-icon {
  opacity: .9;
}

/* ── Back-to-dashboard button ── */
#btn-back-dashboard {
  flex: 1;
  border: none !important;
  border-left: 1px solid var(--side-border) !important;
  background: transparent !important;
  color: var(--muted) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 16px 0 14px !important;
  height: 54px;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .4px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background .15s ease, color .15s ease, gap .18s cubic-bezier(.34, 1.56, .64, 1) !important;
  font-family: inherit;
  cursor: pointer;
}

#btn-back-dashboard::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15'%3E%3Cpath d='M9 2.5 5 7.5 9 12.5' fill='none' stroke='%236b7394' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1);
}

#btn-back-dashboard:hover {
  background: rgba(217, 48, 37, .05) !important;
  color: var(--danger) !important;
  gap: 12px !important;
}

#btn-back-dashboard:hover::before {
  transform: translateX(-3px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15'%3E%3Cpath d='M9 2.5 5 7.5 9 12.5' fill='none' stroke='%23d93025' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* =========================================================
   COLLAPSED STATE
   ========================================================= */
.course-layout.sidebar-collapsed {
  grid-template-columns: 54px 1fr !important;
  transition: grid-template-columns .2s cubic-bezier(.4, 0, .2, 1);
}

.course-layout.sidebar-collapsed .sidebar {
  overflow: hidden;
  align-items: stretch;
}

/* In collapsed mode, hide everything except the toggle and avatar */
.course-layout.sidebar-collapsed .sidebar-user,
.course-layout.sidebar-collapsed .sidebar-actions,
.course-layout.sidebar-collapsed .sidebar-tabs .tab-btn span,
.course-layout.sidebar-collapsed #course-course-symbol,
.course-layout.sidebar-collapsed #course-user-name {
  display: none;
}

/* Back button: icon only in collapsed */
.course-layout.sidebar-collapsed #btn-back-dashboard {
  flex: 1;
  padding: 0 !important;
  justify-content: center;
  font-size: 0 !important;
  color: transparent !important;
  border-left: 1px solid var(--side-border) !important;
}

.course-layout.sidebar-collapsed #btn-back-dashboard::before {
  margin: 0;
}

/* Sidebar-top: avatar only, centered */
.course-layout.sidebar-collapsed .sidebar-top {
  padding: 10px 0;
  margin: 8px 0 0;
  justify-content: center;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-bottom: 1px solid var(--side-border);
}

.course-layout.sidebar-collapsed .sidebar-top .avatar {
  --avatar-size: 34px;
}

/* Tabs: icon only, centered */
.course-layout.sidebar-collapsed .tab-btn {
  padding: 18px 0;
  justify-content: center;
}

/* Viewer */
body.course-mode .viewer {
  height: 100%;
  background: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body.course-mode .viewer-header {
  display: none !important;
}

.viewer-body {
  flex: 1;
  background: #fff;
}

.viewer-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* =========================================================
   STUDENT DASHBOARD — DETAIL PANEL
   ========================================================= */
.course-detail {
  margin-top: 16px;
  border: 1.5px solid var(--border);
  background: var(--panel);
  border-radius: 20px;
  padding: 24px 24px 20px;
  box-shadow: 0 2px 12px rgba(60, 68, 120, .06);
}

.detail-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1.5px solid var(--border);
}

.mini-tab {
  padding: 9px 16px;
  border: 1.5px solid var(--border);
  background: #fff;
  color: var(--muted);
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1px;
  transition: background .12s ease, border-color .12s ease,
    color .12s ease, box-shadow .12s ease, transform .1s ease;
  font-family: inherit;
}

.mini-tab:hover {
  background: var(--hover);
  border-color: #c0c5e0;
  color: var(--text);
  transform: translateY(-1px);
}

.mini-tab.active {
  background: var(--accent-soft);
  border-color: rgba(66, 85, 255, .35);
  color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.detail-iframe {
  width: 100%;
  height: 70vh;
  min-height: 530px;
  border: 0;
  border-radius: 14px;
  background: var(--bg);
}

.detail-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.detail-title {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 2px 0 0 2px;
}

.detail-pro {
  border: 1.5px solid var(--border);
  background: #fff;
  border-radius: 16px;
  padding: 20px 22px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
}

.detail-text-pro {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text);
  font-weight: 400;
}

.detail-text-pro b {
  font-weight: 800;
}

.detail-list {
  margin: 0;
  padding-left: 20px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--text);
}

.detail-list li {
  margin: 10px 0;
}

/* =========================================================
   COURSE PROGRESS GLOW BAR
   ========================================================= */

/*
  The bar itself is a position:absolute div injected by module.progress.js
  at the top of each .course-card. The card needs position:relative (set by JS).
*/

.course-progress-bar {
  /* Base styles set inline by JS for dynamic color.
     These are fallback / override-safe rules. */
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  z-index: 2;
  pointer-events: none;
  transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);

  /* Clip corners to match the card's border-radius so the bar
     hugs the top edge instead of poking out */
  overflow: hidden;
}

/* ── Pulse animation for courses near their end (≥ 88%) ─────────────── */
@keyframes progress-pulse {
  0% {
    opacity: 1;
    filter: brightness(1);
  }

  50% {
    opacity: 0.72;
    filter: brightness(1.35);
  }

  100% {
    opacity: 1;
    filter: brightness(1);
  }
}

.course-progress-bar--pulse {
  animation: progress-pulse 2.2s ease-in-out infinite;
}

/* ── Make sure course cards clip the bar at the top corners ─────────── */
.course-card {
  position: relative;
  /* ensures bar positions inside the card */
  overflow: hidden;
  /* clips the bar at border-radius corners */
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 980px) {
  .dash-layout {
    grid-template-columns: 268px 1fr;
  }

  body.course-mode .course-layout {
    grid-template-columns: 288px 1fr;
  }

  #dashboard-search {
    width: 200px;
  }

  #dashboard-search:focus {
    width: 320px;
  }
}



/* =========================================================
   MOBILE — 720px and below
   =========================================================
   Dashboard layout:
   - Sidebar becomes a top bar that scrolls away with the page
   - Logo top-left, compact logout top-right (scrolls away — not sticky)
   - User block: compact row, smaller avatar + name
   - Tabs: horizontal pill row, scrollable
   - Desktop .dash-sidebar-bottom (logout) hidden on mobile
   Course layout unchanged (already handled above)
   ========================================================= */
@media (max-width: 720px) {

  /* ─ Global ─ */
  html,
  body {
    overflow-x: clip;
    /* was: hidden — hidden transfers clip to viewport, cutting off logout button */
  }

  body {
    overscroll-behavior-y: none;
  }

  /* ─ Dashboard: full-width stacked layout ─ */
  .dash-layout {
    grid-template-columns: 1fr !important;
    height: auto !important;
  }

  body.dashboard-mode .dash-layout {
    min-height: 100vh;
    overflow: visible;
  }

  body.dashboard-mode .dash-content {
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  body.dashboard-mode .dash-layout {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  body.dashboard-mode .dash-container.container {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* ─ Sidebar becomes a top header bar ─ */
  body.dashboard-mode .dash-sidebar {
    height: auto !important;
    border-right: none !important;
    border-bottom: 1.5px solid var(--side-border) !important;
    padding: 0 !important;
    overflow: visible !important;
    position: relative !important;
    /* NOT sticky — scrolls away so logout disappears naturally */
  }

  /* ─ Logo row: logo left, mobile-logout right ─ */
  /* ── Mobile topbar: logo + logout ── */
  body.dashboard-mode .dash-sidebar-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 16px !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    border-bottom: 1px solid var(--side-border) !important;
  }

  body.dashboard-mode .dash-sidebar-top>*:first-child,
  body.dashboard-mode .dash-brand {
    min-width: 0 !important;
  }

  body.dashboard-mode .dash-logo {
    display: block !important;
    height: 24px !important;
    width: auto !important;
    max-width: calc(100vw - 150px) !important;
    object-fit: contain !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  /* Mobile logout button — must never be clipped */
  body.dashboard-mode .dash-logout-mobile,
  body.dashboard-mode #btn-logout-mobile {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    padding: 6px 11px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    height: auto !important;
    min-height: unset !important;
    letter-spacing: .1px !important;
    white-space: nowrap !important;
    overflow: visible !important;
    margin-right: 0 !important;
    background: rgba(217, 48, 37, .06) !important;
    border: 1.5px solid rgba(217, 48, 37, .25) !important;
    color: var(--danger) !important;
    box-shadow: none !important;
  }

  body.dashboard-mode .dash-logout-mobile:hover {
    background: rgba(217, 48, 37, .12) !important;
  }

  /* Desktop logout (dash-sidebar-bottom): hidden on mobile */
  body.dashboard-mode .dash-sidebar-bottom {
    display: none !important;
  }

  /* ─ User block: compact horizontal row ─ */
  body.dashboard-mode .dash-user {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    border-bottom: 1px solid var(--side-border) !important;
    margin-bottom: 0 !important;
  }

  body.dashboard-mode .dash-user .avatar {
    --avatar-size: 34px !important;
    border-radius: 10px !important;
    flex-shrink: 0 !important;
  }

  body.dashboard-mode .dash-user-name {
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 55vw !important;
  }

  body.dashboard-mode .dash-user-meta {
    font-size: 10px !important;
    letter-spacing: .5px !important;
    margin-top: 2px !important;
  }

  /* ─ Tabs: horizontal scrollable pill row ─ */
  body.dashboard-mode .dash-tabs {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-height: none !important;
    flex: unset !important;
    padding: 8px 12px !important;
    gap: 6px !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    border-bottom: 1.5px solid var(--side-border) !important;
  }

  body.dashboard-mode .dash-tabs::-webkit-scrollbar {
    display: none !important;
  }

  body.dashboard-mode .dash-tab {
    flex-shrink: 0 !important;
    width: auto !important;
    padding: 9px 16px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    border-bottom: none !important;
    border: 1.5px solid var(--border) !important;
    background: #fff !important;
    color: var(--muted) !important;
    letter-spacing: -.05px !important;
    transition: background .14s, border-color .14s, color .14s !important;
  }

  body.dashboard-mode .dash-tab::before {
    display: none !important;
  }

  body.dashboard-mode .dash-tab.active {
    background: var(--pastel-blue) !important;
    border-color: rgba(91, 127, 255, .40) !important;
    color: var(--pastel-blue-text) !important;
    padding-left: 16px !important;
    font-weight: 800 !important;
  }

  /* ─ Dashboard content area ─ */
  body.dashboard-mode .dash-container.container {
    padding: 18px 14px !important;
    max-width: 100% !important;
  }

  body.dashboard-mode .dashboard-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding-bottom: 16px !important;
    margin-bottom: 16px !important;
  }

  body.dashboard-mode #dashboard-title {
    font-size: 22px !important;
    letter-spacing: -.4px !important;
  }

  body.dashboard-mode .dashboard-search {
    width: 100% !important;
  }

  body.dashboard-mode #dashboard-search {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 15px !important;
  }

  /* ─ Course cards ─ */
  body.dashboard-mode #courses-grid.grid {
    gap: 10px !important;
    padding-bottom: 24px !important;
  }

  body.dashboard-mode #courses-grid .course-card,
  body.dashboard-mode #courses-grid .card {
    padding: 14px 14px !important;
    border-radius: 16px !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* Keep badge top-right even on mobile */
  body.dashboard-mode #courses-grid .course-top {
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  body.dashboard-mode #courses-grid .course-right {
    flex-shrink: 0 !important;
    width: auto !important;
    justify-content: flex-end !important;
  }

  body.dashboard-mode #courses-grid .course-title {
    font-size: 16px !important;
  }

  body.dashboard-mode #courses-grid .course-kv-value {
    font-size: 13px !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }

  body.dashboard-mode #courses-grid .course-actions {
    gap: 8px !important;
  }

  body.dashboard-mode #courses-grid .course-actions .btn {
    flex: 1 !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 13px !important;
    padding: 10px 8px !important;
  }

  /* ─ Contact card + Payment rows: stack vertically ─ */
  /* This fixes email/phone overflowing to the right */
  .row {
    grid-template-columns: 1fr !important;
    gap: 3px !important;
    padding: 10px 0 !important;
  }

  .row-k {
    font-size: 10px !important;
    letter-spacing: .8px !important;
    margin-bottom: 1px !important;
  }

  .row-v {
    font-size: 15px !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }

  /* ─ Pro-block (schedule, payment) ─ */
  .pro-block {
    padding: 14px !important;
    border-radius: 14px !important;
  }

  /* ─ Detail panel mini-tabs: horizontal scroll ─ */
  .detail-tabs {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    scrollbar-width: none !important;
    gap: 6px !important;
    padding-bottom: 4px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .detail-tabs::-webkit-scrollbar {
    display: none !important;
  }

  .mini-tab {
    flex-shrink: 0 !important;
    font-size: 12px !important;
    padding: 8px 12px !important;
    white-space: nowrap !important;
  }

  /* ─ NR textareas ─ */
  .nr-textarea {
    font-size: 15px !important;
    min-height: 110px !important;
  }

  /* ─ Course mode (sidebar→overlay, viewer fills screen) ─ */
  body.course-mode #view-course.view {
    height: auto !important;
    min-height: 100vh;
  }

  body.course-mode .course-layout {
    display: block !important;
    grid-template-columns: unset !important;
    height: 100vh !important;
    min-height: 100vh !important;
  }

  body.course-mode .sidebar {
    height: auto !important;
    overflow: visible !important;
    border-right: 0 !important;
    border-bottom: 1.5px solid var(--side-border) !important;
  }

  body.course-mode .sidebar-bottom {
    order: 5;
    border-bottom: 1px solid var(--side-border);
    border-top: none;
    height: 52px;
  }

  body.course-mode .sidebar-top {
    order: 1;
    margin: 12px 12px 0 !important;
    padding: 14px 14px !important;
  }

  body.course-mode .sidebar-actions {
    order: 2;
    padding: 12px 12px 0 !important;
  }

  body.course-mode .sidebar-tabs {
    order: 3;
  }

  body.course-mode .sidebar-top .avatar {
    --avatar-size: 44px;
  }

  body.course-mode .sidebar-user .sidebar-name {
    font-size: 14px !important;
  }

  body.course-mode .sidebar-user .sidebar-meta {
    font-size: 10px !important;
  }

  body.course-mode #btn-meet {
    min-height: 58px !important;
    text-indent: 0 !important;
    /* reset indent — use flex gap instead */
    padding: 0 18px 0 58px !important;
    /* left padding reserves space for icon */
    justify-content: flex-start !important;
  }

  body.course-mode #btn-meet::before {
    left: 12px !important;
    /* keep icon anchored to left padding area */
  }

  body.course-mode .sidebar-tabs {
    overflow: visible !important;
    max-height: none !important;
    padding-top: 4px !important;
    gap: 0 !important;
  }

  body.course-mode .tab-btn {
    padding: 16px 16px 16px 20px !important;
    font-size: 14px !important;
  }

  body.course-mode #btn-back-dashboard {
    font-size: 13px !important;
  }

  body.course-mode #btn-sidebar-toggle {
    width: 52px !important;
    height: 52px !important;
  }

  body.course-mode .viewer {
    height: 100vh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.course-mode .viewer-body {
    height: 100% !important;
  }

  body.course-mode .viewer-iframe {
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    display: block !important;
  }

  /* ── Mobile collapsed sidebar: hide all sidebar content, show only a floating toggle ── */
  body.course-mode .course-layout.sidebar-collapsed {
    grid-template-columns: 1fr !important;
    display: block !important;
  }

  body.course-mode .course-layout.sidebar-collapsed .sidebar {
    /* FIX: collapse to zero size so no children bleed into viewer */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 0 !important;
    height: 0 !important;
    border: none !important;
    background: transparent !important;
    z-index: 9999 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  body.course-mode .course-layout.sidebar-collapsed .sidebar-top,
  body.course-mode .course-layout.sidebar-collapsed .sidebar-actions,
  body.course-mode .course-layout.sidebar-collapsed .sidebar-tabs,
  body.course-mode .course-layout.sidebar-collapsed #btn-back-dashboard {
    display: none !important;
  }

  body.course-mode .course-layout.sidebar-collapsed .sidebar-bottom {
    /* FIX: escape the 0-size sidebar container, float freely top-left */
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    order: unset !important;
    border: none !important;
    background: transparent !important;
    height: auto !important;
    width: auto !important;
    padding: 8px !important;
    pointer-events: all !important;
    z-index: 10000 !important;
    overflow: visible !important;
  }

  body.course-mode .course-layout.sidebar-collapsed #btn-sidebar-toggle {
    border-radius: 12px !important;
    box-shadow: 0 2px 12px rgba(66, 85, 255, .35) !important;
    border: 1.5px solid rgba(66, 85, 255, .25) !important;
    pointer-events: all !important;
    position: relative !important;
    z-index: 10000 !important;
  }

  body.course-mode .course-layout.sidebar-collapsed .viewer {
    height: 100vh !important;
    min-height: 0 !important;
  }

  /* KEY FIX: disable iframe touch-capture when collapsed so toggle button works */
  body.course-mode .course-layout.sidebar-collapsed .viewer-iframe {
    pointer-events: none !important;
  }

  /* ── Mobile expanded sidebar: full viewport overlay ── */
  body.course-mode .course-layout:not(.sidebar-collapsed) {
    display: block !important;
  }

  body.course-mode .course-layout:not(.sidebar-collapsed) .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    z-index: 300 !important;
    overflow-y: auto !important;
    background: var(--side-bg) !important;
    border-bottom: 1.5px solid var(--side-border) !important;
    /* Smooth slide-in from top */
    animation: sidebarSlideIn .22s cubic-bezier(.4, 0, .2, 1) both;
  }

  body.course-mode .course-layout:not(.sidebar-collapsed) .viewer {
    /* viewer stays underneath */
    height: 100vh !important;
    min-height: 0 !important;
  }

  /* ── Auto-collapse: transient class added by JS after tab tap ── */
  body.course-mode .course-layout.sidebar-collapsing .sidebar {
    animation: sidebarSlideOut .2s cubic-bezier(.4, 0, .2, 1) both !important;
    pointer-events: none !important;
  }
}

/* Sidebar open/close animations (used in mobile course mode) */
@keyframes sidebarSlideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

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

@keyframes sidebarSlideOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* ─ Extra small phones (≤420px) ─ */
@media (max-width: 420px) {
  body.course-mode .sidebar-top {
    margin: 10px 10px 0 !important;
  }

  body.course-mode .tab-btn {
    padding: 15px 14px 15px 18px !important;
  }

  body.course-mode .viewer {
    height: 100vh !important;
  }

  body.dashboard-mode .dash-user-name {
    max-width: 44vw !important;
  }

  body.dashboard-mode #courses-grid .course-actions .btn {
    font-size: 12px !important;
    padding: 9px 6px !important;
  }
}


/* Badge (dashboard course card) */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .2px;
  border: 1px solid var(--border);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
}

/* Variants */
.badge--paid {
  background: #c8f5db;
  border-color: #22a85a;
  color: #0a4a22;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(34, 168, 90, .25);
}

.badge--due {
  background: #fff3cd;
  border-color: #e09000;
  color: #6b3d00;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(224, 144, 0, .20);
}

.badge--overdue {
  background: #ffe0e0;
  border-color: #d42020;
  color: #7a0000;
  font-weight: 800;
  box-shadow: 0 2px 10px rgba(212, 32, 32, .30);
  animation: payShake 6s ease-in-out infinite;
  animation-delay: 2s;
}

.badge--unpaid {
  background: #ffd6d6;
  border-color: #c81010;
  color: #6b0000;
  font-weight: 800;
  box-shadow: 0 2px 10px rgba(200, 16, 16, .25);
  animation: payShake 7s ease-in-out infinite;
  animation-delay: 3s;
}

.badge--info {
  background: #e8e8f0;
  border-color: #9090b0;
  color: #303050;
  font-weight: 700;
}

@keyframes payShake {

  0%,
  88%,
  100% {
    transform: translateX(0);
  }

  90% {
    transform: translateX(-4px);
  }

  92% {
    transform: translateX(4px);
  }

  94% {
    transform: translateX(-3px);
  }

  96% {
    transform: translateX(3px);
  }

  98% {
    transform: translateX(-1px);
  }
}

/* Detail mini-tabs (inside Detail panel) — see primary block above */

/* Keep progress bar visible on course cards */
.course-card {
  position: relative;
  overflow: hidden;
}




/* =========================================================
   CONTINUE MODULE — embedded in Dashboard Detail (Payment tab)
   Targets: .cont-wrap and children from module.continue.js
   ========================================================= */

/* outer wrapper: make it look like a premium embedded widget */
.course-detail .cont-wrap {
  margin-top: 12px;
  border: 1.5px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(66, 85, 255, .04) 0%, rgba(66, 85, 255, 0) 48%);
  padding: 22px 22px 18px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
}

/* header */
.course-detail .cont-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1.5px solid var(--border);
}

.course-detail .cont-title {
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -.5px;
  color: var(--text);
  line-height: 1.2;
}

.course-detail .cont-sub {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0;
}

/* info card (Course, Full name, Schedule) */
.course-detail .cont-card {
  border: 1.5px solid var(--border);
  border-radius: 16px;
  background: #fff;
  padding: 6px 18px 2px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .04);
}

.course-detail .cont-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid rgba(227, 230, 240, .8);
}

.course-detail .cont-row:last-child {
  border-bottom: 0;
}

.course-detail .cont-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: var(--muted);
}

.course-detail .cont-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  min-width: 0;
  letter-spacing: -.15px;
}

.course-detail .cont-mono {
  font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 14px;
  font-weight: 500;
  color: #2b2f44;
  line-height: 1.6;
  white-space: pre-wrap;
}

/* stepper */
.course-detail .cont-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.course-detail .cont-step {
  border: 1.5px solid var(--border);
  border-radius: 16px;
  background: #fff;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
  cursor: default;
}

.course-detail .cont-step:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(66, 85, 255, .1);
  border-color: rgba(66, 85, 255, .24);
}

.course-detail .step-dot {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 13px;
  color: var(--muted);
  background: var(--bg);
  flex-shrink: 0;
  transition: background .14s ease, border-color .14s ease, color .14s ease,
    box-shadow .14s ease;
}

.course-detail .step-title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -.1px;
  color: var(--text);
  line-height: 1.3;
}

/* active/done states */
.course-detail .cont-step.is-active {
  border-color: rgba(66, 85, 255, .32);
  background: rgba(66, 85, 255, .02);
  box-shadow: 0 0 0 3px var(--accent-soft), 0 10px 24px rgba(66, 85, 255, .1);
}

.course-detail .cont-step.is-active .step-dot {
  background: var(--accent-soft);
  border-color: var(--accent);
  border-width: 2px;
  color: var(--accent);
  box-shadow: 0 0 0 3px rgba(66, 85, 255, .15);
}

.course-detail .cont-step.is-done {
  border-color: rgba(0, 185, 130, .3);
  background: rgba(0, 185, 130, .02);
}

.course-detail .cont-step.is-done .step-dot {
  background: rgba(0, 185, 130, .12);
  border-color: rgba(0, 185, 130, .5);
  border-width: 2px;
  color: #0a7f5a;
  /* subtle green glow ring */
  box-shadow: 0 0 0 3px rgba(0, 185, 130, .14);
}

/* actions row */
.course-detail .cont-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.course-detail .cont-btn {
  flex: 1;
  justify-content: center;
  padding: 13px 18px;
  font-size: 15px;
  font-weight: 800;
  min-width: 140px;
}

/* "Leave as is" — ghost with subtle green affirmation ring */
.course-detail .cont-ghost {
  background: #fff;
  border-color: rgba(0, 185, 130, .35);
  color: #0a7f5a;
  font-weight: 800;
  box-shadow: 0 0 0 2px rgba(0, 185, 130, .1);
  transition: background .14s ease, border-color .14s ease,
    box-shadow .14s ease, transform .1s ease;
}

.course-detail .cont-ghost:hover {
  background: rgba(0, 185, 130, .05);
  border-color: rgba(0, 185, 130, .5);
  box-shadow: 0 0 0 3px rgba(0, 185, 130, .14), 0 8px 20px rgba(0, 185, 130, .1);
  transform: translateY(-1px);
}

/* "Needs changing" — reddish tint */
.course-detail .cont-change-btn,
.course-detail .cont-btn.is-change {
  background: rgba(217, 48, 37, .06);
  border-color: rgba(217, 48, 37, .35);
  color: var(--danger);
  box-shadow: 0 0 0 2px rgba(217, 48, 37, .08);
  transition: background .14s ease, border-color .14s ease,
    box-shadow .14s ease, transform .1s ease;
}

.course-detail .cont-change-btn:hover,
.course-detail .cont-btn.is-change:hover {
  background: rgba(217, 48, 37, .1);
  border-color: rgba(217, 48, 37, .5);
  box-shadow: 0 0 0 3px rgba(217, 48, 37, .1), 0 8px 20px rgba(217, 48, 37, .1);
  transform: translateY(-1px);
}

/* inner blocks */
.course-detail .cont-change,
.course-detail .cont-outline,
.course-detail .cont-send {
  margin-top: 12px;
}

/* zipper card (the inner form box) */
.course-detail .cont-zip {
  border: 1.5px solid var(--border);
  border-radius: 16px;
  background: #fff;
  padding: 16px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .04);
}

.course-detail .zip-title {
  font-weight: 900;
  font-size: 17px;
  letter-spacing: -.3px;
  margin-bottom: 6px;
  color: var(--text);
}

.course-detail .zip-hint {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.6;
  margin-bottom: 14px;
}

/* pickers row */
.course-detail .zip-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.course-detail .zip-day,
.course-detail .zip-time {
  appearance: none;
  -webkit-appearance: none;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 11px 12px;
  background: #fff;
  font-weight: 700;
  color: var(--text);
  font-family: inherit;
  min-width: 140px;
  transition: border-color .14s ease, box-shadow .14s ease;
}

.course-detail .zip-day:focus,
.course-detail .zip-time:focus {
  outline: none;
  border-color: rgba(66, 85, 255, .55);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

/* add button */
.course-detail .zip-add {
  padding: 11px 14px;
  border-radius: 12px;
  font-weight: 900;
}

/* slots */
.course-detail .zip-slots {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0 12px;
}

.course-detail .zip-empty {
  color: var(--muted);
  font-weight: 600;
  font-size: 14px;
  padding: 10px 0;
}

.course-detail .zip-slot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1.5px solid rgba(66, 85, 255, .18);
  background: rgba(66, 85, 255, .06);
  border-radius: 14px;
  padding: 10px 12px;
}

.course-detail .zip-pill {
  font-weight: 900;
  font-size: 13px;
  letter-spacing: -.1px;
  color: var(--text);
}

.course-detail .zip-x {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1.5px solid rgba(217, 48, 37, .22);
  background: rgba(217, 48, 37, .06);
  color: var(--danger);
  font-weight: 900;
  cursor: pointer;
  transition: background .14s ease, transform .08s ease, box-shadow .14s ease;
}

.course-detail .zip-x:hover {
  background: rgba(217, 48, 37, .1);
  box-shadow: 0 8px 18px rgba(217, 48, 37, .12);
}

.course-detail .zip-x:active {
  transform: translateY(1px);
}

/* checkbox row — big, animated, blue border */
.course-detail .zip-check {
  display: flex;
  gap: 12px;
  align-items: center;
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  margin-top: 12px;
  cursor: pointer;
  user-select: none;
}

/* Hide native, replace with custom */
.course-detail .zip-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  min-width: 22px;
  border: 2px solid var(--border);
  border-radius: 7px;
  background: #fff;
  cursor: pointer;
  position: relative;
  transition:
    border-color .15s ease,
    background .15s ease,
    box-shadow .15s ease,
    transform .12s cubic-bezier(.34, 1.56, .64, 1);
}

.course-detail .zip-check input[type="checkbox"]:hover {
  border-color: rgba(66, 85, 255, .5);
  box-shadow: 0 0 0 4px rgba(66, 85, 255, .08);
}

.course-detail .zip-check input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(66, 85, 255, .18);
  transform: scale(1.08);
}

/* Checkmark via pseudo */
.course-detail .zip-check input[type="checkbox"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7 6 10.5 11.5 4' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
  opacity: 0;
  transition: opacity .14s ease;
}

.course-detail .zip-check input[type="checkbox"]:checked::after {
  opacity: 1;
}

/* notes */
.course-detail .cont-notes {
  margin-top: 12px;
}

.course-detail .zip-notes {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 12px 12px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  resize: vertical;
  min-height: 92px;
  transition: border-color .14s ease, box-shadow .14s ease;
}

.course-detail .zip-notes:focus {
  outline: none;
  border-color: rgba(66, 85, 255, .55);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

/* next button — primary, prominent */
.course-detail .cont-next {
  margin-top: 16px;
  width: 100%;
  justify-content: center;
  padding: 14px 20px;
  font-weight: 900;
  font-size: 15px;
  letter-spacing: -.1px;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(66, 85, 255, .2);
  transition: box-shadow .14s ease, transform .1s ease, background .14s ease;
}

.course-detail .cont-next:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(66, 85, 255, .28);
}

.course-detail .cont-next:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(66, 85, 255, .18);
}

/* status / ok / bad */
.course-detail .cont-status {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  font-weight: 800;
  font-size: 14px;
  border: 1.5px solid var(--border);
  background: #fff;
}

.course-detail .cont-status.cont-ok {
  border-color: rgba(0, 201, 142, .3);
  background: rgba(0, 201, 142, .08);
  color: #0a7f5a;
}

.course-detail .cont-status.cont-bad {
  border-color: rgba(217, 48, 37, .28);
  background: rgba(217, 48, 37, .07);
  color: var(--danger);
}

/* toast */
.course-detail .cont-toast {
  position: sticky;
  bottom: 0;
  margin-top: 12px;
  background: rgba(26, 29, 40, .93);
  color: #fff;
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 800;
  font-size: 13px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
}

.course-detail .cont-toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* bump animation (when adding slots) */
.course-detail .zip-bump {
  animation: zipBump 240ms cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes zipBump {
  0% {
    transform: scale(1);
  }

  60% {
    transform: scale(1.015);
  }

  100% {
    transform: scale(1);
  }
}

/* responsive inside detail */
@media (max-width: 720px) {
  .course-detail .cont-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .course-detail .cont-steps {
    grid-template-columns: 1fr;
  }

  .course-detail .zip-day,
  .course-detail .zip-time {
    min-width: 0;
    width: 100%;
  }

  .course-detail .zip-row {
    width: 100%;
  }

  .course-detail .zip-add {
    width: 100%;
    justify-content: center;
  }

  .course-detail .cont-actions {
    flex-direction: column;
  }
}




/* =========================================================
   ATTENDANCE MODULE — course card view
   All styles for module_attendance.js (.att-* classes).
   Single consolidated block — do not add att-* rules elsewhere.
   HR panel attendance is separate (#hr-panel .hr-att-*).
   ========================================================= */

/* ── Card shell ──────────────────────────────────────────── */
.att-card {
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 14px;
  max-width: 100%;
}

/* ── Header: title + month nav ───────────────────────────── */
.att-head {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.att-head-left {
  flex: 1 1 100%;
  min-width: 0;
}

.att-title {
  font-weight: 800;
  font-size: 16px;
}

.att-sub {
  font-size: 13px;
  margin-top: 2px;
}

.att-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 auto;
  max-width: 100%;
  justify-content: flex-start;
}

.att-month {
  font-weight: 700;
  min-width: 0;
  max-width: 180px;
  text-align: center;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(0, 0, 0, .03);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.att-nav-btn {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.att-nav-btn:disabled {
  opacity: .45;
  cursor: default;
}

/* ── Summary tiles ───────────────────────────────────────── */
.att-summary {
  margin: 14px 0 6px;
}

.att-sum-wrap {
  border: 1.5px solid var(--border);
  background: #fff;
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
}

.att-sum-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.att-sum-tile {
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, .02);
  border-radius: 14px;
  padding: 10px 12px;
  overflow: hidden;
}

.att-sum-num {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--text);
}

.att-sum-label {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3px;
  color: var(--muted);
}

.att-sum-list {
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

.att-sum-list-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.att-sum-lines {
  display: grid;
  gap: 8px;
}

.att-sum-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
}

.att-sum-name {
  font-weight: 700;
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.att-sum-metric {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  flex-shrink: 0;
}

.att-sum-fraction {
  font-weight: 800;
  color: var(--text);
}

.att-sum-percent {
  font-weight: 800;
  color: var(--muted);
}

/* ── Actions bar (confirm & lock) ────────────────────────── */
.att-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 10px 0 14px;
  padding: 10px 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(6px);
}

.att-actions .att-dirty {
  font-size: 13px;
  font-weight: 600;
}

.att-confirm.is-saving {
  opacity: .75;
  pointer-events: none;
}

.att-actions-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  margin: 10px 0 0;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  background: #fff;
}

.att-actions-left {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.att-actions-label {
  font-size: 12px;
  opacity: .7;
}

.att-actions-count {
  font-weight: 700;
}

.att-confirm-btn {
  border-radius: 10px !important;
  padding: 10px 14px !important;
}

.att-lock-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  font-size: 14px;
  line-height: 1;
  opacity: 0.75;
  user-select: none;
}

/* ── Table ───────────────────────────────────────────────── */
.att-table-wrap {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  background: #fff;
}

.att-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
  min-width: 520px;
  table-layout: fixed;
}

.att-table thead th {
  position: sticky;
  top: 0;
  background: #fbfbff;
  z-index: 2;
  border-bottom: 1px solid var(--border);
}

.att-th {
  padding: 12px 16px;
  font-weight: 900;
  text-align: center;
  white-space: nowrap;
}

.att-th.att-student {
  text-align: left;
  padding: 12px 12px;
  width: 200px;
  min-width: 200px;
  position: sticky;
  left: 0;
  z-index: 3;
  background: #fbfbff;
}

.att-td {
  padding: 10px 16px;
  border-bottom: 1px solid rgba(227, 230, 240, .7);
  text-align: center;
}

.att-td.att-student {
  text-align: left;
  padding: 12px 12px;
  width: 200px;
  min-width: 200px;
  position: sticky;
  left: 0;
  background: #fff;
  z-index: 1;
}

.att-cell {
  padding: 10px 16px;
  text-align: center;
}

.att-name {
  font-weight: 800;
}

.att-mini {
  font-size: 12px;
  margin-top: 2px;
}

/* ── Checkbox ────────────────────────────────────────────── */
.att-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.att-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.att-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: #fff;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease;
}

.att-check:not(.is-disabled):hover .att-box {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .08);
  border-color: #c0c5e0;
}

.att-check input:checked+.att-box {
  border-color: rgba(60, 207, 207, .85);
  background: rgba(60, 207, 207, .10);
  box-shadow: 0 0 0 2px rgba(60, 207, 207, .22) inset;
}

.att-check input:checked+.att-box::after {
  content: "\2713";
  font-weight: 900;
  font-size: 18px;
  color: rgb(20, 170, 170);
}

.att-check.is-disabled {
  opacity: .55;
  cursor: not-allowed;
}

.att-check.is-saving .att-box {
  opacity: .7;
}

/* ── Lock state ──────────────────────────────────────────── */
.att-check.is-locked {
  opacity: .9;
}

.att-check.is-locked .att-lock {
  display: inline-flex;
}

.att-lock {
  display: none;
  margin-left: 6px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(0, 0, 0, 0.04);
}

.att-check.is-disabled input[disabled]+.att-box {
  opacity: .55;
}

.att-check.is-locked input[disabled]+.att-box {
  opacity: .7;
}

/* ── Admin reset button ──────────────────────────────────── */
.att-check .att-reset {
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 12px;
  line-height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, .25);
  background: transparent;
  cursor: pointer;
}

.att-check .att-reset:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.att-reset-btn {
  margin-left: 8px;
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 12px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  background: #fff;
}

.att-reset-btn:hover {
  filter: brightness(0.98);
}

/* ── Desktop vs mobile row visibility ────────────────────── */
.att-row.att-mobile {
  display: none;
}

.att-row.att-desktop {
  display: table-row;
}

/* ── Misc ────────────────────────────────────────────────── */
.att-mright {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .att-sum-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .att-actions {
    position: sticky;
    top: 10px;
    z-index: 5;
    flex-direction: column;
    align-items: stretch;
  }

  .att-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .att-actions-bar {
    position: sticky;
    top: 0;
    z-index: 5;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .att-actions-left {
    justify-content: space-between;
  }

  .att-actions-bar .att-confirm-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 720px) {
  .att-row.att-desktop {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  .att-row.att-mobile {
    display: block !important;
  }

  .att-td.att-mobile-td {
    padding: 8px 4px !important;
    background: transparent !important;
  }

  .att-mcard {
    background: var(--panel, #fff);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
    width: 100%;
    box-sizing: border-box;
  }

  .att-mhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
  }

  .att-mhead .att-name {
    font-weight: 800;
    font-size: 14px;
  }

  .att-mhead .att-mini {
    font-size: 11px;
    margin-top: 2px;
  }

  .att-mlist {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
  }

  .att-mitem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 2px;
    border-bottom: 1px solid rgba(227, 230, 240, .6);
    width: 100%;
  }

  .att-mitem:last-child {
    border-bottom: none;
  }

  .att-mdate {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    flex: 1 1 auto;
  }

  .att-mitem .att-check {
    flex: 0 0 auto;
    margin-left: 12px;
  }

  .att-table-wrap {
    overflow: visible !important;
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .att-table {
    min-width: 0 !important;
    width: 100% !important;
    display: block !important;
  }

  .att-table thead {
    display: none !important;
  }

  .att-table tbody {
    display: block !important;
    width: 100% !important;
  }

  .att-nav {
    width: 100%;
    justify-content: space-between;
  }

  .att-check .att-reset {
    padding: 4px 10px;
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .att-sum-line {
    flex-wrap: wrap;
    gap: 4px;
  }

  .att-sum-name {
    flex: 1 1 100%;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .att-sum-metric {
    flex-shrink: 1;
  }
}

@media (max-width: 420px) {
  .att-sum-tiles {
    grid-template-columns: 1fr;
  }
}




/* =========================================================
   Needs + Report module (Detail tabs)
   ========================================================= */

.nr-inline {
  margin-top: 8px;
}

.nr-stack {
  display: grid;
  gap: 12px;
}

.nr-card {
  background: var(--panel, #fff);
  border: 1px solid var(--border, #e4e6ea);
  border-radius: var(--radius, 14px);
  box-shadow: var(--shadow, 0 1px 3px rgba(0, 0, 0, .06), 0 4px 16px rgba(0, 0, 0, .04));
  padding: 14px;
}

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

.nr-title {
  font-weight: 800;
  font-size: 16px;
  color: var(--text, #0f1117);
  line-height: 1.15;
}

.nr-sub {
  margin-top: 3px;
}

.nr-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  padding: 10px 12px;
  border: 1px solid var(--border, #e4e6ea);
  border-radius: 12px;
  background: rgba(0, 0, 0, .02);
  margin-bottom: 10px;
  font-size: 13px;
}

.nr-textarea {
  width: 100%;
  min-height: 140px;
  resize: vertical;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid var(--border, #e4e6ea);
  background: #fff;
  color: var(--text, #0f1117);
  font: inherit;
  line-height: 1.45;
}

.nr-textarea:focus {
  outline: none;
  border-color: rgba(66, 85, 255, .45);
  box-shadow: 0 0 0 4px rgba(66, 85, 255, .10);
}

.nr-textarea[readonly] {
  background: rgba(0, 0, 0, .02);
}

.nr-readonly {
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid var(--border, #e4e6ea);
  background: rgba(0, 0, 0, .02);
  line-height: 1.5;
  color: var(--text, #0f1117);
  font-size: 14px;
}

.nr-hint {
  margin-top: 8px;
  font-size: 12px;
}

.nr-status {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border, #e4e6ea);
  background: rgba(0, 0, 0, .02);
  color: var(--muted, #6b7280);
  white-space: nowrap;
}

.nr-status.saving {
  background: rgba(0, 0, 0, .04);
}

.nr-status.saved {
  background: rgba(16, 185, 129, .10);
  border-color: rgba(16, 185, 129, .25);
  color: #065f46;
}

.nr-status.dirty {
  background: rgba(245, 158, 11, .10);
  border-color: rgba(245, 158, 11, .25);
  color: #7c2d12;
}

.nr-status.error {
  background: rgba(220, 38, 38, .10);
  border-color: rgba(220, 38, 38, .25);
  color: #7f1d1d;
}

@media (max-width: 700px) {
  .nr-meta {
    grid-template-columns: 1fr;
  }

  .nr-card {
    padding: 12px;
  }
}




/* =========================================================
   Announcements module — dashboard
   ========================================================= */

.ann-latest-wrap {
  margin-bottom: 14px;
}

.ann-latest-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 2px);
  box-shadow: var(--shadow);
  padding: 16px 16px 14px;
}

.ann-latest-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.ann-latest-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  letter-spacing: .2px;
}

.ann-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--brand);
  box-shadow: 0 0 0 6px rgba(66, 85, 255, .12);
}

.ann-count {
  margin-left: 8px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}

.ann-latest-title {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.15;
  margin: 2px 0 6px;
}

.ann-latest-body {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.ann-latest-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

/* badges */
.ann-badges {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ann-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .4px;
  border: 1px solid var(--border);
  background: #fff;
}

.ann-badge--type {
  border-color: rgba(66, 85, 255, .25);
  background: rgba(66, 85, 255, .08);
}

.ann-badge--lvl {
  border-color: rgba(60, 207, 207, .25);
  background: rgba(60, 207, 207, .10);
}

.ann-badge--urgent {
  border-color: rgba(220, 38, 38, .25);
  background: rgba(220, 38, 38, .10);
}

/* page */
.announcements-view {
  margin-top: 10px;
}

.ann-page {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}

.ann-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.ann-page-title {
  font-size: 20px;
  font-weight: 900;
  line-height: 1.2;
}

.ann-feed {
  display: grid;
  gap: 12px;
}

/* cards (cascading) */
.ann-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  padding: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.ann-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.ann-card-title {
  font-weight: 900;
  font-size: 16px;
  line-height: 1.2;
}

.ann-meta {
  font-size: 12px;
  margin-bottom: 10px;
}

.ann-card-body {
  font-size: 14px;
  line-height: 1.55;
}

.ann-card-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.ann-empty {
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 18px;
  text-align: center;
  background: rgba(255, 255, 255, .6);
}

.ann-empty-ico {
  font-size: 22px;
  margin-bottom: 6px;
}

.ann-empty-title {
  font-weight: 900;
  margin-bottom: 2px;
}

/* animations */
.ann-pop {
  animation: annPop .35s cubic-bezier(.2, .9, .25, 1) both;
}

.ann-cascade {
  animation: annCascade .45s cubic-bezier(.2, .9, .25, 1) both;
}

@keyframes annPop {
  from {
    transform: translateY(-6px);
    opacity: 0;
  }

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

@keyframes annCascade {
  from {
    transform: translateY(10px);
    opacity: 0;
  }

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





/* =========================================================
   LOGIN — clean, static, professional (Quizlet-like)
   No animation, no rotating borders
   Bigger inputs + better spacing
   ========================================================= */

/* Center login nicely */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  background: var(--bg);
}

/* Card */
.login-card {
  width: 100%;
  max-width: 440px;
  background: var(--panel);
  border-radius: 16px;
  padding: 32px 28px 28px;
  border: 1px solid var(--border);
  box-shadow:
    0 12px 30px rgba(0, 0, 0, .08),
    0 2px 8px rgba(0, 0, 0, .04);
}

/* Logo – smaller & professional */
.login-logo {
  display: block;
  height: 42px;
  width: auto;
  max-width: 180px;
  margin: 0 auto 18px;
  object-fit: contain;
}

/* Title & subtitle */
#view-login .h1 {
  text-align: center;
  font-size: 1.35rem;
  margin-bottom: 6px;
}

#view-login .muted {
  text-align: center;
  font-size: 0.95rem;
  margin-bottom: 22px;
}

/* Form spacing */
#login-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Inputs — taller, clearer, premium */
#view-login .input {
  height: 52px;
  /* ✅ taller */
  padding: 0 16px;
  font-size: 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
}

#view-login .input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(66, 85, 255, .12);
}

/* Login button — elegant, matches logout style */
#view-login .btn-primary {
  height: 52px;
  /* ✅ same height as inputs */
  font-size: 16px;
  font-weight: 600;
  border-radius: 12px;
  margin-top: 6px;
  box-shadow:
    0 10px 22px rgba(66, 85, 255, .18),
    0 2px 6px rgba(66, 85, 255, .10);
}

#view-login .btn-primary:hover {
  box-shadow:
    0 14px 28px rgba(66, 85, 255, .22),
    0 4px 10px rgba(66, 85, 255, .12);
}

/* Error message */
#login-error {
  margin-top: 14px;
  text-align: center;
}

/* =========================================================
   MOBILE — full width, comfortable, no tiny elements
   ========================================================= */
@media (max-width: 520px) {
  .login-wrap {
    padding: 18px 14px;
    align-items: stretch;
  }

  .login-card {
    max-width: 100%;
    padding: 28px 20px 24px;
    border-radius: 14px;
  }

  .login-logo {
    height: 36px;
    margin-bottom: 14px;
  }

  #view-login .h1 {
    font-size: 1.2rem;
  }

  #view-login .input,
  #view-login .btn-primary {
    height: 50px;
    font-size: 16px;
    /* prevents iOS zoom */
  }
}



















/* ─────────────────────────────────────────────
   OFFERS — v2.3 (Quizlet-like, big cards, clean)
   Paste at END of /css/styles.css
───────────────────────────────────────────── */

/* Base wrapper */
.offersV2 {
  padding: 18px;
  max-width: 1400px;
  margin: 0 auto;
}

/* Header */
.offersTop {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin: 6px 0 18px;
}

.offersH1 {
  font-size: 38px;
  font-weight: 950;
  letter-spacing: -0.04em;
  line-height: 1.03;
  color: #111;
}

.offersSub {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 800;
  opacity: .72;
}

.offersTopRight {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Selected pill */
.offersSelected {
  font-size: 13px;
  font-weight: 950;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.035);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.06);
}

/* Layout grid */
.offersGrid {
  display: grid;
  grid-template-columns: 1.25fr 0.85fr;
  gap: 18px;
}

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

  .offersTop {
    align-items: flex-start;
  }
}

/* Cards */
.offersCard {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.09);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.09);
  transform: translateZ(0);
}

/* Card head */
.offersCardHead {
  padding: 16px 18px 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: linear-gradient(to bottom,
      rgba(0, 0, 0, 0.03),
      rgba(0, 0, 0, 0.00));
}

.offersCardTitle {
  font-size: 18px;
  font-weight: 950;
  letter-spacing: -0.02em;
  color: #111;
}

.offersCardDesc {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 850;
  opacity: .72;
}

/* Form padding */
.offersForm {
  padding: 18px;
}

/* Labels */
.offersLabel {
  display: block;
  margin: 14px 0 8px;
  font-size: 14px;
  font-weight: 950;
  letter-spacing: -0.01em;
  color: #111;
}

.offersMini {
  font-size: 12px;
  font-weight: 950;
  opacity: .68;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* 2-column rows */
.offersRow2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

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

/* Inputs — BIG, Quizlet-like */
.offersInput {
  width: 100%;
  font-size: 17px;
  font-weight: 900;
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #fff;
  outline: none;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.07);
  transition:
    transform .12s ease,
    box-shadow .12s ease,
    border-color .12s ease,
    background .12s ease;
}

.offersInput::placeholder {
  opacity: .55;
  font-weight: 850;
}

.offersInput:focus {
  border-color: rgba(0, 0, 0, 0.22);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}

.offersInput:disabled {
  background: rgba(0, 0, 0, 0.03);
  box-shadow: none;
}

/* Textarea */
.offersTextarea {
  min-height: 130px;
  line-height: 1.35;
  resize: vertical;
}

/* Buttons — big + clean */
.offersBtnBig {
  padding: 12px 14px;
  border-radius: 16px;
  font-weight: 950;
  letter-spacing: -0.01em;
}

/* If platform has .btn styles, we just enhance hover a bit */
.offersV2 .btn {
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

.offersV2 .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.14);
}

.offersV2 .btn:active {
  transform: translateY(0px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.10);
}

/* Message / error pills */
.offersInline {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.offersErr,
.offersMsg {
  font-size: 13px;
  font-weight: 950;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.03);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.06);
}

.offersErr {
  background: rgba(255, 0, 0, 0.08);
  border-color: rgba(255, 0, 0, 0.18);
}

.offersMsg {
  background: rgba(0, 180, 90, 0.10);
  border-color: rgba(0, 180, 90, 0.18);
}

.hidden {
  display: none !important;
}

/* Segmented type */
.offersSeg {
  display: flex;
  gap: 10px;
  padding: 8px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.offersSegBtn {
  flex: 1;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.10);
  background: #fff;
  padding: 12px 12px;
  font-size: 16px;
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.07);
  transition:
    transform .12s ease,
    box-shadow .12s ease,
    border-color .12s ease,
    background .12s ease,
    color .12s ease;
}

.offersSegBtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.12);
}

.offersSegBtn.is-active {
  background: #111;
  color: #fff;
  border-color: rgba(0, 0, 0, 0.35);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.18);
}

/* Items bar */
.offersItemsBar {
  padding: 14px 18px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0));
}

.offersItemsLeft {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

/* Totals box */
.offersTotals {
  min-width: 270px;
  padding: 12px 14px;
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.10);
  background: rgba(0, 0, 0, 0.02);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
}

.offersTotalsRow {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 2px;
}

.offersTotalsRow--big {
  padding-top: 10px;
  margin-top: 6px;
  border-top: 1px solid rgba(0, 0, 0, 0.10);
}

.offersTotalsK {
  font-size: 12px;
  font-weight: 950;
  opacity: .72;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.offersTotalsV {
  font-size: 14px;
  font-weight: 950;
}

/* Tiles right side */
.offersTiles {
  padding: 14px;
  display: grid;
  gap: 12px;
}

.offersTile {
  width: 100%;
  text-align: left;
  border-radius: 22px;
  padding: 14px 14px;
  border: 1px solid rgba(0, 0, 0, 0.10);
  background: #fff;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.09);
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
  position: relative;
  overflow: hidden;
}

.offersTile::before {
  content: "";
  position: absolute;
  inset: -2px;
  opacity: 0;
  background: radial-gradient(circle at 20% 10%,
      rgba(0, 0, 0, 0.10),
      rgba(0, 0, 0, 0.00) 55%);
  transition: opacity .16s ease;
  pointer-events: none;
}

.offersTile:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.14);
}

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

.offersTile.is-selected {
  transform: translateY(-1px);
  box-shadow: 0 26px 56px rgba(0, 0, 0, 0.18);
  border-color: rgba(0, 0, 0, 0.20);
}

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

.offersTileTitle {
  font-size: 18px;
  font-weight: 950;
  letter-spacing: -0.02em;
}

.offersTileId {
  font-size: 12px;
  font-weight: 950;
  opacity: .60;
}

.offersTileMeta {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 900;
  opacity: .72;
}

/* Status glow */
.offers-status-pending {
  border-color: rgba(255, 170, 0, 0.40);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.09),
    0 0 0 4px rgba(255, 170, 0, 0.10);
}

.offers-status-approved {
  border-color: rgba(0, 180, 90, 0.42);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.09),
    0 0 0 4px rgba(0, 180, 90, 0.10);
}

.offers-status-stopped {
  border-color: rgba(120, 120, 120, 0.35);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.09),
    0 0 0 4px rgba(120, 120, 120, 0.10);
}

/* Weekly slots */
.offersSlots {
  display: grid;
  gap: 12px;
  margin-top: 8px;
}

.offersSlot {
  display: grid;
  grid-template-columns: 0.9fr 1fr 0.9fr auto;
  gap: 12px;
  align-items: end;
  padding: 14px;
  border-radius: 22px;
  border: 1px solid rgba(0, 0, 0, 0.10);
  background: rgba(0, 0, 0, 0.02);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.07);
}

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

.offersActiveWrap {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Empty placeholder */
.offersEmpty {
  margin: 16px;
  padding: 14px;
  border-radius: 18px;
  border: 1px dashed rgba(0, 0, 0, 0.18);
  background: rgba(0, 0, 0, 0.02);
  font-weight: 900;
  opacity: .75;
}

/* Items wrap */
.offersItems {
  padding: 16px 16px 18px;
  display: grid;
  gap: 12px;
}

/* Item card */
.offersItemCard {
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.09);
  padding: 14px;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.offersItemCard:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.14);
  border-color: rgba(0, 0, 0, 0.16);
}

/* Grid inside item */
.offersItemGrid {
  display: grid;
  grid-template-columns: 1fr 1fr 0.8fr 1fr 0.8fr 1.6fr 0.95fr;
  gap: 12px;
  align-items: end;
}

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

  .offersItemNote {
    grid-column: 1 / -1;
  }
}

/* Right column */
.offersItemRight {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}

/* Price chip */
.offersPriceChip {
  font-size: 16px;
  font-weight: 1000;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.10);
  min-width: 120px;
  text-align: center;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.07);
}

/* Remove X button */
.offersX {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  background: rgba(0, 0, 0, 0.03);
  cursor: pointer;
  font-size: 20px;
  font-weight: 1000;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}

.offersX:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.14);
  background: rgba(255, 0, 0, 0.10);
  border-color: rgba(255, 0, 0, 0.22);
}

.offersX:active {
  transform: translateY(0px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.10);
}

/* Tighten select a bit (looks like input) */
.offersV2 select.offersInput {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(0, 0, 0, 0.55) 50%),
    linear-gradient(135deg, rgba(0, 0, 0, 0.55) 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 20px) calc(50% - 3px),
    calc(100% - 14px) calc(50% - 3px),
    100% 0;
  background-size: 6px 6px, 6px 6px, 2.5em 2.5em;
  background-repeat: no-repeat;
  padding-right: 44px;
}

/* Mobile padding adjustments */
@media (max-width: 560px) {
  .offersV2 {
    padding: 12px;
  }

  .offersH1 {
    font-size: 32px;
  }

  .offersCardHead {
    padding: 14px 14px 12px;
  }

  .offersForm {
    padding: 14px;
  }

  .offersItems {
    padding: 12px;
  }
}







/* ─────────────────────────────────────────────
   OFFERS (Admin) — module.offers.js / module.offer.js
   NOTE: isolated class names to avoid collisions
   ───────────────────────────────────────────── */

.offers-view {
  padding: 0;
}

.offersV2 {
  padding: 18px;
}

.offersTop {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.offersH1 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.offersSub {
  margin-top: 4px;
  font-size: 13px;
  opacity: 0.7;
}

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

.offersSelected {
  font-size: 12px;
  padding: 8px 10px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
}

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

.offersCard {
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.85);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

.offersCardHead {
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.offersCardTitle {
  font-weight: 800;
  letter-spacing: -0.01em;
}

.offersCardDesc {
  margin-top: 3px;
  font-size: 12px;
  opacity: 0.72;
}

.offersForm {
  padding: 14px;
}

.offersLabel {
  font-size: 12px;
  font-weight: 700;
  margin: 10px 0 6px;
  opacity: 0.85;
}

.offersMini {
  font-size: 11px;
  font-weight: 700;
  margin: 6px 0 6px;
  opacity: 0.7;
}

.offersRow2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.offersInput {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  outline: none;
  transition: box-shadow .15s ease, border-color .15s ease;
}

.offersInput:focus {
  border-color: rgba(0, 0, 0, 0.25);
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.06);
}

.offersTextarea {
  min-height: 92px;
  resize: vertical;
  line-height: 1.35;
}

.offersSeg {
  display: inline-flex;
  gap: 8px;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.10);
  background: rgba(255, 255, 255, 0.75);
}

.offersSegBtn {
  border: 0;
  background: transparent;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  opacity: 0.75;
}

.offersSegBtn.is-active {
  background: rgba(0, 0, 0, 0.88);
  color: #fff;
  opacity: 1;
}

.offersBtnBig {
  padding: 10px 14px !important;
  border-radius: 12px !important;
}

.offersActionsRow {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.offersInline {
  flex: 1;
  min-width: 220px;
}

.offersErr,
.offersMsg {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.35;
}

.offersErr {
  border: 1px solid rgba(220, 38, 38, 0.25);
  background: rgba(220, 38, 38, 0.07);
}

.offersMsg {
  border: 1px solid rgba(16, 185, 129, 0.25);
  background: rgba(16, 185, 129, 0.07);
}

.offersItemsBar {
  padding: 12px 14px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.offersItemsLeft {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.offersTotals {
  display: grid;
  grid-auto-flow: row;
  gap: 6px;
  min-width: 220px;
}

.offersTotalsRow {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
}

.offersTotalsK {
  opacity: 0.7;
  font-weight: 700;
}

.offersTotalsV {
  font-weight: 900;
}

.offersTotalsRow--big .offersTotalsV {
  font-size: 14px;
}

.offersSlots {
  display: grid;
  gap: 10px;
}

.offersSlot {
  display: grid;
  grid-template-columns: 1.1fr 1.2fr 1fr auto;
  gap: 8px;
  align-items: end;
  padding: 10px;
  border: 1px dashed rgba(0, 0, 0, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.65);
}

.offersX {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.10);
  background: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.offersItems {
  padding: 14px;
}

.offersEmpty {
  padding: 14px;
  border: 1px dashed rgba(0, 0, 0, 0.12);
  border-radius: 14px;
  opacity: 0.75;
  background: rgba(255, 255, 255, 0.6);
}

.offersItemsHead {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr 0.7fr 0.9fr 0.7fr 1.5fr 44px;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  opacity: 0.65;
  padding: 0 2px 8px;
}

.offersItemRow {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr 0.7fr 0.9fr 0.7fr 1.5fr 44px;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.offersTiles {
  padding: 14px;
  display: grid;
  gap: 10px;
}

.offersTile {
  width: 100%;
  text-align: left;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.86);
  border-radius: 16px;
  padding: 12px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.offersTile:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.06);
}

.offersTile.is-selected {
  border-color: rgba(0, 0, 0, 0.22);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.09);
}

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

.offersTileTitle {
  font-weight: 900;
  letter-spacing: -0.01em;
}

.offersTileId {
  font-size: 11px;
  opacity: 0.7;
  font-weight: 800;
}

.offersTileMeta {
  margin-top: 6px;
  font-size: 12px;
  opacity: 0.75;
}

/* status glow */
.offers-status-pending {
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.25);
}

.offers-status-approved {
  box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.25);
}

.offers-status-stopped {
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.25);
}

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

  .offersTotals {
    min-width: 0;
  }

  .offersItemsHead,
  .offersItemRow {
    grid-template-columns: 1fr 0.9fr 0.7fr 0.9fr 0.7fr 1fr 44px;
  }
}

@media (max-width: 560px) {
  .offersItemsHead {
    display: none;
  }

  .offersItemRow {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
    gap: 8px;
  }

  .offersItemRow .offersX {
    grid-column: 2 / 3;
    justify-self: end;
  }

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



/* ─────────────────────────────────────────────
   Offer status badges (append to styles.css)
───────────────────────────────────────────── */
.offers-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  vertical-align: middle;
  margin-right: 4px;
}

.offers-badge--pending {
  background: #fef3c7;
  color: #92400e;
}

.offers-badge--approved {
  background: #d1fae5;
  color: #065f46;
}

.offers-badge--stopped {
  background: #fee2e2;
  color: #991b1b;
}

/* Status tint on the tile itself */
.offersTile.offers-status-approved {
  border-left: 3px solid #10b981;
}

.offersTile.offers-status-stopped {
  border-left: 3px solid #ef4444;
}

.offersTile.offers-status-pending {
  border-left: 3px solid #f59e0b;
}

/* ─────────────────────────────────────────────
   Payment Plan card
───────────────────────────────────────────── */
.offersPaymentPlan {
  padding: 4px 0;
}

.offersPayControls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.offersPayTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.offersPayHead,
.offersPayRow {
  display: grid;
  grid-template-columns: 32px 1fr 90px 100px;
  gap: 0;
  padding: 7px 8px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  align-items: center;
}

.offersPayHead {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted, #6b7280);
  border-bottom: 2px solid var(--border, #e5e7eb);
}

.offersPayRow:hover {
  background: var(--hover, #f9fafb);
}

.offersPayRowTotal {
  border-top: 2px solid var(--border, #e5e7eb);
  border-bottom: none;
  font-weight: 600;
}

.offersPayNum {
  color: var(--muted, #9ca3af);
  font-size: 12px;
}

.offersPayAmt {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.offersPaySubTitle {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted, #6b7280);
}



/* =========================================================
   ILLUMINATION ANIMATIONS
   ========================================================= */

/* ── Vertical border zap: smooth ease in/out, 2 passes ── */
@keyframes borderZap {
  0% {
    top: -22%;
    opacity: 0;
    filter: blur(3px);
  }

  6% {
    opacity: .9;
    filter: blur(1.5px);
  }

  44% {
    opacity: .75;
    filter: blur(1.5px);
  }

  50% {
    top: 115%;
    opacity: 0;
    filter: blur(4px);
  }

  51% {
    top: -22%;
    opacity: 0;
    filter: blur(3px);
  }

  57% {
    opacity: .9;
    filter: blur(1.5px);
  }

  94% {
    opacity: .75;
    filter: blur(1.5px);
  }

  100% {
    top: 115%;
    opacity: 0;
    filter: blur(4px);
  }
}

/* ── Meet button: slim diagonal gloss sweep ── */
@keyframes meetGloss {
  0% {
    transform: translateX(-140%) skewX(-18deg);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    transform: translateX(220%) skewX(-18deg);
    opacity: 0;
  }
}

/* ── Logout: very faint warm sweep ── */
@keyframes logoutGloss {
  0% {
    transform: translateX(-140%) skewX(-18deg);
    opacity: 0;
  }

  12% {
    opacity: 1;
  }

  88% {
    opacity: 1;
  }

  100% {
    transform: translateX(220%) skewX(-18deg);
    opacity: 0;
  }
}


/* =========================================================
   DASHBOARD SIDEBAR — phantom red needle on right border
   Ultra-subtle: thin, blurred, feathered, fast
   ========================================================= */

.dash-sidebar {
  position: relative;
  overflow: visible;
}

.dash-sidebar::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -22%;
  width: 1px;
  /* razor thin — 1 px */
  height: 14%;
  /* short feathered needle */
  border-radius: 1px;
  pointer-events: none;
  z-index: 100;
  /* Deep red core fading to nothing at both tips */
  background: linear-gradient(180deg,
      transparent 0%,
      rgba(185, 28, 28, .06) 15%,
      rgba(220, 38, 38, .18) 35%,
      rgba(255, 255, 255, .28) 50%,
      rgba(220, 38, 38, .18) 65%,
      rgba(185, 28, 28, .06) 85%,
      transparent 100%);
  /* Diffuse halo — barely perceptible */
  box-shadow:
    0 0 4px 2px rgba(200, 30, 30, .08),
    0 0 10px 3px rgba(200, 30, 30, .04);
  filter: blur(0.6px);
  animation: borderZap 1.1s cubic-bezier(.4, 0, .2, 1) 2;
  animation-fill-mode: forwards;
}


/* =========================================================
   COURSE MODE — same phantom needle on course sidebar
   ========================================================= */

body.course-mode .sidebar {
  position: relative;
}

body.course-mode .sidebar::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -22%;
  width: 1px;
  height: 14%;
  border-radius: 1px;
  pointer-events: none;
  z-index: 200;
  background: linear-gradient(180deg,
      transparent 0%,
      rgba(185, 28, 28, .06) 15%,
      rgba(220, 38, 38, .18) 35%,
      rgba(255, 255, 255, .28) 50%,
      rgba(220, 38, 38, .18) 65%,
      rgba(185, 28, 28, .06) 85%,
      transparent 100%);
  box-shadow:
    0 0 4px 2px rgba(200, 30, 30, .08),
    0 0 10px 3px rgba(200, 30, 30, .04);
  filter: blur(0.6px);
  animation: borderZap 1.1s cubic-bezier(.4, 0, .2, 1) 2;
  animation-fill-mode: forwards;
  animation-delay: .08s;
}


/* =========================================================
   JOIN MEET BUTTON — elegant diagonal gloss, 2 passes
   ========================================================= */

#btn-meet {
  isolation: isolate;
}

#btn-meet::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  width: 38% !important;
  /* narrow gloss band */
  height: 100% !important;
  top: 0 !important;
  left: 0 !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, .0) 20%,
      rgba(255, 255, 255, .13) 48%,
      rgba(255, 255, 255, .06) 60%,
      transparent 100%) !important;
  filter: blur(2px) !important;
  transform: translateX(-140%) skewX(-18deg);
  animation: meetGloss 1s ease-in-out 2 !important;
  animation-fill-mode: forwards !important;
  z-index: 10 !important;
  pointer-events: none !important;
}


/* =========================================================
   LOGOUT BUTTON — whisper-thin warm gloss, 2 passes
   ========================================================= */

#btn-logout-dash,
[id*="logout"],
.btn-ghost[id*="logout"] {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

#btn-logout-dash::after,
[id*="logout"]::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 36%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, .0) 22%,
      rgba(255, 180, 160, .1) 46%,
      rgba(255, 255, 255, .08) 56%,
      transparent 100%);
  filter: blur(2px);
  transform: translateX(-140%) skewX(-18deg);
  animation: logoutGloss 1s ease-in-out 2;
  animation-fill-mode: forwards;
  animation-delay: .18s;
  pointer-events: none;
  z-index: 5;
  border-radius: inherit;
}


/* =========================================================
   ROBUSTNESS
   ========================================================= */
.btn-primary,
.btn-ghost {
  overflow: hidden;
}

/* =========================================================
   END ANIMATIONS
   ========================================================= */




.pro-divider {
  height: 1px;
  background: var(--border);
  margin: 20px 0;
}

.pro-block--action {
  background: var(--bg-soft);
}

.continue-slot {
  margin-top: 14px;
}

/* =========================================================
   PARENT PORTAL
   ========================================================= */

/* Layout */
.parent-layout {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Course picker */
.parent-course-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

/* Course bar */
.parent-course-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 4px;
}

.parent-course-sym {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.3px;
  color: var(--text);
}

.parent-course-meta {
  font-size: 13px;
}

/* Tab bar */
.parent-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border);
  margin-bottom: 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.parent-tab-btn {
  padding: 10px 16px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  font-family: var(--font, inherit);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color .12s, border-color .12s;
}

.parent-tab-btn:hover {
  color: var(--text);
}

.parent-tab-btn.active {
  color: var(--blue, #1a4fb5);
  border-bottom-color: var(--blue, #1a4fb5);
}

/* Content blocks */
.parent-block {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
}

.parent-block-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.parent-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

/* Reuse .row / .row-k / .row-v from existing styles */

/* Report / needs text */
.parent-report-text {
  margin-top: 12px;
  padding: 14px 16px;
  background: var(--surface2, #f5f4f0);
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
  min-height: 60px;
  white-space: pre-wrap;
}

/* Mobile */
@media (max-width: 720px) {
  .parent-tabs {
    gap: 0;
  }

  .parent-tab-btn {
    padding: 10px 12px;
    font-size: 12px;
  }

  .parent-course-bar {
    flex-wrap: wrap;
    gap: 8px;
  }

  .parent-block {
    padding: 14px;
  }
}


/* =========================================================
   CONTACT COMPOSE FORM (parent card)
   ========================================================= */

.contact-compose {
  margin-top: 12px;
}

.contact-form {
  background: var(--surface2, #f5f4f0);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 18px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-form-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.contact-form-sub {
  font-size: 12px;
  margin-top: -8px;
}

.contact-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

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

.contact-select {
  height: 36px;
  padding: 0 12px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg, #fff);
  font-family: var(--font, inherit);
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}

.contact-textarea {
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg, #fff);
  font-family: var(--font, inherit);
  font-size: 13px;
  color: var(--text);
  resize: vertical;
  min-height: 100px;
  line-height: 1.5;
  transition: border-color .15s;
}

.contact-textarea:focus {
  outline: none;
  border-color: var(--blue, #1a4fb5);
  box-shadow: 0 0 0 3px rgba(26, 79, 181, .10);
}

.contact-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.contact-status {
  font-size: 13px;
  font-weight: 600;
}

.contact-status--ok {
  color: #1a7a3c;
}

.contact-status--err {
  color: #c0392b;
}

@media (max-width: 720px) {
  .contact-form {
    padding: 14px 14px 12px;
  }
}

/* =========================================================
   CONTINUE WIZARD v2
   ========================================================= */

.cw-wrap {
  padding: 4px 0 12px;
  transition: opacity .22s ease, transform .22s ease;
}

/* Progress bar */
.cw-progress {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 14px 0 20px;
}

.cw-prog-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.cw-prog-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--border);
  color: var(--ink3);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, color .2s;
}

.cw-prog-step.active .cw-prog-dot {
  background: var(--blue, #1a4fb5);
  color: #fff;
}

.cw-prog-step.done .cw-prog-dot {
  background: #1a7a3c;
  color: #fff;
}

.cw-prog-label {
  font-size: 10px;
  color: var(--ink3);
  white-space: nowrap;
}

.cw-prog-step.active .cw-prog-label {
  color: var(--blue, #1a4fb5);
  font-weight: 700;
}

.cw-prog-line {
  flex: 1;
  height: 2px;
  background: var(--border);
  margin: 0 4px;
  margin-bottom: 14px;
  transition: background .2s;
}

.cw-prog-line.done {
  background: #1a7a3c;
}

/* Head */
.cw-head {
  margin-bottom: 8px;
}

.cw-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
}

.cw-sub {
  font-size: 13px;
  color: var(--ink3);
  margin-top: 3px;
}

.cw-back {
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  color: var(--blue, #1a4fb5);
  cursor: pointer;
  margin-bottom: 8px;
  font-weight: 600;
}

.cw-hint {
  font-size: 11px;
  color: var(--ink3);
  margin-top: 10px;
  text-align: center;
}

/* ── Step 1: Length cards ── */
.cw-length-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 4px;
}

.cw-len-card {
  background: var(--card-bg, #fff);
  border: 2px solid var(--border);
  border-radius: 14px;
  padding: 16px 12px 14px;
  cursor: pointer;
  text-align: center;
  transition: border-color .15s, box-shadow .15s, transform .1s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.cw-len-card:hover {
  border-color: var(--blue, #1a4fb5);
  transform: translateY(-2px);
}

.cw-len-card.selected {
  border-color: var(--blue, #1a4fb5);
  background: #eef3ff;
  box-shadow: 0 0 0 3px rgba(26, 79, 181, .12);
}

.cw-len-icon {
  font-size: 26px;
}

.cw-len-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
}

.cw-len-dur {
  font-size: 12px;
  color: var(--ink3);
}

.cw-len-price {
  font-size: 20px;
  font-weight: 900;
  color: var(--blue, #1a4fb5);
  margin-top: 4px;
}

.cw-len-unit {
  font-size: 10px;
  color: var(--ink3);
}

/* ── Step 2: Frequency cards ── */
.cw-freq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.cw-freq-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card-bg, #fff);
  border: 2px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
  text-align: left;
}

.cw-freq-card:hover {
  border-color: var(--blue, #1a4fb5);
}

.cw-freq-card.selected {
  border-color: var(--blue, #1a4fb5);
  background: #eef3ff;
}

.cw-freq-icon {
  font-size: 22px;
  flex-shrink: 0;
}

.cw-freq-body {
  flex: 1;
}

.cw-freq-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.cw-freq-sub {
  font-size: 12px;
  color: var(--ink3);
  margin-top: 2px;
}

.cw-freq-check {
  font-size: 18px;
  color: var(--blue, #1a4fb5);
  font-weight: 900;
  width: 20px;
}

/* Days section */
.cw-days-section {
  margin-top: 16px;
}

.cw-days-title {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 8px;
}

.cw-day-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.cw-day-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  background: #eef3ff;
  border: 1.5px solid var(--blue, #1a4fb5);
  border-radius: 20px;
  padding: 4px 10px 4px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--blue, #1a4fb5);
}

.cw-pill-x {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: var(--blue, #1a4fb5);
  padding: 0;
  line-height: 1;
}

.cw-add-day-btn {
  background: none;
  border: 1.5px dashed var(--border);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 13px;
  color: var(--ink3);
  cursor: pointer;
  transition: border-color .15s, color .15s;
}

.cw-add-day-btn:hover {
  border-color: var(--blue, #1a4fb5);
  color: var(--blue, #1a4fb5);
}

.cw-day-picker {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  flex-wrap: wrap;
}

.cw-day-sel,
.cw-time-sel {
  height: 36px;
  padding: 0 10px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg, #fff);
  font-size: 13px;
}

.cw-confirm-day {
  height: 36px;
  padding: 0 14px;
}

.cw-notes {
  width: 100%;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
  box-sizing: border-box;
  background: var(--card-bg, #fff);
}

.cw-notes:focus {
  outline: none;
  border-color: var(--blue, #1a4fb5);
}

.cw-to-quote {
  margin-top: 16px;
  width: 100%;
  justify-content: center;
}

.cw-to-quote:disabled {
  opacity: .4;
  cursor: not-allowed;
}

/* ── Step 3: Quote ── */
.cw-quote-cards {
  background: var(--card-bg, #fff);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  margin-top: 4px;
}

.cw-quote-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.cw-quote-stat {
  text-align: center;
}

.cw-qs-val {
  font-size: 18px;
  font-weight: 900;
  color: var(--ink);
}

.cw-qs-key {
  font-size: 10px;
  color: var(--ink3);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: .4px;
}

.cw-qs-total .cw-qs-val {
  color: var(--blue, #1a4fb5);
  font-size: 22px;
}

.cw-bonus {
  color: #1a7a3c;
  font-size: 10px;
  font-weight: 700;
}

.cw-schedule-preview {
  margin-top: 14px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.cw-sp-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink3);
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: 6px;
}

.cw-sp-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cw-sp-pill {
  background: #eef3ff;
  color: var(--blue, #1a4fb5);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
}

/* Payment plan */
.cw-pay-section {
  margin-top: 16px;
}

.cw-pay-title {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 8px;
}

.cw-pay-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.cw-pay-card {
  background: var(--card-bg, #fff);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 12px 10px;
  cursor: pointer;
  text-align: center;
  transition: border-color .15s;
}

.cw-pay-card:hover {
  border-color: var(--blue, #1a4fb5);
}

.cw-pay-card.selected {
  border-color: var(--blue, #1a4fb5);
  background: #eef3ff;
}

.cw-pay-label {
  font-size: 13px;
  font-weight: 700;
}

.cw-pay-amount {
  font-size: 17px;
  font-weight: 900;
  color: var(--blue, #1a4fb5);
  margin: 3px 0;
}

.cw-pay-per {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink3);
}

.cw-pay-sub {
  font-size: 10px;
  color: var(--ink3);
}

/* Send */
.cw-send-section {
  margin-top: 18px;
}

.cw-send-btn {
  width: 100%;
  justify-content: center;
}

.cw-status {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
}

.cw-ok {
  color: #1a7a3c;
}

.cw-err {
  color: #c0392b;
}

/* Mobile */
@media (max-width: 480px) {
  .cw-length-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cw-quote-row {
    grid-template-columns: repeat(2, 1fr);
  }

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

/* Semester range picker */
.cw-semester-row {
  margin-top: 14px;
  background: var(--surface2, #f5f4f0);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
}

.cw-sem-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--ink3);
  margin-bottom: 8px;
}

.cw-sem-inputs {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.cw-sem-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cw-sem-sublabel {
  font-size: 10px;
  color: var(--ink3);
  font-weight: 600;
}

.cw-sem-field select {
  height: 34px;
  padding: 0 10px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg, #fff);
  font-size: 13px;
  min-width: 160px;
}

.cw-sem-sep {
  color: var(--ink3);
  font-size: 16px;
  padding-top: 14px;
}
























/* ======================================================
   LEDGER — LIGHT THEME OVERRIDES (beats injected CSS)
   Paste at the VERY END of ./css/styles.css
   ====================================================== */

#ledger-panel.ldg-panel,
#ledger-panel .ldg-wrap {
  color: var(--text) !important;
}

/* Teacher picker */
#ledger-panel .ldg-teacher-picker {
  background: var(--panel) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .05) !important;
}

#ledger-panel .ldg-tpick {
  background: #fff !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
  font-weight: 800 !important;
}

#ledger-panel .ldg-tpick:hover {
  background: rgba(66, 85, 255, .04) !important;
  border-color: rgba(66, 85, 255, .32) !important;
}

#ledger-panel .ldg-tpick.active {
  background: var(--accent-soft) !important;
  border-color: rgba(66, 85, 255, .55) !important;
  color: var(--accent) !important;
}

/* Month nav (chip + arrows) */
#ledger-panel .ldg-nav-btn {
  background: #fff !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65) !important;
}

#ledger-panel .ldg-nav-btn:hover {
  background: rgba(66, 85, 255, .05) !important;
  border-color: rgba(66, 85, 255, .30) !important;
}

#ledger-panel .ldg-month-chip {
  background: #fff !important;
  border-color: var(--border) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .04) !important;
}

#ledger-panel .ldg-month-chip-label {
  color: var(--text) !important;
}

/* State badge */
#ledger-panel .ldg-state-badge {
  background: #fff !important;
  color: var(--text) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
}

#ledger-panel .ldg-state-open {
  background: rgba(66, 85, 255, .06) !important;
  border-color: rgba(66, 85, 255, .25) !important;
  color: var(--accent) !important;
}

#ledger-panel .ldg-state-submitted {
  background: rgba(244, 161, 0, .10) !important;
  border-color: rgba(244, 161, 0, .28) !important;
  color: #6b3d00 !important;
}

#ledger-panel .ldg-state-frozen {
  background: rgba(0, 201, 142, .10) !important;
  border-color: rgba(0, 201, 142, .26) !important;
  color: #0a4a22 !important;
}

/* Action buttons */
#ledger-panel .ldg-action-btn {
  background: #fff !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
}

#ledger-panel .ldg-action-btn:hover {
  background: rgba(66, 85, 255, .05) !important;
  border-color: rgba(66, 85, 255, .28) !important;
  box-shadow: 0 2px 10px rgba(66, 85, 255, .10) !important;
}

/* Summary tiles (your screenshot: these were dark) */
#ledger-panel .ldg-summary-bar {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

#ledger-panel .ldg-sum-tile {
  background: rgba(0, 0, 0, .02) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}

#ledger-panel .ldg-sum-num {
  color: var(--text) !important;
  font-weight: 900 !important;
}

#ledger-panel .ldg-sum-total {
  background: linear-gradient(160deg, rgba(66, 85, 255, .06) 0%, rgba(66, 85, 255, 0) 55%) !important;
  border-color: rgba(66, 85, 255, .22) !important;
}

#ledger-panel .ldg-sum-total .ldg-sum-num {
  color: var(--accent) !important;
}

/* Course blocks (your screenshot: headers were dark) */
#ledger-panel .ldg-course-block {
  background: var(--panel) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 18px !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .05) !important;
}

#ledger-panel .ldg-course-head {
  background: transparent !important;
}

#ledger-panel .ldg-course-head:hover {
  background: rgba(66, 85, 255, .04) !important;
}

#ledger-panel .ldg-course-code {
  color: var(--text) !important;
}

#ledger-panel .ldg-course-total {
  color: var(--accent) !important;
}

#ledger-panel .ldg-course-body {
  background: #fff !important;
  border-top: 1px solid var(--border) !important;
}

/* Table header + cells (make sure contrast is correct) */
#ledger-panel .ldg-table thead th {
  background: #fbfbff !important;
  color: var(--muted) !important;
  border-bottom: 1px solid var(--border) !important;
}

#ledger-panel .ldg-table td {
  color: var(--text) !important;
  border-bottom: 1px solid rgba(227, 230, 240, .7) !important;
}

/* IMPORTANT: status + duration pills were dark (selects) */
#ledger-panel .ldg-select {
  background: #fff !important;
  color: var(--text) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
}

#ledger-panel .ldg-select:focus {
  border-color: rgba(66, 85, 255, .45) !important;
  box-shadow: 0 0 0 4px rgba(66, 85, 255, .10) !important;
}

/* Note input */
#ledger-panel .ldg-note-input {
  color: var(--text) !important;
  border-bottom-color: rgba(107, 115, 148, .35) !important;
}

#ledger-panel .ldg-note-input::placeholder {
  color: rgba(107, 115, 148, .65) !important;
}

/* Snapshot panel (if used) */
#ledger-panel .ldg-snap-panel {
  background: var(--panel) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .05) !important;
}

#ledger-panel .ldg-snap-title,
#ledger-panel .ldg-snap-val {
  color: var(--text) !important;
}

#ledger-panel .ldg-snap-meta,
#ledger-panel .ldg-snap-label,
#ledger-panel .ldg-snap-note {
  color: var(--muted) !important;
}

/* Responsive */
@media (max-width: 980px) {
  #ledger-panel .ldg-summary-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  #ledger-panel .ldg-summary-bar {
    grid-template-columns: 1fr !important;
  }
}














/* =========================================================
   QUIZLET XL PACK — paste at VERY END of styles.css
   Bigger cards, bigger text, stronger contrast
   ========================================================= */

/* 1) Slight global readability boost (safe + subtle) */
:root {
  --radius: 18px;
  /* rounder */
  --shadow: 0 3px 10px rgba(60, 68, 120, .08), 0 14px 40px rgba(60, 68, 120, .06);
}

/* If your base is too small, uncomment one of these:
html{ font-size: 17px; }
*/

/* Make “cards” feel more Quizlet: thicker border + clearer separation */
.course-detail .panel,
.course-detail .block,
.course-detail .card {
  border-width: 1.5px;
}

/* =========================================================
   2) NEEDS + REPORT (nr-*)
   ========================================================= */

.nr-card {
  border-width: 1.75px;
  border-radius: calc(var(--radius) + 2px);
  padding: 18px;
  box-shadow: var(--shadow);
}

.nr-title {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -.2px;
}

.nr-meta {
  border-width: 1.5px;
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 14px;
  background: linear-gradient(160deg, rgba(66, 85, 255, .06) 0%, rgba(0, 0, 0, 0) 60%);
}

.nr-readonly {
  font-size: 15px;
  padding: 14px 14px;
  border-radius: 14px;
  border-width: 1.5px;
  line-height: 1.65;
}

.nr-textarea {
  min-height: 220px;
  /* BIG */
  font-size: 15.5px;
  padding: 14px 14px;
  border-width: 1.75px;
  border-radius: 14px;
  line-height: 1.65;
}

.nr-status {
  font-size: 12.5px;
  padding: 7px 12px;
  border-width: 1.5px;
  font-weight: 900;
}

/* =========================================================
   3) CONTINUE (cont-*)
   ========================================================= */

.course-detail .cont-wrap {
  border-width: 1.75px;
  border-radius: 20px;
  padding: 24px 24px 20px;
  box-shadow: var(--shadow);
}

.course-detail .cont-title {
  font-size: 22px;
  font-weight: 950;
  letter-spacing: -.6px;
}

.course-detail .cont-sub {
  font-size: 15px;
  line-height: 1.65;
}

.course-detail .cont-card {
  border-width: 1.75px;
  border-radius: 18px;
  padding: 10px 18px 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}

.course-detail .cont-label {
  font-size: 11.5px;
  letter-spacing: 1px;
  font-weight: 900;
}

.course-detail .cont-value {
  font-size: 17px;
  font-weight: 800;
}

.course-detail .cont-mono {
  font-size: 14.5px;
  line-height: 1.7;
}

/* Step badges: more “Quizlet cards”, less visual noise */
.course-detail .cont-steps {
  gap: 12px;
  margin-top: 18px;
}

.course-detail .cont-step {
  border-width: 1.75px;
  border-radius: 18px;
  padding: 16px 14px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}

.course-detail .cont-step:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(60, 68, 120, .12);
  border-color: rgba(66, 85, 255, .32);
}

/* Monochrome + clean “badge” dot */
.course-detail .step-dot {
  width: 36px;
  height: 36px;
  border-width: 2px;
  font-size: 13.5px;
  font-weight: 950;
  background: #fff;
  /* clean */
  color: var(--text);
  /* monochrome */
}

/* Active/done still readable but not screaming */
.course-detail .cont-step.is-active {
  background: rgba(66, 85, 255, .035);
  border-color: rgba(66, 85, 255, .30);
  box-shadow: 0 0 0 3px rgba(66, 85, 255, .10), 0 12px 28px rgba(66, 85, 255, .08);
}

.course-detail .cont-step.is-active .step-dot {
  background: #fff;
  border-color: rgba(66, 85, 255, .55);
  color: var(--text);
  box-shadow: 0 0 0 3px rgba(66, 85, 255, .10);
}

.course-detail .cont-step.is-done {
  background: rgba(0, 201, 142, .03);
  border-color: rgba(0, 201, 142, .28);
}

.course-detail .cont-step.is-done .step-dot {
  background: #fff;
  border-color: rgba(0, 201, 142, .45);
  color: var(--text);
  box-shadow: 0 0 0 3px rgba(0, 201, 142, .10);
}

.course-detail .step-title {
  font-size: 14px;
  font-weight: 900;
  line-height: 1.35;
}

/* Buttons in continue: bigger + punchier */
.course-detail .cont-btn {
  padding: 14px 18px;
  font-size: 15.5px;
  border-radius: 14px;
  font-weight: 900;
}













/* =========================================================
   4) LEDGER (ldg-*) — bigger + stronger contrast
   ========================================================= */

#ledger-panel {
  /* “stronger contrast between text and bg” */
  --ldgText: #141827;
  --ldgMuted: #566088;
}

#ledger-panel .ldg-wrap,
#ledger-panel .ldg-panel {
  color: var(--ldgText) !important;
}

/* Headings */
#ledger-panel h1,
#ledger-panel h2,
#ledger-panel .ldg-title {
  color: var(--ldgText) !important;
  letter-spacing: -.4px;
}

/* Teacher picker + month nav: bigger */
#ledger-panel .ldg-teacher-picker {
  border-width: 1.75px !important;
  border-radius: 18px !important;
}

#ledger-panel .ldg-tpick {
  padding: 10px 14px !important;
  font-size: 15px !important;
  border-width: 1.75px !important;
  border-radius: 14px !important;
}

#ledger-panel .ldg-nav-btn {
  width: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
  border-width: 1.75px !important;
}

#ledger-panel .ldg-month-chip {
  padding: 10px 14px !important;
  border-radius: 999px !important;
  border-width: 1.75px !important;
}

#ledger-panel .ldg-month-chip-label {
  font-size: 15px !important;
  font-weight: 950 !important;
}

/* Summary tiles: bigger numbers */
#ledger-panel .ldg-summary-bar {
  gap: 12px !important;
}

#ledger-panel .ldg-sum-tile {
  border-width: 1.75px !important;
  border-radius: 18px !important;
  padding: 14px 14px !important;
  background: #fff !important;
}

#ledger-panel .ldg-sum-num {
  font-size: 22px !important;
  font-weight: 950 !important;
  color: var(--ldgText) !important;
}

#ledger-panel .ldg-sum-label {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: var(--ldgMuted) !important;
}

/* Course blocks: more “Quizlet card” feel */
#ledger-panel .ldg-course-block {
  border-width: 1.75px !important;
  border-radius: 20px !important;
  box-shadow: var(--shadow) !important;
}

#ledger-panel .ldg-course-code {
  font-size: 16px !important;
  font-weight: 950 !important;
}

#ledger-panel .ldg-course-total {
  font-size: 16px !important;
  font-weight: 950 !important;
}

/* Table: bigger + clearer */
#ledger-panel .ldg-table {
  font-size: 14.5px !important;
}

#ledger-panel .ldg-table thead th {
  font-size: 12.5px !important;
  font-weight: 950 !important;
  color: var(--ldgMuted) !important;
  letter-spacing: .6px !important;
  text-transform: uppercase !important;
}

#ledger-panel .ldg-table td {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  color: var(--ldgText) !important;
}

/* Select pills: bigger + clearer */
#ledger-panel .ldg-select {
  height: 40px !important;
  padding: 0 12px !important;
  font-size: 14px !important;
  border-width: 1.75px !important;
  border-radius: 14px !important;
}

/* NOTE — make it a proper interactive “Quizlet box”
   You said: too much empty space + note must be wider/higher. */
#ledger-panel .ldg-note-input {
  display: block !important;
  width: 100% !important;
  min-height: 96px !important;
  /* taller */
  padding: 12px 12px !important;
  margin-top: 6px !important;
  border: 1.75px solid rgba(66, 85, 255, .22) !important;
  border-radius: 16px !important;
  background: linear-gradient(160deg, rgba(66, 85, 255, .06) 0%, #fff 55%) !important;
  color: var(--ldgText) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  outline: none !important;
}

#ledger-panel .ldg-note-input:focus {
  border-color: rgba(66, 85, 255, .45) !important;
  box-shadow: 0 0 0 5px rgba(66, 85, 255, .12) !important;
}

/* If there’s a “note row” wrapper creating empty space, this helps */
#ledger-panel .ldg-note,
#ledger-panel .ldg-note-row,
#ledger-panel .ldg-note-cell {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* “Notes: blue border, Quizlet style big box” (your earlier requirement) */
#ledger-panel .ldg-note-input {
  border-left: 6px solid rgba(66, 85, 255, .55) !important;
}

/* =========================================================
   5) Mobile polish
   ========================================================= */
@media (max-width: 520px) {
  .nr-card {
    padding: 14px;
  }

  .nr-title {
    font-size: 17px;
  }

  .nr-textarea {
    min-height: 200px;
  }

  .course-detail .cont-wrap {
    padding: 18px 16px 16px;
  }

  .course-detail .cont-title {
    font-size: 20px;
  }

  #ledger-panel .ldg-sum-num {
    font-size: 20px !important;
  }
}







/* =========================================================
   LEDGER MODULE — MOBILE LIGHT THEME FIX (Quizlet-like)
   Paste at the VERY END of /css/styles.css
   Goal: kill dark boxes + ensure readable light UI on phones
   ========================================================= */

/* 1) Fix missing variables used elsewhere (prevents “mystery” dark styles) */
:root {
  --brand: var(--accent);
  --pastel-blue: rgba(66, 85, 255, .08);
  --pastel-blue-text: var(--accent);
}

/* 2) Hard stop: if Ledger markup ships with any dark theme tokens/classes, neutralize */
body .ledger,
body .ledger-wrap,
body .ledger-card,
body [data-module="ledger"],
body [data-view="ledger"],
body #ledger,
body #view-ledger {
  color: var(--text) !important;
}

/* Make sure Ledger area never inherits dark background */
body .ledger,
body .ledger-wrap,
body [data-module="ledger"],
body [data-view="ledger"],
body #ledger,
body #view-ledger {
  background: transparent !important;
}

/* 3) Main ledger surface (cards/sections) — force Quizlet-like panels */
body .ledger-card,
body .ledger-panel,
body .ledger-box,
body .ledger-section,
body .ledger-surface,
body #view-ledger .card,
body #view-ledger .panel,
body #view-ledger .pro-block {
  background: var(--panel) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow) !important;
}

/* 4) Kill “dark pills / dark headers / black chips” commonly used in ledger UIs */
body .ledger-card *[style*="background:#111"],
body .ledger-card *[style*="background: #111"],
body .ledger-card *[style*="background:#000"],
body .ledger-card *[style*="background: #000"],
body .ledger-card *[style*="background:black"],
body .ledger-card *[style*="background: black"] {
  background: #fff !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* 5) Ledger headings + helper text */
body .ledger h1,
body .ledger h2,
body .ledger h3,
body .ledger-title,
body .ledger-headline {
  color: var(--text) !important;
  letter-spacing: -.3px;
}

body .ledger .muted,
body .ledger-sub,
body .ledger-hint,
body .ledger-kicker {
  color: var(--muted) !important;
}

/* 6) Buttons inside ledger: keep light theme, prevent black backgrounds */
body .ledger .btn,
body .ledger button.btn,
body .ledger button {
  border-radius: 12px;
}

body .ledger .btn-primary {
  background: var(--btn) !important;
  color: var(--btnText) !important;
  border-color: transparent !important;
}

body .ledger .btn-ghost {
  background: #fff !important;
  color: var(--text) !important;
  border: 1.5px solid var(--border) !important;
}

body .ledger .btn-ghost:hover {
  background: var(--hover) !important;
  border-color: #c5cadf !important;
}

/* 7) Inputs / selects / month picker inside ledger */
body .ledger input,
body .ledger select,
body .ledger textarea {
  background: #fff !important;
  color: var(--text) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 12px !important;
}

body .ledger input:focus,
body .ledger select:focus,
body .ledger textarea:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px var(--accent-soft) !important;
}

/* 8) Tables: force light header + readable cells (common ledger pain on mobile) */
body .ledger table,
body .ledger .ledger-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff !important;
  color: var(--text) !important;
}

body .ledger thead th,
body .ledger .ledger-th {
  background: #fbfbff !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--border) !important;
  font-weight: 900 !important;
}

body .ledger td,
body .ledger th {
  border-bottom: 1px solid rgba(227, 230, 240, .7) !important;
}

/* 9) Collapsible rows (expand/collapse) — remove dark “row blocks” */
body .ledger .row,
body .ledger .ledger-row,
body .ledger .ledger-item,
body .ledger .ledger-entry {
  background: #fff !important;
  color: var(--text) !important;
}

/* 10) Notes box — “Quizlet big note” with blue border */
body .ledger .notes,
body .ledger .ledger-notes,
body .ledger textarea.ledger-notes,
body .ledger .note-box {
  border: 1.5px solid rgba(66, 85, 255, .28) !important;
  background: linear-gradient(180deg, rgba(66, 85, 255, .06), rgba(66, 85, 255, 0) 55%) !important;
  border-radius: 16px !important;
  padding: 12px 12px !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .04) !important;
  color: var(--text) !important;
}

/* =========================================================
   MOBILE ONLY (≤720px): stop dark blocks + improve spacing/scroll
   ========================================================= */
@media (max-width: 720px) {

  /* Ledger page background always light */
  body .ledger,
  body [data-module="ledger"],
  body [data-view="ledger"],
  body #view-ledger {
    background: var(--bg) !important;
  }

  /* Make ledger cards full-width + comfortable */
  body .ledger-card,
  body .ledger-panel,
  body .ledger-section,
  body #view-ledger .card {
    padding: 14px !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 10px rgba(60, 68, 120, .06) !important;
  }

  /* Horizontal scroll for tables without forcing dark wrappers */
  body .ledger .table-wrap,
  body .ledger .ledger-table-wrap,
  body .ledger .ledger-table-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    background: transparent !important;
    border: 0 !important;
  }

  body .ledger table,
  body .ledger .ledger-table {
    min-width: 560px;
    /* adjust if your ledger has many columns */
  }

  /* If your ledger uses “summary tiles” that went dark, force light tiles */
  body .ledger .tile,
  body .ledger .summary-tile,
  body .ledger .ledger-tile {
    background: #fff !important;
    border: 1.5px solid var(--border) !important;
    border-radius: 14px !important;
    color: var(--text) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .04) !important;
  }

  /* Compact action bar (submit month etc.) — keep it premium & readable */
  body .ledger .ledger-actions,
  body .ledger .actions-row,
  body .ledger .month-actions {
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
  }

  body .ledger .ledger-actions .btn,
  body .ledger .actions-row .btn,
  body .ledger .month-actions .btn {
    flex: 1 1 160px !important;
    justify-content: center !important;
    padding: 12px 14px !important;
    font-weight: 800 !important;
  }
}

/* =========================================================
   OPTIONAL: If Ledger tab content is injected inside #detail-body
   and inherits a dark “pro” wrapper, force light there too.
   ========================================================= */
body #detail-body .ledger-card,
body #detail-body .ledger-panel,
body #detail-body .ledger-section {
  background: #fff !important;
  color: var(--text) !important;
}




/* =========================================================
   PATCH: Fix bottom clipping / grey strip (nested 100vh + clipping)
   Paste at the VERY END of styles.css
   ========================================================= */

/* 1) Dashboard layout: stop clipping + use dynamic viewport */
.dash-layout {
  height: 100dvh;
  /* modern dynamic viewport */
  min-height: 100dvh;
  overflow: visible;
  /* IMPORTANT: do not clip bottom */
}

/* Fallback for browsers that don't support dvh */
@supports not (height: 100dvh) {
  .dash-layout {
    height: 100vh;
    min-height: 100vh;
  }
}

/* 2) Keep scroll where you want it, but give safe bottom space */
.dash-content {
  height: auto;
  /* avoid 100% of a clipped parent */
  min-height: 0;
  /* allow flex children to scroll properly */
  overflow-y: auto;
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
}

/* 3) If your course layout uses the same 100vh trap */
body.course-mode .course-layout {
  height: 100dvh;
  min-height: 100dvh;
  overflow: visible;
}

@supports not (height: 100dvh) {
  body.course-mode .course-layout {
    height: 100vh;
    min-height: 100vh;
  }
}

/* 4) Flex children must be allowed to shrink, otherwise content can slide “under” */
.dash-main,
.course-main {
  min-height: 0;
}

/* 5) Optional: extra breathing room for Ledger end-of-table */
#ledger-panel .ldg-wrap {
  padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
}






/* =========================================================
   PATCH (Option A): KEEP NESTED SCROLL (right panel scrolls)
   Fix: bottom clipping / grey strip / content going under
   Paste at VERY END of styles.css
   ========================================================= */

/* Dashboard shell: dynamic viewport height + do NOT hard-clip */
.dash-layout {
  height: 100dvh !important;
  /* modern browsers */
  min-height: 100dvh !important;
  overflow: hidden !important;
  /* keep the “app shell” behavior */
}

/* Fallback for browsers without dvh */
@supports not (height: 100dvh) {
  .dash-layout {
    height: 100vh !important;
    min-height: 100vh !important;
  }
}

/* Ensure flex children can actually shrink so the scroller works correctly */
.dash-main {
  min-height: 0 !important;
}

/* Right panel scroll area: must be the ONLY vertical scroller */
.dash-content {
  height: 100% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;

  /* IMPORTANT: create bottom “safe area” so last rows never hide */
  padding-bottom: calc(48px + env(safe-area-inset-bottom)) !important;
}

/* Ledger-specific extra breathing room (optional but helpful) */
#ledger-panel .ldg-wrap {
  padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
}



















/* =========================================================
   FIX: Mobile course view untouchable (remove iframe lock)
   Solution A — keep iframe interactive
   ========================================================= */

/* 1) Re-enable touch interaction on the course iframe */
body.course-mode .course-layout.sidebar-collapsed .viewer-iframe {
  pointer-events: auto !important;
}

/* 2) Make sure the toggle button always stays above the iframe */
body.course-mode .sidebar-toggle {
  position: fixed !important;
  z-index: 20000 !important;
}

/* 3) Ensure the iframe does not create a stacking context above toggle */
body.course-mode .viewer-iframe {
  position: relative;
  z-index: 1;
}








/* =========================================================
   PATCH C2 — READER (Engine-style UI, portal colors)
   Paste at VERY END of styles.css (after Patch C).
   All namespaced: .reader-*
   ========================================================= */











/* =========================================================
   PATCH C6 — Smart Reader Engine Style (SCOPED)
   Paste at VERY END of styles.css
   Requires module.reader.v4.engine.js
   ========================================================= */

.srx-root {
  --srx-bg: var(--bg, #fffbf5);
  --srx-surface: var(--panel, #ffffff);
  --srx-text: var(--text, #1c1a17);
  --srx-text2: var(--muted, #5c5040);
  --srx-muted: var(--muted, #9c8a78);
  --srx-border: var(--border, rgba(30, 40, 60, .12));
  --srx-border2: rgba(30, 40, 60, .18);

  --srx-accent: var(--accent, #ff6b35);
  --srx-accent2: color-mix(in srgb, var(--srx-accent) 70%, #fff 30%);
  --srx-accent-soft: color-mix(in srgb, var(--srx-accent) 12%, transparent);
  --srx-accent-mid: color-mix(in srgb, var(--srx-accent) 28%, transparent);
  --srx-accent-glow: color-mix(in srgb, var(--srx-accent) 18%, transparent);

  --srx-teal: #0ea5a0;
  --srx-teal-soft: rgba(14, 165, 160, .10);
  --srx-teal-mid: rgba(14, 165, 160, .25);

  --srx-gold: #f59e0b;
  --srx-gold-soft: rgba(245, 158, 11, .12);

  --srx-good: #22c55e;
  --srx-good-soft: rgba(34, 197, 94, .12);
  --srx-good-glow: rgba(34, 197, 94, .22);
  --srx-bad: #ef4444;
  --srx-bad-soft: rgba(239, 68, 68, .10);

  --srx-shadow-sm: 0 2px 8px rgba(20, 22, 34, .06), 0 1px 2px rgba(20, 22, 34, .04);
  --srx-shadow: 0 4px 20px rgba(20, 22, 34, .09), 0 2px 6px rgba(20, 22, 34, .06);
  --srx-shadow-lg: 0 12px 48px rgba(20, 22, 34, .16);

  --srx-r: 20px;
  --srx-r-sm: 14px;
  --srx-r-xs: 10px;

  --srx-topH: 64px;
  --srx-padX: clamp(12px, 4vw, 28px);
  --srx-maxW: 860px;
  --srx-speed: .2s;
  --srx-ease: cubic-bezier(.2, .8, .2, 1);

  font-family: var(--font, system-ui, sans-serif);
  color: var(--srx-text);
}

.srx-shell {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.srx-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--srx-topH);
  background: color-mix(in srgb, var(--srx-bg) 92%, transparent);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--srx-border);
}

.srx-topbar-inner {
  height: var(--srx-topH);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--srx-padX);
  gap: 10px;
}

.srx-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.srx-brand-name {
  font-weight: 900;
  font-size: 16px;
  letter-spacing: -.02em;
  color: var(--srx-accent);
}

.srx-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.srx-tbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border: 1px solid var(--srx-border);
  border-radius: var(--srx-r-sm);
  background: var(--srx-surface);
  color: var(--srx-text2);
  font-weight: 900;
  font-size: 13px;
  cursor: pointer;
  transition: transform var(--srx-speed) var(--srx-ease), background var(--srx-speed), border-color var(--srx-speed), box-shadow var(--srx-speed), color var(--srx-speed);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.srx-tbtn:hover {
  transform: translateY(-1px);
  border-color: var(--srx-border2);
  box-shadow: var(--srx-shadow-sm);
}

.srx-tbtn:active {
  transform: scale(.96);
}

.srx-tbtn.playing {
  background: var(--srx-accent-soft);
  border-color: var(--srx-accent-mid);
  color: var(--srx-accent);
}

.srx-speed-group {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--srx-border);
  border-radius: var(--srx-r-sm);
  background: var(--srx-surface);
}

.srx-speed-group label {
  font-weight: 900;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--srx-muted);
}

.srx-speed-group input[type=range] {
  width: 70px;
  accent-color: var(--srx-accent);
  cursor: pointer;
}

.srx-speed-val {
  font-weight: 900;
  font-size: 12px;
  color: var(--srx-text);
  min-width: 30px;
}

.srx-ham {
  width: 44px;
  height: 44px;
  border: 1px solid var(--srx-border);
  border-radius: var(--srx-r-sm);
  background: var(--srx-surface);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: background var(--srx-speed), border-color var(--srx-speed), box-shadow var(--srx-speed), transform var(--srx-speed) var(--srx-ease);
  -webkit-tap-highlight-color: transparent;
  padding: 0;
}

.srx-ham:hover {
  border-color: var(--srx-accent-mid);
  background: var(--srx-accent-soft);
  box-shadow: 0 4px 16px var(--srx-accent-glow);
  transform: translateY(-1px);
}

.srx-ham .l {
  width: 20px;
  height: 2.5px;
  background: var(--srx-text2);
  border-radius: 2px;
}

.srx-ham.open .l:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}

.srx-ham.open .l:nth-child(2) {
  opacity: 0;
  width: 0;
}

.srx-ham.open .l:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

.srx-main {
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 22px var(--srx-padX) 100px;
  background: var(--srx-bg);
}

.srx-page {
  max-width: var(--srx-maxW);
  margin: 0 auto;
  animation: srxFadeUp .3s var(--srx-ease) both;
}

@keyframes srxFadeUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

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

.srx-page-card {
  background: var(--srx-surface);
  border: 1px solid var(--srx-border);
  border-radius: var(--srx-r);
  box-shadow: var(--srx-shadow);
  padding: 32px 38px 40px;
  position: relative;
  overflow: hidden;
}

.srx-page-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--srx-accent), var(--srx-gold), var(--srx-teal));
}

@media (max-width:640px) {
  .srx-page-card {
    padding: 20px 16px 26px;
    border-radius: 18px;
  }

  .srx-speed-group label {
    display: none;
  }

  .srx-speed-group input[type=range] {
    width: 52px;
  }

  .srx-speed-val {
    display: none;
  }

  .srx-tbtn .lbl {
    display: none;
  }

  .srx-tbtn {
    padding: 8px 10px;
  }

  .srx-brand-name {
    display: none;
  }
}

.srx-topic-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--srx-accent-soft);
  border: 1px solid var(--srx-accent-mid);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--srx-accent);
  margin-bottom: 12px;
}

.srx-h1 {
  font-weight: 1000;
  font-size: clamp(30px, 6vw, 52px);
  letter-spacing: -.03em;
  line-height: 1.06;
  margin-bottom: 8px;
}

.srx-title-pl {
  font-size: clamp(14px, 2.5vw, 18px);
  color: var(--srx-muted);
  font-weight: 900;
  margin-bottom: 20px;
}

.srx-title-pl span {
  color: var(--srx-accent);
}

.srx-lead-q {
  background: linear-gradient(135deg, var(--srx-accent-soft), var(--srx-gold-soft));
  border: 1px solid var(--srx-accent-mid);
  border-radius: var(--srx-r);
  padding: 16px 18px;
  margin-bottom: 24px;
  box-shadow: 0 6px 24px var(--srx-accent-glow);
}

.srx-lead-q .en {
  font-size: clamp(16px, 2.8vw, 20px);
  font-weight: 1000;
  line-height: 1.4;
}

.srx-lead-q .pl {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--srx-accent-mid);
  font-size: 14px;
  font-weight: 900;
  color: var(--srx-text2);
}

.srx-progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.srx-prog-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid var(--srx-border);
  border-radius: 999px;
  font-weight: 1000;
  font-size: 12px;
  color: var(--srx-muted);
  background: color-mix(in srgb, var(--srx-surface) 72%, var(--srx-bg) 28%);
}

.srx-prog-chip .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--srx-border2);
}

.srx-prog-chip.done {
  border-color: rgba(34, 197, 94, .35);
  background: var(--srx-good-soft);
  color: var(--srx-good);
}

.srx-prog-chip.done .dot {
  background: var(--srx-good);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .2);
}

.srx-sec-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 30px 0 14px;
}

.srx-sec-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--srx-r-sm);
  display: grid;
  place-items: center;
  font-size: 18px;
}

.srx-sec-icon.orange {
  background: var(--srx-accent-soft);
}

.srx-sec-icon.teal {
  background: var(--srx-teal-soft);
}

.srx-sec-icon.gold {
  background: var(--srx-gold-soft);
}

.srx-sec-icon.green {
  background: var(--srx-good-soft);
}

.srx-sec-label {
  font-weight: 1000;
  font-size: clamp(18px, 3vw, 24px);
  letter-spacing: -.02em;
}

.srx-para {
  background: color-mix(in srgb, var(--srx-surface) 72%, var(--srx-bg) 28%);
  border: 1px solid var(--srx-border);
  border-radius: var(--srx-r);
  padding: 16px 18px;
  margin-bottom: 12px;
}

.srx-sent {
  display: inline;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.8;
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 8px;
  transition: background .15s ease, outline .15s ease, font-weight .15s ease;
  -webkit-tap-highlight-color: transparent;
}

.srx-sent+.srx-sent::before {
  content: " ";
}

.srx-sent:hover {
  background: var(--srx-accent-soft);
}

.srx-sent.on {
  background: var(--srx-accent-soft);
  outline: 2.5px solid var(--srx-accent-mid);
  outline-offset: 2px;
  font-weight: 1000;
  border-radius: 10px;
}

.srx-pl-inline {
  display: block;
  margin: 10px 0 4px;
  padding: 11px 14px;
  border-left: 4px solid var(--srx-accent);
  background: linear-gradient(90deg, var(--srx-accent-soft), transparent);
  border-radius: 0 var(--srx-r-sm) var(--srx-r-sm) 0;
  font-size: 17px;
  font-weight: 900;
  color: var(--srx-text2);
  animation: srxSlideIn .2s var(--srx-ease) both;
}

.srx-pl-inline.hidden {
  display: none;
}

@keyframes srxSlideIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

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

/* grids */
.srx-word-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.srx-phrase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
}

@media (max-width:520px) {

  .srx-word-grid,
  .srx-phrase-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
}

@media (max-width:340px) {

  .srx-word-grid,
  .srx-phrase-grid {
    grid-template-columns: 1fr;
  }
}

.srx-word-card,
.srx-phrase-card {
  background: var(--srx-surface);
  border: 1px solid var(--srx-border);
  border-radius: var(--srx-r);
  padding: 14px 16px 12px;
  cursor: pointer;
  transition: transform var(--srx-speed) var(--srx-ease), border-color var(--srx-speed), box-shadow var(--srx-speed);
  -webkit-tap-highlight-color: transparent;
  position: relative;
  overflow: hidden;
}

.srx-word-card:hover {
  transform: translateY(-3px);
  border-color: var(--srx-teal-mid);
  box-shadow: 0 8px 28px rgba(14, 165, 160, .14);
}

.srx-phrase-card:hover {
  transform: translateY(-3px);
  border-color: var(--srx-gold);
  box-shadow: 0 8px 24px var(--srx-gold-soft);
}

.srx-word-card .en {
  font-weight: 1000;
  font-size: 17px;
}

.srx-word-card .pl {
  font-size: 13px;
  color: var(--srx-muted);
  font-weight: 900;
  margin-top: 5px;
}

.srx-word-card .hint {
  font-size: 11px;
  color: var(--srx-teal);
  font-weight: 1000;
  margin-top: 8px;
  letter-spacing: .05em;
  text-transform: uppercase;
  opacity: .7;
}

.srx-phrase-card .en {
  font-weight: 1000;
  font-size: 15px;
}

.srx-phrase-card .pl {
  font-size: 13px;
  color: var(--srx-muted);
  font-weight: 900;
  margin-top: 5px;
}

/* exercise */
.srx-ex-wrap {
  background: var(--srx-surface);
  border: 1px solid var(--srx-border);
  border-radius: var(--srx-r);
  overflow: hidden;
  box-shadow: var(--srx-shadow-lg);
  margin-top: 4px;
}

.srx-ex-head {
  padding: 18px 22px 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--srx-surface) 70%, var(--srx-bg) 30%), var(--srx-bg));
  border-bottom: 1px solid var(--srx-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.srx-ex-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.srx-ex-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--srx-r-sm);
  background: linear-gradient(135deg, var(--srx-accent), var(--srx-accent2));
  display: grid;
  place-items: center;
  font-size: 20px;
  box-shadow: 0 4px 14px var(--srx-accent-glow);
}

.srx-ex-label {
  font-weight: 1000;
  font-size: 20px;
  letter-spacing: -.02em;
  line-height: 1.1;
}

.srx-ex-sublabel {
  font-size: 12px;
  font-weight: 900;
  color: var(--srx-muted);
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-top: 1px;
}

.srx-ex-counter {
  font-weight: 1000;
  font-size: 14px;
  color: var(--srx-accent);
  background: var(--srx-accent-soft);
  border: 1px solid var(--srx-accent-mid);
  border-radius: 999px;
  padding: 6px 14px;
}

.srx-ex-prog {
  padding: 0 22px 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--srx-surface) 70%, var(--srx-bg) 30%), transparent);
}

.srx-ex-track {
  height: 8px;
  background: var(--srx-border);
  border-radius: 999px;
  overflow: hidden;
}

.srx-ex-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--srx-accent), var(--srx-gold));
  border-radius: 999px;
  transition: width .45s var(--srx-ease);
}

.srx-ex-prog-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 1000;
  color: var(--srx-muted);
  letter-spacing: .05em;
  text-transform: uppercase;
}

.srx-ex-prog-labels .done {
  color: var(--srx-good);
}

.srx-ex-body {
  padding: 22px;
}

.srx-ex-card {
  border: 2px solid var(--srx-border);
  border-radius: var(--srx-r);
  background: linear-gradient(160deg, color-mix(in srgb, var(--srx-surface) 70%, var(--srx-bg) 30%), var(--srx-surface));
  padding: 28px 22px 20px;
  box-shadow: var(--srx-shadow);
  position: relative;
  overflow: hidden;
  transition: border-color .22s ease, background .22s ease, box-shadow .22s ease, transform .28s var(--srx-ease);
  will-change: transform;
}

.srx-ex-card.correct {
  border-color: rgba(34, 197, 94, .5);
  background: linear-gradient(160deg, var(--srx-good-soft), var(--srx-surface));
  box-shadow: 0 8px 32px var(--srx-good-glow);
}

.srx-ex-card.wrong {
  animation: srxShake .25s ease-in-out;
}

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

  20% {
    transform: translateX(-8px);
  }

  40% {
    transform: translateX(8px);
  }

  60% {
    transform: translateX(-5px);
  }

  80% {
    transform: translateX(5px);
  }

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

.srx-correct-badge {
  position: absolute;
  right: 14px;
  top: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--srx-good-soft);
  border: 1px solid rgba(34, 197, 94, .4);
  color: var(--srx-good);
  font-weight: 1000;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: 0;
  transform: scale(.7) translateY(-4px);
  transition: opacity .2s ease, transform .25s var(--srx-ease);
  pointer-events: none;
}

.srx-correct-badge.show {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.srx-ex-word {
  font-weight: 1000;
  font-size: clamp(26px, 5.5vw, 44px);
  letter-spacing: -.03em;
  text-align: center;
  line-height: 1.1;
  padding-bottom: 4px;
}

.srx-ex-hint {
  text-align: center;
  font-size: 13px;
  font-weight: 900;
  color: var(--srx-muted);
  margin-top: 8px;
  letter-spacing: .03em;
}

.srx-opt-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 20px;
}

@media (max-width:480px) {
  .srx-opt-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

.srx-opt-btn {
  border: 2px solid var(--srx-border);
  background: var(--srx-surface);
  border-radius: var(--srx-r-sm);
  padding: 16px 16px;
  font-weight: 1000;
  font-size: 15px;
  cursor: pointer;
  text-align: left;
  transition: transform var(--srx-speed) var(--srx-ease), border-color .15s ease, box-shadow .15s ease, background .15s ease;
  -webkit-tap-highlight-color: transparent;
  line-height: 1.35;
}

.srx-opt-btn:hover {
  transform: translateY(-2px);
  border-color: var(--srx-accent-mid);
  box-shadow: 0 8px 24px var(--srx-accent-glow);
}

.srx-opt-btn.correct {
  border-color: rgba(34, 197, 94, .6) !important;
  background: var(--srx-good-soft) !important;
  color: #166534;
  box-shadow: 0 8px 28px var(--srx-good-glow) !important;
}

.srx-opt-btn.wrong {
  border-color: rgba(239, 68, 68, .5) !important;
  background: var(--srx-bad-soft) !important;
  color: #991b1b;
}

.srx-ex-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px 20px;
  border-top: 1px solid var(--srx-border);
  background: color-mix(in srgb, var(--srx-surface) 70%, var(--srx-bg) 30%);
}

.srx-ex-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border: 1px solid var(--srx-border);
  border-radius: var(--srx-r-sm);
  background: var(--srx-surface);
  font-weight: 1000;
  font-size: 13px;
  color: var(--srx-text2);
  cursor: pointer;
  transition: transform var(--srx-speed) var(--srx-ease), border-color var(--srx-speed), box-shadow var(--srx-speed), background var(--srx-speed);
  -webkit-tap-highlight-color: transparent;
  flex: 1;
}

.srx-ex-nav-btn:hover {
  transform: translateY(-1px);
  border-color: var(--srx-border2);
  box-shadow: var(--srx-shadow-sm);
}

.srx-ex-nav-btn.primary {
  background: var(--srx-accent);
  border-color: var(--srx-accent);
  color: #fff;
}

.srx-ex-nav-btn.primary:hover {
  box-shadow: 0 6px 20px var(--srx-accent-glow);
}

.srx-ex-complete-inner {
  padding: 24px 22px;
  text-align: center;
  background: linear-gradient(135deg, var(--srx-good-soft), transparent);
  border-top: 1px solid rgba(34, 197, 94, .2);
}

.srx-ex-complete-inner .ico {
  font-size: 48px;
  line-height: 1;
  margin-bottom: 12px;
}

.srx-ex-complete-inner .t {
  font-size: 22px;
  font-weight: 1000;
  margin-bottom: 6px;
}

.srx-ex-complete-inner .s {
  font-size: 14px;
  font-weight: 900;
  color: var(--srx-muted);
}

/* panel */
.srx-read-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: min(420px, 93vw);
  height: 100%;
  background: var(--srx-surface);
  border-left: 1px solid var(--srx-border);
  box-shadow: -20px 0 80px rgba(20, 22, 34, .18);
  transform: translateX(110%);
  transition: transform .32s var(--srx-ease);
  z-index: 120;
  display: flex;
  flex-direction: column;
}

.srx-read-panel.open {
  transform: translateX(0);
}

.srx-panel-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(28, 26, 23, .35);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  z-index: 119;
}

.srx-panel-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.srx-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--srx-border);
}

.srx-panel-title {
  font-weight: 1000;
  font-size: 18px;
}

.srx-panel-close {
  width: 36px;
  height: 36px;
  border: 1px solid var(--srx-border);
  border-radius: var(--srx-r-xs);
  background: color-mix(in srgb, var(--srx-surface) 70%, var(--srx-bg) 30%);
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--srx-muted);
}

.srx-panel-close:hover {
  background: var(--srx-bad-soft);
  border-color: rgba(239, 68, 68, .3);
  color: var(--srx-bad);
}

.srx-panel-search {
  padding: 12px 16px;
  border-bottom: 1px solid var(--srx-border);
}

.srx-panel-search input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--srx-border);
  border-radius: var(--srx-r-sm);
  background: var(--srx-bg);
  color: var(--srx-text);
  font-size: 14px;
  font-weight: 900;
  outline: none;
}

.srx-panel-search input:focus {
  border-color: var(--srx-accent-mid);
  box-shadow: 0 0 0 3px var(--srx-accent-soft);
}

.srx-panel-list {
  flex: 1;
  overflow: auto;
  padding: 12px 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.srx-r-item {
  padding: 14px 16px;
  border: 1px solid var(--srx-border);
  border-radius: var(--srx-r);
  background: var(--srx-bg);
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
  position: relative;
  overflow: hidden;
}

.srx-r-item:hover {
  transform: translateY(-2px);
  border-color: var(--srx-accent-mid);
  box-shadow: 0 8px 28px var(--srx-accent-glow);
}

.srx-r-item.active {
  border-color: var(--srx-accent-mid);
  background: var(--srx-accent-soft);
}

.srx-r-item.done {
  opacity: .78;
}

.srx-r-item.done .name::after {
  content: " ✓";
  color: var(--srx-good);
  font-size: 13px;
}

.srx-r-item .num {
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--srx-muted);
  margin-bottom: 3px;
}

.srx-r-item .name {
  font-weight: 1000;
  font-size: 15px;
}

.srx-r-item .pl {
  font-size: 12px;
  color: var(--srx-muted);
  margin-top: 3px;
  font-weight: 900;
}

.srx-r-item .badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 1000;
  background: var(--srx-good-soft);
  border: 1px solid rgba(34, 197, 94, .3);
  color: var(--srx-good);
}

/* sheet */
.srx-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(28, 26, 23, .35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
  z-index: 130;
}

.srx-sheet-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.srx-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 131;
  transform: translateY(110%);
  transition: transform .28s var(--srx-ease);
  padding-bottom: calc(env(safe-area-inset-bottom) + 8px);
}

.srx-sheet.open {
  transform: translateY(0);
}

.srx-sheet-inner {
  max-width: 540px;
  margin: 0 auto;
  background: var(--srx-surface);
  border: 1px solid var(--srx-border);
  border-bottom: none;
  border-radius: var(--srx-r) var(--srx-r) 0 0;
  box-shadow: 0 -12px 48px rgba(20, 22, 34, .16);
  overflow: hidden;
}

.srx-sheet-drag {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: var(--srx-border2);
  margin: 10px auto 4px;
}

.srx-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px 12px;
}

.srx-sheet-tag {
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--srx-accent);
  background: var(--srx-accent-soft);
  border: 1px solid var(--srx-accent-mid);
  padding: 5px 11px;
  border-radius: 999px;
}

.srx-sheet-close {
  width: 34px;
  height: 34px;
  border: 1px solid var(--srx-border);
  border-radius: var(--srx-r-xs);
  background: color-mix(in srgb, var(--srx-surface) 70%, var(--srx-bg) 30%);
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--srx-muted);
}

.srx-sheet-close:hover {
  background: var(--srx-bad-soft);
  color: var(--srx-bad);
}

.srx-sheet-body {
  padding: 4px 16px 16px;
}

.srx-sheet-en {
  font-size: 20px;
  font-weight: 1000;
  line-height: 1.35;
  margin-bottom: 12px;
}

.srx-sheet-pl {
  padding: 12px 14px;
  background: var(--srx-accent-soft);
  border-left: 4px solid var(--srx-accent);
  border-radius: 0 var(--srx-r-sm) var(--srx-r-sm) 0;
  font-size: 16px;
  font-weight: 900;
  color: var(--srx-text2);
  margin-bottom: 14px;
}

.srx-sheet-actions {
  display: flex;
  gap: 10px;
}

.srx-sheet-actions .srx-tbtn {
  flex: 1;
  justify-content: center;
}

/* side nav */
.srx-side-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  pointer-events: none;
}

.srx-side-nav.left {
  left: 8px;
}

.srx-side-nav.right {
  right: 8px;
}

.srx-side-btn {
  pointer-events: auto;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid var(--srx-border);
  background: color-mix(in srgb, var(--srx-bg) 85%, transparent);
  box-shadow: var(--srx-shadow);
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: .22;
  transition: opacity .25s ease, transform var(--srx-speed) var(--srx-ease), background var(--srx-speed), border-color var(--srx-speed);
  -webkit-tap-highlight-color: transparent;
  font-size: 22px;
  font-weight: 1000;
}

.srx-side-btn:hover {
  opacity: 1;
  transform: scale(1.08);
  border-color: var(--srx-accent-mid);
  background: var(--srx-surface);
}

.srx-side-btn:disabled {
  opacity: .06;
  cursor: not-allowed;
}

/* loader */
.srx-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 55vh;
  gap: 16px;
  color: var(--srx-muted);
}

.srx-spin {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 3px solid var(--srx-border);
  border-top-color: var(--srx-accent);
  animation: srxSpin .75s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {

  .srx-root *,
  .srx-root *::before,
  .srx-root *::after {
    transition: none !important;
    animation: none !important;
  }

  .srx-side-btn {
    opacity: .7 !important;
  }
}







/* =========================================================
   PATCH 2026-03-03 — Reader scroll + mobile 100vh grey-gap fix
   - Fix Reader "no scroll" inside Course viewer by giving the viewer a real flex height
   - Fix mobile dashboard bottom grey area (100vh vs dynamic viewport)
   Paste / keep at VERY END of styles.css
   ========================================================= */

/* --- Course Viewer: allow embedded modules (Reader) to size correctly --- */
body.course-mode .viewer {
  /* keep clipping around the viewer itself */
  overflow: hidden;
}

/* #viewer-body is the content area under the title row */
body.course-mode #viewer-body,
body.course-mode .viewer-body {
  flex: 1;
  min-height: 0;
  /* critical: allow inner scrollers to work */
  display: flex;
  /* give children a flex height */
  flex-direction: column;
  overflow: hidden;
  /* Reader scrolls inside .srx-main */
}

/* Make Reader root fill the viewer-body so .srx-shell height:100% works */
body.course-mode #viewer-body .srx-root,
body.course-mode .viewer-body .srx-root {
  flex: 1;
  min-height: 0;
  height: 100%;
}

/* Safety: if any non-iframe content needs scrolling, allow it */
body.course-mode #viewer-body>.scroll-y,
body.course-mode .viewer-body>.scroll-y {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* --- Mobile: avoid "bottom grey" caused by 100vh on iOS/Chrome mobile --- */
@media (max-width: 720px) {
  .dash-layout {
    height: 100dvh;
    /* dynamic viewport height */
    min-height: 100dvh;
  }

  .dash-content {
    /* keep nested scroll, but ensure safe-area room so content doesn't hide behind bottom inset */
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
  }
}



/* =========================================================
   PATCH: Mobile Dashboard = BODY SCROLL (fix grey strip + non-fixed header)
   Paste at VERY END of styles.css
   ========================================================= */

@media (max-width: 720px) {

  /* Let the page scroll normally on mobile */
  html,
  body {
    height: auto !important;
    overflow-y: auto !important;
  }

  /* Remove the 100dvh/overflow-hidden "app shell" lock on mobile */
  body.dashboard-mode .dash-layout {
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
  }

  /* Stop nested scroller that causes the fixed-header feel + bottom grey strip */
  body.dashboard-mode .dash-content {
    height: auto !important;
    overflow: visible !important;
    min-height: 0 !important;
    padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important;
  }

  /* Safety: allow content to expand */
  body.dashboard-mode .dash-main {
    min-height: 0 !important;
  }
}




/* =========================================================
   MOBILE FIX PACK (Dashboard + Course + Attendance)
   Paste at VERY END of styles.css
   ========================================================= */

@media (max-width: 720px) {

  /* ---- 1) Kill the mobile 100vh / hidden overflow traps ---- */
  html,
  body {
    height: auto !important;
    min-height: 100dvh !important;
    /* modern mobile viewport */
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
  }

  /* Common containers that accidentally clip content */
  .dash-layout,
  .dash-content,
  .dash-main,
  .course-layout,
  #course-layout {
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  /* If you have a dedicated dashboard scroller, force it to scroll */
  .dash-content {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
    min-height: 0 !important;
  }

  /* ---- 2) “Grey strip” at bottom: usually a background/padding area ---- */
  /* Make sure the bottom safe-area padding doesn’t look like a dead zone */
  body {
    background: #fff !important;
    /* prevents a grey “void” showing through */
  }

  /* If something adds a fixed footer spacer, neutralize it */
  .safe-area,
  .ios-safe-area,
  .bottom-safe,
  .bottom-spacer {
    height: auto !important;
    min-height: 0 !important;
  }

  /* ---- 3) Header fixed: make it NOT fixed on mobile ---- */
  /* Try the most common header classes used in your portal */
  .dash-topbar,
  .dash-header,
  .topbar,
  header {
    position: static !important;
    /* stops “always fixed” */
  }

  /* If you rely on sticky somewhere, use sticky (less aggressive than fixed) */
  .dash-topbar.is-sticky,
  .dash-header.is-sticky {
    position: sticky !important;
    top: 0 !important;
    z-index: 5;
  }

  /* ---- 4) Course tabs (Board / Reader / Attendance / Needs…) should not hide ---- */
  #course-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    /* key: lets buttons go to next line */
    gap: 8px !important;
    overflow: visible !important;
  }

  #course-tabs .tab-btn {
    flex: 1 1 auto !important;
    min-width: 120px;
    /* prevents super tiny buttons */
    white-space: nowrap;
  }

  /* If you prefer horizontal scroll instead of wrap, use this instead:
  #course-tabs{
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  #course-tabs .tab-btn{ flex: 0 0 auto !important; }
  */

  /* ---- 5) Viewer area (Reader/Board/Assets) should scroll naturally ---- */
  #viewer-body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    min-height: 0 !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
  }

  /* ---- 6) Attendance UI: stack controls vertically, align checkbox rows ---- */
  .att-controls,
  .attendance-controls,
  .att-toolbar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .att-controls button,
  .attendance-controls button,
  .att-toolbar button {
    width: 100% !important;
  }

  /* Typical checkbox row alignment */
  .att-row,
  .attendance-row,
  .att-line {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    /* label + checkbox */
    align-items: center !important;
    gap: 10px !important;
  }

  input[type="checkbox"] {
    transform: scale(1.15);
  }

}













/* =========================================================
   CONSOLIDATED: course tabs wrap + sidebar strip fix
   (replaces former FINAL OVERRIDES / FIX / HOTFIX blocks)
   ========================================================= */

/* Tablet and below: tabs wrap */
@media (max-width: 980px) {

  #course-tabs,
  .sidebar-tabs#course-tabs,
  .course-card #course-tabs,
  .course-details #course-tabs,
  .course-panel #course-tabs {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    overflow: visible !important;
    white-space: normal !important;
  }

  #course-tabs .tab-btn,
  #course-tabs button,
  #course-tabs a {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: nowrap !important;
  }

  .course-card {
    overflow-x: visible;
  }

  .sidebar-tabs,
  .tabs-row,
  .tab-row,
  .tabs,
  .tabs-wrap,
  .course-tabs,
  .course-tabs-wrap {
    overflow-x: visible !important;
  }
}

/* Mobile: sidebar strip fix + tabs wrap */
@media (max-width: 720px) {

  /* No leftover sidebar strip when collapsed */
  body.course-mode .course-layout.sidebar-collapsed {
    grid-template-columns: 1fr !important;
  }

  body.course-mode .viewer {
    border-left: 0 !important;
    box-shadow: none !important;
  }

  /* Viewer scrolling stability */
  body.course-mode .viewer,
  body.course-mode .viewer-body {
    min-height: 0 !important;
  }

  body.course-mode .viewer-body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* =========================================================
   AUDIT4 FIX: Detail panel mini-tabs MUST WRAP on mobile
   (Outline / Schedule / Needs / Report / Attendance)
   ========================================================= */
@media (max-width: 720px) {

  /* override earlier "horizontal scroll" rule */
  .detail-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
    -webkit-overflow-scrolling: auto !important;
    padding-bottom: 12px !important;
    gap: 8px !important;
  }

  .detail-tabs::-webkit-scrollbar {
    display: none !important;
  }

  .mini-tab {
    flex: 0 1 auto !important;
    flex-shrink: 1 !important;
    white-space: nowrap !important;
    max-width: 100% !important;
  }
}




































/* ═══════════════════════════════════════════════════════════════
   SPEAK3000 THEME — matches index-engine.html Design DNA
   Append to END of styles.css. Scoped to .s3000-* only.
═══════════════════════════════════════════════════════════════ */

/* ── Token bridge (inherits portal vars if present, else own) ── */
.s3000-root {
  --s-bg: var(--bg, #fffbf5);
  --s-surface: var(--surface, #ffffff);
  --s-surface2: var(--surface2, #fdf6ec);
  --s-text: var(--text, #1c1a17);
  --s-text2: var(--text2, #5c5040);
  --s-muted: var(--muted, #9c8a78);
  --s-border: var(--border, #ecddd0);
  --s-border2: var(--border2, #d9c6b4);

  --s-accent: var(--accent, #ff6b35);
  --s-accent2: var(--accent2, #ff8c5a);
  --s-accent-soft: var(--accent-soft, rgba(255, 107, 53, .10));
  --s-accent-mid: var(--accent-mid, rgba(255, 107, 53, .25));
  --s-accent-glow: var(--accent-glow, rgba(255, 107, 53, .18));

  --s-teal: var(--teal, #0ea5a0);
  --s-teal-soft: var(--teal-soft, rgba(14, 165, 160, .10));
  --s-gold: var(--gold, #f59e0b);
  --s-gold-soft: var(--gold-soft, rgba(245, 158, 11, .12));

  --s-good: var(--good, #22c55e);
  --s-good-soft: var(--good-soft, rgba(34, 197, 94, .12));
  --s-good-glow: var(--good-glow, rgba(34, 197, 94, .22));
  --s-bad: var(--bad, #ef4444);
  --s-bad-soft: var(--bad-soft, rgba(239, 68, 68, .10));

  --s-shadow-sm: var(--shadow-sm, 0 2px 8px rgba(100, 60, 20, .06), 0 1px 2px rgba(100, 60, 20, .04));
  --s-shadow: var(--shadow, 0 4px 20px rgba(100, 60, 20, .09), 0 2px 6px rgba(100, 60, 20, .06));
  --s-shadow-lg: var(--shadow-lg, 0 12px 48px rgba(100, 60, 20, .16));

  --s-r: var(--r, 20px);
  --s-r-sm: var(--r-sm, 14px);
  --s-r-xs: var(--r-xs, 10px);

  --s-ease: var(--ease, cubic-bezier(.2, .8, .2, 1));
  --s-speed: var(--speed, .2s);

  --s-font-body: var(--font-body, 'Nunito', system-ui, sans-serif);
  --s-font-display: var(--font-display, 'Fraunces', Georgia, serif);
}

/* ── Root shell ── */
.s3000-root {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--s-bg);
  color: var(--s-text);
  font-family: var(--s-font-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* ── Topbar ── */
.s3000-topbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  height: 58px;
  flex-shrink: 0;
  background: rgba(255, 251, 245, .92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1.5px solid var(--s-border);
  padding-top: env(safe-area-inset-top);
}

/* ── Title / brand in topbar ── */
.s3000-title {
  font-family: var(--s-font-display);
  font-weight: 900;
  font-size: 16px;
  letter-spacing: -.02em;
  color: var(--s-accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

/* ── Spacer ── */
.s3000-spacer {
  flex: 1;
}

/* ── Body / scroll area ── */
.s3000-body {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: var(--s-bg);
}

.s3000-scroll {
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 22px 16px calc(32px + env(safe-area-inset-bottom));
  max-width: 860px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* ── Section heading (h1-style) ── */
.s3000-h1 {
  font-family: var(--s-font-display);
  font-size: clamp(22px, 5vw, 36px);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: var(--s-text);
  margin: 4px 0 14px;
}

/* ── Muted text ── */
.s3000-muted {
  color: var(--s-muted);
  font-size: .92em;
  font-weight: 700;
}

/* ── Responsive topbar ── */
@media (max-width: 480px) {
  .s3000-topbar {
    padding: 0 10px;
    gap: 4px;
  }

  .s3000-title {
    font-size: 14px;
    max-width: 130px;
  }
}







/* ═══════════════════════════════════════════════════════════════
   SPEAK3000 PATCH B — cards + buttons + drawer + sets + choices
═══════════════════════════════════════════════════════════════ */

/* ── Buttons ── */
.s3000-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 13px;
  border: 1.5px solid var(--s-border);
  border-radius: var(--s-r-sm);
  background: var(--s-surface);
  color: var(--s-text2);
  font-family: var(--s-font-body);
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--s-speed) var(--s-ease),
    background var(--s-speed),
    border-color var(--s-speed),
    box-shadow var(--s-speed),
    color var(--s-speed);
}

.s3000-btn:hover {
  transform: translateY(-1px);
  border-color: var(--s-border2);
  box-shadow: var(--s-shadow-sm);
}

.s3000-btn:active {
  transform: scale(.96);
}

.s3000-btn[disabled] {
  opacity: .4;
  cursor: not-allowed;
  transform: none !important;
}

/* Primary variant — accent fill */
.s3000-btn.s3000-primary,
.s3000-root [data-act="stage2"],
.s3000-root [data-act="next-round"] {
  background: var(--s-accent);
  border-color: var(--s-accent);
  color: #fff;
  font-weight: 900;
}

.s3000-btn.s3000-primary:hover,
.s3000-root [data-act="stage2"]:hover,
.s3000-root [data-act="next-round"]:hover {
  box-shadow: 0 6px 20px var(--s-accent-glow);
  border-color: var(--s-accent);
}

/* ── Cards ── */
.s3000-card {
  background: var(--s-surface);
  border: 1.5px solid var(--s-border);
  border-radius: var(--s-r);
  box-shadow: var(--s-shadow);
  padding: 18px 20px;
  margin: 12px 0;
  position: relative;
  overflow: hidden;
  transition: border-color var(--s-speed);
}

/* Accent top stripe on cards */
.s3000-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--s-accent), var(--s-gold), var(--s-teal));
}

.s3000-card:hover {
  border-color: var(--s-border2);
}

/* ── Lines (stage1 phrase rows) ── */
.s3000-line {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 10px 0;
  padding: 8px 10px;
  border-radius: var(--s-r-xs);
  cursor: pointer;
  transition: background var(--s-speed);
  -webkit-tap-highlight-color: transparent;
}

.s3000-line:hover {
  background: var(--s-accent-soft);
}

.s3000-line.s3000-active {
  background: var(--s-accent-soft);
  outline: 2px solid var(--s-accent-mid);
  outline-offset: 1px;
}

.s3000-en {
  font-weight: 700;
  font-size: 1em;
  color: var(--s-text);
  line-height: 1.5;
}

.s3000-line.s3000-active .s3000-en {
  font-weight: 900;
}

.s3000-pl {
  display: none;
  font-size: .9em;
  font-weight: 800;
  color: var(--s-text2);
  padding: 6px 10px;
  border-left: 3px solid var(--s-accent);
  background: linear-gradient(90deg, var(--s-accent-soft), transparent);
  border-radius: 0 var(--s-r-xs) var(--s-r-xs) 0;
  animation: s3kSlideIn .18s var(--s-ease) both;
}

.s3000-line.s3000-open .s3000-pl {
  display: block;
}

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

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

/* ── Progress bar ── */
.s3000-progress {
  height: 8px;
  border-radius: 999px;
  background: var(--s-border);
  overflow: hidden;
}

.s3000-progress>div {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--s-accent), var(--s-gold));
  border-radius: 999px;
  transition: width .45s var(--s-ease);
}

/* ── Chip / pill ── */
.s3000-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--s-accent-mid);
  background: var(--s-accent-soft);
  color: var(--s-accent);
  font-weight: 900;
  font-size: 12px;
  white-space: nowrap;
}

/* ── Quiz header ── */
.s3000-qhead {
  font-family: var(--s-font-display);
  font-weight: 900;
  font-size: clamp(16px, 3vw, 20px);
  letter-spacing: -.02em;
  color: var(--s-text);
  line-height: 1.1;
}

/* ── Quiz layout ── */
.s3000-quiz {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 12px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 860px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* ── Choice buttons (2-col grid) ── */
.s3000-qrow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 480px) {
  .s3000-qrow {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

.s3000-choice {
  border: 2px solid var(--s-border);
  background: var(--s-surface);
  border-radius: var(--s-r-sm);
  padding: 16px 14px;
  font-family: var(--s-font-body);
  font-weight: 900;
  font-size: 15px;
  color: var(--s-text);
  cursor: pointer;
  text-align: left;
  line-height: 1.35;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--s-speed) var(--s-ease),
    border-color .15s ease,
    box-shadow .15s ease,
    background .15s ease;
}

.s3000-choice:hover {
  transform: translateY(-2px);
  border-color: var(--s-accent-mid);
  box-shadow: 0 8px 24px var(--s-accent-glow);
}

.s3000-choice:active {
  transform: scale(.97);
}

.s3000-choice.s3000-good {
  border-color: rgba(34, 197, 94, .6) !important;
  background: var(--s-good-soft) !important;
  color: #166534;
  box-shadow: 0 8px 28px var(--s-good-glow) !important;
}

.s3000-choice.s3000-bad {
  border-color: rgba(239, 68, 68, .5) !important;
  background: var(--s-bad-soft) !important;
  color: #991b1b;
}

/* ── Drawer (side panel) ── */
.s3000-drawer {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(300px, 86vw);
  transform: translateX(102%);
  transition: transform .28s var(--s-ease);
  background: var(--s-surface);
  border-left: 1.5px solid var(--s-border);
  box-shadow: -12px 0 48px rgba(100, 60, 20, .14);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 50;
}

.s3000-drawer.s3000-on {
  transform: translateX(0);
}

.s3000-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(28, 26, 23, .35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: none;
  z-index: 49;
}

.s3000-drawer-backdrop.s3000-on {
  display: block;
}

/* ── Set items in drawer ── */
.s3000-set {
  padding: 13px 15px;
  border: 1.5px solid transparent;
  border-radius: var(--s-r);
  cursor: pointer;
  transition:
    transform .15s ease,
    border-color .15s ease,
    box-shadow .15s ease,
    background .15s ease;
  -webkit-tap-highlight-color: transparent;
  margin-bottom: 6px;
}

.s3000-set:hover {
  transform: translateY(-2px);
  border-color: var(--s-accent-mid);
  box-shadow: 0 8px 24px var(--s-accent-glow);
}

.s3000-set:active {
  transform: scale(.98);
}

.s3000-set.s3000-current {
  border-color: var(--s-accent-mid);
  background: var(--s-accent-soft);
}

.s3000-set.s3000-current .s3000-set-label {
  color: var(--s-accent);
}

.s3000-set-num {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--s-muted);
  margin-bottom: 3px;
}

.s3000-set-label {
  font-weight: 900;
  font-size: 14px;
  color: var(--s-text);
}

/* ── Stage 2 overlay ── */
.s3000-stage2 {
  position: absolute;
  inset: 0;
  background: var(--s-bg);
  display: none;
  overflow: hidden;
}

.s3000-stage2.s3000-on {
  display: block;
}

/* ── Night mode base ── */
.s3000-root.s3000-night {
  --s-bg: #0f1216;
  --s-surface: #181c24;
  --s-surface2: #1e2330;
  --s-text: #e9eef6;
  --s-text2: #a0aec0;
  --s-muted: #64748b;
  --s-border: rgba(255, 255, 255, .10);
  --s-border2: rgba(255, 255, 255, .16);
}

.s3000-root.s3000-night .s3000-topbar {
  background: rgba(15, 18, 22, .92);
}

.s3000-root.s3000-night .s3000-drawer {
  background: rgba(15, 18, 22, .97);
  border-left-color: rgba(255, 255, 255, .10);
}

/* ═══════════════════════════════════════════════════════════════
   SPEAK3000 PATCH A — tokens · shell · topbar · stage2 · typography
   Append after existing s3000 block. Scoped to .s3000-root only.
═══════════════════════════════════════════════════════════════ */

/* ── New design tokens ── */
.s3000-root {
  --s-prompt-size: clamp(24px, 5vw, 42px);
  --s-choice-size: clamp(14px, 2.5vw, 17px);
  --s-topbar-h: 58px;
  --s-topbar-total: calc(58px + env(safe-area-inset-top));
  --s-pad-x: clamp(14px, 4vw, 32px);
  --s-max-w: 800px;
  --s-trans-quiz: .22s;
}

/* ── Shell: ensure root fills host even if host has no height ── */
.s3000-root {
  min-height: 320px;
  height: 100%;
}

/* Host containers that embed Speak3000 must be at least this tall */
.s3000-root[style*="height"] {
  height: 100%;
}

/* ── Topbar: safe-area above, not inside, the bar ── */
.s3000-topbar {
  height: var(--s-topbar-h);
  padding-top: 0;
  margin-top: env(safe-area-inset-top);
  flex-shrink: 0;
  overflow: hidden;
}

/* Shrink non-essential buttons before overflow at 360px */
@media (max-width: 420px) {
  .s3000-topbar {
    gap: 3px;
    padding: 0 8px;
  }

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

  /* Hide pause/stop labels, keep icons readable */
  .s3000-topbar .s3000-btn[data-act="pause"],
  .s3000-topbar .s3000-btn[data-act="stop"] {
    display: none;
  }
}

/* ── Body: stage2 overlay anchors correctly ── */
.s3000-body {
  /* top of body = below topbar + safe-area */
  top: 0;
  background: var(--s-bg);
}

/* ── Stage 2 overlay: smooth slide-in instead of snap ── */
.s3000-stage2 {
  display: block;
  /* always in DOM, hidden via transform */
  transform: translateY(14px);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--s-trans-quiz) var(--s-ease),
    transform var(--s-trans-quiz) var(--s-ease);
  will-change: transform, opacity;
}

.s3000-stage2.s3000-on {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* ── Scroll area: clamp horizontal padding ── */
.s3000-scroll {
  padding: 22px var(--s-pad-x) calc(40px + env(safe-area-inset-bottom));
}

/* ── Quiz scroll area: same safe padding ── */
.s3000-quiz {
  padding: 16px var(--s-pad-x) calc(32px + env(safe-area-inset-bottom));
}

/* ── Big prompt typography ── */
.s3000-qprompt {
  font-family: var(--s-font-display);
  font-size: var(--s-prompt-size);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.15;
  color: var(--s-text);
  text-align: center;
  padding: 4px 0 8px;
}

/* ── Prompt hint (muted subtitle under prompt) ── */
.s3000-qhint {
  text-align: center;
  font-size: clamp(12px, 2vw, 14px);
  font-weight: 800;
  color: var(--s-muted);
  letter-spacing: .03em;
  margin-top: 2px;
}

/* ── Choice button font scale ── */
.s3000-choice {
  font-size: var(--s-choice-size);
}

/* ── Stage 1 heading scale ── */
.s3000-h1 {
  font-size: clamp(22px, 5vw, 38px);
}

/* ── Drawer inner scroll ── */
.s3000-drawer-inner {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 10px 20px;
}

/* ── Reduced motion: disable all transitions/animations ── */
@media (prefers-reduced-motion: reduce) {

  .s3000-root *,
  .s3000-root *::before,
  .s3000-root *::after {
    transition: none !important;
    animation: none !important;
  }
}



/* ═══════════════════════════════════════════════════════════════
   SPEAK3000 PATCH B — question panel · choice boxes · feedback
   · quiz header · A/B badges · state classes
═══════════════════════════════════════════════════════════════ */

/* ── Quiz header row ── */
.s3000-quiz-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  flex-shrink: 0;
}

.s3000-quiz-header .s3000-chip {
  flex-shrink: 0;
}

.s3000-quiz-header .s3000-spacer {
  flex: 1;
  min-width: 8px;
}

/* ── Quiz progress row ── */
.s3000-quiz-prog {
  flex-shrink: 0;
}

.s3000-quiz-prog-track {
  height: 8px;
  background: var(--s-border);
  border-radius: 999px;
  overflow: hidden;
}

.s3000-quiz-prog-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--s-accent), var(--s-gold));
  border-radius: 999px;
  transition: width .45s var(--s-ease);
  width: 0%;
}

.s3000-quiz-prog-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  font-size: 11px;
  font-weight: 900;
  color: var(--s-muted);
  letter-spacing: .05em;
  text-transform: uppercase;
}

.s3000-quiz-prog-labels .s3000-done-count {
  color: var(--s-good);
}

/* ── Question panel (the big boxed card) ── */
.s3000-question-panel {
  background: linear-gradient(160deg, var(--s-surface2), var(--s-surface));
  border: 2px solid var(--s-border);
  border-radius: var(--s-r);
  box-shadow: var(--s-shadow-lg);
  padding: clamp(20px, 4vw, 36px) clamp(16px, 4vw, 32px);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  transition:
    border-color .22s ease,
    background .22s ease,
    box-shadow .22s ease;
  will-change: transform;
}

/* Accent top stripe */
.s3000-question-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--s-accent), var(--s-gold), var(--s-teal));
}

/* Correct state */
.s3000-question-panel.s3000-correct {
  border-color: rgba(34, 197, 94, .5);
  background: linear-gradient(160deg, var(--s-good-soft), var(--s-surface));
  box-shadow: 0 8px 40px var(--s-good-glow);
}

/* Wrong state — animation applied via JS class, removed after */
.s3000-question-panel.s3000-wrong {
  border-color: rgba(239, 68, 68, .45);
  background: linear-gradient(160deg, var(--s-bad-soft), var(--s-surface));
}

/* Correct badge (floats top-right of question panel) */
.s3000-correct-badge {
  position: absolute;
  right: 14px;
  top: 14px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--s-good-soft);
  border: 1.5px solid rgba(34, 197, 94, .4);
  color: var(--s-good);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: 0;
  transform: scale(.7) translateY(-4px);
  transition: opacity .2s ease, transform .25s var(--s-ease);
  pointer-events: none;
}

.s3000-correct-badge.s3000-show {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* ── Choice buttons — Quizlet-style option boxes ── */
.s3000-choice {
  position: relative;
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 16px 14px;
  text-align: left;
  border-radius: var(--s-r-sm);
  border: 2px solid var(--s-border);
  background: var(--s-surface);
  overflow: hidden;
}

/* A / B badge */
.s3000-choice::before {
  content: attr(data-badge);
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--s-surface2);
  border: 1.5px solid var(--s-border2);
  color: var(--s-muted);
  font-size: 12px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  /* flex trick: pseudo can't be flex child — use outline approach instead */
}

/* Since ::before can't participate in flex gap cleanly at all sizes,
   we inject the badge via a span inside each choice (added in Patch D JS).
   Pre-style the span here: */
.s3000-choice-badge {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--s-surface2);
  border: 1.5px solid var(--s-border2);
  color: var(--s-muted);
  font-size: 12px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease;
  pointer-events: none;
}

.s3000-choice-text {
  flex: 1;
  line-height: 1.4;
  pointer-events: none;
}

/* Hover */
.s3000-choice:hover .s3000-choice-badge {
  background: var(--s-accent-soft);
  border-color: var(--s-accent-mid);
  color: var(--s-accent);
}

/* Correct state */
.s3000-choice.s3000-good {
  border-color: rgba(34, 197, 94, .6) !important;
  background: var(--s-good-soft) !important;
  color: #166534;
  box-shadow: 0 8px 28px var(--s-good-glow) !important;
}

.s3000-choice.s3000-good .s3000-choice-badge {
  background: var(--s-good);
  border-color: var(--s-good);
  color: #fff;
}

/* Wrong state */
.s3000-choice.s3000-bad {
  border-color: rgba(239, 68, 68, .5) !important;
  background: var(--s-bad-soft) !important;
  color: #991b1b;
}

.s3000-choice.s3000-bad .s3000-choice-badge {
  background: var(--s-bad);
  border-color: var(--s-bad);
  color: #fff;
}

/* Disabled state (after answer locked) */
.s3000-choice.s3000-locked {
  pointer-events: none;
  opacity: .72;
}

.s3000-choice.s3000-good.s3000-locked,
.s3000-choice.s3000-bad.s3000-locked {
  opacity: 1;
}

/* ── Choice grid responsive ── */
.s3000-qrow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  flex-shrink: 0;
}

@media (max-width: 520px) {
  .s3000-qrow {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* ── Feedback row — fixed height so layout never shifts ── */
.s3000-feedback-row {
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.s3000-feedback-text {
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .03em;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .18s ease, transform .18s var(--s-ease);
}

.s3000-feedback-text.s3000-show {
  opacity: 1;
  transform: translateY(0);
}

.s3000-feedback-text.s3000-fb-good {
  color: var(--s-good);
}

.s3000-feedback-text.s3000-fb-bad {
  color: var(--s-bad);
}

/* ── Round-done + Finale cards: premium feel ── */
.s3000-result-card {
  background: linear-gradient(135deg, var(--s-good-soft), var(--s-surface));
  border: 1.5px solid rgba(34, 197, 94, .3);
  border-radius: var(--s-r);
  padding: clamp(20px, 4vw, 36px);
  box-shadow: var(--s-shadow-lg);
  position: relative;
  overflow: hidden;
  text-align: center;
}

.s3000-result-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--s-good), var(--s-teal), var(--s-gold));
}

.s3000-result-icon {
  font-size: 52px;
  line-height: 1;
  margin-bottom: 12px;
}

.s3000-result-title {
  font-family: var(--s-font-display);
  font-size: clamp(20px, 4vw, 28px);
  font-weight: 900;
  letter-spacing: -.02em;
  color: var(--s-text);
  margin-bottom: 6px;
}

.s3000-result-sub {
  font-size: 14px;
  font-weight: 800;
  color: var(--s-muted);
  margin-bottom: 16px;
}

.s3000-result-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Night mode adjustments for new components ── */
.s3000-root.s3000-night .s3000-question-panel {
  background: linear-gradient(160deg, #1e2330, #181c24);
  border-color: rgba(255, 255, 255, .10);
}

.s3000-root.s3000-night .s3000-question-panel.s3000-correct {
  background: linear-gradient(160deg, rgba(34, 197, 94, .08), #181c24);
}

.s3000-root.s3000-night .s3000-question-panel.s3000-wrong {
  background: linear-gradient(160deg, rgba(239, 68, 68, .08), #181c24);
}

.s3000-root.s3000-night .s3000-choice {
  background: #181c24;
  border-color: rgba(255, 255, 255, .10);
  color: var(--s-text);
}

.s3000-root.s3000-night .s3000-choice-badge {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .12);
  color: var(--s-muted);
}

.s3000-root.s3000-night .s3000-result-card {
  background: linear-gradient(135deg, rgba(34, 197, 94, .07), #181c24);
}

/* ═══════════════════════════════════════════════════════════════
   SPEAK3000 PATCH F — stage1 redesign: section cards, big fonts,
   prose blocks, highlight mode, topbar drawer-right, CTA card
═══════════════════════════════════════════════════════════════ */

/* ── Drawer button pinned to far right ── */
.s3000-btn-drawer {
  margin-left: 4px;
  background: var(--s-accent-soft);
  border-color: var(--s-accent-mid);
  color: var(--s-accent);
  font-size: 16px;
  padding: 7px 11px;
}

.s3000-btn-drawer:hover {
  background: var(--s-accent);
  color: #fff;
  border-color: var(--s-accent);
}

/* ── H1 headword ── */
.s3000-h1 {
  font-family: var(--s-font-display);
  font-size: clamp(26px, 6vw, 44px) !important;
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: var(--s-text);
  margin: 8px 0 18px;
}

.s3000-h1-sep {
  color: var(--s-border2);
  font-weight: 300;
  margin: 0 6px;
}

.s3000-h1-pl {
  color: var(--s-muted);
  font-weight: 700;
}

/* ── Section cards — each section gets its own white box ── */
.s3000-section-card {
  background: var(--s-surface);
  border: 1.5px solid var(--s-border);
  border-radius: var(--s-r);
  box-shadow: var(--s-shadow);
  padding: 20px 22px;
  margin: 0 0 14px;
  position: relative;
  overflow: hidden;
  transition: border-color var(--s-speed), box-shadow var(--s-speed);
}

.s3000-section-card:hover {
  border-color: var(--s-border2);
  box-shadow: var(--s-shadow-lg);
}

/* Coloured left accent per section type */
.s3000-section-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 4px;
  border-radius: 0;
}

.s3000-section-example::before {
  background: var(--s-teal);
}

.s3000-section-related::before {
  background: var(--s-accent);
}

.s3000-section-keyphrases::before {
  background: var(--s-gold);
}

.s3000-section-question::before {
  background: #8b5cf6;
}

.s3000-section-answer::before {
  background: var(--s-good);
}

.s3000-section-cta::before {
  background: linear-gradient(180deg, var(--s-accent), var(--s-gold));
}

/* ── Section label (replaces .s3000-muted headers) ── */
.s3000-section-label {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--s-muted);
  margin-bottom: 10px;
}

/* ── Lines inside section cards ── */
.s3000-section-card .s3000-line {
  margin: 6px 0;
  padding: 10px 12px;
  border-radius: var(--s-r-xs);
}

.s3000-section-card .s3000-en {
  font-size: clamp(15px, 2.8vw, 18px);
  font-weight: 800;
  line-height: 1.5;
  color: var(--s-text);
}

.s3000-section-card .s3000-pl {
  font-size: clamp(13px, 2.2vw, 15px);
  font-weight: 700;
  margin-top: 2px;
}

/* Active / highlight state — strong accent ring */
.s3000-section-card .s3000-line.s3000-active {
  background: var(--s-accent-soft);
  outline: 2px solid var(--s-accent);
  outline-offset: 1px;
}

.s3000-section-card .s3000-line.s3000-active .s3000-en {
  color: var(--s-accent);
  font-weight: 900;
}

/* ── Prose blocks (question / answer — inline continuous text) ── */
.s3000-prose-block {
  padding: 10px 12px;
  border-radius: var(--s-r-xs);
  cursor: pointer;
  transition: background var(--s-speed);
  -webkit-tap-highlight-color: transparent;
}

.s3000-prose-block:hover {
  background: var(--s-accent-soft);
}

.s3000-prose-block.s3000-active {
  background: var(--s-accent-soft);
  outline: 2px solid var(--s-accent);
  outline-offset: 1px;
}

.s3000-prose-en {
  font-size: clamp(16px, 3vw, 20px);
  font-weight: 800;
  color: var(--s-text);
  line-height: 1.65;
  display: inline;
}

/* PL translation — inline after EN, slightly muted, hidden until open */
.s3000-prose-pl {
  display: none;
  font-size: clamp(14px, 2.4vw, 16px);
  font-weight: 700;
  color: var(--s-text2);
  line-height: 1.65;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--s-accent-soft);
  border-left: 3px solid var(--s-accent);
  animation: s3kSlideIn .18s var(--s-ease) both;
}

.s3000-prose-block.s3000-open .s3000-prose-pl {
  display: inline;
}

.s3000-prose-block.s3000-active .s3000-prose-en {
  color: var(--s-accent);
}

/* ── CTA card ── */
.s3000-cta-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.s3000-cta-text {
  flex: 1;
}

.s3000-cta-title {
  font-size: clamp(15px, 2.5vw, 18px);
  font-weight: 900;
  color: var(--s-text);
  margin-bottom: 3px;
}

.s3000-cta-sub {
  font-size: 12px;
  font-weight: 800;
  color: var(--s-muted);
  letter-spacing: .04em;
}

/* ── Night mode for new components ── */
.s3000-root.s3000-night .s3000-section-card {
  background: var(--s-surface);
  border-color: var(--s-border);
}

.s3000-root.s3000-night .s3000-section-card:hover {
  border-color: var(--s-border2);
}

.s3000-root.s3000-night .s3000-prose-en {
  color: var(--s-text);
}

.s3000-root.s3000-night .s3000-prose-pl {
  color: var(--s-text2);
}

.s3000-root.s3000-night .s3000-btn-drawer {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .16);
  color: var(--s-text);
}

/* ── Animations (Patch C — included here if not yet appended) ── */
@keyframes s3kShake {
  0% {
    transform: translateX(0);
  }

  15% {
    transform: translateX(-7px) rotate(-1.5deg);
  }

  30% {
    transform: translateX(6px) rotate(1.2deg);
  }

  45% {
    transform: translateX(-5px) rotate(-1deg);
  }

  60% {
    transform: translateX(4px) rotate(.8deg);
  }

  75% {
    transform: translateX(-2px);
  }

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

@keyframes s3kBounce {
  0% {
    transform: translateY(0) scale(1);
  }

  30% {
    transform: translateY(-8px) scale(1.03);
  }

  55% {
    transform: translateY(-3px) scale(1.01);
  }

  75% {
    transform: translateY(-6px) scale(1.02);
  }

  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes s3kFlyup {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  60% {
    opacity: 1;
    transform: translateY(-28px) scale(1.1);
  }

  100% {
    opacity: 0;
    transform: translateY(-48px) scale(.9);
  }
}

@keyframes s3kPulse {
  0% {
    filter: brightness(1);
  }

  40% {
    filter: brightness(1.25);
    box-shadow: 0 0 12px var(--s-accent-glow, rgba(255, 107, 53, .3));
  }

  100% {
    filter: brightness(1);
  }
}

.s3000-do-shake {
  animation: s3kShake .38s cubic-bezier(.2, .8, .2, 1) both;
}

.s3000-do-bounce {
  animation: s3kBounce .36s cubic-bezier(.2, .8, .2, 1) both;
}

.s3k-prog-pulse {
  animation: s3kPulse .44s ease both;
}

.s3000-flyup {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  font-size: 13px;
  font-weight: 900;
  color: #fff;
  background: var(--s-accent, #ff6b35);
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
  box-shadow: 0 4px 16px var(--s-accent-glow, rgba(255, 107, 53, .35));
  animation: s3kFlyup .75s cubic-bezier(.2, .8, .2, 1) forwards;
}

.s3000-finale-stars {
  font-size: clamp(22px, 5vw, 32px);
  letter-spacing: 4px;
  color: var(--s-gold, #f59e0b);
  text-shadow: 0 2px 12px rgba(245, 158, 11, .35);
  display: inline-block;
}

.s3000-stage2 {
  display: block !important;
  transform: translateY(14px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s var(--s-ease, cubic-bezier(.2, .8, .2, 1)), transform .22s var(--s-ease, cubic-bezier(.2, .8, .2, 1));
  will-change: transform, opacity;
}

.s3000-stage2.s3000-on {
  transform: translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.s3000-root.s3000-night .s3000-topbar {
  background: rgba(15, 18, 22, .94) !important;
  border-bottom-color: rgba(255, 255, 255, .10) !important;
}

/* drawer flex already set in base rule — only patch inner scroll here */
.s3000-drawer-inner {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px 10px 16px;
}

@media (max-width: 380px) {

  .s3000-topbar .s3000-btn[data-act="font+"],
  .s3000-topbar .s3000-btn[data-act="font-"] {
    display: none;
  }

  .s3000-title {
    max-width: 100px;
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .s3000-do-shake,
  .s3000-do-bounce,
  .s3k-prog-pulse,
  .s3000-flyup {
    animation: none !important;
  }

  .s3000-stage2 {
    transition: opacity .12s ease !important;
    transform: none !important;
  }
}



/* ═══════════════════════════════════════════════════════════════
   SPEAK3000 PATCH G — quiz options always stacked (1 col)
   Overrides all previous .s3000-qrow grid rules.
═══════════════════════════════════════════════════════════════ */

/* Always single column — clean, readable, tap-friendly */
.s3000-qrow {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

/* Only go side-by-side on genuinely wide screens (≥ 760px)
   where both options have enough room to breathe */
@media (min-width: 760px) {
  .s3000-qrow {
    grid-template-columns: 1fr 1fr !important;
  }
}



/* ═══════════════════════════════════════════════════════════════
   SPEAK3000 PATCH H — fix scroll area width + dead zones
═══════════════════════════════════════════════════════════════ */

/* Body must stretch full width and allow child to scroll */
.s3000-body {
  overflow-x: hidden;
  overflow-y: hidden;
  width: 100%;
}

/* Scroll container: full width, no max-width constraint.
   Content inside is max-width-capped via an inner wrapper instead. */
.s3000-scroll {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  box-sizing: border-box;
  padding: 22px var(--s-pad-x, 16px) calc(40px + env(safe-area-inset-bottom));
}

/* Cap the readable line length inside the scroll area
   without breaking the clickable/scrollable full-width container */
.s3000-scroll>* {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* Quiz container: same treatment */
.s3000-quiz {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  box-sizing: border-box;
}

.s3000-quiz>* {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}



/* ═══════════════════════════════════════════════════════════════
   SPEAK3000 PATCH I — monochrome icon system
   Replaces all emoji with CSS-drawn / Unicode icons, styled to
   match the design system.
═══════════════════════════════════════════════════════════════ */

/* ── Base icon span ── */
.s3000-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  flex-shrink: 0;
}

/* ── Tick / checkmark ── */
.s3000-icon-tick::before {
  content: '✓';
  font-size: .9em;
  font-weight: 900;
}

/* ── Audio / speaker — CSS bars ── */
.s3000-icon-audio {
  position: relative;
  width: 16px;
  height: 14px;
  flex-shrink: 0;
}

.s3000-icon-audio::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 8px;
  background: currentColor;
  clip-path: polygon(0 25%, 60% 0, 60% 100%, 0 75%);
}

.s3000-icon-audio::after {
  content: '';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border: 2px solid currentColor;
  border-left: none;
  border-radius: 0 8px 8px 0;
  box-shadow: 3px 0 0 -1px currentColor;
}

/* ── Back arrow ── */
.s3000-icon-back::before {
  content: '‹';
  font-size: 1.2em;
  font-weight: 300;
  line-height: 1;
}

/* ── Number / count icon ── */
.s3000-icon-num::before {
  content: '#';
  font-size: .75em;
  font-weight: 900;
  opacity: .7;
}

/* ── TTS button — styled distinctly ── */
.s3000-btn-tts {
  background: var(--s-teal-soft) !important;
  border-color: rgba(14, 165, 160, .3) !important;
  color: var(--s-teal) !important;
  padding: 7px 13px;
  font-size: 13px;
  min-width: 40px;
  justify-content: center;
}

.s3000-btn-tts:hover {
  background: var(--s-teal) !important;
  color: #fff !important;
  border-color: var(--s-teal) !important;
  box-shadow: 0 4px 16px rgba(14, 165, 160, .28) !important;
}

/* ── Score chip — green tint ── */
.s3000-chip-score {
  background: var(--s-good-soft) !important;
  border-color: rgba(34, 197, 94, .3) !important;
  color: var(--s-good) !important;
  font-weight: 900;
  gap: 5px;
}

.s3000-chip-score .s3000-icon-tick {
  color: var(--s-good);
  font-size: 11px;
}

/* ── Count chip — accent tint ── */
.s3000-chip-count {
  background: var(--s-accent-soft) !important;
  border-color: var(--s-accent-mid) !important;
  color: var(--s-accent) !important;
  gap: 3px;
}

/* ── Result icons — CSS-drawn, no emoji ── */
.s3000-result-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-size: 28px;
  font-weight: 900;
}

/* Target icon (round complete) — concentric rings */
.s3000-result-icon-target {
  background: var(--s-accent-soft);
  border: 3px solid var(--s-accent-mid);
  color: var(--s-accent);
}

.s3000-result-icon-target::before {
  content: '◎';
  font-size: 32px;
  color: var(--s-accent);
  line-height: 1;
}

/* Trophy icon (finale) — star/crown shape */
.s3000-result-icon-trophy {
  background: var(--s-gold-soft);
  border: 3px solid rgba(245, 158, 11, .35);
  color: var(--s-gold);
}

.s3000-result-icon-trophy::before {
  content: '★';
  font-size: 30px;
  color: var(--s-gold);
  line-height: 1;
}

/* ── Night mode adjustments ── */
.s3000-root.s3000-night .s3000-btn-tts {
  background: rgba(14, 165, 160, .12) !important;
  border-color: rgba(14, 165, 160, .25) !important;
}

.s3000-root.s3000-night .s3000-chip-score {
  background: rgba(34, 197, 94, .1) !important;
}

.s3000-root.s3000-night .s3000-chip-count {
  background: rgba(255, 107, 53, .1) !important;
}



/* ═══════════════════════════════════════════════════════════════
   SPEAK3000 PATCH J — EN bigger, no underline, clear EN/PL hierarchy
═══════════════════════════════════════════════════════════════ */

/* ── Base EN size — larger default ── */
.s3000-section-card .s3000-en {
  font-size: clamp(17px, 3.2vw, 22px) !important;
  font-weight: 800;
  line-height: 1.45;
  color: var(--s-text);
  text-decoration: none !important;
  transition: font-size .15s var(--s-ease), color .15s ease;
}

/* ── Base PL size — clearly smaller, clearly secondary ── */
.s3000-section-card .s3000-pl {
  font-size: clamp(12px, 1.9vw, 14px) !important;
  font-weight: 600;
  color: var(--s-muted);
  opacity: .85;
}

/* ── Active EN: bigger jump, accent colour, no underline ── */
.s3000-section-card .s3000-line.s3000-active .s3000-en {
  font-size: clamp(20px, 4vw, 26px) !important;
  font-weight: 900 !important;
  color: var(--s-accent) !important;
  text-decoration: none !important;
}

/* ── Active PL: stays small and muted ── */
.s3000-section-card .s3000-line.s3000-active .s3000-pl {
  font-size: clamp(12px, 1.9vw, 14px) !important;
  color: var(--s-text2);
  opacity: 1;
}

/* ── Prose EN (question / answer blocks) — base ── */
.s3000-prose-en {
  font-size: clamp(18px, 3.5vw, 24px) !important;
  font-weight: 800;
  color: var(--s-text);
  line-height: 1.6;
  display: inline;
  text-decoration: none !important;
  transition: font-size .15s var(--s-ease), color .15s ease;
}

/* ── Prose PL — clearly smaller ── */
.s3000-prose-pl {
  font-size: clamp(12px, 1.9vw, 14px) !important;
  font-weight: 600;
  color: var(--s-muted) !important;
  opacity: .9;
}

/* ── Active prose EN: bigger, accent, no underline ── */
.s3000-prose-block.s3000-active .s3000-prose-en {
  font-size: clamp(21px, 4.2vw, 28px) !important;
  font-weight: 900 !important;
  color: var(--s-accent) !important;
  text-decoration: none !important;
}

/* ── Kill any inherited underline on active lines globally ── */
.s3000-root .s3000-line.s3000-active .s3000-en,
.s3000-root .s3000-line.s3000-active,
.s3000-root .s3000-prose-block.s3000-active .s3000-prose-en {
  text-decoration: none !important;
}

/* ── Night mode ── */
.s3000-root.s3000-night .s3000-section-card .s3000-en {
  color: var(--s-text);
}

.s3000-root.s3000-night .s3000-section-card .s3000-pl {
  color: var(--s-muted);
}

.s3000-root.s3000-night .s3000-prose-en {
  color: var(--s-text);
}

.s3000-root.s3000-night .s3000-prose-pl {
  color: var(--s-muted) !important;
}



/* ═══════════════════════════════════════════════════════════════
   SPEAK3000 PATCH K — Quizlet feel
═══════════════════════════════════════════════════════════════ */

/* No underlines anywhere */
.s3000-root,
.s3000-root * {
  text-decoration: none !important;
}

/* Cursor pointer on all tappable items */
.s3000-root .s3000-line,
.s3000-root .s3000-prose-block,
.s3000-root .s3000-choice,
.s3000-root .s3000-set {
  cursor: pointer;
}

/* Centre + cap all content columns */
.s3000-scroll>*,
.s3000-quiz>* {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Topbar icon buttons min 44px tap target ── */
.s3000-root .s3000-btn {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.s3000-root .s3000-btn-drawer {
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  font-size: 20px;
}

/* SVGs inside buttons inherit colour */
.s3000-root .s3000-btn svg {
  display: block;
  fill: currentColor;
}

/* ── EN sentence box — yellow elevated ── */
.s3000-section-card .s3000-en,
.s3000-prose-en {
  display: inline-block;
  background: #fffbe6;
  border: 1.5px solid #ffe066;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: clamp(17px, 3.2vw, 22px) !important;
  font-weight: 800;
  color: #1a1200;
  line-height: 1.45;
  transition: transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .18s ease, font-size .15s ease;
  cursor: pointer;
}

/* Active / is-reading: pop animation */
.s3000-section-card .s3000-line.s3000-active .s3000-en,
.s3000-section-card .s3000-line.s3000-active .s3000-en,
.s3000-prose-block.s3000-active .s3000-prose-en,
.s3000-section-card .s3000-en.is-reading,
.s3000-prose-en.is-reading {
  transform: scale(1.04);
  box-shadow: 0 6px 24px rgba(255, 200, 0, .35);
  background: #fff3b0;
  border-color: #ffc800;
  color: #1a1200 !important;
  font-size: clamp(19px, 3.8vw, 25px) !important;
  font-weight: 900 !important;
}

/* ── PL translation box — soft with right accent line ── */
.s3000-section-card .s3000-pl,
.s3000-prose-pl {
  display: inline-block !important;
  background: #f4f6ff;
  border: 1.5px solid #dde3ff;
  border-right: 3px solid var(--s-accent, #4255ff);
  border-radius: 8px;
  padding: 4px 12px 4px 10px;
  font-size: clamp(12px, 1.9vw, 14px) !important;
  font-weight: 600;
  color: var(--s-muted);
  margin-top: 6px;
  margin-left: 0;
  line-height: 1.5;
}

/* Active PL: stays soft, just slightly more visible */
.s3000-section-card .s3000-line.s3000-active .s3000-pl,
.s3000-prose-block.s3000-active .s3000-prose-pl {
  color: var(--s-text2);
  background: #eef0ff;
}

/* PL hidden until open */
.s3000-section-card .s3000-pl {
  display: none !important;
}

.s3000-section-card .s3000-line.s3000-open .s3000-pl {
  display: inline-block !important;
}

.s3000-prose-pl {
  display: none !important;
}

.s3000-prose-block.s3000-open .s3000-prose-pl {
  display: inline-block !important;
}

/* ── Section cards — large elevated ── */
.s3000-section-card {
  max-width: 900px;
  margin-left: auto !important;
  margin-right: auto !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 32px rgba(60, 68, 120, .10), 0 1.5px 6px rgba(60, 68, 120, .07) !important;
  padding: 24px 28px !important;
}

/* ── Choice buttons — large tap targets ── */
.s3000-choice {
  min-height: 72px !important;
  font-size: clamp(15px, 2.8vw, 18px) !important;
  border-radius: 16px !important;
  padding: 18px 20px !important;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease !important;
}

.s3000-choice:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 28px rgba(60, 68, 120, .13) !important;
}

/* ── Correct: green edge tick via pseudo ── */
.s3000-choice.s3000-good::after {
  content: '✓';
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  font-size: 18px;
  font-weight: 900;
  color: var(--s-good, #22c55e);
}

/* ── Sidebar: label only, no URL ── */
.s3000-set-url {
  display: none !important;
}

/* ── Night mode overrides ── */
.s3000-root.s3000-night .s3000-section-card .s3000-en,
.s3000-root.s3000-night .s3000-prose-en {
  background: #2a2400;
  border-color: #665500;
  color: #fff8cc;
}

.s3000-root.s3000-night .s3000-section-card .s3000-line.s3000-active .s3000-en,
.s3000-root.s3000-night .s3000-prose-block.s3000-active .s3000-prose-en {
  background: #3a3000;
  border-color: #998800;
  color: #fff3b0 !important;
}

.s3000-root.s3000-night .s3000-section-card .s3000-pl,
.s3000-root.s3000-night .s3000-prose-pl {
  background: #1a1e30;
  border-color: #2a3060;
  color: var(--s-muted);
}



/* ═══════════════════════════════════════════════════════════════
   SPEAK3000 PATCH L — clean Quizlet-like rewrite of visuals
═══════════════════════════════════════════════════════════════ */

/* ── Global resets inside root ── */
.s3000-root * {
  text-decoration: none !important;
  box-sizing: border-box;
}

.s3000-root .s3000-line,
.s3000-root .s3000-prose-block,
.s3000-root .s3000-choice,
.s3000-root .s3000-set {
  cursor: pointer;
}

/* ── Uniform card spec ── */
.s3000-section-card,
.s3000-result-card,
.s3000-question-panel {
  max-width: 860px !important;
  margin: 0 auto 14px !important;
  padding: 18px 20px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(0, 0, 0, .08) !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .08) !important;
  background: #fff !important;
  position: relative;
  overflow: hidden;
}

/* Remove all coloured left-side accent bars from section cards */
.s3000-section-card::before {
  display: none !important;
}

/* ── Section label ── */
.s3000-section-label {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, .35);
  margin-bottom: 10px;
}

/* ── EN text — marker highlight, no box ── */
.s3000-section-card .s3000-en,
.s3000-prose-en {
  display: inline !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  font-size: clamp(20px, 3.5vw, 24px) !important;
  font-weight: 800;
  color: #111 !important;
  line-height: 1.55;
  cursor: pointer;
  transition: transform .15s ease;
}

/* EN marker highlight on active */
.s3000-section-card .s3000-line.s3000-active .s3000-en,
.s3000-prose-block.s3000-active .s3000-prose-en,
.s3000-section-card .s3000-en.is-reading,
.s3000-prose-en.is-reading {
  background: linear-gradient(transparent 55%, rgba(255, 232, 140, .8) 55%) !important;
  border: none !important;
  transform: scale(1.02);
  font-weight: 900 !important;
  color: #111 !important;
}

/* ── PL text — marker highlight, slightly smaller, no box ── */
.s3000-section-card .s3000-pl,
.s3000-prose-pl {
  display: none !important;
  background: none !important;
  border: none !important;
  border-right: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: clamp(16px, 2.8vw, 20px) !important;
  font-weight: 600;
  color: #555 !important;
  line-height: 1.55;
}

.s3000-section-card .s3000-line.s3000-open .s3000-pl {
  display: inline !important;
}

.s3000-prose-block.s3000-open .s3000-prose-pl {
  display: inline !important;
}

/* PL marker highlight on active */
.s3000-section-card .s3000-line.s3000-active .s3000-pl,
.s3000-prose-block.s3000-active .s3000-prose-pl {
  background: linear-gradient(transparent 55%, rgba(255, 232, 140, .45) 55%) !important;
  border: none !important;
}

/* ── Sidebar set cards ── */
.s3000-drawer {
  box-shadow: 0 18px 40px rgba(15, 23, 42, .12) !important;
}

.s3000-set {
  background: #fff !important;
  border: 1px solid rgba(124, 102, 255, .25) !important;
  border-radius: 13px !important;
  padding: 11px 14px !important;
  margin-bottom: 9px !important;
  box-shadow: 0 4px 10px rgba(15, 23, 42, .06) !important;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 700;
}

.s3000-set:hover {
  border-color: rgba(124, 102, 255, .45) !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .10) !important;
  transform: translateY(-1px) !important;
}

.s3000-set.s3000-current {
  border-color: rgba(124, 102, 255, .55) !important;
  background: rgba(124, 102, 255, .05) !important;
}

/* Hide URL line in drawer */
.s3000-set .s3000-muted,
.s3000-set-url {
  display: none !important;
}

/* ── Score card ── */
.s3000-score-card {
  max-width: 860px;
  margin: 0 auto 14px;
  padding: 18px 20px;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, .08);
  box-shadow: 0 10px 22px rgba(15, 23, 42, .08);
  background: #fff;
}

.s3000-score-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

@media (min-width: 540px) {
  .s3000-score-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.s3000-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 12px;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .05);
  background: #fafafa;
  text-align: center;
}

.s3000-badge-icon {
  color: rgba(0, 0, 0, .4);
}

.s3000-badge-icon svg {
  display: block;
  fill: currentColor;
}

.s3000-badge-value {
  font-size: 20px;
  font-weight: 900;
  color: #111;
  line-height: 1;
}

.s3000-badge-label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(0, 0, 0, .38);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Points badge — most prominent */
.s3000-badge-points .s3000-badge-value {
  font-size: 26px;
  color: #ff6b35;
}

.s3000-badge-points {
  border-color: rgba(255, 107, 53, .18);
  background: rgba(255, 107, 53, .04);
}

/* ── Topbar title → small pill score ── */
.s3000-title {
  font-size: 14px !important;
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── All icon buttons 44px targets ── */
.s3000-root .s3000-btn {
  min-width: 44px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.s3000-root .s3000-btn svg {
  display: block;
  fill: currentColor;
}

/* ── Night mode ── */
.s3000-root.s3000-night .s3000-section-card,
.s3000-root.s3000-night .s3000-result-card,
.s3000-root.s3000-night .s3000-question-panel,
.s3000-root.s3000-night .s3000-score-card {
  background: #181c24 !important;
  border-color: rgba(255, 255, 255, .08) !important;
}

.s3000-root.s3000-night .s3000-section-card .s3000-en,
.s3000-root.s3000-night .s3000-prose-en {
  color: #e9eef6 !important;
}

.s3000-root.s3000-night .s3000-section-card .s3000-pl,
.s3000-root.s3000-night .s3000-prose-pl {
  color: #a0aec0 !important;
}

.s3000-root.s3000-night .s3000-set {
  background: #1e2330 !important;
  border-color: rgba(124, 102, 255, .2) !important;
}

.s3000-root.s3000-night .s3000-badge {
  background: #1e2330;
  border-color: rgba(255, 255, 255, .08);
}

.s3000-root.s3000-night .s3000-badge-value {
  color: #e9eef6;
}



/* ═══════════════════════════════════════════════════════════════
   SPEAK3000 PATCH M — heading align · marker highlight · no violet
   · active animation · score card warm · clean topbar
═══════════════════════════════════════════════════════════════ */

/* 1) HEADING — same width/padding as cards */
.s3000-root .s3000-h1 {
  max-width: 860px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

/* 2) NUKE ALL violet/blue/purple boxes on lines and prose */
.s3000-root .s3000-section-card .s3000-en,
.s3000-root .s3000-prose-en {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  display: inline !important;
  font-size: clamp(19px, 3.4vw, 23px) !important;
  font-weight: 800;
  color: #111 !important;
  line-height: 1.6;
  cursor: pointer;
  text-decoration: none !important;
  transition: font-size .18s ease, letter-spacing .18s ease, filter .18s ease;
}

.s3000-root .s3000-section-card .s3000-pl,
.s3000-root .s3000-prose-pl {
  background: none !important;
  border: none !important;
  border-right: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  display: none !important;
  font-size: clamp(15px, 2.6vw, 18px) !important;
  font-weight: 600;
  color: #555 !important;
  line-height: 1.6;
  text-decoration: none !important;
}

/* Show PL when open */
.s3000-root .s3000-section-card .s3000-line.s3000-open .s3000-pl,
.s3000-root .s3000-prose-block.s3000-open .s3000-prose-pl {
  display: inline !important;
}

/* 3) ACTIVE HIGHLIGHT — marker strip, no boxes, no translateY */
.s3000-root .s3000-section-card .s3000-line.s3000-active .s3000-en,
.s3000-root .s3000-prose-block.s3000-active .s3000-prose-en,
.s3000-root .s3000-section-card .s3000-en.is-reading,
.s3000-root .s3000-prose-en.is-reading {
  background: linear-gradient(transparent 58%, rgba(255, 232, 100, .78) 58%) !important;
  border: none !important;
  box-shadow: 0 6px 20px rgba(255, 220, 60, .18) !important;
  filter: none;
  transform: none !important;
  font-size: clamp(21px, 3.8vw, 26px) !important;
  font-weight: 900 !important;
  letter-spacing: .01em;
  color: #0e0e0e !important;
  transition: font-size .18s ease, letter-spacing .18s ease, background .15s ease !important;
}

/* PL active marker — lighter strip */
.s3000-root .s3000-section-card .s3000-line.s3000-active .s3000-pl,
.s3000-root .s3000-prose-block.s3000-active .s3000-prose-pl {
  background: linear-gradient(transparent 58%, rgba(255, 232, 100, .42) 58%) !important;
  border: none !important;
  color: #444 !important;
}

/* Remove violet on line container itself */
.s3000-root .s3000-section-card .s3000-line.s3000-active,
.s3000-root .s3000-prose-block.s3000-active {
  background: none !important;
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Remove violet on choice hover/current */
.s3000-root .s3000-set {
  border-color: rgba(0, 0, 0, .08) !important;
  background: #fff !important;
}

.s3000-root .s3000-set.s3000-current {
  border-color: rgba(0, 0, 0, .14) !important;
  background: #fffde7 !important;
}

.s3000-root .s3000-set:hover {
  border-color: rgba(0, 0, 0, .14) !important;
  background: #fffde7 !important;
  transform: translateY(-1px) !important;
}

/* 4) SCORE CARD — warm cream palette */
.s3000-root .s3000-score-card {
  background: #fffdf5 !important;
  border: 1px solid rgba(0, 0, 0, .07) !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .06) !important;
}

.s3000-root .s3000-badge {
  background: #fff !important;
  border: 1px solid rgba(0, 0, 0, .07) !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .05) !important;
}

.s3000-root .s3000-badge-points {
  background: #fffde7 !important;
  border-color: rgba(245, 158, 11, .22) !important;
}

.s3000-root .s3000-badge-points .s3000-badge-value {
  color: #b45309 !important;
}

.s3000-root .s3000-badge-icon {
  color: rgba(0, 0, 0, .35) !important;
}

/* 5) TOPBAR — hide pause + font+/- via CSS (DOM patch below handles removal) */
.s3000-root .s3000-btn[data-act="pause"],
.s3000-root .s3000-btn[data-act="font+"],
.s3000-root .s3000-btn[data-act="font-"] {
  display: none !important;
}

/* Night mode score */
.s3000-root.s3000-night .s3000-score-card {
  background: #1a1d1a !important;
}

.s3000-root.s3000-night .s3000-badge {
  background: #1e2330 !important;
}

.s3000-root.s3000-night .s3000-badge-points {
  background: #2a2200 !important;
  border-color: rgba(245, 158, 11, .2) !important;
}

.s3000-root.s3000-night .s3000-set {
  background: #1e2330 !important;
  border-color: rgba(255, 255, 255, .08) !important;
}

.s3000-root.s3000-night .s3000-set.s3000-current {
  background: #2a2200 !important;
  border-color: rgba(245, 158, 11, .2) !important;
}



/* ═══════════════════════════════════════════════════════════════
   SPEAK3000 PATCH N — definitive text/hover/highlight/size fix
═══════════════════════════════════════════════════════════════ */

/* ── Kill ALL hover elevation on cards and lines ── */
.s3000-root .s3000-section-card:hover,
.s3000-root .s3000-card:hover {
  border-color: rgba(0, 0, 0, .08) !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .08) !important;
  transform: none !important;
}

.s3000-root .s3000-line:hover,
.s3000-root .s3000-prose-block:hover {
  background: none !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ── Kill ALL background/border/outline on active container ── */
.s3000-root .s3000-line.s3000-active,
.s3000-root .s3000-prose-block.s3000-active {
  background: none !important;
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
}

/* ── EN default: plain, no box, no bold beyond 700 ── */
.s3000-root .s3000-en,
.s3000-root .s3000-prose-en {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
  padding: 0 !important;
  display: inline !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: font-size .18s ease, background .15s ease !important;
}

/* ── PL default: plain, hidden ── */
.s3000-root .s3000-pl,
.s3000-root .s3000-prose-pl {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  display: none !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

/* ── Show PL only when open ── */
.s3000-root .s3000-line.s3000-open .s3000-pl,
.s3000-root .s3000-prose-block.s3000-open .s3000-prose-pl {
  display: inline !important;
}

/* ── ACTIVE: marker strip only — no box, no elevation ── */
.s3000-root .s3000-line.s3000-active .s3000-en,
.s3000-root .s3000-prose-block.s3000-active .s3000-prose-en,
.s3000-root .s3000-en.is-reading,
.s3000-root .s3000-prose-en.is-reading {
  background: linear-gradient(transparent 55%, rgba(255, 228, 80, .72) 55%) !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
  font-weight: 900 !important;
  text-decoration: none !important;
}

/* ── PL active: same marker, lighter ── */
.s3000-root .s3000-line.s3000-active .s3000-pl,
.s3000-root .s3000-prose-block.s3000-active .s3000-prose-pl {
  background: linear-gradient(transparent 55%, rgba(255, 228, 80, .38) 55%) !important;
  border: none !important;
  display: inline !important;
}

/* ── FONT SIZES by section type ── */

/* Larger: example, question, answer */
.s3000-root .s3000-section-example .s3000-en,
.s3000-root .s3000-section-question .s3000-en,
.s3000-root .s3000-section-answer .s3000-en,
.s3000-root .s3000-section-example .s3000-prose-en,
.s3000-root .s3000-section-question .s3000-prose-en,
.s3000-root .s3000-section-answer .s3000-prose-en {
  font-size: clamp(20px, 3.6vw, 25px) !important;
  line-height: 1.6;
}

.s3000-root .s3000-section-example .s3000-pl,
.s3000-root .s3000-section-question .s3000-pl,
.s3000-root .s3000-section-answer .s3000-pl,
.s3000-root .s3000-section-example .s3000-prose-pl,
.s3000-root .s3000-section-question .s3000-prose-pl,
.s3000-root .s3000-section-answer .s3000-prose-pl {
  font-size: clamp(15px, 2.6vw, 18px) !important;
  line-height: 1.6;
}

/* Smaller: related, keyphrases */
.s3000-root .s3000-section-related .s3000-en,
.s3000-root .s3000-section-keyphrases .s3000-en {
  font-size: clamp(15px, 2.6vw, 18px) !important;
  line-height: 1.55;
}

.s3000-root .s3000-section-related .s3000-pl,
.s3000-root .s3000-section-keyphrases .s3000-pl {
  font-size: clamp(13px, 2.1vw, 15px) !important;
  line-height: 1.55;
}

/* ── Active size bumps per section ── */
.s3000-root .s3000-section-example .s3000-line.s3000-active .s3000-en,
.s3000-root .s3000-section-question .s3000-line.s3000-active .s3000-en,
.s3000-root .s3000-section-answer .s3000-line.s3000-active .s3000-en,
.s3000-root .s3000-section-example .s3000-prose-block.s3000-active .s3000-prose-en,
.s3000-root .s3000-section-question .s3000-prose-block.s3000-active .s3000-prose-en,
.s3000-root .s3000-section-answer .s3000-prose-block.s3000-active .s3000-prose-en {
  font-size: clamp(22px, 4vw, 28px) !important;
}

.s3000-root .s3000-section-related .s3000-line.s3000-active .s3000-en,
.s3000-root .s3000-section-keyphrases .s3000-line.s3000-active .s3000-en {
  font-size: clamp(17px, 2.9vw, 21px) !important;
}



/* ═══════════════════════════════════════════════════════════════
   SPEAK3000 PATCH O — bold-only active, no highlight anywhere
═══════════════════════════════════════════════════════════════ */

/* EN active: bold only, NO background, NO highlight */
.s3000-root .s3000-line.s3000-active .s3000-en,
.s3000-root .s3000-prose-block.s3000-active .s3000-prose-en,
.s3000-root .s3000-en.is-reading,
.s3000-root .s3000-prose-en.is-reading {
  background: none !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
  font-weight: 900 !important;
  text-decoration: none !important;
}

/* PL active: bold only, NO background, NO highlight */
.s3000-root .s3000-line.s3000-active .s3000-pl,
.s3000-root .s3000-prose-block.s3000-active .s3000-prose-pl {
  background: none !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
  font-weight: 700 !important;
  display: inline !important;
  text-decoration: none !important;
}

/* PL open (not yet active) — just show it, no style */
.s3000-root .s3000-line.s3000-open .s3000-pl,
.s3000-root .s3000-prose-block.s3000-open .s3000-prose-pl {
  display: inline !important;
  background: none !important;
  background-image: none !important;
}



/* ═══════════════════════════════════════════════════════════════
   SPEAK3000 PATCH P — definitive: no highlight, DM Sans font,
   correct sizes, no elevation on hover/active
═══════════════════════════════════════════════════════════════ */

/* ── 1. Font: switch everything to portal DM Sans ── */
.s3000-root,
.s3000-root .s3000-en,
.s3000-root .s3000-pl,
.s3000-root .s3000-prose-en,
.s3000-root .s3000-prose-pl,
.s3000-root .s3000-h1,
.s3000-root .s3000-section-label,
.s3000-root .s3000-btn,
.s3000-root .s3000-qhead,
.s3000-root .s3000-choice {
  font-family: 'DM Sans', ui-sans-serif, system-ui, -apple-system, sans-serif !important;
}

/* Headword: slightly condensed/squeezed, large */
.s3000-root .s3000-h1 {
  font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif !important;
  font-size: clamp(26px, 5vw, 40px) !important;
  font-weight: 800 !important;
  letter-spacing: -.03em !important;
  line-height: 1.1 !important;
}

/* ── 2. Kill ALL yellow/gradient highlights — every selector variant ── */
.s3000-root .s3000-section-card .s3000-line.s3000-active .s3000-en,
.s3000-root .s3000-section-card .s3000-prose-block.s3000-active .s3000-prose-en,
.s3000-root .s3000-section-card .s3000-en.is-reading,
.s3000-root .s3000-prose-en.is-reading,
.s3000-root .s3000-line.s3000-active .s3000-en,
.s3000-root .s3000-prose-block.s3000-active .s3000-prose-en,
.s3000-root .s3000-en.is-reading,
.s3000-root .s3000-section-card .s3000-line.s3000-active .s3000-pl,
.s3000-root .s3000-section-card .s3000-prose-block.s3000-active .s3000-prose-pl,
.s3000-root .s3000-line.s3000-active .s3000-pl,
.s3000-root .s3000-prose-block.s3000-active .s3000-prose-pl {
  background: transparent !important;
  background-image: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
  text-decoration: none !important;
  outline: none !important;
}

/* ── 3. Active state = bold only ── */
.s3000-root .s3000-line.s3000-active .s3000-en,
.s3000-root .s3000-section-card .s3000-line.s3000-active .s3000-en,
.s3000-root .s3000-prose-block.s3000-active .s3000-prose-en,
.s3000-root .s3000-en.is-reading,
.s3000-root .s3000-prose-en.is-reading {
  font-weight: 900 !important;
}

.s3000-root .s3000-line.s3000-active .s3000-pl,
.s3000-root .s3000-section-card .s3000-line.s3000-active .s3000-pl,
.s3000-root .s3000-prose-block.s3000-active .s3000-prose-pl {
  font-weight: 700 !important;
  display: inline !important;
}

/* ── 4. No highlight/elevation on line container or card hover ── */
.s3000-root .s3000-line:hover,
.s3000-root .s3000-line.s3000-active,
.s3000-root .s3000-prose-block:hover,
.s3000-root .s3000-prose-block.s3000-active,
.s3000-root .s3000-section-card:hover,
.s3000-root .s3000-section-card.s3000-line.s3000-active {
  background: transparent !important;
  background-image: none !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .08) !important;
  transform: none !important;
  outline: none !important;
  border-color: rgba(0, 0, 0, .08) !important;
}

/* ── 5. EN font sizes — bigger for example/question/answer ── */
.s3000-root .s3000-section-example .s3000-en,
.s3000-root .s3000-section-question .s3000-en,
.s3000-root .s3000-section-answer .s3000-en,
.s3000-root .s3000-section-example .s3000-prose-en,
.s3000-root .s3000-section-question .s3000-prose-en,
.s3000-root .s3000-section-answer .s3000-prose-en {
  font-size: clamp(19px, 3.2vw, 23px) !important;
  letter-spacing: -.01em;
  line-height: 1.55;
}

.s3000-root .s3000-section-related .s3000-en,
.s3000-root .s3000-section-keyphrases .s3000-en {
  font-size: clamp(15px, 2.4vw, 17px) !important;
  letter-spacing: 0;
  line-height: 1.5;
}

/* ── 6. PL font sizes — slightly smaller than EN sibling ── */
.s3000-root .s3000-section-example .s3000-pl,
.s3000-root .s3000-section-question .s3000-pl,
.s3000-root .s3000-section-answer .s3000-pl,
.s3000-root .s3000-section-example .s3000-prose-pl,
.s3000-root .s3000-section-question .s3000-prose-pl,
.s3000-root .s3000-section-answer .s3000-prose-pl {
  font-size: clamp(15px, 2.4vw, 18px) !important;
  font-weight: 400 !important;
  color: #555 !important;
  letter-spacing: 0;
  line-height: 1.55;
}

.s3000-root .s3000-section-related .s3000-pl,
.s3000-root .s3000-section-keyphrases .s3000-pl {
  font-size: clamp(13px, 2vw, 15px) !important;
  font-weight: 400 !important;
  color: #666 !important;
}

/* ── 7. PL hidden until open, no style changes ── */
.s3000-root .s3000-pl,
.s3000-root .s3000-prose-pl {
  display: none !important;
  background: none !important;
}

.s3000-root .s3000-line.s3000-open .s3000-pl,
.s3000-root .s3000-prose-block.s3000-open .s3000-prose-pl {
  display: inline !important;
  background: none !important;
}

/* ── 8. EN base: no box, no shadow, normal weight until active ── */
.s3000-root .s3000-en,
.s3000-root .s3000-prose-en {
  background: none !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
  padding: 0 !important;
  display: inline !important;
  font-weight: 700 !important;
  cursor: pointer;
  text-decoration: none !important;
}

/* ── Night mode ── */
.s3000-root.s3000-night .s3000-en,
.s3000-root.s3000-night .s3000-prose-en {
  color: #e9eef6 !important;
}

.s3000-root.s3000-night .s3000-pl,
.s3000-root.s3000-night .s3000-prose-pl {
  color: #a0aec0 !important;
}

.s3000-root.s3000-night .s3000-line.s3000-active .s3000-en,
.s3000-root.s3000-night .s3000-prose-block.s3000-active .s3000-prose-en {
  color: #fff !important;
}



/* ═══════════════════════════════════════════════════════════════
   SCORES MODULE — portal-native styling
   All classes from module.scores.js
═══════════════════════════════════════════════════════════════ */

/* ── Outer board card ── */
.scores-board {
  font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  max-width: 860px;
  margin: 0 auto;
  padding: 28px 28px 24px;
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

/* ── Header row: title + streak/badge ── */
.scores-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.scores-head h3 {
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 2px;
  letter-spacing: -.02em;
}

.scores-head .muted {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}

.scores-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Streak pill ── */
.streak-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 999px;
  background: #fff7ed;
  border: 1px solid rgba(249, 115, 22, .2);
  font-size: 13px;
  font-weight: 700;
  color: #c2410c;
}

/* ── Badge chip (bronze/silver/gold) ── */
.badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-mid);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
}

.badge-chip .tier {
  font-weight: 800;
}

.badge-chip .tier.bronze {
  color: #b45309;
}

.badge-chip .tier.silver {
  color: #64748b;
}

.badge-chip .tier.gold {
  color: #d97706;
}

.badge-chip .tier.diamond {
  color: #0891b2;
}

.badge-chip .tier.legend {
  color: #7c3aed;
}

/* ── Progress bar ── */
.badge-progress {
  height: 5px;
  border-radius: 999px;
  background: var(--border);
  margin: 14px 0 4px;
  overflow: hidden;
}

.badge-progress>div {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent) 0%, #8c52ff 100%);
  transition: width .5s ease;
  min-width: 3px;
}

.scores-sub {
  font-size: 12px;
  margin-bottom: 20px;
}

/* ── Metric grid: 2 cols mobile → 4 desktop ── */
.score-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

@media (min-width: 560px) {
  .score-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.score-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg);
  text-align: center;
  transition: box-shadow .15s ease, transform .15s ease;
}

.score-box:hover {
  box-shadow: 0 4px 14px rgba(60, 68, 120, .1);
  transform: translateY(-2px);
}

/* Points box — accent tint */
.score-box:first-child {
  background: #fffde7;
  border-color: rgba(245, 158, 11, .22);
}

.score-icon {
  font-size: 20px;
  line-height: 1;
  margin-bottom: 2px;
  filter: grayscale(1) brightness(.7);
}

.score-value {
  font-size: 26px;
  font-weight: 900;
  color: var(--text);
  letter-spacing: -.03em;
  line-height: 1;
}

.score-box:first-child .score-value {
  color: #b45309;
}

.score-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  line-height: 1.3;
}

/* ── Sparkline charts ── */
.scores-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}

.scores-chartcard {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px 10px;
  overflow: hidden;
}

.scores-charthead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}

.scores-charttitle {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text);
}

.scores-mini {
  font-size: 11px;
}

.scores-spark {
  display: block;
  width: 100%;
  height: 40px;
  overflow: visible;
}

.scores-spark-line {
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Pref toggles ── */
.scores-toprow {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.pill-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px 7px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  font-family: inherit;
  transition: background .15s, border-color .15s, color .15s;
}

.pill-toggle .switch {
  display: inline-block;
  width: 28px;
  height: 16px;
  border-radius: 999px;
  background: var(--border);
  position: relative;
  flex-shrink: 0;
  transition: background .15s;
}

.pill-toggle .switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  transition: transform .15s;
}

.pill-toggle.is-on {
  background: var(--accent-soft);
  border-color: var(--accent-mid);
  color: var(--accent);
}

.pill-toggle.is-on .switch {
  background: var(--accent);
}

.pill-toggle.is-on .switch::after {
  transform: translateX(12px);
}

/* ── Section title ── */
.scores-section-title {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: 8px;
}

/* ── Course table ── */
.scores-tablewrap {
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid var(--border);
}

.scores-tablewrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.scores-tablewrap thead tr {
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 1;
}

.scores-tablewrap th {
  padding: 9px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.scores-tablewrap td {
  padding: 10px 14px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.scores-tablewrap tbody tr:last-child td {
  border-bottom: none;
}

.scores-tablewrap tbody tr:nth-child(even) td {
  background: rgba(60, 68, 120, .025);
}

.scores-tablewrap tbody tr:hover td {
  background: var(--hover);
}

.scores-tablewrap td:nth-child(2),
.scores-tablewrap td:nth-child(3),
.scores-tablewrap td:nth-child(4) {
  font-weight: 700;
  color: var(--muted);
}

.scores-tablewrap td:nth-child(2) {
  color: #b45309;
  font-weight: 900;
}

/* ── Empty state ── */
.scores-board .dash-card>p.muted {
  padding: 20px 0 4px;
}



/* ═══════════════════════════════════════════════════════════════
   SPEAK3000 PATCH Q — EN/PL block layout + left accent bars
═══════════════════════════════════════════════════════════════ */

/* ── Line container: flex column so EN/PL stack vertically ── */
.s3000-root .s3000-line {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px;
  padding: 6px 0;
}

/* ── EN: block, yellow left bar ── */
.s3000-root .s3000-en,
.s3000-root .s3000-prose-en {
  display: block !important;
  padding-left: 10px !important;
  border-left: 3px solid #fbbf24 !important;
  background: none !important;
  box-shadow: none !important;
  transform: none !important;
  text-decoration: none !important;
}

/* ── PL: block, red left bar, hidden until open ── */
.s3000-root .s3000-pl,
.s3000-root .s3000-prose-pl {
  display: none !important;
  padding-left: 10px !important;
  border-left: 3px solid #f87171 !important;
  background: none !important;
  box-shadow: none !important;
  transform: none !important;
  text-decoration: none !important;
}

/* ── Show PL when line is open ── */
.s3000-root .s3000-line.s3000-open .s3000-pl,
.s3000-root .s3000-prose-block.s3000-open .s3000-prose-pl {
  display: block !important;
}

/* ── Active: EN bar brightens, no background ── */
.s3000-root .s3000-line.s3000-active .s3000-en,
.s3000-root .s3000-prose-block.s3000-active .s3000-prose-en,
.s3000-root .s3000-en.is-reading,
.s3000-root .s3000-prose-en.is-reading {
  border-left-color: #f59e0b !important;
  border-left-width: 4px !important;
  font-weight: 900 !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
}

/* ── Active PL: red bar stays, font bolds ── */
.s3000-root .s3000-line.s3000-active .s3000-pl,
.s3000-root .s3000-prose-block.s3000-active .s3000-prose-pl {
  display: block !important;
  border-left-color: #ef4444 !important;
  border-left-width: 4px !important;
  font-weight: 700 !important;
  background: none !important;
  background-image: none !important;
}

/* ── Night mode bar colours ── */
.s3000-root.s3000-night .s3000-en,
.s3000-root.s3000-night .s3000-prose-en {
  border-left-color: #d97706 !important;
}

.s3000-root.s3000-night .s3000-pl,
.s3000-root.s3000-night .s3000-prose-pl {
  border-left-color: #f87171 !important;
}



/* ═══════════════════════════════════════════════════════════════
   SPEAK3000 PATCH R — unified EN/PL bar system
   Yellow left bar = English (always visible)
   Red left bar    = Polish  (hidden until tapped, then block)
   Applies to: .s3000-line, .s3000-prose-block (all sections)
═══════════════════════════════════════════════════════════════ */

/* ── Line + prose-block: column stack ── */
.s3000-root .s3000-line,
.s3000-root .s3000-prose-block {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  background: none !important;
  outline: none !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: pointer;
}

/* ── EN: always block, yellow left bar ── */
.s3000-root .s3000-en,
.s3000-root .s3000-prose-en {
  display: block !important;
  padding: 5px 0 5px 12px !important;
  margin: 0 !important;
  border-left: 3px solid #fbbf24 !important;
  border-radius: 0 !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
  text-decoration: none !important;
  font-weight: 700;
  transition: border-color .15s, font-weight .15s;
}

/* ── PL: block, red left bar, hidden until open ── */
.s3000-root .s3000-pl,
.s3000-root .s3000-prose-pl {
  display: none !important;
  padding: 4px 0 4px 12px !important;
  margin: 2px 0 0 0 !important;
  border-left: 3px solid #f87171 !important;
  border-radius: 0 !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
  text-decoration: none !important;
  font-weight: 500;
}

/* ── Show PL when open/active ── */
.s3000-root .s3000-line.s3000-open .s3000-pl,
.s3000-root .s3000-line.s3000-active .s3000-pl,
.s3000-root .s3000-prose-block.s3000-open .s3000-prose-pl,
.s3000-root .s3000-prose-block.s3000-active .s3000-prose-pl {
  display: block !important;
}

/* ── Active/is-reading: thicker bars, bolder text, NO background ── */
.s3000-root .s3000-line.s3000-active .s3000-en,
.s3000-root .s3000-prose-block.s3000-active .s3000-prose-en,
.s3000-root .s3000-en.is-reading,
.s3000-root .s3000-prose-en.is-reading {
  border-left: 4px solid #f59e0b !important;
  font-weight: 900 !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
}

.s3000-root .s3000-line.s3000-active .s3000-pl,
.s3000-root .s3000-prose-block.s3000-active .s3000-prose-pl {
  border-left: 4px solid #ef4444 !important;
  font-weight: 700 !important;
  background: none !important;
  background-image: none !important;
}

/* ── Line/prose container: no bg on active/hover ── */
.s3000-root .s3000-line:hover,
.s3000-root .s3000-line.s3000-active,
.s3000-root .s3000-prose-block:hover,
.s3000-root .s3000-prose-block.s3000-active {
  background: none !important;
  outline: none !important;
  box-shadow: none !important;
  transform: none !important;
}

/* ── Night mode bar colours ── */
.s3000-root.s3000-night .s3000-en,
.s3000-root.s3000-night .s3000-prose-en {
  border-left-color: #d97706 !important;
}

.s3000-root.s3000-night .s3000-line.s3000-active .s3000-en,
.s3000-root.s3000-night .s3000-prose-block.s3000-active .s3000-prose-en {
  border-left-color: #fbbf24 !important;
}

.s3000-root.s3000-night .s3000-pl,
.s3000-root.s3000-night .s3000-prose-pl {
  border-left-color: #f87171 !important;
}

.s3000-root.s3000-night .s3000-line.s3000-active .s3000-pl,
.s3000-root.s3000-night .s3000-prose-block.s3000-active .s3000-prose-pl {
  border-left-color: #ef4444 !important;
}



/* ═══════════════════════════════════════════════════════════════
   SPEAK3000 PATCH S — set-swap card animation
═══════════════════════════════════════════════════════════════ */

/* Perspective on body container enables rotateY */
.s3000-root .s3000-body {
  perspective: 900px;
  overflow: hidden;
}

/* Stage1 scroll area: 3D transform origin centre, smooth by default */
.s3000-root .s3000-scroll[data-el="stage1"] {
  transform-origin: center center;
  will-change: transform, opacity;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}



/* ═══════════════════════════════════════════════════════════════
   SPEAK3000 PATCH T — yellow bar system · quiz alignment ·
   topbar/drawer 3D elevation · white overlay
═══════════════════════════════════════════════════════════════ */

/* ── 1. Related / Key Phrases: PL hidden until active ── */
.s3000-root .s3000-section-related .s3000-pl,
.s3000-root .s3000-section-keyphrases .s3000-pl {
  display: none !important;
}

.s3000-root .s3000-section-related .s3000-line.s3000-open .s3000-pl,
.s3000-root .s3000-section-related .s3000-line.s3000-active .s3000-pl,
.s3000-root .s3000-section-keyphrases .s3000-line.s3000-open .s3000-pl,
.s3000-root .s3000-section-keyphrases .s3000-line.s3000-active .s3000-pl {
  display: block !important;
}

/* ── 2. Yellow growing bar — Example EN (always visible) ── */
.s3000-root .s3000-section-example .s3000-en {
  border-left: 3px solid #fbbf24 !important;
  padding-left: 12px !important;
  display: block !important;
  transition: border-left-width .18s ease, font-size .18s ease, font-weight .15s ease !important;
}

.s3000-root .s3000-section-example .s3000-line.s3000-active .s3000-en,
.s3000-root .s3000-section-example .s3000-en.is-reading {
  border-left-width: 6px !important;
  border-left-color: #f59e0b !important;
}

/* ── 3. Yellow growing bar — Question EN ── */
.s3000-root .s3000-section-question .s3000-prose-en,
.s3000-root .s3000-section-question .s3000-en {
  border-left: 3px solid #fbbf24 !important;
  padding-left: 12px !important;
  display: block !important;
  transition: border-left-width .18s ease, font-size .18s ease, font-weight .15s ease !important;
}

.s3000-root .s3000-section-question .s3000-prose-block.s3000-active .s3000-prose-en,
.s3000-root .s3000-section-question .s3000-line.s3000-active .s3000-en {
  border-left-width: 6px !important;
  border-left-color: #f59e0b !important;
}

/* ── 4. Yellow growing bar — Starting Answer EN ── */
.s3000-root .s3000-section-answer .s3000-prose-en,
.s3000-root .s3000-section-answer .s3000-en {
  border-left: 3px solid #fbbf24 !important;
  padding-left: 12px !important;
  display: block !important;
  transition: border-left-width .18s ease, font-size .18s ease, font-weight .15s ease !important;
}

.s3000-root .s3000-section-answer .s3000-prose-block.s3000-active .s3000-prose-en,
.s3000-root .s3000-section-answer .s3000-line.s3000-active .s3000-en {
  border-left-width: 6px !important;
  border-left-color: #f59e0b !important;
}

/* ── 5. Quiz: headword card + choice cards same width ── */
.s3000-root .s3000-question-panel,
.s3000-root .s3000-choice {
  max-width: 860px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.s3000-root .s3000-qrow {
  max-width: 860px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ── 6. Topbar — 20% transparent + frosted + subtle bottom shadow ── */
.s3000-root .s3000-topbar {
  background: rgba(255, 251, 245, .80) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(0, 0, 0, .07) !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 4px 16px rgba(15, 23, 42, .06) !important;
}

/* ── 7. Drawer — elevated 3D card effect, blurred edge ── */
.s3000-root .s3000-drawer {
  box-shadow:
    -2px 0 0 rgba(0, 0, 0, .04),
    -8px 0 32px rgba(15, 23, 42, .10),
    -24px 0 64px rgba(15, 23, 42, .07) !important;
  border-left: 1px solid rgba(0, 0, 0, .08) !important;
  background: rgba(255, 255, 255, .97) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}

/* ── 8. Backdrop overlay — white/light, not dark ── */
.s3000-root .s3000-drawer-backdrop {
  background: rgba(255, 255, 255, .55) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* ── 9. Stage2 (quiz overlay) — white frosted, elevated ── */
.s3000-root .s3000-stage2 {
  background: rgba(246, 247, 251, .96) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* Night mode adjustments */
.s3000-root.s3000-night .s3000-topbar {
  background: rgba(24, 28, 36, .82) !important;
}

.s3000-root.s3000-night .s3000-drawer {
  background: rgba(24, 28, 36, .97) !important;
  border-left-color: rgba(255, 255, 255, .08) !important;
}

.s3000-root.s3000-night .s3000-drawer-backdrop {
  background: rgba(0, 0, 0, .25) !important;
}

.s3000-root.s3000-night .s3000-stage2 {
  background: rgba(20, 24, 32, .96) !important;
}

.s3000-root.s3000-night .s3000-section-example .s3000-en,
.s3000-root.s3000-night .s3000-section-question .s3000-prose-en,
.s3000-root.s3000-night .s3000-section-answer .s3000-prose-en {
  border-left-color: #d97706 !important;
}



/* ═══════════════════════════════════════════════════════════════
   SPEAK3000 PATCH U — yellow bar always + active grows ·
   PL hide fix · topbar 3D · set nav
═══════════════════════════════════════════════════════════════ */

/* ── Yellow bar on EN — ALL sections, always visible ── */
.s3000-root .s3000-en,
.s3000-root .s3000-prose-en {
  display: block !important;
  border-left: 3px solid rgba(251, 191, 36, .7) !important;
  padding-left: 12px !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
  text-decoration: none !important;
  transition: border-left-width .18s ease, border-left-color .18s ease,
    font-size .18s ease, font-weight .15s ease !important;
}

/* ── Active/reading: bar grows to 5px, full amber ── */
.s3000-root .s3000-line.s3000-active .s3000-en,
.s3000-root .s3000-prose-block.s3000-active .s3000-prose-en,
.s3000-root .s3000-en.is-reading,
.s3000-root .s3000-prose-en.is-reading {
  border-left: 5px solid #f59e0b !important;
  font-weight: 900 !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
}

/* ── Red bar on PL — all sections ── */
.s3000-root .s3000-pl,
.s3000-root .s3000-prose-pl {
  display: none !important;
  border-left: 3px solid rgba(248, 113, 113, .65) !important;
  padding-left: 12px !important;
  margin: 3px 0 0 !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
  text-decoration: none !important;
}

/* ── PL visible ONLY when parent has both active+open ── */
.s3000-root .s3000-line.s3000-active.s3000-open .s3000-pl,
.s3000-root .s3000-prose-block.s3000-active.s3000-open .s3000-prose-pl {
  display: block !important;
}

/* ── Active PL bar grows too ── */
.s3000-root .s3000-line.s3000-active .s3000-pl,
.s3000-root .s3000-prose-block.s3000-active .s3000-prose-pl {
  border-left: 5px solid #ef4444 !important;
  font-weight: 700 !important;
}

/* ── No background on line/prose-block containers ── */
.s3000-root .s3000-line,
.s3000-root .s3000-prose-block {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  background: none !important;
  outline: none !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: pointer;
}

.s3000-root .s3000-line:hover,
.s3000-root .s3000-line.s3000-active,
.s3000-root .s3000-prose-block:hover,
.s3000-root .s3000-prose-block.s3000-active {
  background: none !important;
  outline: none !important;
  box-shadow: none !important;
  transform: none !important;
}

/* ── Topbar — semi-transparent + layered shadow 3D ── */
.s3000-root .s3000-topbar {
  background: rgba(255, 251, 245, .78) !important;
  backdrop-filter: blur(22px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.4) !important;
  border-bottom: 1px solid rgba(251, 191, 36, .18) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .8),
    0 2px 8px rgba(15, 23, 42, .07),
    0 8px 24px rgba(15, 23, 42, .05) !important;
}

/* ── Prev/next set nav buttons ── */
.s3000-root .s3000-btn-prevset,
.s3000-root .s3000-btn-nextset {
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 50% !important;
  background: rgba(251, 191, 36, .12) !important;
  border: 1px solid rgba(251, 191, 36, .3) !important;
  color: #b45309 !important;
  transition: opacity .2s, background .15s !important;
}

.s3000-root .s3000-btn-prevset:hover,
.s3000-root .s3000-btn-nextset:hover {
  background: rgba(251, 191, 36, .25) !important;
}

/* ── Night mode ── */
.s3000-root.s3000-night .s3000-en,
.s3000-root.s3000-night .s3000-prose-en {
  border-left-color: rgba(217, 119, 6, .7) !important;
}

.s3000-root.s3000-night .s3000-line.s3000-active .s3000-en,
.s3000-root.s3000-night .s3000-prose-block.s3000-active .s3000-prose-en {
  border-left-color: #fbbf24 !important;
}

.s3000-root.s3000-night .s3000-pl,
.s3000-root.s3000-night .s3000-prose-pl {
  border-left-color: rgba(248, 113, 113, .6) !important;
}

.s3000-root.s3000-night .s3000-topbar {
  background: rgba(20, 24, 32, .82) !important;
  border-bottom-color: rgba(251, 191, 36, .1) !important;
}



/* ═══════════════════════════════════════════════════════════════
   SPEAK3000 PATCH V — restore yellow bar on active · score grid fix
═══════════════════════════════════════════════════════════════ */

/* Restore border-left AFTER the border:none killer (Patch P line 11820) */
.s3000-root .s3000-en,
.s3000-root .s3000-prose-en {
  border-left: 3px solid rgba(251, 191, 36, .65) !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  padding-left: 12px !important;
  display: block !important;
  background: none !important;
  background-image: none !important;
  transition: border-left-width .18s ease, border-left-color .18s ease,
    font-size .18s ease, font-weight .15s ease !important;
}

.s3000-root .s3000-line.s3000-active .s3000-en,
.s3000-root .s3000-prose-block.s3000-active .s3000-prose-en,
.s3000-root .s3000-section-card .s3000-line.s3000-active .s3000-en,
.s3000-root .s3000-en.is-reading,
.s3000-root .s3000-prose-en.is-reading {
  border-left: 5px solid #f59e0b !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  font-weight: 900 !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
}

.s3000-root .s3000-pl,
.s3000-root .s3000-prose-pl {
  border-left: 3px solid rgba(248, 113, 113, .6) !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  padding-left: 12px !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
}

.s3000-root .s3000-line.s3000-active.s3000-open .s3000-pl,
.s3000-root .s3000-prose-block.s3000-active.s3000-open .s3000-prose-pl {
  display: block !important;
  border-left: 5px solid #ef4444 !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  font-weight: 700 !important;
  background: none !important;
  background-image: none !important;
}

/* Score grid — 3 equal columns (Points, Time, Learned) */
.score-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
}

@media (max-width: 480px) {
  .score-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}



/* ═══════════════════════════════════════════════════════════════
   SPEAK3000 PATCH W — bar corrections
═══════════════════════════════════════════════════════════════ */

/* 1) Related + Key Phrases: NO bars, no padding-left on EN or PL */
.s3000-root .s3000-section-related .s3000-en,
.s3000-root .s3000-section-keyphrases .s3000-en {
  border-left: none !important;
  padding-left: 0 !important;
}

.s3000-root .s3000-section-related .s3000-pl,
.s3000-root .s3000-section-keyphrases .s3000-pl {
  border-left: none !important;
  padding-left: 0 !important;
}

.s3000-root .s3000-section-related .s3000-line.s3000-active .s3000-en,
.s3000-root .s3000-section-keyphrases .s3000-line.s3000-active .s3000-en {
  border-left: none !important;
  padding-left: 0 !important;
}

/* 2) Question + Answer: yellow bar on EN only, NO bar on PL */
.s3000-root .s3000-section-question .s3000-prose-en,
.s3000-root .s3000-section-answer .s3000-prose-en {
  border-left: 3px solid rgba(251, 191, 36, .65) !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  padding-left: 12px !important;
}

.s3000-root .s3000-section-question .s3000-prose-block.s3000-active .s3000-prose-en,
.s3000-root .s3000-section-answer .s3000-prose-block.s3000-active .s3000-prose-en {
  border-left: 5px solid #f59e0b !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
}

.s3000-root .s3000-section-question .s3000-prose-pl,
.s3000-root .s3000-section-answer .s3000-prose-pl {
  border-left: none !important;
  padding-left: 4px !important;
}

.s3000-root .s3000-section-question .s3000-prose-block.s3000-active .s3000-prose-pl,
.s3000-root .s3000-section-answer .s3000-prose-block.s3000-active .s3000-prose-pl {
  border-left: none !important;
  padding-left: 4px !important;
}

/* 3) More breathing room between bar and text — applies everywhere */
.s3000-root .s3000-en,
.s3000-root .s3000-prose-en {
  padding-left: 14px !important;
}

.s3000-root .s3000-pl,
.s3000-root .s3000-prose-pl {
  padding-left: 14px !important;
  margin-top: 5px !important;
}

/* Keep related/keyphrases at 0 (override above) */
.s3000-root .s3000-section-related .s3000-en,
.s3000-root .s3000-section-keyphrases .s3000-en,
.s3000-root .s3000-section-related .s3000-pl,
.s3000-root .s3000-section-keyphrases .s3000-pl {
  padding-left: 0 !important;
}



/* ═══════════════════════════════════════════════════════════════
   SPEAK3000 FINAL — definitive bar rules
   Overrides all previous conflicting patches (U/V/W/X/Y)

   SPEC:
   · Example  EN  → yellow bar 3px, grows to 5px active
   · Question EN  → yellow bar 3px, grows to 5px active
   · Answer   EN  → yellow bar 3px, grows to 5px active
   · Related  EN  → NO bar, NO padding-left
   · Keyphrases EN → NO bar, NO padding-left
   · ALL PL everywhere → NO bar EVER, any state
   · Score grid → 3 equal cols, full width
═══════════════════════════════════════════════════════════════ */

/* STEP 1: strip ALL borders + padding from every EN and PL globally */
.s3000-root .s3000-en,
.s3000-root .s3000-prose-en,
.s3000-root .s3000-pl,
.s3000-root .s3000-prose-pl,
.s3000-root .s3000-line.s3000-active .s3000-en,
.s3000-root .s3000-line.s3000-active .s3000-pl,
.s3000-root .s3000-line.s3000-open .s3000-pl,
.s3000-root .s3000-line.s3000-active.s3000-open .s3000-pl,
.s3000-root .s3000-prose-block.s3000-active .s3000-prose-en,
.s3000-root .s3000-prose-block.s3000-active .s3000-prose-pl,
.s3000-root .s3000-prose-block.s3000-open .s3000-prose-pl,
.s3000-root .s3000-prose-block.s3000-active.s3000-open .s3000-prose-pl,
.s3000-root .s3000-en.is-reading,
.s3000-root .s3000-prose-en.is-reading {
  border: none !important;
  padding-left: 0 !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  outline: none !important;
  transform: none !important;
  text-decoration: none !important;
  display: block !important;
}

/* STEP 2: PL base — hidden, small top gap, no bar ever */
.s3000-root .s3000-pl,
.s3000-root .s3000-prose-pl {
  display: none !important;
  margin-top: 5px !important;
  padding-left: 2px !important;
}

/* STEP 3: show PL only when open+active */
.s3000-root .s3000-line.s3000-active.s3000-open .s3000-pl,
.s3000-root .s3000-prose-block.s3000-active.s3000-open .s3000-prose-pl {
  display: block !important;
  border: none !important;
  padding-left: 2px !important;
  font-weight: 700 !important;
}

/* STEP 4: yellow bar — Example EN */
.s3000-root .s3000-section-example .s3000-en {
  border-left: 3px solid rgba(251, 191, 36, .65) !important;
  padding-left: 14px !important;
  transition: border-left-width .18s ease, border-left-color .18s ease,
    font-size .18s ease, font-weight .15s ease !important;
}

.s3000-root .s3000-section-example .s3000-line.s3000-active .s3000-en,
.s3000-root .s3000-section-example .s3000-en.is-reading {
  border-left: 5px solid #f59e0b !important;
  padding-left: 14px !important;
  font-weight: 900 !important;
}

/* STEP 5: yellow bar — Question prose-en */
.s3000-root .s3000-section-question .s3000-prose-en {
  border-left: 3px solid rgba(251, 191, 36, .65) !important;
  padding-left: 14px !important;
  transition: border-left-width .18s ease, border-left-color .18s ease,
    font-size .18s ease, font-weight .15s ease !important;
}

.s3000-root .s3000-section-question .s3000-prose-block.s3000-active .s3000-prose-en {
  border-left: 5px solid #f59e0b !important;
  padding-left: 14px !important;
  font-weight: 900 !important;
}

/* STEP 6: yellow bar — Starting Answer prose-en */
.s3000-root .s3000-section-answer .s3000-prose-en {
  border-left: 3px solid rgba(251, 191, 36, .65) !important;
  padding-left: 14px !important;
  transition: border-left-width .18s ease, border-left-color .18s ease,
    font-size .18s ease, font-weight .15s ease !important;
}

.s3000-root .s3000-section-answer .s3000-prose-block.s3000-active .s3000-prose-en {
  border-left: 5px solid #f59e0b !important;
  padding-left: 14px !important;
  font-weight: 900 !important;
}

/* STEP 7: Related + Key Phrases — no bar, no indent, ever */
.s3000-root .s3000-section-related .s3000-en,
.s3000-root .s3000-section-keyphrases .s3000-en,
.s3000-root .s3000-section-related .s3000-line.s3000-active .s3000-en,
.s3000-root .s3000-section-keyphrases .s3000-line.s3000-active .s3000-en,
.s3000-root .s3000-section-related .s3000-pl,
.s3000-root .s3000-section-keyphrases .s3000-pl,
.s3000-root .s3000-section-related .s3000-line.s3000-active .s3000-pl,
.s3000-root .s3000-section-keyphrases .s3000-line.s3000-active .s3000-pl {
  border: none !important;
  padding-left: 0 !important;
}

/* STEP 8: score grid — 3 equal full-width columns */
.score-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
  width: 100% !important;
}

@media (max-width: 480px) {
  .score-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* STEP 9: night mode bar colours */
.s3000-root.s3000-night .s3000-section-example .s3000-en,
.s3000-root.s3000-night .s3000-section-question .s3000-prose-en,
.s3000-root.s3000-night .s3000-section-answer .s3000-prose-en {
  border-left-color: rgba(217, 119, 6, .75) !important;
}

.s3000-root.s3000-night .s3000-section-example .s3000-line.s3000-active .s3000-en,
.s3000-root.s3000-night .s3000-section-question .s3000-prose-block.s3000-active .s3000-prose-en,
.s3000-root.s3000-night .s3000-section-answer .s3000-prose-block.s3000-active .s3000-prose-en {
  border-left-color: #fbbf24 !important;
}
























/* =========================================================
   VERBS100 — PORTAL VIBE PATCH (crisp 1mm elevation, pastel boards)
   Paste at END of styles.css
   ========================================================= */

/* 1mm “surface” elevation: NO blur, just crisp stacked lines */
:root {
  --v100-surface: #fff;
  --v100-border: var(--border);
  --v100-radius: var(--radius);
  --v100-ink: var(--text);
  --v100-muted: var(--muted);

  /* crisp elevation (no blur) */
  --v100-elev-1: 0 1px 0 rgba(60, 68, 120, .10), 0 2px 0 rgba(60, 68, 120, .05);
  --v100-elev-2: 0 2px 0 rgba(60, 68, 120, .12), 0 4px 0 rgba(60, 68, 120, .06);
}

/* Make sure module uses full viewer area */
#viewer-body .v100,
#viewer-body .v100-wrap {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  background: var(--bg) !important;
  color: var(--v100-ink) !important;
}

/* Main module cards: big boxed, crisp elevation, no glow/blur */
#viewer-body .v100-card,
#viewer-body .v100-panel,
#viewer-body .v100-hero {
  background: var(--v100-surface) !important;
  border: 1.5px solid var(--v100-border) !important;
  border-radius: var(--v100-radius) !important;
  box-shadow: var(--v100-elev-1) !important;
}

/* Stronger but still “portal subtle” hover */
#viewer-body .v100-card:hover,
#viewer-body .v100-panel:hover {
  transform: translateY(-1px);
  border-color: #c0c5e0 !important;
  /* same vibe as course cards hover */
  box-shadow: var(--v100-elev-2) !important;
}

/* Headings: bigger, portal typography */
#viewer-body .v100 h1,
#viewer-body .v100-title {
  font-weight: 900 !important;
  letter-spacing: -.5px !important;
  line-height: 1.15 !important;
}

#viewer-body .v100-title {
  font-size: 28px !important;
}

#viewer-body .v100-sub {
  color: var(--v100-muted) !important;
  font-size: 15px !important;
}

/* Verb “boxes” inside lesson: pastel panel + crisp border */
#viewer-body .v100-verb {
  border: 1.5px solid var(--v100-border) !important;
  border-radius: 16px !important;
  background: rgba(66, 85, 255, .05) !important;
  /* portal accent-soft */
  box-shadow: 0 1px 0 rgba(60, 68, 120, .08) !important;
  padding: 18px 18px !important;
}

/* Example sentence cards: pastel, boxed, crisp */
#viewer-body .v100-sent {
  border: 1.5px solid var(--v100-border) !important;
  border-radius: 16px !important;
  background: rgba(244, 161, 0, .10) !important;
  /* warm pastel like “due” */
  box-shadow: 0 1px 0 rgba(60, 68, 120, .08) !important;
  padding: 18px 18px !important;
  margin-top: 12px !important;
}

#viewer-body .v100-sent:hover {
  transform: translateY(-1px);
  border-color: #c0c5e0 !important;
  box-shadow: 0 2px 0 rgba(60, 68, 120, .10), 0 4px 0 rgba(60, 68, 120, .05) !important;
}

/* Speaker button: monochrome tile, portal style */
#viewer-body .v100-speak {
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  border: 1.5px solid rgba(66, 85, 255, .18) !important;
  background: rgba(66, 85, 255, .10) !important;
  box-shadow: 0 1px 0 rgba(60, 68, 120, .08) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background .14s ease, transform .10s ease, border-color .14s ease;
}

#viewer-body .v100-speak:hover {
  background: rgba(66, 85, 255, .15) !important;
  border-color: rgba(66, 85, 255, .28) !important;
}

#viewer-body .v100-speak:active {
  transform: translateY(1px);
}

/* Buttons: match portal .btn feel */
#viewer-body .v100-btn {
  border-radius: 12px !important;
  border: 1.5px solid var(--v100-border) !important;
  background: #fff !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  letter-spacing: -.1px !important;
  box-shadow: 0 1px 0 rgba(60, 68, 120, .08) !important;
  transition: background .14s ease, border-color .14s ease, transform .08s ease;
}

#viewer-body .v100-btn:hover {
  background: var(--hover) !important;
  border-color: #c0c5e0 !important;
}

#viewer-body .v100-btn:active {
  transform: translateY(1px);
}

/* Primary button: portal purple, no glow blur */
#viewer-body .v100-btn.primary {
  background: var(--btn) !important;
  color: var(--btnText) !important;
  border-color: transparent !important;
  box-shadow: 0 2px 0 rgba(66, 85, 255, .18) !important;
}

#viewer-body .v100-btn.primary:hover {
  background: #3344ee !important;
}

/* QUIZ OPTION BOARDS: big pastel mono tiles + crisp elevation */
#viewer-body .v100-opt {
  width: 100% !important;
  border-radius: 16px !important;
  border: 1.5px solid var(--v100-border) !important;
  padding: 18px 18px !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: -.15px !important;
  box-shadow: var(--v100-elev-1) !important;
  transition: transform .12s ease, border-color .14s ease, background .14s ease, box-shadow .12s ease;
}

/* spacing between option boards */
#viewer-body .v100-opt+.v100-opt {
  margin-top: 12px !important;
}

/* pastel mono colors (portal-friendly) */
#viewer-body .v100-opt:nth-of-type(1) {
  background: rgba(66, 85, 255, .08) !important;
}

#viewer-body .v100-opt:nth-of-type(2) {
  background: rgba(0, 163, 191, .10) !important;
}

#viewer-body .v100-opt:nth-of-type(3) {
  background: rgba(0, 201, 142, .10) !important;
}

#viewer-body .v100-opt:nth-of-type(4) {
  background: rgba(244, 161, 0, .12) !important;
}

#viewer-body .v100-opt:hover {
  transform: translateY(-1px);
  border-color: #c0c5e0 !important;
  box-shadow: var(--v100-elev-2) !important;
}

/* Correct / wrong: pastel but very clear */
#viewer-body .v100-opt.correct {
  background: #c8f5db !important;
  border-color: #22a85a !important;
}

#viewer-body .v100-opt.wrong {
  background: #ffe0e0 !important;
  border-color: #d42020 !important;
}

/* Mobile sizing */
@media (max-width: 720px) {
  #viewer-body .v100-title {
    font-size: 22px !important;
  }

  #viewer-body .v100-opt {
    font-size: 18px !important;
    padding: 16px 14px !important;
  }
}
















/* =========================================================
   VERBS100 — SCROLL WHOLE VIEWER (no inner scroll box)
   ========================================================= */

/* The viewer body is the ONLY scroller */
#viewer-body {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: 100% !important;
  min-height: 0 !important;
}

/* Remove any internal scrolling inside Verbs100 */
#viewer-body .v100,
#viewer-body .v100-wrap,
#viewer-body #v100-view {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Keep full width + nice padding */
#viewer-body .v100-wrap {
  width: 100% !important;
  max-width: none !important;
  padding-bottom: 48px !important;
  /* space at bottom for last option */
}

/* Safety: prevent parent flex containers from clipping scroll */
.viewer,
.course-viewer,
.course-right,
.main-view,
#course-view {
  min-height: 0 !important;
}





/* =========================================================
   PORTAL VIEWER FULL HEIGHT BACKGROUND
   ========================================================= */

/* root layout must fill viewport */
html,
body {
  height: 100%;
  min-height: 100vh;
}

/* main portal wrapper */
#app,
.main,
.main-view,
.viewer,
.course-view,
.course-viewer {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* viewer body always fills remaining space */
#viewer-body {
  flex: 1;
  min-height: 100vh;
  background: var(--bg);
  /* portal background */
}

/* verbs100 module should not limit height */
#viewer-body .v100,
#viewer-body .v100-wrap {
  min-height: 100%;
  box-sizing: border-box;
}






/* =========================================================
   VERBS100 — ALL LESSONS GRID (portal style, subtle 3D)
   ========================================================= */

/* Grid wrapper card */
#viewer-body .v100-card .v100-grid {
  margin-top: 10px;
}

/* Bigger, nicer grid spacing */
#viewer-body .v100-grid {
  gap: 14px !important;
}

/* Lesson tiles: pastel + crisp 3D border (no blur) */
#viewer-body .v100-node {
  border: 1.5px solid var(--border) !important;
  border-radius: 18px !important;
  background: rgba(66, 85, 255, .06) !important;
  /* portal pastel base */
  box-shadow:
    0 1px 0 rgba(0, 0, 0, .10),
    0 2px 0 rgba(0, 0, 0, .06) !important;
  /* subtle 3D step */
  transition: transform .12s ease, box-shadow .12s ease, background .14s ease, border-color .14s ease;
  font-size: 20px !important;
  font-weight: 900 !important;
}

/* Alternate gentle pastels (keeps it lively) */
#viewer-body .v100-node:nth-child(4n+1) {
  background: rgba(66, 85, 255, .08) !important;
}

/* lilac */
#viewer-body .v100-node:nth-child(4n+2) {
  background: rgba(0, 163, 191, .10) !important;
}

/* sky */
#viewer-body .v100-node:nth-child(4n+3) {
  background: rgba(0, 201, 142, .10) !important;
}

/* mint */
#viewer-body .v100-node:nth-child(4n+4) {
  background: rgba(244, 161, 0, .12) !important;
}

/* butter */

/* Hover = 1mm lift + slightly stronger “3D” */
#viewer-body .v100-node:hover {
  transform: translateY(-1px);
  border-color: #c0c5e0 !important;
  box-shadow:
    0 2px 0 rgba(0, 0, 0, .12),
    0 4px 0 rgba(0, 0, 0, .07) !important;
}

/* Pressed = returns to surface */
#viewer-body .v100-node:active {
  transform: translateY(0px);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, .10),
    0 2px 0 rgba(0, 0, 0, .06) !important;
}

/* Current lesson = crisp outline + slightly brighter tile */
#viewer-body .v100-node.current {
  border-color: rgba(66, 85, 255, .35) !important;
  outline: 2px solid rgba(66, 85, 255, .18) !important;
  outline-offset: 2px;
}

/* Done lessons = mint + checkmark corner badge */
#viewer-body .v100-node.done {
  background: rgba(0, 201, 142, .14) !important;
  border-color: rgba(0, 160, 90, .22) !important;
  position: relative;
}

#viewer-body .v100-node.done::after {
  content: "✓";
  position: absolute;
  right: 10px;
  top: 8px;
  width: 26px;
  height: 26px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 900;
  color: #0d6b3a;
  background: rgba(255, 255, 255, .75);
  border: 1.5px solid rgba(0, 160, 90, .22);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .08), 0 2px 0 rgba(0, 0, 0, .05);
}

/* Make the "Learning path" card look stronger (still subtle) */
#viewer-body .v100-card {
  border: 1.5px solid var(--border) !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .10), 0 2px 0 rgba(0, 0, 0, .06) !important;
}

/* Mobile: 3 columns, bigger tap targets */
@media (max-width: 720px) {
  #viewer-body .v100-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
  }

  #viewer-body .v100-node {
    height: 76px !important;
    font-size: 18px !important;
    border-radius: 16px !important;
  }
}





/* =========================================================
   VERBS100 COMPLETE UI PATCH
   Portal style – crisp elevation – pastel cards
   ========================================================= */

:root {
  --v100-radius: 18px;
  --v100-border: var(--border);
  --v100-elev: 0 1px 0 rgba(0, 0, 0, .10), 0 2px 0 rgba(0, 0, 0, .05);

  --v100-purple: rgba(66, 85, 255, .08);
  --v100-sky: rgba(0, 163, 191, .10);
  --v100-mint: rgba(0, 201, 142, .10);
  --v100-butter: rgba(244, 161, 0, .12);
}

/* =========================================================
   BASE CARDS
   ========================================================= */

#viewer-body .v100-card {
  border: 1.5px solid var(--v100-border);
  border-radius: var(--v100-radius);
  box-shadow: var(--v100-elev);
  background: #fff;
  transition: transform .12s ease, border-color .14s ease;
}

#viewer-body .v100-card:hover {
  transform: translateY(-1px);
  border-color: #c0c5e0;
}

/* =========================================================
   LESSON GRID
   ========================================================= */

#viewer-body .v100-grid {
  gap: 14px;
}

/* lesson tiles */

#viewer-body .v100-node {
  position: relative;
  border: 1.5px solid var(--v100-border);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--v100-elev);
  height: 90px;
  color: transparent;
  cursor: pointer;
}

/* pastel backgrounds */

#viewer-body .v100-node:nth-child(4n+1) {
  background: var(--v100-purple);
}

#viewer-body .v100-node:nth-child(4n+2) {
  background: var(--v100-sky);
}

#viewer-body .v100-node:nth-child(4n+3) {
  background: var(--v100-mint);
}

#viewer-body .v100-node:nth-child(4n+4) {
  background: var(--v100-butter);
}

/* circle numbers */

#viewer-body .v100-node::before {

  content: attr(data-n);
  position: absolute;

  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  width: 58px;
  height: 58px;

  border-radius: 50%;

  background: #fff;

  border: 1.5px solid var(--v100-border);

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 22px;
  font-weight: 900;

  box-shadow: var(--v100-elev);

  color: var(--text);
}

/* hover */

#viewer-body .v100-node:hover::before {
  transform: translate(-50%, -50%) translateY(-1px);
}

/* done lesson */

#viewer-body .v100-node.done::before {
  border-color: #22a85a;
}

/* current */

#viewer-body .v100-node.current::before {
  outline: 2px solid rgba(66, 85, 255, .2);
  outline-offset: 3px;
}

/* =========================================================
   VERB CARDS
   ========================================================= */

#viewer-body .v100-verb {
  padding: 18px;
  border: 1.5px solid var(--v100-border);
  border-radius: 16px;
  background: var(--v100-purple);
  box-shadow: var(--v100-elev);
}

/* =========================================================
   SENTENCE CARDS
   ========================================================= */

#viewer-body .v100-sent {

  padding: 18px;

  border: 1.5px solid var(--v100-border);
  border-radius: 16px;

  background: var(--v100-butter);

  box-shadow: var(--v100-elev);

  margin-top: 12px;

  cursor: pointer;
}

/* highlight when speaking */

#viewer-body .v100-speaking {
  background: #fff3a0 !important;
  border-color: #ffd34d !important;
}

/* =========================================================
   WORD TAP
   ========================================================= */

#viewer-body .v100-word {

  padding: 2px 6px;

  border-radius: 6px;

  cursor: pointer;

  transition: background .12s ease;
}

#viewer-body .v100-word:hover {
  background: rgba(66, 85, 255, .12);
}

/* =========================================================
   QUIZ OPTION BOARDS
   ========================================================= */

#viewer-body .v100-opt {

  width: 100%;

  border-radius: 16px;

  border: 1.5px solid var(--v100-border);

  padding: 18px;

  font-size: 20px;

  font-weight: 800;

  box-shadow: var(--v100-elev);

  transition: transform .12s ease, border-color .14s ease;

}

/* spacing */

#viewer-body .v100-opt+.v100-opt {
  margin-top: 12px;
}

/* pastel options */

#viewer-body .v100-opt:nth-of-type(1) {
  background: var(--v100-purple);
}

#viewer-body .v100-opt:nth-of-type(2) {
  background: var(--v100-sky);
}

#viewer-body .v100-opt:nth-of-type(3) {
  background: var(--v100-mint);
}

#viewer-body .v100-opt:nth-of-type(4) {
  background: var(--v100-butter);
}

/* hover */

#viewer-body .v100-opt:hover {
  transform: translateY(-1px);
  border-color: #c0c5e0;
}

/* correct */

#viewer-body .v100-opt.correct {
  background: #c8f5db;
  border-color: #22a85a;
}

/* wrong */

#viewer-body .v100-opt.wrong {
  background: #ffe0e0;
  border-color: #d42020;
}

/* =========================================================
   PROGRESS BAR
   ========================================================= */

.v100-progress {
  height: 8px;
  border-radius: 8px;
  background: #eef0ff;
  overflow: hidden;
  margin-top: 8px;
}

.v100-progress-fill {
  height: 100%;
  background: #4255ff;
  width: 30%;
  transition: width .3s;
}

/* =========================================================
   BUTTONS
   ========================================================= */

#viewer-body .v100-btn {

  border-radius: 12px;

  border: 1.5px solid var(--v100-border);

  background: #fff;

  font-weight: 800;

  padding: 10px 14px;

  box-shadow: var(--v100-elev);

  transition: background .12s ease;
}

#viewer-body .v100-btn:hover {
  background: rgba(66, 85, 255, .08);
}

/* primary */

#viewer-body .v100-btn.primary {

  background: #4255ff;
  color: #fff;

  border: none;

  box-shadow: 0 2px 0 rgba(66, 85, 255, .25);
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:720px) {

  #viewer-body .v100-node::before {
    width: 50px;
    height: 50px;
    font-size: 20px;
  }

  #viewer-body .v100-opt {
    font-size: 18px;
    padding: 16px;
  }

}



/* =========================================================
   VERBS100 — ANIMATED VISUAL UPGRADE + DESKTOP SCALE
   Paste at END of styles.css
   ========================================================= */

/* ---------- motion tokens (gentle, modern) ---------- */
:root {
  --v100-ease: cubic-bezier(.2, .9, .2, 1);
  --v100-dur: 160ms;
  --v100-dur2: 260ms;

  /* stronger desktop rhythm */
  --v100-pad: 26px;
  --v100-gap: 16px;
}

/* ---------- layout / spacing ---------- */
#viewer-body .v100-wrap {
  padding: 28px 34px !important;
  /* bigger desktop padding */
}

#viewer-body .v100-card {
  padding: 18px 20px !important;
  margin: 16px 0 !important;
}

/* stronger hierarchy */
#viewer-body .v100-title {
  font-size: 34px !important;
  letter-spacing: -0.03em !important;
}

#viewer-body .v100-sub {
  font-size: 16px !important;
}

#viewer-body .v100-chip {
  font-size: 15px !important;
  padding: 10px 14px !important;
}

/* verbs & sentences bigger */
#viewer-body .v100-verb {
  padding: 20px 20px !important;
}

#viewer-body .v100-verb b {
  font-size: 22px !important;
}

#viewer-body .v100-sent b {
  font-size: 20px !important;
}

#viewer-body .v100-sent .pl {
  font-size: 16px !important;
}

/* quiz question + options bigger */
#viewer-body .v100-q {
  font-size: 28px !important;
  margin-bottom: 14px !important;
}

#viewer-body .v100-opt {
  padding: 20px 20px !important;
  font-size: 21px !important;
}

/* ---------- crisp 3D lift animations (no blur) ---------- */
#viewer-body .v100-card,
#viewer-body .v100-node,
#viewer-body .v100-opt,
#viewer-body .v100-sent,
#viewer-body .v100-verb,
#viewer-body .v100-btn {
  transition:
    transform var(--v100-dur) var(--v100-ease),
    border-color var(--v100-dur) var(--v100-ease),
    background var(--v100-dur) var(--v100-ease);
}

/* lift on hover */
#viewer-body .v100-card:hover,
#viewer-body .v100-sent:hover,
#viewer-body .v100-verb:hover,
#viewer-body .v100-opt:hover,
#viewer-body .v100-node:hover {
  transform: translateY(-1px);
}

/* press down */
#viewer-body .v100-btn:active,
#viewer-body .v100-opt:active,
#viewer-body .v100-node:active {
  transform: translateY(1px);
}

/* ---------- entrance animation for each card (subtle) ---------- */
@keyframes v100Enter {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

#viewer-body .v100-card {
  animation: v100Enter var(--v100-dur2) var(--v100-ease) both;
}

/* stagger a little for multiple cards (verbs/sentences feel alive) */
#viewer-body .v100-card:nth-of-type(2) {
  animation-delay: 40ms;
}

#viewer-body .v100-card:nth-of-type(3) {
  animation-delay: 80ms;
}

#viewer-body .v100-card:nth-of-type(4) {
  animation-delay: 120ms;
}

/* ---------- option “pop” hover (tiny scale) ---------- */
#viewer-body .v100-opt:hover {
  transform: translateY(-1px) scale(1.006);
}

/* ---------- speaking highlight animation (nice pulse) ---------- */
@keyframes v100SpeakPulse {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-1px);
  }

  100% {
    transform: translateY(0);
  }
}

#viewer-body .v100-speaking {
  animation: v100SpeakPulse 520ms var(--v100-ease) 1;
}

/* ---------- better lesson circles on desktop ---------- */
#viewer-body .v100-node::before {
  width: 62px !important;
  height: 62px !important;
  font-size: 24px !important;
}

/* ---------- responsive: keep it comfy on small screens ---------- */
@media (max-width: 720px) {
  #viewer-body .v100-wrap {
    padding: 18px 16px !important;
  }

  #viewer-body .v100-title {
    font-size: 26px !important;
  }

  #viewer-body .v100-q {
    font-size: 22px !important;
  }

  #viewer-body .v100-opt {
    font-size: 18px !important;
    padding: 16px 14px !important;
  }

  #viewer-body .v100-node::before {
    width: 52px !important;
    height: 52px !important;
    font-size: 20px !important;
  }
}





/* =========================================================
   VERBS100 — "LEARN 2 VERBS" BOXES: crisp 3D + groove
   Paste at END of styles.css
   ========================================================= */

/* Base: surface tile with subtle groove (no blur) */
#viewer-body .v100-verb {
  position: relative;
  border-radius: 18px !important;

  /* crisp border stack */
  border: 1.5px solid var(--border) !important;

  /* pastel surface */
  background: rgba(66, 85, 255, .07) !important;

  /* 1mm elevation (no blur) */
  box-shadow:
    0 1px 0 rgba(0, 0, 0, .12),
    0 2px 0 rgba(0, 0, 0, .06) !important;

  padding: 22px 22px !important;
  overflow: hidden;
}

/* Groove: inner “pressed-in” line (gives depth) */
#viewer-body .v100-verb::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 14px;
  pointer-events: none;

  /* inner groove ring */
  border: 1px solid rgba(255, 255, 255, .80);
  box-shadow:
    inset 0 1px 0 rgba(0, 0, 0, .10),
    inset 0 2px 0 rgba(0, 0, 0, .05);
  opacity: .75;
}

/* Soft highlight strip (like light hitting the top) */
#viewer-body .v100-verb::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: 12px;
  height: 10px;
  border-radius: 999px;
  pointer-events: none;

  background: rgba(255, 255, 255, .55);
  opacity: .55;
}

/* Elegant hover: tiny lift, border slightly stronger */
#viewer-body .v100-verb:hover {
  transform: translateY(-1px);
  border-color: #c0c5e0 !important;
  box-shadow:
    0 2px 0 rgba(0, 0, 0, .12),
    0 4px 0 rgba(0, 0, 0, .06) !important;
}

/* Pressed feel for the "say" button inside verb box */
#viewer-body .v100-verb .v100-btn {
  background: rgba(255, 255, 255, .85) !important;
  border: 1.5px solid rgba(66, 85, 255, .18) !important;
}

#viewer-body .v100-verb .v100-btn:hover {
  background: rgba(255, 255, 255, .95) !important;
  border-color: rgba(66, 85, 255, .28) !important;
}

/* Typography polish inside verb box */
#viewer-body .v100-verb b {
  font-size: 23px !important;
  letter-spacing: -0.02em !important;
}

#viewer-body .v100-verb .mut {
  opacity: .78 !important;
  font-size: 15px !important;
}

/* Mobile: keep groove but tighter spacing */
@media (max-width: 720px) {
  #viewer-body .v100-verb {
    padding: 18px 16px !important;
    border-radius: 16px !important;
  }

  #viewer-body .v100-verb::before {
    inset: 9px;
    border-radius: 12px;
  }

  #viewer-body .v100-verb b {
    font-size: 20px !important;
  }
}


/* =========================================================
   READER — marker highlight style
   ========================================================= */

.srx-sent.on {
  position: relative;
  outline: none !important;
}

/* marker layer */
.srx-sent.on::before {
  content: "";
  position: absolute;
  left: -4px;
  right: -4px;
  top: 12%;
  bottom: 12%;

  background: linear-gradient(180deg,
      rgba(255, 245, 160, 0.65),
      rgba(255, 235, 120, 0.55));

  border-radius: 6px;

  /* marker effect */
  filter: blur(1.2px);
  z-index: -1;
}

/* subtle hover */
.srx-sent:hover::before {
  opacity: 0.7;
}



/* =========================================================
   READER — question box (3D pastel card)
   ========================================================= */

.srx-lead-q {
  background: linear-gradient(180deg,
      #fffbe6,
      #fff7cc);

  border: 1.5px solid rgba(230, 210, 120, 0.55);

  border-radius: 14px;

  padding: 16px 18px;
  margin: 18px 0 22px;

  /* subtle 3D elevation */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 3px 8px rgba(0, 0, 0, 0.06),
    0 1px 0 rgba(230, 210, 120, 0.25);

  transition: transform .12s ease, box-shadow .12s ease;
}

/* English question */
.srx-lead-q .en {
  font-size: 20px;
  font-weight: 800;
  color: #1a1d28;
  margin-bottom: 6px;
  letter-spacing: -0.2px;
}

/* Polish translation */
.srx-lead-q .pl {
  font-size: 16px;
  color: #5a5a5a;
  font-weight: 600;
}




/* ═══════════════════════════════════════════════════════════════
   PATCH SRX — marker highlight (light yellow, no ring) + crisp 3D cards
   + lead question box + flashcards mobile layout + panel overlay + topbar
   Paste at VERY END of styles.css
═══════════════════════════════════════════════════════════════ */

.srx-root {
  /* Delicate marker yellow (separate from accent) */
  --srx-mark: rgba(255, 232, 138, .48);
  /* main marker */
  --srx-mark-strong: rgba(255, 232, 138, .66);
  --srx-mark-edge: rgba(255, 232, 138, .22);

  /* Crisp “3D edge” tokens (low blur, groove-like) */
  --srx-3d-edge: rgba(30, 40, 60, .14);
  --srx-3d-top: rgba(255, 255, 255, .85);
  --srx-3d-bot: rgba(30, 40, 60, .07);
}

/* ───────────────────────────────────────────────────────────────
   1) Active sentence highlight = light yellow marker, NO ring
   (replaces accent-soft + removes outline ring)
─────────────────────────────────────────────────────────────── */
.srx-root .srx-sent:hover {
  background: linear-gradient(to bottom,
      transparent 58%,
      var(--srx-mark) 58%,
      var(--srx-mark) 92%,
      transparent 92%) !important;
}

.srx-root .srx-sent.on {
  background: linear-gradient(to bottom,
      transparent 54%,
      var(--srx-mark-strong) 54%,
      var(--srx-mark-strong) 92%,
      transparent 92%) !important;

  outline: none !important;
  outline-offset: 0 !important;

  /* subtle crisp “active edge” without a ring */
  box-shadow:
    inset 0 1px 0 var(--srx-3d-top),
    inset 0 -1px 0 var(--srx-mark-edge) !important;

  font-weight: 1000;
  border-radius: 10px;
}

/* ───────────────────────────────────────────────────────────────
   2) Lead question as a pastel box with crisp 3D edge (no blur)
─────────────────────────────────────────────────────────────── */
.srx-root .srx-lead-q {
  margin: 14px 0 18px;
  padding: 16px 18px;
  border-radius: var(--srx-r);
  background: color-mix(in srgb, var(--srx-mark) 34%, #ffffff 66%);
  border: 1px solid var(--srx-3d-edge);
  box-shadow:
    inset 0 1px 0 var(--srx-3d-top),
    inset 0 -1px 0 var(--srx-3d-bot),
    0 2px 0 rgba(30, 40, 60, .06);
}

.srx-root .srx-lead-q .en {
  font-size: clamp(17px, 3vw, 22px) !important;
}

.srx-root .srx-lead-q .pl {
  font-size: 15px !important;
  border-top: 1px dashed rgba(30, 40, 60, .20) !important;
}

/* ───────────────────────────────────────────────────────────────
   3) Useful Words / Useful Phrases cards: bigger + crisp 3D border
─────────────────────────────────────────────────────────────── */
.srx-root .srx-word-grid {
  gap: 12px !important;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
}

.srx-root .srx-phrase-grid {
  gap: 12px !important;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
}

/* Applies to both word + phrase cards (crisp “groove” effect) */
.srx-root .srx-word-card,
.srx-root .srx-phrase-card {
  border-radius: 18px !important;
  border: 1px solid var(--srx-3d-edge) !important;
  background: color-mix(in srgb, var(--srx-surface) 88%, var(--srx-bg) 12%) !important;
  padding: 16px 16px 14px !important;

  /* low/zero blur 3D edge */
  box-shadow:
    inset 0 1px 0 var(--srx-3d-top),
    inset 0 -1px 0 var(--srx-3d-bot),
    0 2px 0 rgba(30, 40, 60, .07) !important;

  transform: none !important;
}

.srx-root .srx-word-card .en,
.srx-root .srx-phrase-card .en {
  font-size: 18px !important;
  font-weight: 1000 !important;
}

.srx-root .srx-word-card .pl,
.srx-root .srx-phrase-card .pl {
  font-size: 15px !important;
  font-weight: 900 !important;
}

.srx-root .srx-word-card .hint {
  font-size: 12px !important;
  font-weight: 900 !important;
  opacity: .85;
}

/* Optional: tiny lift without blur */
.srx-root .srx-word-card:hover,
.srx-root .srx-phrase-card:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(30, 40, 60, .20) !important;
}

/* ───────────────────────────────────────────────────────────────
   4) Flashcard exercise: crisp 3D containers, no “blurry” shadow
─────────────────────────────────────────────────────────────── */
.srx-root .srx-ex-wrap,
.srx-root .srx-ex-card {
  border: 1px solid var(--srx-3d-edge) !important;
  border-radius: var(--srx-r) !important;
  background: color-mix(in srgb, var(--srx-surface) 92%, var(--srx-bg) 8%) !important;
  box-shadow:
    inset 0 1px 0 var(--srx-3d-top),
    inset 0 -1px 0 var(--srx-3d-bot),
    0 2px 0 rgba(30, 40, 60, .08) !important;
}

.srx-root .srx-ex-label {
  font-size: 15px !important;
  font-weight: 1000 !important;
}

.srx-root .srx-ex-sublabel {
  font-size: 13px !important;
  font-weight: 900 !important;
}

.srx-root .srx-ex-word {
  font-size: 20px !important;
  font-weight: 1000 !important;
}

.srx-root .srx-ex-hint {
  font-size: 14px !important;
  font-weight: 900 !important;
}

.srx-root .srx-opt-btn {
  border: 1px solid var(--srx-3d-edge) !important;
  border-radius: 16px !important;
  padding: 14px 14px !important;
  font-size: 15px !important;
  font-weight: 1000 !important;
  background: color-mix(in srgb, var(--srx-bg) 65%, #fff 35%) !important;
  box-shadow:
    inset 0 1px 0 var(--srx-3d-top),
    inset 0 -1px 0 var(--srx-3d-bot),
    0 2px 0 rgba(30, 40, 60, .06) !important;
}

.srx-root .srx-opt-btn:hover {
  transform: translateY(-1px) !important;
}

@media (max-width: 520px) {

  /* choices stacked one under another */
  .srx-root .srx-opt-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
}

/* ───────────────────────────────────────────────────────────────
   5) Flashcard nav buttons: replace text with monochrome SVG icons (mobile)
─────────────────────────────────────────────────────────────── */
@media (max-width: 520px) {
  .srx-root .srx-ex-nav-btn {
    padding: 0 !important;
    height: 44px !important;
    min-width: 44px !important;
    flex: 0 0 44px !important;
    border-radius: 14px !important;

    /* hide text, show icon via ::before */
    font-size: 0 !important;
    letter-spacing: 0 !important;
  }

  .srx-root .srx-ex-nav-btn::before {
    content: "";
    width: 20px;
    height: 20px;
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
  }

  /* Prev = chevron-left */
  .srx-root .srx-ex-nav-btn[data-x="prev"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c5040' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E");
  }

  /* Play = triangle */
  .srx-root .srx-ex-nav-btn[data-x="speak"]::before {
    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c5040' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 7v10l10-5-10-5z'/%3E%3C/svg%3E\");
  }

  /* Next = chevron-right */
  .srx-root .srx-ex-nav-btn[data-x="next"]::before {
    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E\");
  }

  /* keep Next primary readable */
  .srx-root .srx-ex-nav-btn.primary {
    box-shadow: 0 2px 0 rgba(30, 40, 60, .12) !important;
  }
}

/* ───────────────────────────────────────────────────────────────
   6) Side panel overlay = white + 3D panel shadow (like portal)
   + Topbar 55% transparent with shadow
─────────────────────────────────────────────────────────────── */
.srx-root .srx-panel-backdrop {
  background: rgba(255, 255, 255, .60) !important;
  backdrop-filter: blur(6px) !important;
}

.srx-root .srx-read-panel {
  box-shadow:
    -14px 0 0 rgba(30, 40, 60, .04),
    -34px 0 0 rgba(30, 40, 60, .02),
    -20px 0 80px rgba(20, 22, 34, .16) !important;
  border-left-color: rgba(30, 40, 60, .16) !important;
}

/* Reader topbar (not portal topbar): 55% transparent + soft shadow */
.srx-root .srx-topbar {
  background: rgba(255, 255, 255, .55) !important;
  backdrop-filter: blur(10px) !important;
  border-bottom-color: rgba(30, 40, 60, .14) !important;
  box-shadow: 0 8px 22px rgba(20, 22, 34, .08) !important;
}


/* =========================================================
   SRX PATCH — higher yellow marker + PL highlight yellow
   + bigger text + active sentence grows 1–2 sizes
   Paste at VERY END of styles.css
========================================================= */

.srx-root {
  /* dedicated SRX yellow (avoid portal accent/violet) */
  --srx-y: rgba(255, 232, 138, .55);
  --srx-y2: rgba(255, 232, 138, .70);
  --srx-y3: rgba(255, 232, 138, .26);

  --srx-y-border: rgba(210, 170, 70, .45);
  --srx-y-border2: rgba(210, 170, 70, .70);
}

/* ────────────────────────────────────────────────────────
   1) Base reading text a bit bigger
──────────────────────────────────────────────────────── */
.srx-root .srx-sent {
  font-size: clamp(20px, 3.2vw, 22px) !important;
  /* was 20px fixed */
  /* :contentReference[oaicite:1]{index=1} */
  padding: 3px 6px !important;
  transition: background .15s ease, font-weight .15s ease, transform .15s ease, font-size .15s ease !important;
}

/* ────────────────────────────────────────────────────────
   2) Higher “ink marker” highlight (covers more height)
   - hover: gentle
   - active: stronger
   - NO outline ring
──────────────────────────────────────────────────────── */
.srx-root .srx-sent:hover {
  background: linear-gradient(to bottom,
      transparent 22%,
      var(--srx-y) 22%,
      var(--srx-y) 94%,
      transparent 94%) !important;
}

.srx-root .srx-sent.on {
  background: linear-gradient(to bottom,
      transparent 18%,
      var(--srx-y2) 18%,
      var(--srx-y2) 95%,
      transparent 95%) !important;

  outline: none !important;
  /* kill ring from old CSS */
  /* :contentReference[oaicite:2]{index=2} */
  outline-offset: 0 !important;
  box-shadow: none !important;

  font-weight: 1000 !important;

  /* active grows 1–2 sizes, without reflow drama */
  font-size: clamp(21px, 3.4vw, 24px) !important;
}

/* optional micro “pop” without shaking layout */
.srx-root .srx-sent.on {
  transform: translateY(-0.5px) !important;
}

/* ────────────────────────────────────────────────────────
   3) Polish inline block highlight: change accent/violet -> yellow
   Current uses border-left: var(--srx-accent) and accent-soft bg. :contentReference[oaicite:3]{index=3}
──────────────────────────────────────────────────────── */
.srx-root .srx-pl-inline {
  border-left-color: var(--srx-y-border2) !important;
  background: linear-gradient(90deg, var(--srx-y3), transparent) !important;
  font-size: 18px !important;
  /* was 17px */
  /* :contentReference[oaicite:4]{index=4} */
  color: var(--srx-text) !important;
}

/* ────────────────────────────────────────────────────────
   4) Any “violet-ish” SRX accent borders that appear around PL areas
   (topic pill / panel focus / active list item) -> shift to yellow
──────────────────────────────────────────────────────── */

/* topic pill currently accent-soft + accent-mid border :contentReference[oaicite:5]{index=5} */
.srx-root .srx-topic-pill {
  background: color-mix(in srgb, var(--srx-y3) 60%, #fff 40%) !important;
  border-color: var(--srx-y-border) !important;
  color: #6b4f12 !important;
}

/* panel list active state uses accent-mid + accent-soft :contentReference[oaicite:6]{index=6} */
.srx-root .srx-r-item.active {
  border-color: var(--srx-y-border2) !important;
  background: color-mix(in srgb, var(--srx-y3) 62%, #fff 38%) !important;
}

/* focus ring in panel search (was accent-soft) :contentReference[oaicite:7]{index=7} */
.srx-root .srx-panel-search input:focus {
  border-color: var(--srx-y-border2) !important;
  box-shadow: 0 0 0 3px var(--srx-y3) !important;
}





/* =========================================================
   SRX PATCH — mobile nav icons visible + word tap highlight yellow
   Paste at VERY END of styles.css
========================================================= */

.srx-root {
  --srx-y: rgba(255, 232, 138, .55);
  --srx-y2: rgba(255, 232, 138, .70);
  --srx-y3: rgba(255, 232, 138, .22);
  --srx-y-border: rgba(210, 170, 70, .55);
  --srx-ico: #5c5040;
  /* monochrome icon color */
  --srx-ico-inv: #ffffff;
  /* icon color on primary */
}

/* ───────────────────────────────────────────────────────────────
   1) MOBILE: Fix Prev/Play/Next icons (no “empty circle”)
─────────────────────────────────────────────────────────────── */
@media (max-width:520px) {
  .srx-root .srx-ex-nav-btn {
    /* keep your button style but make it icon-only */
    font-size: 0 !important;
    padding: 0 !important;
    height: 46px !important;
    min-width: 46px !important;
    flex: 1 1 0 !important;
    /* still 3 equal buttons */
    border-radius: 16px !important;
  }

  .srx-root .srx-ex-nav-btn::before {
    content: "";
    width: 22px;
    height: 22px;
    display: block;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px 22px;
    opacity: 1 !important;
  }

  /* ensure non-primary shows icon clearly */
  .srx-root .srx-ex-nav-btn:not(.primary) {
    background: var(--srx-surface) !important;
    border-color: var(--srx-border) !important;
  }

  /* primary stays primary */
  .srx-root .srx-ex-nav-btn.primary {
    background: var(--s-accent, #4255ff) !important;
    border-color: var(--s-accent, #4255ff) !important;
  }

  /* PREV icon */
  .srx-root .srx-ex-nav-btn[data-x="prev"]::before {
    background-image: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">\
<path d="M15 18L9 12l6-6" stroke="%235c5040" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/>\
</svg>');
  }

  /* PLAY icon */
  .srx-root .srx-ex-nav-btn[data-x="speak"]::before {
    background-image: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">\
<path d="M9 7v10l10-5-10-5z" stroke="%235c5040" stroke-width="2.2" stroke-linejoin="round"/>\
</svg>');
  }

  /* NEXT icon (white on primary button) */
  .srx-root .srx-ex-nav-btn[data-x="next"]::before {
    background-image: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">\
<path d="M9 18l6-6-6-6" stroke="%23ffffff" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/>\
</svg>');
  }

  /* Disabled prev should still show icon but faded */
  .srx-root .srx-ex-nav-btn:disabled {
    opacity: .45 !important;
  }
}

/* ───────────────────────────────────────────────────────────────
   2) MOBILE TAP: word card highlight must be yellow (not violet)
   Your cards currently have hover teal/gold on desktop. :contentReference[oaicite:1]{index=1}
   We force :active + common “selected” class names to yellow.
─────────────────────────────────────────────────────────────── */
.srx-root .srx-word-card:active,
.srx-root .srx-phrase-card:active,
.srx-root .srx-word-card.active,
.srx-root .srx-phrase-card.active,
.srx-root .srx-word-card.on,
.srx-root .srx-phrase-card.on,
.srx-root .srx-word-card.is-active,
.srx-root .srx-phrase-card.is-active {
  border-color: var(--srx-y-border) !important;
  background: color-mix(in srgb, var(--srx-y3) 70%, var(--srx-surface) 30%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .85),
    0 2px 0 rgba(30, 40, 60, .07) !important;
  transform: translateY(-1px) !important;
}

/* also remove any accent glow on tap */
.srx-root .srx-word-card:focus,
.srx-root .srx-phrase-card:focus,
.srx-root .srx-word-card:focus-visible,
.srx-root .srx-phrase-card:focus-visible {
  outline: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .85),
    0 2px 0 rgba(30, 40, 60, .07) !important;
}





/* =========================================================
   CONTINUE WIZARD — LENGTH CARDS (modern portal style)
   ========================================================= */

/* bigger grid */
.cw-length-grid {
  gap: 16px;
  margin-top: 14px;
}

/* card */
.cw-len-card {
  padding: 20px 18px;
  border-radius: 18px;
  min-height: 140px;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;

  transition: transform .14s ease, box-shadow .14s ease;
}

/* hover lift */
.cw-len-card:hover {
  transform: translateY(-2px);
}

/* selected */
.cw-len-card.selected {
  border-width: 2px;
}

/* ---------------------------------------------------------
   ICON CHIP (replaces emoji)
--------------------------------------------------------- */

.cw-len-icon {
  font-size: 0 !important;
  /* hide emoji */

  width: 42px;
  height: 42px;

  border-radius: 14px;

  display: grid;
  place-items: center;

  background: rgba(26, 79, 181, .08);
  border: 1.5px solid rgba(26, 79, 181, .18);
}

/* svg base */
.cw-len-icon::before {
  content: "";
  width: 22px;
  height: 22px;

  background: var(--blue, #1a4fb5);

  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;

  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

/* MICRO icon (simple bolt) */
.cw-len-card[data-pick-length="micro"] .cw-len-icon::before {
  mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path fill='black' d='M13 2L3 14h7l-1 8 10-12h-7l1-8z'/>\
</svg>");
}

/* STANDARD icon (book minimal) */
.cw-len-card[data-pick-length="standard"] .cw-len-icon::before {
  mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path fill='black' d='M4 4h7a3 3 0 0 1 3 3v13H7a3 3 0 0 0-3 3V4zM20 4h-7a3 3 0 0 0-3 3v13h7a3 3 0 0 1 3 3V4z'/>\
</svg>");
}

/* LONG icon (graduation cap minimal) */
.cw-len-card[data-pick-length="long"] .cw-len-icon::before {
  mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path fill='black' d='M12 3L1 9l11 6 9-4.9V17h2V9L12 3zM5 12v5c2 1.3 5 2 7 2s5-.7 7-2v-5l-7 4-7-4z'/>\
</svg>");
}

/* XL icon (star minimal) */
.cw-len-card[data-pick-length="xl"] .cw-len-icon::before {
  mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path fill='black' d='M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1 3-6z'/>\
</svg>");
}

/* ---------------------------------------------------------
   TYPOGRAPHY SCALE
--------------------------------------------------------- */

.cw-len-name {
  font-size: 17px;
  font-weight: 700;
  margin-top: 4px;
}

.cw-len-dur {
  font-size: 20px;
  font-weight: 800;
}

.cw-len-price {
  font-size: 18px;
  font-weight: 700;
}

.cw-len-unit {
  font-size: 13px;
}

/* subtle highlight on selected */
.cw-len-card.selected .cw-len-icon {
  background: rgba(26, 79, 181, .12);
  border-color: rgba(26, 79, 181, .25);
}




/* =========================================================
   PATCH — CONTINUE WIZARD v2 (cw-*) : bigger typography + monochrome SVG icons
   Paste AFTER the existing "CONTINUE WIZARD v2" block
   ========================================================= */

/* Overall type scale */
.cw-title {
  font-size: 20px;
}

/* was ~17px */
/* :contentReference[oaicite:1]{index=1} */
.cw-sub {
  font-size: 14px;
}

/* was ~13px */
/* :contentReference[oaicite:2]{index=2} */
.cw-back {
  font-size: 14px;
}

/* was ~13px */
/* :contentReference[oaicite:3]{index=3} */

/* Progress steps bigger */
.cw-progress {
  margin: 16px 0 22px;
}

/* was 14/20 */
/* :contentReference[oaicite:4]{index=4} */
.cw-prog-dot {
  width: 34px;
  /* was 28 */
  height: 34px;
  /* was 28 */
  font-size: 13px;
  /* was 12 */
}

.cw-prog-label {
  font-size: 11px;
  /* was 10 */
  /* :contentReference[oaicite:5]{index=5} */
  letter-spacing: .1px;
}

/* Frequency cards: a bit larger + clearer */
.cw-freq-card {
  padding: 16px 16px;
  /* was 14px 16px */
  /* :contentReference[oaicite:6]{index=6} */
  border-radius: 16px;
  /* was 14px */
}

.cw-freq-label {
  font-size: 16px;
}

/* was 15px */
/* :contentReference[oaicite:7]{index=7} */
.cw-freq-sub {
  font-size: 13px;
}

/* was 12px */
/* :contentReference[oaicite:8]{index=8} */
.cw-freq-check {
  font-size: 18px;
}

/* keep, but aligns */

/* ── Monochrome SVG icon system (replaces emojis) ── */
/* Hide emoji glyph + turn into an icon chip */
.cw-freq-icon {
  font-size: 0 !important;
  /* hides 📅🔥🎯 */
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: rgba(26, 79, 181, .08);
  /* portal-blue tint */
  border: 1.5px solid rgba(26, 79, 181, .18);
  display: grid;
  place-items: center;
}

/* Default icon color (monochrome) */
.cw-freq-icon::before {
  content: "";
  width: 20px;
  height: 20px;
  background: var(--blue, #1a4fb5);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

/* Calendar icon for "once" */
.cw-freq-card[data-pick-freq="once"] .cw-freq-icon::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path fill='black' d='M7 2h2v2h6V2h2v2h2a3 3 0 0 1 3 3v13a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h2V2zm14 8H3v10a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V10zM5 6a1 1 0 0 0-1 1v1h18V7a1 1 0 0 0-1-1H5z'/>\
</svg>");
  mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path fill='black' d='M7 2h2v2h6V2h2v2h2a3 3 0 0 1 3 3v13a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h2V2zm14 8H3v10a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V10zM5 6a1 1 0 0 0-1 1v1h18V7a1 1 0 0 0-1-1H5z'/>\
</svg>");
}

/* Flame icon for "twice" */
.cw-freq-card[data-pick-freq="twice"] .cw-freq-icon::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path fill='black' d='M13.5 2.2c.2 2-1 3.6-2.1 4.9-1 1.2-1.8 2.2-1.4 3.5.4 1.2 1.6 1.8 2.7 2.4 1.5.8 3 1.6 3 3.8 0 2.3-1.9 4.2-4.7 4.2S7 21.9 7 18.7c0-1.8.9-3.1 1.8-4.4.8-1.1 1.6-2.2 1.6-3.6-1.9 1-4.4 3.6-4.4 8.2C6 22 8.9 24 12 24s6-2.2 6-6.1c0-2.8-1.5-4.6-3.1-6.1-1.2-1.1-2.5-2.2-2.7-3.8-.2-1.8.8-3.4 1.3-5.8z'/>\
</svg>");
  mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path fill='black' d='M13.5 2.2c.2 2-1 3.6-2.1 4.9-1 1.2-1.8 2.2-1.4 3.5.4 1.2 1.6 1.8 2.7 2.4 1.5.8 3 1.6 3 3.8 0 2.3-1.9 4.2-4.7 4.2S7 21.9 7 18.7c0-1.8.9-3.1 1.8-4.4.8-1.1 1.6-2.2 1.6-3.6-1.9 1-4.4 3.6-4.4 8.2C6 22 8.9 24 12 24s6-2.2 6-6.1c0-2.8-1.5-4.6-3.1-6.1-1.2-1.1-2.5-2.2-2.7-3.8-.2-1.8.8-3.4 1.3-5.8z'/>\
</svg>");
}

/* Target icon for "special" */
.cw-freq-card[data-pick-freq="special"] .cw-freq-icon::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path fill='black' d='M12 2a10 10 0 1 1-7.07 2.93A9.96 9.96 0 0 1 12 2zm0 4a6 6 0 1 0 4.24 1.76A5.98 5.98 0 0 0 12 6zm0 4a2 2 0 1 1-1.41.59A2 2 0 0 1 12 10z'/>\
</svg>");
  mask-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path fill='black' d='M12 2a10 10 0 1 1-7.07 2.93A9.96 9.96 0 0 1 12 2zm0 4a6 6 0 1 0 4.24 1.76A5.98 5.98 0 0 0 12 6zm0 4a2 2 0 1 1-1.41.59A2 2 0 0 1 12 10z'/>\
</svg>");
}

/* Selected card: icon chip slightly stronger */
.cw-freq-card.selected .cw-freq-icon {
  background: rgba(26, 79, 181, .12);
  border-color: rgba(26, 79, 181, .26);
}







/* =========================================
   ONBOARDING — mobile-safe viewport fit
   ========================================= */

.onb-pop,
.onboarding-pop,
.onboarding-nudge,
.onb-nudge {
  box-sizing: border-box;
  max-width: min(420px, calc(100vw - 16px));
  max-height: min(78vh, calc(100dvh - 16px));
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Better inner spacing on smaller screens */
.onb-pop *,
.onboarding-pop *,
.onboarding-nudge *,
.onb-nudge * {
  box-sizing: border-box;
}

@media (max-width: 768px) {

  .onb-pop,
  .onboarding-pop,
  .onboarding-nudge,
  .onb-nudge {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    top: auto !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(72vh, calc(100dvh - 16px - env(safe-area-inset-bottom)));
    border-radius: 16px;
    padding: 14px 14px 12px;
    transform: none !important;
    margin: 0 !important;
  }

  /* If your onboarding uses title/body/actions */
  .onb-pop__title,
  .onboarding-pop__title,
  .onb-title,
  .onboarding-title {
    font-size: 16px;
    line-height: 1.25;
  }

  .onb-pop__body,
  .onboarding-pop__body,
  .onb-body,
  .onboarding-body {
    font-size: 14px;
    line-height: 1.45;
  }

  .onb-pop__actions,
  .onboarding-pop__actions,
  .onb-actions,
  .onboarding-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 12px;
  }

  .onb-pop__actions .btn,
  .onboarding-pop__actions .btn,
  .onb-actions .btn,
  .onboarding-actions .btn {
    width: 100%;
    min-height: 42px;
  }
}

/* Very narrow phones */
@media (max-width: 420px) {

  .onb-pop,
  .onboarding-pop,
  .onboarding-nudge,
  .onb-nudge {
    left: 6px !important;
    right: 6px !important;
    bottom: max(6px, env(safe-area-inset-bottom)) !important;
    padding: 12px 12px 10px;
    border-radius: 14px;
  }
}


/* =========================================
   ONBOARDING NUDGE — MOBILE FIX
   ========================================= */

@media (max-width: 768px) {

  .onb-nudge,
  .onboarding-nudge {

    /* prevent overflow */
    max-width: calc(100vw - 24px);
    width: auto;

    /* smaller card */
    padding: 10px 12px;
    border-radius: 12px;

    /* compact text */
    font-size: 13px;
    line-height: 1.35;

    /* subtle shadow */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);

    /* keep inside screen */
    left: 12px !important;
    right: 12px !important;

    /* allow wrapping */
    word-break: break-word;
  }

  /* title */
  .onb-nudge .onb-title,
  .onboarding-nudge .onb-title {
    font-size: 14px;
    margin-bottom: 4px;
  }

  /* body text */
  .onb-nudge .onb-body,
  .onboarding-nudge .onb-body {
    font-size: 13px;
  }

  /* action buttons smaller */
  .onb-nudge .btn,
  .onboarding-nudge .btn {
    font-size: 12px;
    padding: 6px 10px;
    min-height: 30px;
  }

  /* stack buttons if more than one */
  .onb-nudge .onb-actions,
  .onboarding-nudge .onb-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
  }

}










/* ============================================================
   CONTINUE WIZARD — PATCH v3  (portal-native)
   Drop after existing cw-* blocks. Overrides all previous
   cw-* declarations to match course-card / pro-block vibe.
   ============================================================ */

/* ── Re-map design tokens to portal variables ─────────────── */
:root {
  --cw-accent: var(--accent);
  /* #4255ff  */
  --cw-accent-soft: var(--accent-soft);
  /* rgba(66,85,255,.10) */
  --cw-accent-mid: var(--accent-mid);
  /* rgba(66,85,255,.18) */
  --cw-accent-glow: var(--accent-glow);
  /* rgba(66,85,255,.22) */
  --cw-text: var(--text);
  /* #1a1d28  */
  --cw-muted: var(--muted);
  /* #6b7394  */
  --cw-border: var(--border);
  /* #e3e6f0  */
  --cw-surface: var(--panel);
  /* #ffffff  */
  --cw-bg: var(--bg);
  /* #f6f7fb  */
  --cw-shadow: var(--shadow);
  --cw-radius: var(--radius);
  /* 16px     */
  --cw-ease: cubic-bezier(.22, .68, 0, 1.2);
  --cw-ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ── Slots: flush, full-width ─────────────────────────────── */
.continue-slot,
.cont-inline {
  margin: 0;
  padding: 0;
  width: 100%;
}

/* ── cw-wrap: no separate card — flows inside pro-block ───── */
.cw-wrap {
  font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  max-width: 100%;
  /* full width of course card */
  margin: 0;
  overflow: visible;
  animation: cw-mount .38s var(--cw-ease-out) both;
}

/* Remove previous accent line + glow pseudo-elements */
.cw-wrap::before,
.cw-wrap::after {
  display: none;
}

@keyframes cw-mount {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

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

/* ── Head ─────────────────────────────────────────────────── */
.cw-head {
  margin-bottom: 20px;
}

.cw-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--cw-text);
  letter-spacing: -.2px;
  line-height: 1.25;
  margin-bottom: 2px;
}

.cw-sub {
  font-size: 12.5px;
  color: var(--cw-muted);
  font-weight: 500;
}

.cw-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--cw-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 3px 0;
  margin-bottom: 8px;
  letter-spacing: .1px;
  transition: color .16s, transform .16s var(--cw-ease);
}

.cw-back:hover {
  color: var(--cw-accent);
  transform: translateX(-3px);
}

/* ── Progress bar ─────────────────────────────────────────── */
.cw-progress {
  display: flex;
  align-items: center;
  margin: 14px 0 0;
}

.cw-prog-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.cw-prog-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  background: var(--cw-bg);
  color: var(--cw-muted);
  border: 1.5px solid var(--cw-border);
  transition: background .25s, color .25s, border-color .25s, box-shadow .25s;
}

.cw-prog-step.active .cw-prog-dot {
  background: var(--cw-accent);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 0 0 4px var(--cw-accent-soft);
  animation: cw-pulse-dot 2.2s ease-in-out infinite;
}

.cw-prog-step.done .cw-prog-dot {
  background: var(--cw-accent-soft);
  color: var(--cw-accent);
  border-color: var(--cw-accent-mid);
}

@keyframes cw-pulse-dot {

  0%,
  100% {
    box-shadow: 0 0 0 4px var(--cw-accent-soft);
  }

  50% {
    box-shadow: 0 0 0 7px rgba(66, 85, 255, .06);
  }
}

.cw-prog-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--cw-muted);
}

.cw-prog-step.active .cw-prog-label {
  color: var(--cw-accent);
}

.cw-prog-step.done .cw-prog-label {
  color: var(--cw-accent);
  opacity: .7;
}

.cw-prog-line {
  flex: 1;
  height: 2px;
  background: var(--cw-border);
  margin: 0 5px 14px;
  border-radius: 2px;
  transition: background .35s;
}

.cw-prog-line.done {
  background: var(--cw-accent);
  opacity: .45;
}

.cw-hint {
  font-size: 11.5px;
  color: var(--cw-muted);
  margin-top: 10px;
  text-align: center;
}

/* ── STEP 1: Length grid ──────────────────────────────────── */
.cw-length-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 4px;
}

.cw-len-card {
  background: var(--cw-bg);
  border: 1.5px solid var(--cw-border);
  border-radius: var(--cw-radius);
  padding: 16px 14px 14px;
  min-height: 118px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  cursor: pointer;
  text-align: left;
  position: relative;
  overflow: hidden;
  transition:
    transform .2s var(--cw-ease),
    box-shadow .2s ease,
    border-color .2s ease,
    background .2s ease;
  animation: cw-card-in .35s var(--cw-ease-out) both;
}

.cw-len-card:nth-child(1) {
  animation-delay: .04s;
}

.cw-len-card:nth-child(2) {
  animation-delay: .08s;
}

.cw-len-card:nth-child(3) {
  animation-delay: .12s;
}

.cw-len-card:nth-child(4) {
  animation-delay: .16s;
}

@keyframes cw-card-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

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

.cw-len-card:hover {
  transform: translateY(-2px);
  border-color: var(--cw-accent);
  box-shadow: 0 4px 18px var(--cw-accent-soft), 0 0 0 1.5px var(--cw-accent);
  background: var(--panel);
}

.cw-len-card:active {
  transform: scale(.975);
}

.cw-len-card.selected {
  background: var(--panel);
  border-color: var(--cw-accent);
  box-shadow: 0 0 0 2.5px var(--cw-accent), 0 4px 20px var(--cw-accent-mid);
}

/* Selected check badge */
.cw-len-card.selected::after {
  content: '✓';
  position: absolute;
  top: 8px;
  right: 10px;
  width: 20px;
  height: 20px;
  background: var(--cw-accent);
  color: #fff;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 800;
  display: grid;
  place-items: center;
  animation: cw-check-pop .22s var(--cw-ease) both;
}

/* Remove legacy ::before accent line from old patch */
.cw-len-card::before {
  display: none;
}

@keyframes cw-check-pop {
  from {
    transform: scale(0) rotate(-20deg);
    opacity: 0;
  }

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

.cw-len-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--cw-accent-soft);
  border: 1.5px solid var(--cw-accent-mid);
  display: grid;
  place-items: center;
  font-size: 17px;
  margin-bottom: 5px;
  transition: transform .2s var(--cw-ease), background .2s;
}

.cw-len-card:hover .cw-len-icon {
  transform: scale(1.1) rotate(-4deg);
}

.cw-len-card.selected .cw-len-icon {
  background: var(--cw-accent-mid);
}

.cw-len-name {
  font-size: 13px;
  font-weight: 800;
  color: var(--cw-text);
  letter-spacing: -.1px;
}

.cw-len-dur {
  font-size: 18px;
  font-weight: 850;
  color: var(--cw-accent);
  letter-spacing: -.4px;
  line-height: 1.1;
}

.cw-len-price {
  font-size: 13px;
  font-weight: 700;
  color: var(--cw-muted);
  margin-top: 1px;
}

.cw-len-unit {
  font-size: 11px;
  color: var(--cw-muted);
  opacity: .8;
}

/* ── STEP 2: Frequency cards ──────────────────────────────── */
.cw-freq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.cw-freq-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--cw-bg);
  border: 1.5px solid var(--cw-border);
  border-radius: var(--cw-radius);
  padding: 13px 14px;
  cursor: pointer;
  text-align: left;
  position: relative;
  overflow: hidden;
  transition:
    transform .18s var(--cw-ease),
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease;
  animation: cw-card-in .35s var(--cw-ease-out) both;
}

.cw-freq-card:nth-child(1) {
  animation-delay: .05s;
}

.cw-freq-card:nth-child(2) {
  animation-delay: .10s;
}

.cw-freq-card:nth-child(3) {
  animation-delay: .15s;
}

.cw-freq-card:hover {
  transform: translateX(3px);
  border-color: var(--cw-accent);
  box-shadow: 0 3px 14px var(--cw-accent-soft);
  background: var(--panel);
}

.cw-freq-card:active {
  transform: scale(.985);
}

.cw-freq-card.selected {
  background: var(--panel);
  border-color: var(--cw-accent);
  box-shadow: 0 0 0 2.5px var(--cw-accent), 0 4px 18px var(--cw-accent-mid);
}

.cw-freq-icon {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 10px;
  background: var(--cw-accent-soft);
  border: 1.5px solid var(--cw-accent-mid);
  display: grid;
  place-items: center;
  font-size: 18px;
  transition: transform .2s var(--cw-ease);
}

.cw-freq-card:hover .cw-freq-icon {
  transform: scale(1.1) rotate(4deg);
}

.cw-freq-card.selected .cw-freq-icon {
  background: var(--cw-accent-mid);
}

.cw-freq-body {
  flex: 1;
}

.cw-freq-label {
  font-size: 14px;
  font-weight: 750;
  color: var(--cw-text);
  letter-spacing: -.15px;
}

.cw-freq-sub {
  font-size: 12px;
  color: var(--cw-muted);
  margin-top: 1px;
}

.cw-freq-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  background: transparent;
  color: transparent;
  transition: background .2s, color .2s, transform .2s var(--cw-ease);
}

.cw-freq-card.selected .cw-freq-check {
  background: var(--cw-accent);
  color: #fff;
  animation: cw-check-pop .22s var(--cw-ease) both;
}

/* ── Days section ─────────────────────────────────────────── */
.cw-days-section {
  background: var(--cw-bg);
  border: 1.5px solid var(--cw-border);
  border-radius: var(--cw-radius);
  padding: 16px;
  margin-top: 2px;
  width: 100%;
  box-sizing: border-box;
  animation: cw-card-in .3s var(--cw-ease-out) both;
}

.cw-days-title {
  font-size: 11px;
  font-weight: 800;
  color: var(--cw-muted);
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-bottom: 10px;
}

.cw-day-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 12px;
}

.cw-day-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--panel);
  border: 1.5px solid var(--cw-accent-mid);
  border-radius: 999px;
  padding: 4px 9px 4px 11px;
  font-size: 12px;
  font-weight: 700;
  color: var(--cw-accent);
  animation: cw-pill-in .22s var(--cw-ease) both;
}

@keyframes cw-pill-in {
  from {
    transform: scale(.65);
    opacity: 0;
  }

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

.cw-pill-x {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--cw-muted);
  font-size: 14px;
  line-height: 1;
  padding: 0 1px;
  transition: color .14s, transform .14s;
}

.cw-pill-x:hover {
  color: var(--danger);
  transform: scale(1.25);
}

.cw-add-day-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--panel);
  border: 1.5px dashed var(--cw-accent-mid);
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--cw-accent);
  cursor: pointer;
  transition: background .16s, border-color .16s, transform .16s var(--cw-ease);
}

.cw-add-day-btn:hover {
  background: var(--cw-accent-soft);
  border-color: var(--cw-accent);
  transform: scale(1.04);
}

/* ── Day picker ───────────────────────────────────────────── */
.cw-day-picker {
  display: flex;
  gap: 7px;
  align-items: center;
  flex-wrap: wrap;
  background: var(--panel);
  border: 1.5px solid var(--cw-border);
  border-radius: 12px;
  padding: 9px 11px;
  margin-bottom: 10px;
  animation: cw-card-in .22s var(--cw-ease-out) both;
}

.cw-day-picker[hidden] {
  display: none;
}

.cw-day-sel,
.cw-time-sel {
  flex: 1;
  min-width: 100px;
  background: var(--cw-bg);
  border: 1.5px solid var(--cw-border);
  border-radius: 10px;
  padding: 7px 26px 7px 9px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cw-text);
  font-family: inherit;
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'><path d='M1 1l4.5 4.5L10 1' stroke='%236b7394' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 9px center;
  transition: border-color .15s, box-shadow .15s;
}

.cw-day-sel:focus,
.cw-time-sel:focus {
  border-color: var(--cw-accent);
  box-shadow: 0 0 0 3px var(--cw-accent-soft);
}

.cw-confirm-day {
  background: var(--btn, var(--cw-accent));
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 750;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s, transform .15s var(--cw-ease), box-shadow .15s;
  white-space: nowrap;
}

.cw-confirm-day:hover {
  background: #3344ee;
  transform: scale(1.04);
  box-shadow: 0 3px 12px var(--cw-accent-glow);
}

.cw-confirm-day:active {
  transform: scale(.97);
}

/* ── Notes ────────────────────────────────────────────────── */
.cw-notes {
  width: 100%;
  box-sizing: border-box;
  background: var(--panel);
  border: 1.5px solid var(--cw-border);
  border-radius: 10px;
  padding: 9px 11px;
  font-size: 13px;
  font-family: inherit;
  color: var(--cw-text);
  resize: vertical;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  margin-bottom: 12px;
}

.cw-notes:focus {
  border-color: var(--cw-accent);
  box-shadow: 0 0 0 3px var(--cw-accent-soft);
}

.cw-notes::placeholder {
  color: var(--cw-muted);
}

/* ── Semester row ─────────────────────────────────────────── */
.cw-semester-row {
  background: var(--panel);
  border: 1.5px solid var(--cw-border);
  border-radius: 12px;
  padding: 12px 13px;
  margin-bottom: 14px;
}

.cw-sem-label {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--cw-muted);
  margin-bottom: 8px;
}

.cw-sem-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cw-sem-field {
  flex: 1;
}

.cw-sem-sublabel {
  font-size: 10px;
  font-weight: 800;
  color: var(--cw-muted);
  text-transform: uppercase;
  letter-spacing: .4px;
  display: block;
  margin-bottom: 4px;
}

.cw-sem-from,
.cw-sem-to {
  width: 100%;
  box-sizing: border-box;
  background: var(--cw-bg);
  border: 1.5px solid var(--cw-border);
  border-radius: 10px;
  padding: 8px 26px 8px 9px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cw-text);
  font-family: inherit;
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'><path d='M1 1l4.5 4.5L10 1' stroke='%236b7394' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 9px center;
  transition: border-color .15s, box-shadow .15s;
}

.cw-sem-from:focus,
.cw-sem-to:focus {
  border-color: var(--cw-accent);
  box-shadow: 0 0 0 3px var(--cw-accent-soft);
}

.cw-sem-sep {
  font-size: 16px;
  color: var(--cw-muted);
  flex-shrink: 0;
  margin-top: 14px;
}

/* ── CTA buttons — inherit portal .btn style ──────────────── */
.cw-to-quote,
.cw-send-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 13px 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 750;
  letter-spacing: -.1px;
  font-family: inherit;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition:
    transform .18s var(--cw-ease),
    box-shadow .18s ease,
    background .15s ease,
    opacity .15s;
  background: var(--btn, var(--cw-accent));
  color: var(--btnText, #fff);
  box-shadow: 0 2px 8px var(--cw-accent-glow);
}

/* Shimmer on enabled */
.cw-to-quote:not([disabled])::after,
.cw-send-btn:not([disabled])::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .15) 50%, transparent 65%);
  transform: translateX(-100%);
  animation: cw-shimmer 3s ease-in-out infinite 2s;
}

@keyframes cw-shimmer {
  0% {
    transform: translateX(-100%);
  }

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

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

.cw-to-quote:not([disabled]):hover,
.cw-send-btn:not([disabled]):hover {
  background: #3344ee;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px var(--cw-accent-glow);
}

.cw-to-quote:not([disabled]):active,
.cw-send-btn:not([disabled]):active {
  transform: scale(.97);
  transition-duration: .09s;
}

.cw-to-quote[disabled],
.cw-send-btn[disabled] {
  background: var(--hover, #f0f1fa);
  color: var(--cw-muted);
  box-shadow: none;
  cursor: not-allowed;
  opacity: .75;
}

/* ── STEP 3: Quote stats ──────────────────────────────────── */
.cw-quote-cards {
  background: var(--cw-bg);
  border: 1.5px solid var(--cw-border);
  border-radius: var(--cw-radius);
  padding: 16px;
  margin-bottom: 16px;
  width: 100%;
  box-sizing: border-box;
  animation: cw-card-in .3s var(--cw-ease-out) both;
}

.cw-quote-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.cw-quote-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 10px;
  background: var(--panel);
  border-radius: 10px;
  border: 1.5px solid var(--cw-border);
}

.cw-qs-val {
  font-size: 17px;
  font-weight: 850;
  color: var(--cw-text);
  letter-spacing: -.35px;
  line-height: 1.1;
}

.cw-qs-key {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--cw-muted);
  text-transform: uppercase;
  letter-spacing: .4px;
}

.cw-qs-total .cw-qs-val {
  color: var(--cw-accent);
}

.cw-bonus {
  display: inline-block;
  background: rgba(34, 168, 90, .12);
  color: #0a4a22;
  border-radius: 5px;
  padding: 1px 5px;
  font-size: 10px;
  font-weight: 700;
  vertical-align: middle;
  margin-left: 3px;
}

.cw-schedule-preview {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--cw-border);
}

.cw-sp-title {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--cw-muted);
  margin-bottom: 7px;
}

.cw-sp-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.cw-sp-pill {
  background: var(--cw-accent-soft);
  color: var(--cw-accent);
  border-radius: 999px;
  padding: 3px 11px;
  font-size: 12px;
  font-weight: 700;
}

/* ── Payment grid ─────────────────────────────────────────── */
.cw-pay-section {
  margin-bottom: 16px;
}

.cw-pay-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--cw-muted);
  margin-bottom: 10px;
  padding-bottom: 7px;
  border-bottom: 1.5px solid var(--cw-border);
}

.cw-pay-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.cw-pay-card {
  background: var(--cw-bg);
  border: 1.5px solid var(--cw-border);
  border-radius: 12px;
  padding: 12px 10px;
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: inherit;
  transition:
    transform .16s var(--cw-ease),
    box-shadow .16s,
    border-color .16s,
    background .16s;
}

.cw-pay-card:hover {
  transform: translateY(-2px);
  border-color: var(--cw-accent);
  box-shadow: 0 3px 12px var(--cw-accent-soft);
  background: var(--panel);
}

.cw-pay-card.selected {
  background: var(--panel);
  border-color: var(--cw-accent);
  box-shadow: 0 0 0 2px var(--cw-accent), 0 3px 14px var(--cw-accent-mid);
}

.cw-pay-label {
  font-size: 12px;
  font-weight: 800;
  color: var(--cw-text);
  letter-spacing: -.1px;
}

.cw-pay-amount {
  font-size: 15px;
  font-weight: 850;
  color: var(--cw-accent);
  letter-spacing: -.3px;
}

.cw-pay-per {
  font-size: 11px;
  font-weight: 600;
  color: var(--cw-muted);
}

.cw-pay-sub {
  font-size: 10.5px;
  color: var(--cw-muted);
}

/* ── Send section ─────────────────────────────────────────── */
.cw-send-section {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.cw-status {
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  padding: 9px 12px;
  border-radius: 10px;
  animation: cw-card-in .22s var(--cw-ease-out) both;
}

.cw-status.cw-ok {
  background: rgba(34, 168, 90, .1);
  color: #0a4a22;
}

.cw-status.cw-err {
  background: var(--danger-soft);
  color: var(--danger);
}

/* ============================================================
   RESPONSIVE — ≤ 600px (inside course card panel)
   ============================================================ */
@media (max-width: 600px) {
  .cw-length-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .cw-len-card {
    padding: 13px 11px 11px;
    min-height: 106px;
  }

  .cw-len-icon {
    width: 30px;
    height: 30px;
    font-size: 14px;
    border-radius: 8px;
  }

  .cw-len-name {
    font-size: 12px;
  }

  .cw-len-dur {
    font-size: 15px;
  }

  .cw-len-price {
    font-size: 11.5px;
  }

  .cw-quote-row {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .cw-qs-val {
    font-size: 14px;
  }

  .cw-pay-grid {
    grid-template-columns: 1fr 1fr;
    gap: 7px;
  }

  .cw-prog-dot {
    width: 24px;
    height: 24px;
    font-size: 10px;
  }

  .cw-prog-label {
    font-size: 8.5px;
  }

  .cw-sem-inputs {
    gap: 5px;
  }

  .cw-sem-sep {
    font-size: 13px;
    margin-top: 16px;
  }

  .cw-day-picker {
    flex-direction: column;
    align-items: stretch;
  }

  .cw-confirm-day {
    width: 100%;
    padding: 9px;
    text-align: center;
  }

  .cw-to-quote,
  .cw-send-btn {
    padding: 12px 16px;
    font-size: 13.5px;
  }
}

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

  .cw-wrap,
  .cw-len-card,
  .cw-freq-card,
  .cw-quote-cards,
  .cw-days-section,
  .cw-day-pill,
  .cw-day-picker {
    animation: none !important;
    transition: none !important;
  }

  .cw-prog-step.active .cw-prog-dot {
    animation: none !important;
  }

  .cw-to-quote::after,
  .cw-send-btn::after {
    animation: none !important;
  }
}

/* =========================================================
   Reader Unification Blueprint — Speak3000 style shell
   ========================================================= */
.srx-root {
  --srx-card-bg: rgba(255, 255, 255, .78);
  --srx-card-brd: rgba(15, 23, 42, .09);
  --srx-soft: rgba(255, 248, 240, .84);
  --srx-shadow: 0 10px 28px rgba(15, 23, 42, .08), 0 2px 8px rgba(15, 23, 42, .04);
  --srx-shadow-soft: 0 6px 18px rgba(15, 23, 42, .06);
  --srx-radius-xl: 24px;
  --srx-radius-lg: 18px;
  background: linear-gradient(180deg, #fffdf9 0%, #fff9f1 100%);
}

.srx-root .srx-shell-unified {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

.srx-root .srx-topbar-unified {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(255, 251, 245, .92);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border-bottom: 1px solid rgba(251, 191, 36, .18);
  position: sticky;
  top: 0;
  z-index: 20;
}

.srx-root .srx-title-wrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.srx-root .srx-brand-name {
  font-weight: 900;
  font-size: 18px;
  letter-spacing: -.03em;
}

.srx-root .srx-top-sub {
  font-size: 12px;
  color: #7b7f93;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}

.srx-root .srx-spacer {
  flex: 1;
}

.srx-root .srx-controls-unified {
  display: flex;
  align-items: center;
  gap: 8px;
}

.srx-root .srx-topbtn {
  appearance: none;
  border: 1px solid rgba(15, 23, 42, .08);
  background: rgba(255, 255, 255, .78);
  color: #1c2333;
  min-width: 42px;
  height: 42px;
  padding: 0 13px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-weight: 800;
  box-shadow: var(--srx-shadow-soft);
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}

.srx-root .srx-topbtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .10);
}

.srx-root .srx-topbtn:active {
  transform: translateY(1px);
}

.srx-root .srx-topbtn .lbl {
  font-size: 13px;
}

.srx-root .srx-topbtn-ham {
  width: 46px;
  padding: 0;
  gap: 3px;
  position: relative;
}

.srx-root .srx-topbtn-ham .l {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

.srx-root .srx-score-card {
  margin: 14px 14px 10px;
  border: 1px solid var(--srx-card-brd);
  border-radius: 22px;
  background: var(--srx-card-bg);
  box-shadow: var(--srx-shadow);
  padding: 12px;
}

.srx-root .srx-score-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.srx-root .srx-badge {
  min-height: 84px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .88), rgba(255, 250, 243, .78));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 5px 16px rgba(15, 23, 42, .05);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 12px 14px;
  gap: 4px;
}

.srx-root .srx-badge-icon {
  display: inline-flex;
  opacity: .86;
}

.srx-root .srx-badge-value {
  font-weight: 900;
  font-size: 21px;
  line-height: 1;
  letter-spacing: -.03em;
}

.srx-root .srx-badge-label {
  font-size: 12px;
  color: #7b7f93;
  font-weight: 700;
}

.srx-root .srx-main {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 6px 14px 20px;
  -webkit-overflow-scrolling: touch;
}

.srx-root .srx-page-host {
  position: relative;
  min-height: 100%;
}

.srx-root .srx-page {
  opacity: 1;
  transform: translateX(0);
  transition: opacity .22s ease, transform .22s ease;
}

.srx-root .srx-page-enter {
  animation: srxPageIn .26s ease both;
}

@keyframes srxPageIn {
  from {
    opacity: 0;
    transform: translateX(18px)
  }

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

.srx-root .srx-page-card-unified {
  border-radius: 28px;
  border: 1px solid rgba(15, 23, 42, .08);
  background: linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(255, 250, 244, .82));
  box-shadow: var(--srx-shadow);
  padding: 20px 20px 24px;
  position: relative;
  overflow: hidden;
}

.srx-root .srx-reader-stage {
  display: none;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .24s ease, transform .24s ease;
}

.srx-root .srx-reader-stage.is-active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.srx-root .srx-cta-wrap {
  display: flex;
  justify-content: center;
  padding-top: 18px;
}

.srx-root .srx-open-ex-btn,
.srx-root .srx-back-read-btn {
  appearance: none;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 16px;
  padding: 12px 18px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  background: linear-gradient(180deg, #111827, #24324a);
  color: #fff;
  box-shadow: 0 12px 22px rgba(15, 23, 42, .16);
}

.srx-root .srx-back-read-btn {
  background: rgba(255, 255, 255, .9);
  color: #1f2937;
  box-shadow: var(--srx-shadow-soft);
}

.srx-root .srx-stage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 8px 0 18px;
}

.srx-root .srx-stage-kicker {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #7b7f93;
}

.srx-root .srx-stage-title {
  font-weight: 900;
  font-size: 24px;
  letter-spacing: -.03em;
}

/* ex-wrap/card styles moved to READER EXERCISE block below */
.srx-root .srx-ex-wrap {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
}

.srx-root .srx-read-panel {
  width: min(340px, 88vw);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border-left: 1px solid rgba(15, 23, 42, .08);
  box-shadow: -14px 0 32px rgba(15, 23, 42, .12);
  padding: 12px 12px 18px;
}

.srx-root .srx-panel-head {
  padding-bottom: 8px;
}

.srx-root .srx-r-item {
  border: 1px solid rgba(15, 23, 42, .07);
  border-radius: 16px;
  background: rgba(255, 255, 255, .7);
  padding: 12px 12px 10px;
  margin-bottom: 10px;
  box-shadow: 0 6px 16px rgba(15, 23, 42, .05);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.srx-root .srx-r-item:hover {
  transform: translateX(-2px);
  border-color: rgba(15, 23, 42, .14);
  box-shadow: 0 10px 22px rgba(15, 23, 42, .08);
}

.srx-root .srx-r-item.active {
  background: linear-gradient(180deg, #fff, #fff7ef);
  border-color: rgba(15, 23, 42, .16);
}

.srx-root .srx-r-item .num {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #7b7f93;
  font-weight: 800;
}

.srx-root .srx-r-item .name {
  font-weight: 900;
  font-size: 16px;
  letter-spacing: -.02em;
}

.srx-root .srx-r-item .pl {
  margin-top: 4px;
  color: #69707f;
}

.srx-root .srx-r-item .badge {
  margin-top: 8px;
  display: inline-flex;
  padding: 5px 10px;
  border-radius: 999px;
  background: #eefbf2;
  color: #177245;
  font-size: 12px;
  font-weight: 800;
}

.srx-root .srx-drawer-progress-wrap {
  margin-top: 14px;
  padding: 10px 6px 0;
}

.srx-root .srx-drawer-progress-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #7b7f93;
  font-weight: 800;
  margin-bottom: 6px;
}

.srx-root .srx-drawer-progress {
  height: 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .08);
  overflow: hidden;
}

.srx-root .srx-drawer-progress-bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--s-accent, #4255ff), var(--s-gold, #f59e0b));
  border-radius: 999px;
  transition: width .22s ease;
}

.srx-root .srx-drawer-progress-text {
  margin-top: 8px;
  color: #6b7280;
  font-size: 13px;
  font-weight: 700;
}

.srx-root .srx-progress-row {
  margin: 14px 0 18px;
}

.srx-root .srx-prog-chip.active {
  background: #eef5ff;
  border-color: #cddfff;
  color: #224579;
}

.srx-root .srx-prog-chip.done {
  background: #eefbf2;
  border-color: #c9efd7;
  color: #177245;
}

.srx-root .srx-side-nav {
  display: none !important;
}

@media (max-width: 900px) {
  .srx-root .srx-score-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .srx-root .srx-top-sub {
    max-width: 140px;
  }
}

@media (max-width: 640px) {
  .srx-root .srx-topbar-unified {
    padding: 10px 10px;
    gap: 8px;
  }

  .srx-root .srx-topbtn {
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border-radius: 12px;
  }

  .srx-root .srx-topbtn .lbl {
    font-size: 12px;
  }

  .srx-root .srx-score-card {
    margin: 10px 10px 8px;
    padding: 10px;
    border-radius: 18px;
  }

  .srx-root .srx-score-grid {
    gap: 8px;
  }

  .srx-root .srx-badge {
    min-height: 74px;
    padding: 10px 11px;
    border-radius: 16px;
  }

  .srx-root .srx-badge-value {
    font-size: 18px;
  }

  .srx-root .srx-main {
    padding: 4px 10px 16px;
  }

  .srx-root .srx-page-card-unified {
    padding: 16px 14px 20px;
    border-radius: 22px;
  }

  .srx-root .srx-stage-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .srx-root .srx-open-ex-btn,
  .srx-root .srx-back-read-btn {
    width: 100%;
    justify-content: center;
  }
}


/* =========================================================
   Reader Unification Correction — Speak3000-aligned topbar + score strip
   ========================================================= */
.srx-root .srx-topbar-unified {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  height: 58px;
  flex-shrink: 0;
  background: rgba(255, 251, 245, .78);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border-bottom: 1px solid rgba(251, 191, 36, .18);
  position: sticky;
  top: 0;
  z-index: 30;
}

.srx-root .srx-top-title {
  font-family: var(--s-font-display, inherit);
  font-weight: 900;
  font-size: 14px;
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #1c2333;
  line-height: 1;
}

.srx-root .srx-spacer {
  flex: 1;
}

.srx-root .srx-controls-unified {
  display: flex;
  align-items: center;
  gap: 6px;
}

.srx-root .srx-topbtn {
  min-width: 44px !important;
  min-height: 44px !important;
  width: auto;
  height: 44px;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, .12);
  background: rgba(255, 255, 255, .75);
  color: #1c2333;
  box-shadow: none;
}

.srx-root .srx-topbtn svg {
  display: block;
  fill: none;
  stroke: currentColor;
}

.srx-root .srx-topbtn:hover {
  transform: none;
  border-color: rgba(0, 0, 0, .14);
  box-shadow: 0 6px 16px rgba(15, 23, 42, .07);
}

.srx-root .srx-topbtn:active {
  transform: translateY(1px);
}

.srx-root .srx-topbtn[disabled] {
  opacity: .35;
  cursor: not-allowed;
  box-shadow: none;
}

.srx-root .srx-topbtn-ham {
  padding: 0 12px;
}

.srx-root .srx-main {
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 16px 24px;
}

.srx-root .srx-main>.srx-score-card,
.srx-root .srx-main>.srx-page-host {
  max-width: 860px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.srx-root .srx-score-card {
  margin: 0 auto 14px;
  padding: 18px 20px;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, .08);
  box-shadow: 0 10px 22px rgba(15, 23, 42, .08);
  background: #fffdf5;
}

.srx-root .srx-score-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

@media (min-width:540px) {
  .srx-root .srx-score-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.srx-root .srx-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 5px;
  min-height: 0;
  padding: 10px 12px;
  border: 1px solid rgba(0, 0, 0, .07);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .05);
}

.srx-root .srx-badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(0, 0, 0, .35);
  opacity: 1;
}

.srx-root .srx-badge-icon svg {
  display: block;
}

.srx-root .srx-badge-value {
  font-size: 20px;
  font-weight: 900;
  color: #111;
  line-height: 1;
  letter-spacing: 0;
}

.srx-root .srx-badge-label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(0, 0, 0, .38);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.srx-root .srx-badge-points {
  border-color: rgba(245, 158, 11, .22);
  background: #fffde7;
}

.srx-root .srx-badge-points .srx-badge-value {
  font-size: 26px;
  color: #b45309;
}

.srx-root .srx-page-card-unified {
  border-radius: 24px;
  border: 1px solid rgba(0, 0, 0, .08);
  background: linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(255, 250, 244, .82));
  box-shadow: 0 10px 22px rgba(15, 23, 42, .08);
}

.srx-root .srx-read-panel {
  width: min(340px, 88vw);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border-left: 1px solid rgba(0, 0, 0, .08);
  box-shadow: -14px 0 32px rgba(15, 23, 42, .12);
}

.srx-root .srx-r-item {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 13px;
  box-shadow: 0 4px 10px rgba(15, 23, 42, .06);
}

.srx-root .srx-r-item.active {
  border-color: rgba(0, 0, 0, .14);
  background: #fffde7;
}

.srx-root .srx-r-item:hover {
  border-color: rgba(0, 0, 0, .14);
  background: #fffde7;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(15, 23, 42, .10);
}

@media (max-width:640px) {
  .srx-root .srx-topbar-unified {
    padding: 0 10px;
    gap: 4px;
  }

  .srx-root .srx-top-title {
    max-width: 130px;
    font-size: 14px;
  }

  .srx-root .srx-topbtn {
    min-width: 38px !important;
    min-height: 38px !important;
    height: 38px;
    padding: 0 8px;
  }

  .srx-root .srx-main {
    padding: 10px 10px 18px;
  }

  .srx-root .srx-score-card {
    margin: 0 auto 10px;
    padding: 12px;
  }
}


/* =========================================================
   Reader correction — Speak3000 topbar, drawer shadow, CTA vibe
   ========================================================= */
.srx-root .srx-topbar-unified {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  height: 58px;
  flex-shrink: 0;
  background: rgba(255, 251, 245, .78);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border-bottom: 1px solid rgba(251, 191, 36, .18);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8), 0 2px 8px rgba(15, 23, 42, .07), 0 8px 24px rgba(15, 23, 42, .05);
  position: sticky;
  top: 0;
  z-index: 30;
}

.srx-root .srx-topbar-unified .srx-topbtn,
.srx-root .srx-topbar-unified .s3000-btn {
  appearance: none;
  min-width: 40px;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(15, 23, 42, .08);
  background: rgba(255, 255, 255, .78);
  color: #1c2333;
  box-shadow: 0 6px 16px rgba(15, 23, 42, .05);
}

.srx-root .srx-topbar-unified .s3000-btn-drawer {
  width: 44px;
}

/* Nav prev/next: circular gold buttons matching .s3000-btn-prevset/nextset */
.srx-root .srx-topbar-unified .s3000-btn-prevset,
.srx-root .srx-topbar-unified .s3000-btn-nextset {
  min-width: 36px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: rgba(251, 191, 36, .12) !important;
  border: 1px solid rgba(251, 191, 36, .3) !important;
  color: #b45309 !important;
  padding: 0 !important;
  transition: opacity .2s, background .15s !important;
}

.srx-root .srx-topbar-unified .s3000-btn-prevset:hover,
.srx-root .srx-topbar-unified .s3000-btn-nextset:hover {
  background: rgba(251, 191, 36, .25) !important;
}

.srx-root .srx-topbar-unified .srx-top-title {
  min-width: 0;
  max-width: min(48vw, 360px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 900;
  font-size: 15px;
  letter-spacing: -.02em;
  color: var(--s-accent, #4255ff);
}

.srx-root .srx-topbar-unified .srx-spacer {
  flex: 1;
}

.srx-root .srx-topbar-unified .srx-controls-unified {
  display: flex;
  align-items: center;
  gap: 6px;
}

.srx-root .srx-topbar-unified .srx-topbtn svg {
  display: block;
}

/* .playing adds no background change — Speak3000 only swaps the SVG icon, no style change */
.srx-root .srx-main {
  padding: 14px 16px 24px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.srx-root .srx-main>.srx-score-card,
.srx-root .srx-main>.srx-page-host {
  max-width: 860px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.srx-root .srx-score-card {
  margin: 0 auto 14px;
  padding: 18px 20px;
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, .08);
  box-shadow: 0 10px 22px rgba(15, 23, 42, .08);
  background: #fffdf5;
}

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

@media (min-width:540px) {
  .srx-root .srx-score-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.srx-root .srx-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 5px;
  padding: 12px 10px;
  min-height: 86px;
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, .07);
  background: linear-gradient(180deg, rgba(255, 255, 255, .88), rgba(255, 250, 243, .78));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 5px 16px rgba(15, 23, 42, .05);
}

.srx-root .srx-badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: .86;
}

.srx-root .srx-badge-value {
  font-weight: 900;
  font-size: 21px;
  line-height: 1;
  letter-spacing: -.03em;
}

.srx-root .srx-badge-label {
  font-size: 12px;
  color: #7b7f93;
  font-weight: 700;
}

.srx-root .srx-badge-points {
  background: linear-gradient(180deg, #fffefc, #fff6ea);
}

.srx-root .srx-page-card-unified {
  position: relative;
  overflow: hidden;
}

.srx-root .srx-page-card-unified::after {
  content: "";
  position: absolute;
  top: 16px;
  right: -18px;
  width: 120px;
  height: calc(100% - 32px);
  border-radius: 28px;
  pointer-events: none;
  background: linear-gradient(270deg, rgba(15, 23, 42, .10), rgba(15, 23, 42, 0) 74%);
  opacity: .16;
}

.srx-root .srx-read-panel {
  width: min(340px, 88vw);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border-left: 1px solid rgba(15, 23, 42, .08);
  box-shadow: -18px 0 38px rgba(15, 23, 42, .16);
  padding: 12px 12px 18px;
}

.srx-root .srx-cta-card {
  margin-top: 18px;
  /* Mirror s3000-section-card + s3000-section-cta */
  background: var(--s-surface, #ffffff);
  border: 1.5px solid var(--s-border, #ecddd0);
  border-radius: var(--s-r, 20px);
  box-shadow: var(--s-shadow, 0 4px 20px rgba(100, 60, 20, .09), 0 2px 6px rgba(100, 60, 20, .06));
  padding: 20px 22px;
  position: relative;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}

.srx-root .srx-cta-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 4px;
  border-radius: 0;
  background: linear-gradient(180deg, var(--s-accent, #4255ff), var(--s-gold, #f59e0b));
}

.srx-root .srx-cta-card .s3000-cta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.srx-root .srx-cta-card .s3000-cta-title {
  font-weight: 900;
  font-size: 18px;
  letter-spacing: -.02em;
  color: var(--s-text, #1c1a17);
}

.srx-root .srx-cta-card .s3000-cta-sub {
  margin-top: 4px;
  color: #7b7f93;
  font-size: 13px;
  font-weight: 700;
}

.srx-root .srx-cta-card .s3000-primary,
.srx-root .srx-cta-card .srx-open-ex-btn {
  appearance: none;
  background: var(--s-accent, #4255ff);
  border: 1.5px solid var(--s-accent, #4255ff);
  border-radius: var(--s-r-sm, 14px);
  padding: 10px 18px;
  font: inherit;
  font-weight: 900;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px var(--s-accent-glow, rgba(66, 85, 255, .22));
  transition: box-shadow .2s, transform .15s;
}

.srx-root .srx-cta-card .s3000-primary:hover,
.srx-root .srx-cta-card .srx-open-ex-btn:hover {
  box-shadow: 0 6px 20px var(--s-accent-glow, rgba(66, 85, 255, .32));
  transform: translateY(-1px);
}

.srx-root .srx-back-read-btn {
  appearance: none;
  border-radius: var(--s-r-sm, 14px);
  padding: 10px 18px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.srx-root .srx-back-read-btn {
  background: rgba(255, 255, 255, .92);
  color: #1f2937;
  border: 1px solid rgba(15, 23, 42, .08);
  box-shadow: 0 6px 16px rgba(15, 23, 42, .05);
}

.srx-root .srx-stage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 8px 0 18px;
}

.srx-root.srx-night .srx-topbar-unified {
  background: rgba(20, 24, 32, .82) !important;
  border-bottom-color: rgba(251, 191, 36, .10) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05), 0 2px 8px rgba(0, 0, 0, .18) !important;
  color: #eef2ff;
}

.srx-root.srx-night .srx-read-panel {
  background: rgba(15, 18, 22, .97);
  border-left-color: rgba(255, 255, 255, .10);
  color: #eef2ff;
}

.srx-root.srx-night .srx-topbar-unified .srx-topbtn,
.srx-root.srx-night .srx-topbar-unified .s3000-btn,
.srx-root.srx-night .srx-back-read-btn {
  background: rgba(35, 44, 67, .86);
  color: #eef2ff;
  border-color: rgba(255, 255, 255, .08);
}

.srx-root.srx-night .srx-topbar-unified .s3000-btn-prevset,
.srx-root.srx-night .srx-topbar-unified .s3000-btn-nextset {
  background: rgba(251, 191, 36, .08) !important;
  border-color: rgba(251, 191, 36, .20) !important;
  color: #fbbf24 !important;
}

.srx-root.srx-night .srx-topbar-unified .s3000-btn-prevset:hover,
.srx-root.srx-night .srx-topbar-unified .s3000-btn-nextset:hover {
  background: rgba(251, 191, 36, .16) !important;
}

.srx-root.srx-night .srx-score-card,
.srx-root.srx-night .srx-page-card-unified {
  background: linear-gradient(180deg, rgba(20, 27, 42, .96), rgba(18, 24, 38, .92));
  color: #eef2ff;
  border-color: rgba(255, 255, 255, .08);
}

.srx-root.srx-night .srx-badge {
  background: linear-gradient(180deg, rgba(31, 41, 59, .92), rgba(24, 32, 48, .92));
  border-color: rgba(255, 255, 255, .08);
}

.srx-root.srx-night .srx-badge-label,
.srx-root.srx-night .srx-cta-card .s3000-cta-sub {
  color: #c5ccda;
}

.srx-root.srx-night .srx-r-item {
  background: rgba(31, 41, 59, .82);
  border-color: rgba(255, 255, 255, .06);
  color: #eef2ff;
}

/* ═══════════════════════════════════════════════════════════════
   READER NIGHT MODE PATCH — aligns .srx-night to .s3000-night system
═══════════════════════════════════════════════════════════════ */

/* Night mode root vars — mirror s3000-night tokens */
.srx-root.srx-night {
  --srx-bg: #0f1216;
  --srx-surface: #181c24;
  --srx-text: #e9eef6;
  --srx-text2: #a0aec0;
  --srx-muted: #64748b;
  --srx-border: rgba(255, 255, 255, .10);
  --srx-border2: rgba(255, 255, 255, .16);
  background: #0f1216;
  color: #e9eef6;
}

/* Main scroll area */
.srx-root.srx-night .srx-main {
  background: #0f1216;
  color: #e9eef6;
}

/* Paragraph / text container */
.srx-root.srx-night .srx-para {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .10);
  color: #e9eef6;
}

/* Sentences */
.srx-root.srx-night .srx-sent {
  color: #e9eef6;
}

.srx-root.srx-night .srx-sent:hover {
  background: rgba(255, 255, 255, .07);
}

.srx-root.srx-night .srx-sent.on {
  background: rgba(255, 255, 255, .10);
  outline-color: rgba(255, 255, 255, .20);
}

/* Inline PL translation */
.srx-root.srx-night .srx-pl-inline {
  border-left-color: rgba(255, 255, 255, .30) !important;
  background: linear-gradient(90deg, rgba(255, 255, 255, .06), transparent) !important;
  color: #a0aec0 !important;
}

/* Word and phrase cards */
.srx-root.srx-night .srx-word-card,
.srx-root.srx-night .srx-phrase-card {
  background: rgba(255, 255, 255, .05) !important;
  border-color: rgba(255, 255, 255, .10) !important;
  color: #e9eef6;
}

.srx-root.srx-night .srx-word-card .en,
.srx-root.srx-night .srx-phrase-card .en {
  color: #e9eef6;
}

.srx-root.srx-night .srx-word-card .pl,
.srx-root.srx-night .srx-phrase-card .pl {
  color: #a0aec0;
}

.srx-root.srx-night .srx-word-card .hint {
  color: #5eead4;
}

/* Exercise wrap + card */
.srx-root.srx-night .srx-ex-wrap,
.srx-root.srx-night .srx-ex-card {
  background: rgba(24, 28, 36, .96) !important;
  border-color: rgba(255, 255, 255, .10) !important;
  color: #e9eef6;
}

.srx-root.srx-night .srx-ex-head {
  background: rgba(255, 255, 255, .04);
  border-bottom-color: rgba(255, 255, 255, .10);
}

.srx-root.srx-night .srx-ex-label {
  color: #e9eef6;
}

.srx-root.srx-night .srx-ex-sublabel,
.srx-root.srx-night .srx-ex-hint {
  color: #a0aec0;
}

.srx-root.srx-night .srx-ex-word {
  color: #e9eef6;
}

.srx-root.srx-night .srx-ex-counter {
  color: #a0aec0;
}

/* Exercise option buttons */
.srx-root.srx-night .srx-opt-btn {
  background: rgba(255, 255, 255, .06) !important;
  border-color: rgba(255, 255, 255, .12) !important;
  color: #e9eef6 !important;
}

.srx-root.srx-night .srx-opt-btn:hover {
  background: rgba(255, 255, 255, .10) !important;
  border-color: rgba(255, 255, 255, .20) !important;
}

.srx-root.srx-night .srx-opt-btn.correct {
  background: rgba(34, 197, 94, .15) !important;
  border-color: rgba(34, 197, 94, .35) !important;
  color: #86efac !important;
}

.srx-root.srx-night .srx-opt-btn.wrong {
  background: rgba(239, 68, 68, .13) !important;
  border-color: rgba(239, 68, 68, .30) !important;
  color: #fca5a5 !important;
}

/* Exercise nav buttons */
.srx-root.srx-night .srx-ex-nav-btn:not(.primary) {
  background: rgba(255, 255, 255, .07) !important;
  border-color: rgba(255, 255, 255, .12) !important;
  color: #e9eef6 !important;
}

.srx-root.srx-night .srx-ex-nav-btn.primary {
  background: var(--s-accent, #4255ff) !important;
  border-color: var(--s-accent, #4255ff) !important;
  color: #fff !important;
}

.srx-root.srx-night .srx-ex-nav-btn:disabled {
  opacity: .35 !important;
}

/* Exercise progress track */
.srx-root.srx-night .srx-ex-track {
  background: rgba(255, 255, 255, .10);
}

/* Progress chips */
.srx-root.srx-night .srx-prog-chip {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .12);
  color: #a0aec0;
}

.srx-root.srx-night .srx-prog-chip.active {
  background: rgba(66, 85, 255, .18);
  border-color: rgba(66, 85, 255, .35);
  color: #a5b4fc;
}

.srx-root.srx-night .srx-prog-chip.done {
  background: rgba(34, 197, 94, .12);
  border-color: rgba(34, 197, 94, .28);
  color: #86efac;
}

/* Section headings */
.srx-root.srx-night .srx-sec-label {
  color: #e9eef6;
}

.srx-root.srx-night .srx-h1 {
  color: #e9eef6;
}

.srx-root.srx-night .srx-title-pl {
  color: #a0aec0;
}

.srx-root.srx-night .srx-topic-pill {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .14);
  color: #a5b4fc;
}

/* Lead question */
.srx-root.srx-night .srx-lead-q {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .12);
}

.srx-root.srx-night .srx-lead-q .en {
  color: #e9eef6;
}

.srx-root.srx-night .srx-lead-q .pl {
  color: #a0aec0;
  border-top-color: rgba(255, 255, 255, .12);
}

/* Page card */
.srx-root.srx-night .srx-page-card {
  background: #181c24;
  border-color: rgba(255, 255, 255, .10);
}

/* Sheet (mobile bottom drawer) */
.srx-root.srx-night .srx-sheet {
  background: #181c24;
  color: #e9eef6;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.srx-root.srx-night .srx-sheet-en {
  color: #e9eef6;
}

.srx-root.srx-night .srx-sheet-pl {
  color: #a0aec0;
}

.srx-root.srx-night .srx-tbtn {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .14);
  color: #e9eef6;
}

.srx-root.srx-night .srx-sheet-close {
  color: #a0aec0;
}

/* Loader */
.srx-root.srx-night .srx-loader {
  color: #a0aec0;
}

/* CTA card night */
.srx-root.srx-night .srx-cta-card {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .10);
}

.srx-root.srx-night .srx-cta-card .s3000-cta-title {
  color: #e9eef6;
}

/* ═══════════════════════════════════════════════════════════════
   READER EXERCISE — full Speak3000 quiz visual parity
═══════════════════════════════════════════════════════════════ */

/* ── Exercise outer wrap: transparent, no border ── */
.srx-root .srx-ex-wrap {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ── Header row: match s3000-quiz-header ── */
.srx-root .srx-ex-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0 12px;
  background: none;
  border-bottom: none;
}

.srx-root .srx-ex-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.srx-root .srx-ex-label {
  font-weight: 900;
  font-size: clamp(14px, 2.5vw, 16px);
  color: var(--s-text, #1c1a17);
  letter-spacing: -.01em;
}

.srx-root .srx-ex-sublabel {
  font-size: 12px;
  font-weight: 700;
  color: var(--s-muted, #9c8a78);
}

/* ── Counter chip: match s3000-chip ── */
.srx-root .srx-ex-counter {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--s-border, #ecddd0);
  background: var(--s-surface, #fff);
  font-weight: 800;
  font-size: 13px;
  color: var(--s-text2, #5c5040);
  box-shadow: var(--s-shadow-sm, 0 2px 8px rgba(100, 60, 20, .06));
  flex-shrink: 0;
}

/* ── Progress track: match s3000-quiz-prog ── */
.srx-root .srx-ex-prog {
  margin: 0 0 14px;
}

.srx-root .srx-ex-track {
  height: 8px;
  border-radius: 999px;
  background: var(--s-border, #ecddd0);
  overflow: hidden;
  margin-bottom: 6px;
}

.srx-root .srx-ex-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--s-accent, #4255ff), var(--s-gold, #f59e0b));
  border-radius: 999px;
  transition: width .45s cubic-bezier(.2, .8, .2, 1);
}

.srx-root .srx-ex-prog-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 900;
  color: var(--s-muted, #9c8a78);
  letter-spacing: .05em;
  text-transform: uppercase;
}

.srx-root .srx-ex-prog-labels .done {
  color: var(--s-good, #22c55e);
}

/* ── Question card: match s3000-question-panel exactly ── */
.srx-root .srx-ex-body {
  margin: 0 0 12px;
}

.srx-root .srx-ex-card {
  background: linear-gradient(160deg, var(--s-surface2, #fdf6ec), var(--s-surface, #fff)) !important;
  border: 2px solid var(--s-border, #ecddd0) !important;
  border-radius: var(--s-r, 20px) !important;
  box-shadow: var(--s-shadow-lg, 0 12px 48px rgba(100, 60, 20, .16)) !important;
  padding: clamp(20px, 4vw, 36px) clamp(16px, 4vw, 32px) !important;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color .22s ease, background .22s ease, box-shadow .22s ease;
  will-change: transform;
}

/* Accent top stripe — matches s3000-question-panel::before */
.srx-root .srx-ex-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--s-accent, #4255ff), var(--s-gold, #f59e0b), var(--s-teal, #0ea5a0));
}

.srx-root .srx-ex-card.correct {
  border-color: rgba(34, 197, 94, .5) !important;
  background: linear-gradient(160deg, var(--s-good-soft, rgba(34, 197, 94, .10)), var(--s-surface, #fff)) !important;
  box-shadow: 0 8px 40px var(--s-good-glow, rgba(34, 197, 94, .22)) !important;
}

.srx-root .srx-ex-card.wrong {
  border-color: rgba(239, 68, 68, .45) !important;
  background: linear-gradient(160deg, var(--s-bad-soft, rgba(239, 68, 68, .10)), var(--s-surface, #fff)) !important;
}

/* ── Correct badge: match s3000-correct-badge ── */
.srx-root .srx-correct-badge {
  position: absolute;
  right: 14px;
  top: 14px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--s-good-soft, rgba(34, 197, 94, .12));
  border: 1.5px solid rgba(34, 197, 94, .4);
  color: var(--s-good, #22c55e);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: 0;
  transform: scale(.7) translateY(-4px);
  transition: opacity .2s ease, transform .25s cubic-bezier(.2, .8, .2, 1);
  pointer-events: none;
}

.srx-root .srx-correct-badge.show {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* ── Prompt word: match s3000-qprompt ── */
.srx-root .srx-ex-word {
  font-size: clamp(22px, 5vw, 36px) !important;
  font-weight: 900 !important;
  letter-spacing: -.03em !important;
  color: var(--s-text, #1c1a17) !important;
  line-height: 1.15 !important;
  margin-bottom: 2px;
}

/* ── Hint: match s3000-qhint ── */
.srx-root .srx-ex-hint {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--s-muted, #9c8a78) !important;
}

/* ── Options grid: match s3000-qrow ── */
.srx-root .srx-opt-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
}

@media (max-width:520px) {
  .srx-root .srx-opt-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* ── Option buttons: full s3000-choice parity ── */
.srx-root .srx-opt-btn {
  position: relative;
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 16px 14px;
  text-align: left;
  border-radius: var(--s-r-sm, 14px) !important;
  border: 2px solid var(--s-border, #ecddd0) !important;
  background: var(--s-surface, #fff) !important;
  color: var(--s-text, #1c1a17) !important;
  font-weight: 800;
  font-size: clamp(13px, 2.5vw, 15px);
  cursor: pointer;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}

.srx-root .srx-opt-btn:hover {
  background: var(--s-accent-soft, rgba(66, 85, 255, .08)) !important;
  border-color: var(--s-accent-mid, rgba(66, 85, 255, .25)) !important;
  transform: translateY(-1px);
  box-shadow: var(--s-shadow, 0 4px 20px rgba(100, 60, 20, .09));
}

.srx-root .srx-opt-btn:active {
  transform: scale(.97);
}

/* ── Badge span inside opt-btn: matches s3000-choice-badge ── */
.srx-root .srx-opt-badge {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--s-surface2, #fdf6ec);
  border: 1.5px solid var(--s-border2, #d9c6b4);
  color: var(--s-muted, #9c8a78);
  font-size: 12px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.srx-root .srx-opt-btn:hover .srx-opt-badge {
  background: var(--s-accent-soft, rgba(66, 85, 255, .08));
  border-color: var(--s-accent-mid, rgba(66, 85, 255, .25));
  color: var(--s-accent, #4255ff);
}

.srx-root .srx-opt-text {
  flex: 1;
  line-height: 1.4;
  pointer-events: none;
}

/* Correct state */
.srx-root .srx-opt-btn.correct {
  border-color: rgba(34, 197, 94, .6) !important;
  background: var(--s-good-soft, rgba(34, 197, 94, .12)) !important;
  color: #166534 !important;
  box-shadow: 0 8px 28px var(--s-good-glow, rgba(34, 197, 94, .22)) !important;
}

.srx-root .srx-opt-btn.correct .srx-opt-badge {
  background: var(--s-good, #22c55e);
  border-color: var(--s-good, #22c55e);
  color: #fff;
}

/* Wrong state */
.srx-root .srx-opt-btn.wrong {
  border-color: rgba(239, 68, 68, .5) !important;
  background: var(--s-bad-soft, rgba(239, 68, 68, .10)) !important;
  color: #991b1b !important;
}

.srx-root .srx-opt-btn.wrong .srx-opt-badge {
  background: var(--s-bad, #ef4444);
  border-color: var(--s-bad, #ef4444);
  color: #fff;
}

/* ── Nav buttons row: Prev / Play / Next ── */
.srx-root .srx-ex-nav {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.srx-root .srx-ex-nav-btn {
  flex: 1;
  padding: 11px 14px;
  border-radius: var(--s-r-sm, 14px);
  border: 1.5px solid var(--s-border, #ecddd0);
  background: var(--s-surface, #fff);
  color: var(--s-text2, #5c5040);
  font: inherit;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .1s;
  box-shadow: var(--s-shadow-sm, 0 2px 8px rgba(100, 60, 20, .06));
}

.srx-root .srx-ex-nav-btn:hover {
  transform: translateY(-1px);
  border-color: var(--s-border2, #d9c6b4);
  box-shadow: var(--s-shadow, 0 4px 20px rgba(100, 60, 20, .09));
}

.srx-root .srx-ex-nav-btn:active {
  transform: scale(.96);
}

.srx-root .srx-ex-nav-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
  transform: none !important;
}

.srx-root .srx-ex-nav-btn.primary {
  background: var(--s-accent, #4255ff) !important;
  border-color: var(--s-accent, #4255ff) !important;
  color: #fff !important;
  font-weight: 900;
  box-shadow: 0 4px 14px var(--s-accent-glow, rgba(66, 85, 255, .22)) !important;
}

.srx-root .srx-ex-nav-btn.primary:hover {
  box-shadow: 0 6px 20px var(--s-accent-glow, rgba(66, 85, 255, .32)) !important;
}

/* ── Complete banner ── */
.srx-root .srx-ex-complete-inner {
  background: var(--s-surface, #fff);
  border: 1.5px solid var(--s-good, #22c55e);
  border-radius: var(--s-r, 20px);
  padding: 22px;
  text-align: center;
  box-shadow: var(--s-shadow, 0 4px 20px rgba(100, 60, 20, .09));
}

.srx-root .srx-ex-complete-inner .ico {
  font-size: 2em;
}

.srx-root .srx-ex-complete-inner .t {
  font-weight: 900;
  font-size: 18px;
  margin: 6px 0 4px;
  color: var(--s-text, #1c1a17);
}

.srx-root .srx-ex-complete-inner .s {
  color: var(--s-muted, #9c8a78);
  font-size: 14px;
  font-weight: 700;
}

/* ── Night mode exercise ── */
.srx-root.srx-night .srx-ex-label {
  color: #e9eef6;
}

.srx-root.srx-night .srx-ex-counter {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .12);
  color: #a0aec0;
}

.srx-root.srx-night .srx-ex-track {
  background: rgba(255, 255, 255, .10);
}

.srx-root.srx-night .srx-ex-card {
  background: linear-gradient(160deg, rgba(30, 36, 52, .96), rgba(24, 28, 36, .96)) !important;
  border-color: rgba(255, 255, 255, .12) !important;
}

.srx-root.srx-night .srx-ex-word {
  color: #e9eef6 !important;
}

.srx-root.srx-night .srx-ex-hint {
  color: #64748b !important;
}

.srx-root.srx-night .srx-opt-btn {
  background: rgba(255, 255, 255, .06) !important;
  border-color: rgba(255, 255, 255, .12) !important;
  color: #e9eef6 !important;
}

.srx-root.srx-night .srx-opt-btn:hover {
  background: rgba(255, 255, 255, .10) !important;
  border-color: rgba(255, 255, 255, .20) !important;
}

.srx-root.srx-night .srx-opt-badge {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .18);
  color: #a0aec0;
}

.srx-root.srx-night .srx-opt-btn:hover .srx-opt-badge {
  background: rgba(66, 85, 255, .20);
  border-color: rgba(66, 85, 255, .35);
  color: #a5b4fc;
}

.srx-root.srx-night .srx-opt-btn.correct {
  background: rgba(34, 197, 94, .15) !important;
  border-color: rgba(34, 197, 94, .35) !important;
  color: #86efac !important;
}

.srx-root.srx-night .srx-opt-btn.correct .srx-opt-badge {
  background: rgba(34, 197, 94, .7);
  border-color: rgba(34, 197, 94, .7);
  color: #fff;
}

.srx-root.srx-night .srx-opt-btn.wrong {
  background: rgba(239, 68, 68, .13) !important;
  border-color: rgba(239, 68, 68, .30) !important;
  color: #fca5a5 !important;
}

.srx-root.srx-night .srx-opt-btn.wrong .srx-opt-badge {
  background: rgba(239, 68, 68, .7);
  border-color: rgba(239, 68, 68, .7);
  color: #fff;
}

.srx-root.srx-night .srx-ex-nav-btn:not(.primary) {
  background: rgba(255, 255, 255, .07) !important;
  border-color: rgba(255, 255, 255, .12) !important;
  color: #e9eef6 !important;
}

.srx-root.srx-night .srx-ex-complete-inner {
  background: rgba(24, 28, 36, .96);
  border-color: rgba(34, 197, 94, .30);
  color: #e9eef6;
}

.srx-root.srx-night .srx-cta-card {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .10);
}

/* Panel items */
.srx-root.srx-night .srx-r-item .num {
  color: #64748b;
}

.srx-root.srx-night .srx-r-item.active {
  background: rgba(66, 85, 255, .16) !important;
  border-color: rgba(66, 85, 255, .30) !important;
}

.srx-root.srx-night .srx-panel-title {
  color: #e9eef6;
}

.srx-root.srx-night .srx-panel-close {
  color: #a0aec0;
}

.srx-root.srx-night .srx-panel-search input {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .12);
  color: #e9eef6;
}

.srx-root.srx-night .srx-drawer-progress-label {
  color: #64748b;
}

.srx-root.srx-night .srx-drawer-progress {
  background: rgba(255, 255, 255, .10);
}

.srx-root.srx-night .srx-drawer-progress-text {
  color: #64748b;
}

/* Back-read btn night */
.srx-root.srx-night .srx-back-read-btn {
  background: rgba(255, 255, 255, .08) !important;
  color: #e9eef6 !important;
  border-color: rgba(255, 255, 255, .14) !important;
}

/* Panel backdrop night */
.srx-root.srx-night .srx-panel-backdrop,
.srx-root.srx-night .srx-sheet-backdrop {
  background: rgba(0, 0, 0, .55);
}

/* Stage head kicker/title */
.srx-root.srx-night .srx-stage-kicker {
  color: #64748b;
}

.srx-root.srx-night .srx-stage-title {
  color: #e9eef6;
}

/* Complete banner */
.srx-root.srx-night .srx-ex-complete-inner {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .10);
  color: #e9eef6;
}

/* PATCH 7: Panel active item — accent tint instead of warm gradient */
.srx-root .srx-r-item.active {
  background: color-mix(in srgb, var(--s-accent-soft, rgba(66, 85, 255, .10)) 80%, #fff 20%) !important;
  border-color: var(--s-border2, rgba(15, 23, 42, .16)) !important;
}

@media (max-width: 640px) {
  .srx-root .srx-topbar-unified {
    padding: 0 10px;
    gap: 6px;
  }

  .srx-root .srx-topbar-unified .srx-topbtn,
  .srx-root .srx-topbar-unified .s3000-btn {
    min-width: 36px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }

  .srx-root .srx-topbar-unified .s3000-btn-drawer {
    width: 40px;
  }

  .srx-root .srx-topbar-unified .srx-top-title {
    max-width: 34vw;
    font-size: 13px;
  }

  .srx-root .srx-main {
    padding: 10px 10px 16px;
  }

  .srx-root .srx-score-card {
    padding: 12px;
    border-radius: 16px;
  }

  .srx-root .srx-badge {
    min-height: 74px;
    padding: 10px 8px;
  }

  .srx-root .srx-badge-value {
    font-size: 18px;
  }

  .srx-root .srx-cta-card .s3000-cta-row,
  .srx-root .srx-stage-head {
    flex-direction: column;
    align-items: stretch;
  }

  .srx-root .srx-cta-card .s3000-primary,
  .srx-root .srx-back-read-btn {
    width: 100%;
  }
}





/* ═══════════════════════════════════════════════════════════════
   PATCH — Center-lane arch shadow under topbar
   Applies to: .s3000-topbar  +  .srx-root .srx-topbar-unified
   Shadow is rendered only above the 860 px content column via
   a ::after pseudo-element; the topbar's own box-shadow is
   removed so it no longer spans the full viewport width.
═══════════════════════════════════════════════════════════════ */

/* ── 1. Strip the full-width box-shadow from both topbars ── */
.s3000-root .s3000-topbar {
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) !important;
  /* keeps the hairline highlight; removes the wide shadow */
  overflow: visible !important;
  /* allow ::after to paint below */
  position: relative !important;
}

.srx-root .srx-topbar-unified {
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) !important;
  overflow: visible !important;
  position: sticky !important;
  /* already sticky — preserved */
}

/* ── 2. Arch shadow pseudo-element shared geometry ── */
.s3000-root .s3000-topbar::after,
.srx-root .srx-topbar-unified::after {
  content: "";
  pointer-events: none;

  /* size: match the content column */
  position: absolute;
  bottom: 0;
  /* sits flush with topbar bottom edge */
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  width: min(860px, calc(100% - 32px));
  /* matches max-width:860px + 16px side padding × 2 */
  height: 32px;
  /* depth of shadow projection */

  /* Arch shadow: a radial ellipse centred at top, fading out at edges and bottom */
  background: radial-gradient(ellipse 80% 100% at 50% 0%,
      rgba(15, 23, 42, .13) 0%,
      rgba(15, 23, 42, .06) 40%,
      transparent 100%);

  /* Soft arch mask: full opacity in the centre lane, fades at left/right edges */
  -webkit-mask-image: radial-gradient(ellipse 90% 100% at 50% 0%,
      black 30%,
      transparent 100%);
  mask-image: radial-gradient(ellipse 90% 100% at 50% 0%,
      black 30%,
      transparent 100%);

  /* Must not create scrollbars */
  overflow: hidden;
  z-index: 29;
  /* just below topbar z-index:30 */
}

/* ── 3. Night-mode — deepen the shadow slightly ── */
.s3000-root.s3000-night .s3000-topbar {
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05) !important;
}

.s3000-root.s3000-night .s3000-topbar::after {
  background: radial-gradient(ellipse 80% 100% at 50% 0%,
      rgba(0, 0, 0, .30) 0%,
      rgba(0, 0, 0, .14) 40%,
      transparent 100%);
}

.srx-root.srx-night .srx-topbar-unified {
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05) !important;
}

.srx-root.srx-night .srx-topbar-unified::after {
  background: radial-gradient(ellipse 80% 100% at 50% 0%,
      rgba(0, 0, 0, .30) 0%,
      rgba(0, 0, 0, .14) 40%,
      transparent 100%);
}

/* ── 4. Prevent the pseudo-element from causing horizontal overflow ── */
.s3000-root,
.srx-root .srx-shell-unified {
  overflow-x: hidden;
  /* already set on srx-shell-unified; belt-and-suspenders for s3000-root */
}

/* END PATCH — center-lane arch shadow */






/* ═══════════════════════════════════════════════════════════════
   PATCH — Speak3000 topbar: match Reader 3D shadow in night mode
   Reader night:  box-shadow:0 1px 0 rgba(255,255,255,.05), 0 2px 8px rgba(0,0,0,.18)
   S3000 night was missing box-shadow entirely — added here.
═══════════════════════════════════════════════════════════════ */

.s3000-root.s3000-night .s3000-topbar {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .05),
    0 2px 8px rgba(0, 0, 0, .18) !important;
}

/* END PATCH */



/* =========================================================
   NEEDS / REPORT EDITOR — Full width writing mode
   ========================================================= */

.nr-card {
  padding: 18px 18px 20px;
  max-width: 100%;
}

/* Title area spacing */
.nr-head {
  margin-bottom: 14px;
}

.nr-title {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -.2px;
}

/* Textarea — main writing field */
.nr-textarea {
  width: 100%;
  min-height: 320px;
  font-size: 20px;
  line-height: 1.75;
  padding: 18px 18px;
  border-radius: 16px;
  border: 1.75px solid var(--border);
  background: #fff;
  color: var(--text);
  font-family: inherit;
  resize: vertical;

  /* subtle writing focus feel */
  transition: border-color .15s ease,
    box-shadow .15s ease,
    background .15s ease;
}

/* Focus state */
.nr-textarea:focus {
  outline: none;
  border-color: rgba(66, 85, 255, .45);
  box-shadow: 0 0 0 5px rgba(66, 85, 255, .12);
}

/* readonly state */
.nr-textarea[readonly] {
  background: rgba(0, 0, 0, .03);
}

/* hint text */
.nr-hint {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--muted);
}







/* mobile polish */
@media (max-width:720px) {

  .nr-textarea {
    font-size: 16px;
    min-height: 240px;
    padding: 16px;
  }

}







/* ── HR Subnav tabs ── */
#hr-panel .hr-subnav {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--border);
  padding-bottom: 0;
}

#hr-panel .hr-subnav-tab {
  background: transparent;
  border: none;
  padding: 8px 14px 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  border-radius: 0;
}

#hr-panel .hr-subnav-tab:hover {
  color: var(--text);
}

#hr-panel .hr-subnav-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ── Filter bar ── */
#hr-panel .hr-filter-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

#hr-panel .hr-filter-bar input[type="text"],
#hr-panel .hr-filter-bar input[type="month"],
#hr-panel .hr-filter-bar select {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 13px;
  background: var(--card);
  color: var(--text);
  outline: none;
}

#hr-panel .hr-filter-bar input:focus,
#hr-panel .hr-filter-bar select:focus {
  border-color: rgba(66, 85, 255, .5);
  box-shadow: 0 0 0 3px rgba(66, 85, 255, .1);
}

/* ── Attendance grid ── */
#hr-panel .hr-att-grid-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
}

#hr-panel .hr-att-grid {
  border-collapse: collapse;
  min-width: 100%;
  font-size: 12px;
}

#hr-panel .hr-att-grid th,
#hr-panel .hr-att-grid td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  white-space: nowrap;
}

#hr-panel .hr-att-grid th {
  background: var(--bg);
  font-weight: 700;
  color: var(--muted);
}

#hr-panel .hr-att-grid td.att-present {
  color: #058f68;
  font-weight: 800;
}

#hr-panel .hr-att-grid td.att-absent {
  color: var(--danger);
  font-weight: 800;
}

#hr-panel .hr-att-grid td.att-excused {
  color: #a56a00;
  font-weight: 800;
}

#hr-panel .hr-att-grid td.att-none {
  color: var(--muted);
}

#hr-panel .hr-att-grid td:first-child,
#hr-panel .hr-att-grid th:first-child {
  position: sticky;
  left: 0;
  background: var(--card);
  z-index: 1;
  font-weight: 700;
}

/* ── Export toolbar ── */
#hr-panel .hr-export-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 0 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}

#hr-panel .hr-export-toolbar .hr-export-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  margin-right: 4px;
}

/* ── Stat bar (hours) ── */
#hr-panel .hr-stat-bar-wrap {
  margin: 10px 0 4px;
}

#hr-panel .hr-stat-bar {
  height: 10px;
  border-radius: 10px;
  background: var(--border);
  overflow: hidden;
  display: flex;
}

#hr-panel .hr-stat-bar-used {
  background: var(--accent);
}

#hr-panel .hr-stat-bar-warn {
  background: #f4a100;
}

#hr-panel .hr-stat-bar-danger {
  background: var(--danger);
}

#hr-panel .hr-stat-bar-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted);
  margin-top: 5px;
}

/* ── Contract cards ── */
#hr-panel .hr-contract-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 10px;
  box-shadow: 0 8px 24px rgba(24, 33, 77, .06);
}

#hr-panel .hr-contract-card.warn {
  border-color: rgba(244, 161, 0, .5);
}

#hr-panel .hr-contract-card.alert {
  border-color: rgba(217, 48, 37, .5);
}

#hr-panel .hr-contract-archive {
  opacity: .7;
}

/* ── Needs list ── */
#hr-panel .hr-need-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

#hr-panel .hr-need-row:last-child {
  border-bottom: none;
}

#hr-panel .hr-need-status {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

#hr-panel .hr-need-open {
  background: rgba(244, 161, 0, .13);
  color: #a56a00;
}

#hr-panel .hr-need-resolved {
  background: rgba(0, 201, 142, .12);
  color: #058f68;
}

/* ── Drilldown / back nav ── */
#hr-panel .hr-drilldown-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

#hr-panel .hr-back-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  cursor: pointer;
}

#hr-panel .hr-back-btn:hover {
  background: rgba(66, 85, 255, .06);
  color: var(--accent);
}

/* ── Contract expiry banner ── */
#hr-panel .hr-alert-banner {
  background: rgba(217, 48, 37, .07);
  border: 1px solid rgba(217, 48, 37, .3);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--danger);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Reports section ── */
#hr-panel .hr-report-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

#hr-panel .hr-report-row:hover {
  background: rgba(66, 85, 255, .03);
  border-radius: 8px;
}

#hr-panel .hr-report-row:last-child {
  border-bottom: none;
}

#hr-panel .hr-report-type-badge {
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  background: rgba(66, 85, 255, .08);
  color: var(--accent);
  white-space: nowrap;
}








/* =========================================
   PATCH — Mobile dashboard tabs wrap nicely
   ========================================= */

@media (max-width: 720px) {

  body.dashboard-mode .dash-tabs {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    justify-content: flex-start !important;
    gap: 6px !important;
  }

  body.dashboard-mode .dash-tab {
    flex: 0 0 auto !important;
    border-radius: 999px !important;
    /* curled pill shape */
    padding: 8px 14px !important;
  }

}






/* =============================================================
   HR MODULE — styles addition
   Append this block to the end of your existing styles.css
   ============================================================= */

/* ── HR Contact modal — proper DM Sans styling ── */
.hr-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26, 29, 40, .40);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 18px;
  font-family: 'DM Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

.hr-modal {
  width: 100%;
  max-width: 520px;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 32px 80px rgba(26, 29, 40, .22), 0 2px 8px rgba(26, 29, 40, .08);
  border: 1px solid #e3e6f0;
  overflow: hidden;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.hr-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid #e3e6f0;
  flex-shrink: 0;
  background: #f6f7fb;
}

.hr-modal-title {
  font-weight: 900;
  font-size: 15px;
  color: #1a1d28;
  letter-spacing: -.01em;
}

.hr-modal-close {
  border: none;
  background: transparent;
  color: #6b7394;
  cursor: pointer;
  font-size: 16px;
  padding: 6px 8px;
  border-radius: 10px;
  line-height: 1;
  transition: background .15s;
}

.hr-modal-close:hover {
  background: rgba(66, 85, 255, .08);
  color: #4255ff;
}

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

/* ── HR Form inside modal ── */
.hr-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hr-form label {
  font-size: 12px;
  font-weight: 800;
  color: #6b7394;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin-bottom: -4px;
}

.hr-form input,
.hr-form select,
.hr-form textarea {
  border: 1.5px solid #e3e6f0;
  border-radius: 12px;
  padding: 10px 13px;
  font-size: 14px;
  font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  color: #1a1d28;
  background: #ffffff;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  resize: vertical;
}

.hr-form input:focus,
.hr-form select:focus,
.hr-form textarea:focus {
  border-color: rgba(66, 85, 255, .55);
  box-shadow: 0 0 0 4px rgba(66, 85, 255, .10);
}

.hr-form textarea {
  min-height: 100px;
  line-height: 1.6;
}

.hr-form-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
}

/* ── Buttons used inside modals (match portal style exactly) ── */
.hr-modal .hr-btn-primary {
  background: #4255ff;
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 10px 18px;
  font-weight: 800;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(66, 85, 255, .22);
  transition: filter .15s, box-shadow .15s;
}

.hr-modal .hr-btn-primary:hover {
  filter: brightness(.96);
  box-shadow: 0 12px 28px rgba(66, 85, 255, .28);
}

.hr-modal .hr-btn-primary:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.hr-modal .hr-btn-ghost {
  background: transparent;
  color: #1a1d28;
  border: 1.5px solid #e3e6f0;
  border-radius: 10px;
  padding: 10px 16px;
  font-weight: 800;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s;
}

.hr-modal .hr-btn-ghost:hover {
  background: rgba(66, 85, 255, .06);
}

/* ── KPI inline chart panel (animated, integrated) ── */
#hr-panel .hr-kpi-inline-chart {
  background: #ffffff;
  border: 1.5px solid rgba(66, 85, 255, .18);
  border-radius: 16px;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(66, 85, 255, .09);
  animation: hr-kpi-fadein .2s ease;
}

@keyframes hr-kpi-fadein {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

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

#hr-panel .hr-kpi-inline-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 8px;
  border-bottom: 1px solid #e3e6f0;
}

#hr-panel .hr-kpi-inline-chart-body {
  padding: 12px 16px 16px;
}

#hr-panel .hr-kpi-inline-close {
  background: transparent;
  border: none;
  color: #6b7394;
  cursor: pointer;
  font-size: 14px;
  padding: 4px 8px;
  border-radius: 8px;
  line-height: 1;
  transition: background .12s;
}

#hr-panel .hr-kpi-inline-close:hover {
  background: rgba(66, 85, 255, .07);
  color: #4255ff;
}

/* Active KPI card highlight (when chart is open) */
#hr-panel .hr-kpi-active {
  border-color: rgba(66, 85, 255, .38) !important;
  box-shadow: 0 0 0 3px rgba(66, 85, 255, .10), 0 6px 18px rgba(24, 33, 77, .06) !important;
}

/* ── Inline group detail back bar ── */
#hr-panel .hr-detail-back-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 2px solid #e3e6f0;
}

#hr-panel .hr-detail-back-crumb {
  font-size: 13px;
  font-weight: 700;
  color: #1a1d28;
}

/* ── KPI clickable refinements ── */
#hr-panel .hr-kpi-clickable {
  cursor: pointer;
  transition: box-shadow .15s, border-color .15s, transform .12s;
  user-select: none;
}

#hr-panel .hr-kpi-clickable:hover {
  box-shadow: 0 8px 24px rgba(66, 85, 255, .14);
  border-color: rgba(66, 85, 255, .32);
  transform: translateY(-1px);
}

#hr-panel .hr-kpi-clickable:active {
  transform: translateY(0);
}

/* Small hint arrow on clickable KPIs */
#hr-panel .hr-kpi-clickable::after {
  content: '↗';
  font-size: 9px;
  color: #6b7394;
  float: right;
  margin-top: -2px;
  opacity: .55;
}

/* ── Responsive: stack charts on mobile ── */
@media (max-width: 700px) {
  #hr-panel .hr-charts-row {
    grid-template-columns: 1fr !important;
  }

  .hr-modal {
    border-radius: 16px;
    margin: 0 4px;
  }
}




/* ── Payment schedule table ──────────────────────────────── */
.pay-sched {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-top: 6px;
}

.pay-sched th {
  text-align: left;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 2px solid rgba(227, 230, 240, .8);
  white-space: nowrap;
}

.pay-sched td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(227, 230, 240, .5);
  color: var(--text);
  font-size: 14px;
  vertical-align: middle;
}

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

.pay-sched tbody tr:hover td {
  background: rgba(227, 230, 240, .25);
}

/* ── Payment detail rows — always side by side on desktop ── */
.pro-body .row {
  display: grid !important;
  grid-template-columns: 150px 1fr !important;
  gap: 16px !important;
  align-items: baseline !important;
}

@media (max-width: 520px) {
  .pro-body .row {
    grid-template-columns: 1fr !important;
    gap: 3px !important;
  }
}




/* ── HR Module — mobile tab nav patch ── */
@media (max-width: 600px) {
  #hr-panel .hr-subnav {
    flex-wrap: wrap;
    gap: 4px 4px;
    padding-bottom: 4px;
  }

  #hr-panel .hr-subnav-tab {
    flex: 1 1 auto;
    text-align: center;
    padding: 8px 6px 9px;
    font-size: 11px;
    border: 1px solid var(--border);
    border-bottom: 2px solid transparent;
    border-radius: 8px 8px 0 0;
    white-space: nowrap;
  }

  #hr-panel .hr-subnav-tab.active {
    border-color: var(--accent);
    border-bottom-color: var(--accent);
    background: rgba(66, 85, 255, .06);
  }
}


/* ── HR Contracts — View contract document button ── */
#hr-panel #hr-doc-toggle {
  color: #c0392b;
  border-color: #4255ff;
  border-width: 2px;
}

#hr-panel #hr-doc-toggle:hover {
  background: rgba(66, 85, 255, .07);
}

#hr-panel #hr-doc-toggle.active,
#hr-panel #hr-doc-toggle[aria-expanded="true"] {
  background: #4255ff;
  color: #fff;
  border-color: #4255ff;
}



/* ─────────────────────────────────────────────────────────────────────────
   AI ASSIST OVERLAY — add-on for styles.css
   Paste this block at the END of styles.css
   All selectors namespaced to nr-ai-* to avoid collisions
   ───────────────────────────────────────────────────────────────────────── */

/* Star trigger button — sits inline next to nr-status */
.nr-head-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nr-ai-star {
  all: unset;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  color: #a0a0b0;
  opacity: 0.7;
  transition: opacity 0.15s, color 0.15s, transform 0.2s;
  user-select: none;
  padding: 2px 3px;
  border-radius: 4px;
}

.nr-ai-star:hover {
  opacity: 1;
  color: #7c6af7;
  transform: scale(1.2) rotate(15deg);
}

.nr-ai-star:focus-visible {
  outline: 2px solid #7c6af7;
  outline-offset: 2px;
}

/* Backdrop */
#nr-ai-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(10, 10, 20, 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  align-items: center;
  justify-content: center;
  padding: 16px;
}

#nr-ai-overlay.nr-ai-visible {
  display: flex;
  animation: nr-ai-fade-in 0.18s ease;
}

@keyframes nr-ai-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Panel */
#nr-ai-panel {
  background: #fff;
  border-radius: 14px;
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.04),
    0 12px 40px rgba(0, 0, 0, 0.13),
    0 0 0 1px rgba(0, 0, 0, 0.06);
  width: 100%;
  max-width: 480px;
  max-height: 88vh;
  overflow-y: auto;
  padding: 0;
  animation: nr-ai-slide-up 0.2s ease;
  scrollbar-width: thin;
}

@keyframes nr-ai-slide-up {
  from {
    transform: translateY(12px);
    opacity: 0.6;
  }

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

/* Header */
#nr-ai-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid #f0f0f4;
  position: sticky;
  top: 0;
  background: #fff;
  border-radius: 14px 14px 0 0;
  z-index: 1;
}

#nr-ai-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #3a3a50;
}

#nr-ai-close {
  all: unset;
  cursor: pointer;
  font-size: 14px;
  color: #a0a0b0;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 6px;
  transition: background 0.12s, color 0.12s;
}

#nr-ai-close:hover {
  background: #f2f2f7;
  color: #555;
}

/* Target label */
#nr-ai-target {
  padding: 10px 18px 0;
  font-size: 12px;
  font-weight: 500;
  color: #7c6af7;
  letter-spacing: 0.02em;
}

/* Fields */
#nr-ai-fields {
  padding: 10px 18px 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nr-ai-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.nr-ai-label {
  font-size: 11px;
  font-weight: 500;
  color: #888;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.nr-ai-input {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 10px;
  font-size: 13px;
  color: #2a2a3a;
  background: #f8f8fc;
  border: 1px solid #e4e4ee;
  border-radius: 7px;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
  font-family: inherit;
}

.nr-ai-input:focus {
  border-color: #7c6af7;
  background: #fff;
}

.nr-ai-input::placeholder {
  color: #bbb;
}

/* Preview */
#nr-ai-preview-wrap {
  margin: 12px 18px 0;
  border-radius: 9px;
  border: 1px solid #e8e8f4;
  background: #fafafd;
  overflow: hidden;
}

#nr-ai-preview-label {
  font-size: 11px;
  font-weight: 500;
  color: #888;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 8px 12px 4px;
  border-bottom: 1px solid #ececf6;
}

#nr-ai-preview {
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.65;
  color: #2a2a3a;
  white-space: pre-wrap;
  max-height: 200px;
  overflow-y: auto;
  scrollbar-width: thin;
}

/* Error */
#nr-ai-error {
  margin: 10px 18px 0;
  padding: 9px 12px;
  border-radius: 8px;
  background: #fff5f5;
  border: 1px solid #fcd0d0;
  font-size: 12px;
  color: #c0392b;
  line-height: 1.5;
}

/* Actions */
#nr-ai-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 14px 18px 18px;
}

.nr-ai-btn {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  border-radius: 8px;
  padding: 8px 16px;
  transition: background 0.14s, opacity 0.14s, transform 0.1s;
  white-space: nowrap;
  line-height: 1;
}

.nr-ai-btn:active {
  transform: scale(0.97);
}

.nr-ai-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.nr-ai-btn-primary {
  background: #7c6af7;
  color: #fff;
}

.nr-ai-btn-primary:hover:not(:disabled) {
  background: #6a57e8;
}

.nr-ai-btn-secondary {
  background: #f0eeff;
  color: #7c6af7;
}

.nr-ai-btn-secondary:hover:not(:disabled) {
  background: #e4dfff;
}

.nr-ai-btn-inject {
  background: #edf7f0;
  color: #27a05a;
}

.nr-ai-btn-inject:hover:not(:disabled) {
  background: #d9f0e2;
}

.nr-ai-btn-ghost {
  color: #a0a0b0;
  padding-left: 8px;
  padding-right: 8px;
  margin-left: auto;
}

.nr-ai-btn-ghost:hover:not(:disabled) {
  color: #555;
}

/* Responsive */
@media (max-width: 520px) {
  #nr-ai-panel {
    max-width: 100%;
    border-radius: 12px;
  }

  #nr-ai-actions {
    gap: 6px;
  }

  .nr-ai-btn {
    padding: 7px 13px;
    font-size: 12px;
  }
}

/* ── end AI assist overlay ─────────────────────────────────────────────── */




/* ═══════════════════════════════════════════════════════════════════════════
   AI STEPPER OVERLAY — add-on CSS for styles.css
   Paste at the very END of styles.css.
   All selectors prefixed nrai- to avoid any collisions.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Star trigger ──────────────────────────────────────────────────────── */
.nr-head-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nr-ai-star {
  all: unset;
  cursor: pointer;
  font-size: 22px;
  /* big enough to tap, twice the old size */
  line-height: 1;
  color: var(--muted, #6b7394);
  opacity: 0.55;
  transition: opacity 0.15s, color 0.15s, transform 0.22s cubic-bezier(.4, 0, .2, 1);
  user-select: none;
  padding: 2px 4px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nr-ai-star:hover {
  opacity: 1;
  color: var(--accent, #4255ff);
  transform: scale(1.25) rotate(18deg);
}

.nr-ai-star:focus-visible {
  outline: 2px solid var(--accent, #4255ff);
  outline-offset: 3px;
}

/* ── Backdrop ──────────────────────────────────────────────────────────── */
#nrai-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1400;
  background: rgba(15, 16, 30, 0.52);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
}

#nrai-backdrop.nrai-on {
  display: flex;
  animation: nrai-fade 0.2s ease;
}

@keyframes nrai-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* ── Panel ─────────────────────────────────────────────────────────────── */
#nrai-panel {
  background: #ffffff;
  border-radius: 20px;
  box-shadow:
    0 0 0 1px rgba(66, 85, 255, 0.08),
    0 8px 16px rgba(26, 29, 40, 0.10),
    0 32px 80px rgba(26, 29, 40, 0.18);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: nrai-rise 0.24s cubic-bezier(.4, 0, .2, 1);
}

@keyframes nrai-rise {
  from {
    transform: translateY(18px) scale(0.98);
    opacity: 0;
  }

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

/* ── Header ────────────────────────────────────────────────────────────── */
#nrai-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid #f0f1fa;
  flex-shrink: 0;
}

#nrai-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

#nrai-sparkle {
  font-size: 22px;
  color: var(--accent, #4255ff);
  line-height: 1;
  flex-shrink: 0;
  animation: nrai-spin-once 0.6s cubic-bezier(.4, 0, .2, 1) 0.1s both;
}

@keyframes nrai-spin-once {
  from {
    transform: rotate(-40deg) scale(0.7);
    opacity: 0;
  }

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

#nrai-htitle {
  font-size: 14px;
  font-weight: 700;
  color: var(--text, #1a1d28);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

#nrai-htarget {
  font-size: 12px;
  color: var(--accent, #4255ff);
  font-weight: 500;
  margin-top: 2px;
  letter-spacing: 0.01em;
}

#nrai-close {
  all: unset;
  cursor: pointer;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--muted, #6b7394);
  transition: background 0.13s, color 0.13s;
  flex-shrink: 0;
}

#nrai-close:hover {
  background: #f0f1fa;
  color: var(--text, #1a1d28);
}

/* ── Progress bar ──────────────────────────────────────────────────────── */
#nrai-prog {
  height: 3px;
  background: #f0f1fa;
  flex-shrink: 0;
}

#nrai-prog-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent, #4255ff), #8c52ff);
  border-radius: 0 2px 2px 0;
  transition: width 0.35s cubic-bezier(.4, 0, .2, 1);
  width: 0%;
}

/* ── Scrollable body ───────────────────────────────────────────────────── */
#nrai-stepper-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  scrollbar-width: thin;
  scrollbar-color: #e3e6f0 transparent;
}

/* ── Steps wrapper (for slide animation) ──────────────────────────────── */
#nrai-steps-wrap {
  overflow: hidden;
}

#nrai-steps {
  padding: 24px 24px 8px;
  will-change: transform, opacity;
}

/* ── Step content ──────────────────────────────────────────────────────── */
.nrai-step {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.nrai-counter {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent, #4255ff);
  margin-bottom: 6px;
}

.nrai-counter-sep {
  opacity: 0.5;
}

.nrai-stitle {
  font-size: 20px;
  font-weight: 700;
  color: var(--text, #1a1d28);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 4px;
}

.nrai-ssub {
  font-size: 13px;
  color: var(--muted, #6b7394);
  line-height: 1.5;
  margin-bottom: 16px;
}

/* ── Chips ─────────────────────────────────────────────────────────────── */
.nrai-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.nrai-chips-sm {
  gap: 5px;
  margin-bottom: 8px;
}

.nrai-chip {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  color: var(--text, #1a1d28);
  background: #f4f5fb;
  border: 1.5px solid #e3e6f0;
  border-radius: 999px;
  line-height: 1;
  transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.1s;
  user-select: none;
}

.nrai-chip:hover {
  background: var(--accent-soft, rgba(66, 85, 255, 0.08));
  border-color: var(--accent, #4255ff);
  color: var(--accent, #4255ff);
}

.nrai-chip:active {
  transform: scale(0.95);
}

.nrai-chip.nrai-chip-on {
  background: var(--accent, #4255ff);
  border-color: var(--accent, #4255ff);
  color: #fff;
}

.nrai-chip-sm {
  padding: 5px 11px;
  font-size: 12px;
}

/* ── Textarea fields ───────────────────────────────────────────────────── */
.nrai-ta {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  font-weight: 400;
  color: var(--text, #1a1d28);
  background: #fafbff;
  border: 1.5px solid #e3e6f0;
  border-radius: 12px;
  outline: none;
  resize: vertical;
  min-height: 72px;
  line-height: 1.55;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.nrai-ta:focus {
  border-color: var(--accent, #4255ff);
  background: #fff;
  box-shadow: 0 0 0 3px var(--accent-soft, rgba(66, 85, 255, 0.10));
}

.nrai-ta::placeholder {
  color: #b0b5cc;
  font-size: 14px;
}

.nrai-ta-sm {
  font-size: 14px;
  min-height: 56px;
  padding: 10px 12px;
}

/* ── Multi-field groups ────────────────────────────────────────────────── */
.nrai-mfg {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.nrai-mfl {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #6b7394);
}

/* ── Result panel ──────────────────────────────────────────────────────── */
#nrai-result-wrap {
  margin: 20px 24px 8px;
  border-radius: 14px;
  border: 1.5px solid #e3e6f0;
  overflow: hidden;
  background: #fafbff;
}

#nrai-result-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent, #4255ff);
  padding: 10px 14px 8px;
  border-bottom: 1px solid #eeeffa;
  background: #f4f5fb;
}

#nrai-result {
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text, #1a1d28);
  white-space: pre-wrap;
  max-height: 220px;
  overflow-y: auto;
  scrollbar-width: thin;
}

#nrai-result-hint {
  font-size: 12px;
  color: var(--muted, #6b7394);
  padding: 8px 14px 12px;
  border-top: 1px solid #eeeffa;
  line-height: 1.5;
}

/* ── Error ─────────────────────────────────────────────────────────────── */
#nrai-error {
  margin: 8px 24px 4px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #fff5f5;
  border: 1px solid #fcd0d0;
  font-size: 13px;
  color: #c0392b;
  line-height: 1.5;
}

/* ── Footer ────────────────────────────────────────────────────────────── */
#nrai-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px 18px;
  border-top: 1px solid #f0f1fa;
  flex-shrink: 0;
  gap: 8px;
  background: #fff;
}

#nrai-footer-r {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.nrai-btn {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
  padding: 10px 20px;
  line-height: 1;
  white-space: nowrap;
  transition: background 0.13s, opacity 0.13s, transform 0.1s, box-shadow 0.13s;
  user-select: none;
}

.nrai-btn:active:not(:disabled) {
  transform: scale(0.96);
}

.nrai-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none !important;
}

.nrai-primary {
  background: var(--accent, #4255ff);
  color: #fff;
  box-shadow: 0 2px 8px rgba(66, 85, 255, 0.25);
}

.nrai-primary:hover:not(:disabled) {
  background: #3346e8;
  box-shadow: 0 4px 16px rgba(66, 85, 255, 0.35);
}

.nrai-generate {
  background: linear-gradient(135deg, var(--accent, #4255ff) 0%, #8c52ff 100%);
  color: #fff;
  box-shadow: 0 2px 12px rgba(66, 85, 255, 0.30);
}

.nrai-generate:hover:not(:disabled) {
  box-shadow: 0 4px 20px rgba(66, 85, 255, 0.42);
  filter: brightness(1.06);
}

.nrai-inject {
  background: #edf7f0;
  color: #1a8a48;
  border: 1.5px solid #b8e8c8;
}

.nrai-inject:hover:not(:disabled) {
  background: #d8f0e2;
}

.nrai-skip {
  background: transparent;
  color: var(--muted, #6b7394);
  font-size: 13px;
  font-weight: 500;
  padding: 10px 14px;
}

.nrai-skip:hover:not(:disabled) {
  color: var(--text, #1a1d28);
}

.nrai-ghost {
  background: transparent;
  color: var(--muted, #6b7394);
  font-weight: 500;
  padding: 10px 12px;
}

.nrai-ghost:hover:not(:disabled) {
  color: var(--text, #1a1d28);
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  #nrai-panel {
    border-radius: 16px;
    max-height: 94vh;
  }

  #nrai-steps {
    padding: 18px 16px 6px;
  }

  .nrai-stitle {
    font-size: 17px;
  }

  .nrai-btn {
    padding: 9px 15px;
    font-size: 13px;
  }

  #nrai-result {
    max-height: 160px;
  }

  #nrai-result-wrap {
    margin: 14px 16px 4px;
  }

  #nrai-error {
    margin: 6px 16px 4px;
  }
}

/* ═══════════════════════════════════════════════════════ end AI stepper ══ */




/* ═══════════════════════════════════════════════════════════════════════════
   AI STEPPER OVERLAY — add-on CSS for styles.css
   Paste at the very END of styles.css.
   Panel is anchored INSIDE the .nr-card, not fullscreen.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Star trigger ──────────────────────────────────────────────────────── */
.nr-head-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nr-ai-star {
  all: unset;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  color: var(--muted, #6b7394);
  opacity: 0.6;
  transition: opacity 0.15s, color 0.15s, transform 0.22s cubic-bezier(.4, 0, .2, 1);
  user-select: none;
  padding: 2px 4px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nr-ai-star:hover {
  opacity: 1;
  color: var(--accent, #4255ff);
  transform: scale(1.28) rotate(20deg);
}

.nr-ai-star:focus-visible {
  outline: 2px solid var(--accent, #4255ff);
  outline-offset: 3px;
}

/* ── Card host — relative so panel can overlay it ─────────────────────── */
.nrai-card-host {
  position: relative;
}

/* While panel is open, dim the card content behind it */
.nrai-card-host--active>*:not(#nrai-panel) {
  pointer-events: none;
}

/* ── Panel — sits inside the card, covers it fully ────────────────────── */
#nrai-panel {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 100;
  background: #ffffff;
  border-radius: inherit;
  border-radius: 16px;
  box-shadow:
    0 0 0 2px rgba(66, 85, 255, 0.13),
    0 8px 32px rgba(26, 29, 40, 0.16),
    0 2px 8px rgba(26, 29, 40, 0.08);
  display: none;
  flex-direction: column;
  overflow: hidden;
  min-height: 480px;
}

#nrai-panel.nrai-on {
  display: flex;
  animation: nrai-rise 0.22s cubic-bezier(.4, 0, .2, 1);
}

@keyframes nrai-rise {
  from {
    opacity: 0;
    transform: scale(0.97) translateY(6px);
  }

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

/* ── Header ────────────────────────────────────────────────────────────── */
#nrai-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid #f0f1fa;
  flex-shrink: 0;
  background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
}

#nrai-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

#nrai-sparkle {
  font-size: 20px;
  color: var(--accent, #4255ff);
  flex-shrink: 0;
  animation: nrai-spin-in 0.5s cubic-bezier(.4, 0, .2, 1) both;
}

@keyframes nrai-spin-in {
  from {
    transform: rotate(-60deg) scale(0.5);
    opacity: 0;
  }

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

#nrai-htitle {
  font-size: 13px;
  font-weight: 700;
  color: var(--text, #1a1d28);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

#nrai-htarget {
  font-size: 11px;
  color: var(--accent, #4255ff);
  font-weight: 600;
  margin-top: 2px;
  letter-spacing: 0.01em;
}

#nrai-close {
  all: unset;
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--muted, #6b7394);
  transition: background 0.12s, color 0.12s;
  flex-shrink: 0;
}

#nrai-close:hover {
  background: #f0f1fa;
  color: var(--text, #1a1d28);
}

/* ── Progress bar ──────────────────────────────────────────────────────── */
#nrai-prog {
  height: 3px;
  background: #f0f1fa;
  flex-shrink: 0;
}

#nrai-prog-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent, #4255ff) 0%, #00c98e 100%);
  border-radius: 0 2px 2px 0;
  transition: width 0.38s cubic-bezier(.4, 0, .2, 1);
  width: 0%;
}

/* ── Scrollable body ───────────────────────────────────────────────────── */
#nrai-body {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #e3e6f0 transparent;
}

/* ── Steps wrapper ─────────────────────────────────────────────────────── */
#nrai-steps-wrap {
  overflow: hidden;
}

#nrai-steps {
  padding: 20px 20px 8px;
  will-change: transform, opacity;
}

/* ── Step content ──────────────────────────────────────────────────────── */
.nrai-step {
  display: flex;
  flex-direction: column;
}

.nrai-counter {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent, #4255ff);
  margin-bottom: 5px;
}

.nrai-counter-sep {
  opacity: 0.45;
}

.nrai-stitle {
  font-size: 18px;
  font-weight: 700;
  color: var(--text, #1a1d28);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 3px;
}

.nrai-ssub {
  font-size: 13px;
  color: var(--muted, #6b7394);
  line-height: 1.45;
  margin-bottom: 14px;
}

/* ── Chips ─────────────────────────────────────────────────────────────── */
.nrai-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 12px;
}

.nrai-chips-sm {
  gap: 5px;
  margin-bottom: 7px;
}

.nrai-chip {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  padding: 8px 15px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  color: var(--text, #1a1d28);
  background: #f4f5fb;
  border: 2px solid #e3e6f0;
  border-radius: 999px;
  line-height: 1;
  transition: background 0.11s, border-color 0.11s, color 0.11s, transform 0.09s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.nrai-chip:hover {
  background: rgba(66, 85, 255, 0.07);
  border-color: var(--accent, #4255ff);
  color: var(--accent, #4255ff);
}

.nrai-chip:active {
  transform: scale(0.93);
}

/* ✅ GREEN selected state — clear and satisfying */
.nrai-chip.nrai-chip-on {
  background: #e8f8ef;
  border-color: #27a05a;
  color: #1a6e3c;
  font-weight: 600;
}

.nrai-chip.nrai-chip-on::before {
  content: '✓ ';
  font-size: 11px;
  font-weight: 700;
}

.nrai-chip-sm {
  padding: 6px 12px;
  font-size: 12px;
}

/* ── Textarea fields ───────────────────────────────────────────────────── */
.nrai-ta {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 13px;
  font-size: 15px;
  font-family: inherit;
  font-weight: 400;
  color: var(--text, #1a1d28);
  background: #fafbff;
  border: 2px solid #e3e6f0;
  border-radius: 11px;
  outline: none;
  resize: vertical;
  min-height: 68px;
  line-height: 1.55;
  transition: border-color 0.14s, background 0.14s, box-shadow 0.14s;
}

.nrai-ta:focus {
  border-color: var(--accent, #4255ff);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(66, 85, 255, 0.10);
}

.nrai-ta::placeholder {
  color: #b8bcd4;
  font-size: 14px;
}

.nrai-ta-sm {
  font-size: 14px;
  min-height: 52px;
  padding: 9px 12px;
}

/* ── Multi-field groups ────────────────────────────────────────────────── */
.nrai-mfg {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 14px;
}

.nrai-mfl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #6b7394);
}

/* ── Result panel ──────────────────────────────────────────────────────── */
#nrai-result-wrap {
  margin: 16px 20px 4px;
  border-radius: 12px;
  border: 2px solid #e3e6f0;
  overflow: hidden;
  background: #fafbff;
}

#nrai-result-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent, #4255ff);
  padding: 9px 13px 7px;
  border-bottom: 1px solid #eeeffa;
  background: #f4f5fb;
}

#nrai-result {
  padding: 13px 15px;
  font-size: 14px;
  line-height: 1.72;
  color: var(--text, #1a1d28);
  white-space: pre-wrap;
  max-height: 200px;
  overflow-y: auto;
  scrollbar-width: thin;
}

#nrai-result-hint {
  font-size: 12px;
  color: var(--muted, #6b7394);
  padding: 7px 13px 10px;
  border-top: 1px solid #eeeffa;
  line-height: 1.45;
}

/* ── Error ─────────────────────────────────────────────────────────────── */
#nrai-error {
  margin: 8px 20px 4px;
  padding: 10px 13px;
  border-radius: 9px;
  background: #fff5f5;
  border: 1px solid #fcd0d0;
  font-size: 13px;
  color: #c0392b;
  line-height: 1.5;
}

/* ── Footer ────────────────────────────────────────────────────────────── */
#nrai-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px 16px;
  border-top: 1px solid #f0f1fa;
  flex-shrink: 0;
  background: #fff;
  gap: 8px;
}

#nrai-footer-r {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.nrai-btn {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
  padding: 11px 22px;
  line-height: 1;
  white-space: nowrap;
  transition: background 0.12s, opacity 0.12s, transform 0.09s, box-shadow 0.12s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.nrai-btn:active:not(:disabled) {
  transform: scale(0.95);
}

.nrai-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  transform: none !important;
}

.nrai-primary {
  background: var(--accent, #4255ff);
  color: #fff;
  box-shadow: 0 2px 8px rgba(66, 85, 255, 0.22);
}

.nrai-primary:hover:not(:disabled) {
  background: #3346e8;
  box-shadow: 0 4px 14px rgba(66, 85, 255, 0.33);
}

.nrai-generate {
  background: linear-gradient(135deg, var(--accent, #4255ff) 0%, #8c52ff 100%);
  color: #fff;
  box-shadow: 0 2px 10px rgba(66, 85, 255, 0.28);
}

.nrai-generate:hover:not(:disabled) {
  filter: brightness(1.07);
  box-shadow: 0 4px 18px rgba(66, 85, 255, 0.40);
}

.nrai-inject {
  background: #e8f8ef;
  color: #1a6e3c;
  border: 2px solid #b8e8c8;
  font-weight: 700;
}

.nrai-inject:hover:not(:disabled) {
  background: #d2f0e0;
  border-color: #27a05a;
}

.nrai-skip {
  background: transparent;
  color: var(--muted, #6b7394);
  font-size: 13px;
  font-weight: 500;
  padding: 11px 14px;
}

.nrai-skip:hover:not(:disabled) {
  color: var(--text, #1a1d28);
}

.nrai-ghost {
  background: transparent;
  color: var(--muted, #6b7394);
  font-weight: 500;
  padding: 11px 12px;
}

.nrai-ghost:hover:not(:disabled) {
  color: var(--text, #1a1d28);
}

/* ── Responsive — narrower cards on mobile ─────────────────────────────── */
@media (max-width: 480px) {
  #nrai-steps {
    padding: 16px 14px 6px;
  }

  .nrai-stitle {
    font-size: 16px;
  }

  .nrai-btn {
    padding: 10px 14px;
    font-size: 13px;
  }

  #nrai-result {
    max-height: 140px;
  }

  .nrai-chip {
    padding: 7px 12px;
    font-size: 12px;
  }
}

/* ══════════════════════════════════════════════════ end AI stepper ═══════ */




/* ═══════════════════════════════════════════════════════════════════════════
   AI STEPPER OVERLAY — add-on CSS for styles.css
   Paste at the very END of styles.css.
   Panel is anchored INSIDE the .nr-card, not fullscreen.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Star trigger ──────────────────────────────────────────────────────── */
.nr-head-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nr-ai-star {
  all: unset;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  color: var(--muted, #6b7394);
  opacity: 0.6;
  transition: opacity 0.15s, color 0.15s, transform 0.22s cubic-bezier(.4, 0, .2, 1);
  user-select: none;
  padding: 2px 4px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nr-ai-star:hover {
  opacity: 1;
  color: var(--accent, #4255ff);
  transform: scale(1.28) rotate(20deg);
}

.nr-ai-star:focus-visible {
  outline: 2px solid var(--accent, #4255ff);
  outline-offset: 3px;
}

/* ── Card host — relative so panel can overlay it ─────────────────────── */
.nrai-card-host {
  position: relative;
}

/* While panel is open, dim the card content behind it */
.nrai-card-host--active>*:not(#nrai-panel) {
  pointer-events: none;
}

/* ── Panel — sits inside the card, covers it fully ────────────────────── */
#nrai-panel {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 100;
  background: #ffffff;
  border-radius: inherit;
  border-radius: 16px;
  box-shadow:
    0 0 0 2px rgba(66, 85, 255, 0.13),
    0 8px 32px rgba(26, 29, 40, 0.16),
    0 2px 8px rgba(26, 29, 40, 0.08);
  display: none;
  flex-direction: column;
  overflow: hidden;
  min-height: 480px;
}

#nrai-panel.nrai-on {
  display: flex;
  animation: nrai-rise 0.22s cubic-bezier(.4, 0, .2, 1);
}

@keyframes nrai-rise {
  from {
    opacity: 0;
    transform: scale(0.97) translateY(6px);
  }

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

/* ── Drag handle ───────────────────────────────────────────────────────── */
#nrai-drag-handle {
  font-size: 16px;
  color: var(--muted, #6b7394);
  opacity: 0.35;
  cursor: grab;
  padding: 2px 4px 2px 0;
  line-height: 1;
  flex-shrink: 0;
  transition: opacity 0.12s;
  user-select: none;
}

#nrai-header:hover #nrai-drag-handle {
  opacity: 0.7;
}

#nrai-panel.nrai-dragging #nrai-drag-handle {
  cursor: grabbing;
  opacity: 1;
}

/* When detached to body — fixed, floats freely, bigger, shadow elevated */
body>#nrai-panel {
  position: fixed;
  width: 540px;
  max-width: calc(100vw - 32px);
  max-height: 88vh;
  inset: auto;
  border-radius: 18px;
  box-shadow:
    0 0 0 1.5px rgba(66, 85, 255, 0.12),
    0 16px 48px rgba(26, 29, 40, 0.22),
    0 4px 12px rgba(26, 29, 40, 0.10);
}

#nrai-panel.nrai-dragging {
  box-shadow:
    0 0 0 2px rgba(66, 85, 255, 0.18),
    0 24px 64px rgba(26, 29, 40, 0.28),
    0 8px 24px rgba(26, 29, 40, 0.14);
  transition: box-shadow 0.1s;
}

/* Header cursor when draggable */
#nrai-header {
  cursor: grab;
}

#nrai-panel.nrai-dragging #nrai-header {
  cursor: grabbing;
}

#nrai-header button {
  cursor: pointer;
}


#nrai-header {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid #f0f1fa;
  flex-shrink: 0;
  background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
}

#nrai-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

#nrai-sparkle {
  font-size: 20px;
  color: var(--accent, #4255ff);
  flex-shrink: 0;
  animation: nrai-spin-in 0.5s cubic-bezier(.4, 0, .2, 1) both;
}

@keyframes nrai-spin-in {
  from {
    transform: rotate(-60deg) scale(0.5);
    opacity: 0;
  }

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

#nrai-htitle {
  font-size: 13px;
  font-weight: 700;
  color: var(--text, #1a1d28);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

#nrai-htarget {
  font-size: 11px;
  color: var(--accent, #4255ff);
  font-weight: 600;
  margin-top: 2px;
  letter-spacing: 0.01em;
}

#nrai-close {
  all: unset;
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--muted, #6b7394);
  transition: background 0.12s, color 0.12s;
  flex-shrink: 0;
}

#nrai-close:hover {
  background: #f0f1fa;
  color: var(--text, #1a1d28);
}

/* ── Progress bar ──────────────────────────────────────────────────────── */
#nrai-prog {
  height: 3px;
  background: #f0f1fa;
  flex-shrink: 0;
}

#nrai-prog-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent, #4255ff) 0%, #00c98e 100%);
  border-radius: 0 2px 2px 0;
  transition: width 0.38s cubic-bezier(.4, 0, .2, 1);
  width: 0%;
}

/* ── Scrollable body ───────────────────────────────────────────────────── */
#nrai-body {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #e3e6f0 transparent;
}

/* ── Steps wrapper ─────────────────────────────────────────────────────── */
#nrai-steps-wrap {
  overflow: hidden;
}

#nrai-steps {
  padding: 20px 20px 8px;
  will-change: transform, opacity;
}

/* ── Step content ──────────────────────────────────────────────────────── */
.nrai-step {
  display: flex;
  flex-direction: column;
}

.nrai-counter {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent, #4255ff);
  margin-bottom: 5px;
}

.nrai-counter-sep {
  opacity: 0.45;
}

.nrai-stitle {
  font-size: 18px;
  font-weight: 700;
  color: var(--text, #1a1d28);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 3px;
}

.nrai-ssub {
  font-size: 13px;
  color: var(--muted, #6b7394);
  line-height: 1.45;
  margin-bottom: 14px;
}

/* ── Chips ─────────────────────────────────────────────────────────────── */
.nrai-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 12px;
}

.nrai-chips-sm {
  gap: 5px;
  margin-bottom: 7px;
}

.nrai-chip {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  padding: 8px 15px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  color: var(--text, #1a1d28);
  background: #f4f5fb;
  border: 2px solid #e3e6f0;
  border-radius: 999px;
  line-height: 1;
  transition: background 0.11s, border-color 0.11s, color 0.11s, transform 0.09s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.nrai-chip:hover {
  background: rgba(66, 85, 255, 0.07);
  border-color: var(--accent, #4255ff);
  color: var(--accent, #4255ff);
}

.nrai-chip:active {
  transform: scale(0.93);
}

/* ✅ GREEN selected state — clear and satisfying */
.nrai-chip.nrai-chip-on {
  background: #e8f8ef;
  border-color: #27a05a;
  color: #1a6e3c;
  font-weight: 600;
}

.nrai-chip.nrai-chip-on::before {
  content: '✓ ';
  font-size: 11px;
  font-weight: 700;
}

.nrai-chip-sm {
  padding: 6px 12px;
  font-size: 12px;
}

/* ── Textarea fields ───────────────────────────────────────────────────── */
.nrai-ta {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 13px;
  font-size: 15px;
  font-family: inherit;
  font-weight: 400;
  color: var(--text, #1a1d28);
  background: #fafbff;
  border: 2px solid #e3e6f0;
  border-radius: 11px;
  outline: none;
  resize: vertical;
  min-height: 68px;
  line-height: 1.55;
  transition: border-color 0.14s, background 0.14s, box-shadow 0.14s;
}

.nrai-ta:focus {
  border-color: var(--accent, #4255ff);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(66, 85, 255, 0.10);
}

.nrai-ta::placeholder {
  color: #b8bcd4;
  font-size: 14px;
}

.nrai-ta-sm {
  font-size: 14px;
  min-height: 52px;
  padding: 9px 12px;
}

/* ── Multi-field groups ────────────────────────────────────────────────── */
.nrai-mfg {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 14px;
}

.nrai-mfl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #6b7394);
}

/* ── Result panel ──────────────────────────────────────────────────────── */
#nrai-result-wrap {
  margin: 16px 20px 4px;
  border-radius: 12px;
  border: 2px solid #e3e6f0;
  overflow: hidden;
  background: #fafbff;
}

#nrai-result-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent, #4255ff);
  padding: 9px 13px 7px;
  border-bottom: 1px solid #eeeffa;
  background: #f4f5fb;
}

#nrai-result {
  padding: 13px 15px;
  font-size: 14px;
  line-height: 1.72;
  color: var(--text, #1a1d28);
  white-space: pre-wrap;
  max-height: 200px;
  overflow-y: auto;
  scrollbar-width: thin;
}

#nrai-result-hint {
  font-size: 12px;
  color: var(--muted, #6b7394);
  padding: 7px 13px 10px;
  border-top: 1px solid #eeeffa;
  line-height: 1.45;
}

/* ── Error ─────────────────────────────────────────────────────────────── */
#nrai-error {
  margin: 8px 20px 4px;
  padding: 10px 13px;
  border-radius: 9px;
  background: #fff5f5;
  border: 1px solid #fcd0d0;
  font-size: 13px;
  color: #c0392b;
  line-height: 1.5;
}

/* ── Footer ────────────────────────────────────────────────────────────── */
#nrai-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px 16px;
  border-top: 1px solid #f0f1fa;
  flex-shrink: 0;
  background: #fff;
  gap: 8px;
}

#nrai-footer-r {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.nrai-btn {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
  padding: 11px 22px;
  line-height: 1;
  white-space: nowrap;
  transition: background 0.12s, opacity 0.12s, transform 0.09s, box-shadow 0.12s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.nrai-btn:active:not(:disabled) {
  transform: scale(0.95);
}

.nrai-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  transform: none !important;
}

.nrai-primary {
  background: var(--accent, #4255ff);
  color: #fff;
  box-shadow: 0 2px 8px rgba(66, 85, 255, 0.22);
}

.nrai-primary:hover:not(:disabled) {
  background: #3346e8;
  box-shadow: 0 4px 14px rgba(66, 85, 255, 0.33);
}

.nrai-generate {
  background: linear-gradient(135deg, var(--accent, #4255ff) 0%, #8c52ff 100%);
  color: #fff;
  box-shadow: 0 2px 10px rgba(66, 85, 255, 0.28);
}

.nrai-generate:hover:not(:disabled) {
  filter: brightness(1.07);
  box-shadow: 0 4px 18px rgba(66, 85, 255, 0.40);
}

.nrai-inject {
  background: #e8f8ef;
  color: #1a6e3c;
  border: 2px solid #b8e8c8;
  font-weight: 700;
}

.nrai-inject:hover:not(:disabled) {
  background: #d2f0e0;
  border-color: #27a05a;
}

.nrai-skip {
  background: transparent;
  color: var(--muted, #6b7394);
  font-size: 13px;
  font-weight: 500;
  padding: 11px 14px;
}

.nrai-skip:hover:not(:disabled) {
  color: var(--text, #1a1d28);
}

.nrai-ghost {
  background: transparent;
  color: var(--muted, #6b7394);
  font-weight: 500;
  padding: 11px 12px;
}

.nrai-ghost:hover:not(:disabled) {
  color: var(--text, #1a1d28);
}

/* ── Responsive — narrower cards on mobile ─────────────────────────────── */
@media (max-width: 480px) {
  #nrai-steps {
    padding: 16px 14px 6px;
  }

  .nrai-stitle {
    font-size: 16px;
  }

  .nrai-btn {
    padding: 10px 14px;
    font-size: 13px;
  }

  #nrai-result {
    max-height: 140px;
  }

  .nrai-chip {
    padding: 7px 12px;
    font-size: 12px;
  }
}

/* ══════════════════════════════════════════════════ end AI stepper ═══════ */



.global-notice {
  background: #fff3cd;
  border-bottom: 1px solid #ffeeba;
  color: #856404;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  position: sticky;
  top: 0;
  z-index: 999;
}

.global-notice.red {
  background: #f8d7da;
  border-bottom: 1px solid #f5c6cb;
  color: #721c24;
}

.global-notice.hidden {
  display: none;
}

.notice-close {
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  padding-left: 12px;
}




.board-tab-view {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100%;
}

.board-popout-pill {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  border: 1px solid var(--border);
  background: #eef0f4;
  color: #5f6778;
  border-radius: 999px;
  padding: 8px 14px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.board-popout-pill:hover {
  background: #e3e7ee;
}

.board-popout-overlay {
  position: fixed;
  inset: 0;
  z-index: 20000;
  pointer-events: none;
}

.board-popout-window {
  position: fixed;
  top: 88px;
  right: 28px;
  width: 720px;
  height: 520px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, .22);
  overflow: hidden;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
}

.board-popout-toolbar {
  height: 52px;
  padding: 0 12px 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  background: #f7f8fb;
  cursor: move;
  user-select: none;
}

.board-popout-title {
  font-weight: 800;
  letter-spacing: -.2px;
}

.board-popout-body {
  flex: 1;
  min-height: 0;
}

.board-popout-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.board-popout-close {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: #ef4444;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(239, 68, 68, .35);
  animation: boardClosePulse 1.8s infinite;
}

.board-popout-close span {
  position: relative;
  width: 14px;
  height: 14px;
  display: block;
}

.board-popout-close span::before,
.board-popout-close span::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 0;
  width: 2px;
  height: 14px;
  background: #fff;
  border-radius: 2px;
}

.board-popout-close span::before {
  transform: rotate(45deg);
}

.board-popout-close span::after {
  transform: rotate(-45deg);
}

.board-popout-resize {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 18px;
  height: 18px;
  cursor: nwse-resize;
}

@keyframes boardClosePulse {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, .35);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}


.tab-btn--board {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0;
  overflow: hidden;
}

.tab-btn--board .tab-btn-main {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  text-align: left;
  flex: 1 1 auto;
  min-width: 0;
  padding: 16px 12px 16px 26px;
  cursor: pointer;
}

.tab-btn--board .tab-btn-main span {
  display: block;
}

.tab-btn--board .tab-btn-popout {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  width: 34px;
  height: 34px;
  margin-right: 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
}

.tab-btn--board .tab-btn-popout:hover {
  background: var(--hover);
  color: var(--accent);
}

.tab-btn--board.active .tab-btn-popout {
  color: var(--accent);
}



.board-popout-resize {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 28px;
  height: 28px;
  cursor: nwse-resize;
  z-index: 3;
}