/* Svitmo LMS design system — "Смарагд". Tokens first; every component below refers to them only.
   The same tokens live in static/design/tokens.json (for Figma); keep the two in sync. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/static/vendor/fonts/inter-cyrillic-wght-normal.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/static/vendor/fonts/inter-cyrillic-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/static/vendor/fonts/inter-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/static/vendor/fonts/inter-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ===== tokens ===== */
:root {
  color-scheme: light;
  --bg: #F7F6F2;
  --surface: #FFFFFF;
  --surface-2: #F2F2EC;
  --text: #1A1F1C;
  --text-2: #3C4540;
  --muted: #66706A;
  --border: #E7E7E0;
  --border-strong: #D2D5CC;

  --accent: #0E7C73;
  --accent-hover: #0B6A62;
  --accent-soft: #E1F2EF;
  --accent-text: #0B6259;
  --on-accent: #FFFFFF;

  --ok: #2E8540;       --ok-soft: #E5F3E8;
  --warn: #B7791F;     --warn-soft: #FBF1DE;
  --bad: #C2413A;      --bad-soft: #FBE9E7;
  --quiz: #6D4FD8;     --quiz-soft: #EFEBFD;

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  /* amber = the sun of the wordmark: "done" (a finished course is a sun) and "the next thing" */
  --spark: #EE9B2D;
  --spark-soft: #FDF1DF;
  --shadow-sm: none;
  --shadow: 0 1px 3px rgba(20, 32, 26, .06), 0 6px 16px rgba(20, 32, 26, .05);
  --shadow-lg: 0 16px 40px rgba(20, 32, 26, .16);
  --ring: 0 0 0 3px rgba(14, 124, 115, .22);
}
/* Dark theme. Set by a tiny script in index.html from the user's choice (or the OS when "system"). */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0F1412;
  --surface: #171E1B;
  --surface-2: #1D2622;
  --text: #E8EFEB;
  --text-2: #C9D3CE;
  --muted: #93A39B;
  --border: #26312C;
  --border-strong: #34413B;

  --accent: #3CC2AE;
  --accent-hover: #5AD3C0;
  --accent-soft: #13322D;
  --accent-text: #6FDCC9;
  --on-accent: #08201C;

  --ok: #4CC27F;       --ok-soft: #17301F;
  --warn: #F0B252;     --warn-soft: #3A2C15;
  --bad: #FF7A70;      --bad-soft: #3A1C1C;
  --quiz: #A895FF;     --quiz-soft: #2B2350;

  --spark: #F2AE4F;
  --spark-soft: #3A2C15;
  --shadow-sm: none;
  --shadow: 0 1px 3px rgba(0, 0, 0, .35), 0 6px 16px rgba(0, 0, 0, .25);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, .5);
  --ring: 0 0 0 3px rgba(60, 194, 174, .3);
}

/* ===== base ===== */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 15px/1.55 var(--font); font-feature-settings: "cv11";
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a { color: var(--accent-text); text-underline-offset: 2px; }
h2 { font-size: 26px; font-weight: 700; letter-spacing: -.025em; line-height: 1.2; margin: 0 0 16px; }
h3 { font-size: 16px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 14px; }
strong, b { font-weight: 600; }
::selection { background: var(--accent-soft); }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.center { text-align: center; }
.hidden { display: none !important; }
.error { color: var(--bad); font-size: 14px; min-height: 1.5em; }
.ok { color: var(--ok); font-size: 14px; min-height: 1.5em; }
.draft { color: var(--warn); }
.svg-icon { display: inline-flex; width: 18px; height: 18px; flex: none; }
.svg-icon svg { width: 100%; height: 100%; }

/* ===== layout ===== */
.wrap { max-width: 1080px; margin: 0 auto; padding: 32px 20px 80px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row.nowrap { flex-wrap: nowrap; }
.spread { justify-content: space-between; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 20px; margin-bottom: 14px; box-shadow: var(--shadow-sm);
}

/* ===== logo ===== */
.logo {
  /* the Svitmo LMS mark (static/brand/mark.svg: the amber sun, no tile); favicon and brand previews */
  display: inline-block; width: 26px; height: 26px; flex: none; border-radius: 7px;
  background: url("/static/brand/mark.svg") center / 100% 100% no-repeat;
}

/* the wordmark (option E, 2026-10-22): "Svitm" + an amber sun as the o + "LMS" lighter. No separate mark in headers. */
.wordmark { display: inline-flex; align-items: baseline; white-space: nowrap; }
.wordmark .wm-o { display: inline-block; width: .5em; height: .5em; margin-left: .03em; border-radius: 50%; background: #EE9B2D; }
.wordmark .wm-lms { margin-left: .28em; font-weight: 400; color: var(--muted); }

.brand-logo { display: block; max-height: 30px; max-width: 170px; object-fit: contain; }

/* ===== top bar (learners; admins on narrow screens) ===== */
.topbar {
  background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10;
}
.topbar-inner { max-width: 1080px; margin: 0 auto; padding: 0 20px; min-height: 60px; display: flex; align-items: center; gap: 24px; }
.brand, .sb-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; letter-spacing: -.01em; white-space: nowrap; }
#nav { display: flex; gap: 2px; flex: 1; }
#nav a { color: var(--muted); text-decoration: none; padding: 7px 12px; border-radius: var(--radius); white-space: nowrap; font-weight: 500; }
#nav a:hover { color: var(--text); background: var(--surface-2); }
#nav a.active { color: var(--accent-text); background: var(--accent-soft); font-weight: 600; }
.user { display: flex; align-items: center; gap: 14px; margin-left: auto; white-space: nowrap; }
.user-link { color: var(--text); text-decoration: none; display: flex; align-items: center; gap: 8px; }

/* ===== admin sidebar ===== */
.sidebar, .backdrop, .menu-btn { display: none; }
body.has-sidebar .sidebar {
  display: flex; flex-direction: column; width: 256px; background: var(--surface);
  border-right: 1px solid var(--border); padding: 18px 12px 12px;
}
.sb-head { position: relative; padding: 2px 10px 22px; }
.sb-close { display: none; position: absolute; top: -4px; right: 0; }
.sb-nav { flex: 1; overflow-y: auto; }
.sb-group { margin-bottom: 20px; }
.sb-group-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); padding: 0 10px 6px; }
.sb-nav a, .sb-user, .sb-logout {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: var(--radius);
  color: var(--text-2); text-decoration: none; font: inherit; font-weight: 500; text-align: left;
}
.sb-nav a .svg-icon { color: var(--muted); }
.sb-nav a:hover, .sb-user:hover, .sb-logout:hover { background: var(--surface-2); color: var(--text); }
.sb-nav a.active { background: var(--surface-2); color: var(--text); font-weight: 600; }
.sb-nav a.active::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--spark); margin-left: auto; }
.sb-nav a.active .svg-icon { color: var(--accent); }
.sb-switch {
  display: flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 9px 10px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text); text-decoration: none; font-weight: 600;
}
.sb-switch .svg-icon { color: var(--accent); }
.sb-switch-arrow { margin-left: auto; color: var(--muted); font-weight: 400; }
.sb-switch:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); }
#admin-switch { min-height: 32px; padding: 5px 10px; font-size: 13px; }
.sb-foot { border-top: 1px solid var(--border); padding-top: 10px; display: grid; gap: 2px; }
.sb-user { color: var(--text); }
.sb-user.active { background: var(--surface-2); }
.avatar {
  width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text);
  display: grid; place-items: center; font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.sb-user-text { display: grid; min-width: 0; line-height: 1.3; }
.sb-user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.sb-user-role { font-size: 12px; color: var(--muted); font-weight: 400; }
.sb-logout { border: none; background: none; cursor: pointer; min-height: 0; box-shadow: none; justify-content: flex-start; font-size: 15px; }

@media (min-width: 901px) {
  body.has-sidebar .shell { display: grid; grid-template-columns: 256px minmax(0, 1fr); min-height: 100vh; }
  body.has-sidebar .sidebar { position: sticky; top: 0; height: 100vh; }
  body.has-sidebar .topbar { display: none; }
  body.has-sidebar .wrap { max-width: 1080px; padding: 36px 40px 80px; }
  /* data pages (tables, reports, dashboards, the console): wider, capped so very wide screens stay readable */
  body.has-sidebar.wide .wrap { max-width: 1440px; }
}
@media (max-width: 900px) {
  body.has-sidebar .menu-btn { display: inline-flex; margin-left: -6px; }
  body.has-sidebar .sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 30; width: min(290px, 85vw);
    transform: translateX(-100%); visibility: hidden;
    transition: transform .22s ease, visibility 0s linear .22s;
    padding-top: calc(18px + env(safe-area-inset-top)); padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
  body.has-sidebar .sb-close { display: inline-flex; }
  body.nav-open .sidebar { transform: none; visibility: visible; transition: transform .22s ease; box-shadow: var(--shadow-lg); }
  body.has-sidebar .backdrop { display: block; position: fixed; inset: 0; z-index: 20; background: rgba(8, 16, 12, .4); opacity: 0; pointer-events: none; transition: opacity .22s; }
  body.nav-open .backdrop { opacity: 1; pointer-events: auto; }
  body.nav-open { overflow: hidden; }
  body.has-sidebar .topbar-inner { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar, .backdrop { transition: none !important; }
}

/* ===== controls ===== */
input[type=text], input[type=email], input[type=password], input[type=search], textarea, select {
  width: 100%; min-height: 38px; padding: 8px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--text); font: inherit; transition: border-color .12s, box-shadow .12s;
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .8; }
input:hover, textarea:hover, select:hover { border-color: color-mix(in srgb, var(--border-strong) 60%, var(--muted)); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
textarea { resize: vertical; min-height: 72px; line-height: 1.5; }
select {
  appearance: none; padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2366706A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 16px;
}
select:disabled, input:disabled { opacity: .6; cursor: default; }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }
label.field { display: block; margin-bottom: 14px; }
label.field > span, .field-label { display: block; font-size: 13px; font-weight: 550; color: var(--text-2); margin-bottom: 6px; }
label.field small { display: block; margin-top: 5px; font-size: 12px; }
label.field.check { display: flex; gap: 8px; align-items: center; align-self: end; padding-bottom: 12px; }
label.field.check span { margin: 0; color: var(--text); font-size: 15px; font-weight: 400; }
div.field { margin-bottom: 14px; }

button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 7px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--text); font: inherit; font-size: 14px; font-weight: 550; line-height: 1.3;
  cursor: pointer; text-decoration: none; box-shadow: var(--shadow-sm); transition: background .12s, border-color .12s, box-shadow .12s;
}
button:hover, .btn:hover { background: var(--surface-2); }
button:focus-visible, .btn:focus-visible, a:focus-visible { outline: none; box-shadow: var(--ring); }
button.primary, a.btn.primary, span.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
button.primary:hover, a.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
button.danger { color: var(--bad); }
button.danger:hover { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 35%, var(--border-strong)); }
button.link { border: none; background: none; color: var(--accent-text); padding: 0; min-height: 0; box-shadow: none; font-weight: 550; }
button.link:hover { text-decoration: underline; background: none; }
button.wide { width: 100%; min-height: 42px; }
button:disabled, button:disabled:hover { opacity: .45; cursor: default; background: var(--surface); }
button.primary:disabled { background: var(--accent); }
button.icon-only { width: 34px; min-height: 34px; padding: 0; color: var(--text-2); }
button.icon-only.danger { color: var(--bad); }
.icon-btn { border: none; background: transparent; padding: 6px; min-height: 0; color: var(--text); border-radius: var(--radius); box-shadow: none; }
.icon-btn:hover { background: var(--surface-2); }
.icon-btn .svg-icon { width: 22px; height: 22px; }
span.btn { flex: none; font-size: 13px; min-height: 32px; padding: 5px 12px; }

.badge { display: inline-flex; align-items: center; font-size: 12px; font-weight: 550; padding: 2px 9px; border-radius: 99px; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.badge.role-admin { background: var(--accent-soft); color: var(--accent-text); }
.badge.role-training_manager { background: var(--spark-soft); color: color-mix(in srgb, var(--spark) 60%, var(--text)); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.status { font-size: 13px; color: var(--muted); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .8; }
.status.on { color: var(--ok); }

/* ===== page pieces ===== */
.auth { max-width: 400px; margin: 9vh auto 0; }
.auth-brand { display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 700; font-size: 20px; margin-bottom: 20px; }
.auth-brand .logo { width: 34px; height: 34px; border-radius: 9px; }
.auth .card { padding: 28px; box-shadow: var(--shadow); }
.auth h2 { font-size: 22px; }
.auth .consent { margin: 12px 0 0; line-height: 1.5; }
.auth .consent-check { align-items: flex-start; gap: 10px; margin: 4px 0 12px; line-height: 1.45; }
.auth .consent-check input { margin-top: 3px; flex: none; }
.auth-legal { text-align: center; font-size: 13px; color: var(--muted); margin-top: 14px; }
.auth-legal a { color: var(--muted); }
.page-head { margin-bottom: 20px; }
.page-head h2 { margin: 0; }
.page-head .muted { margin-top: 4px; }
a.back { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); text-decoration: none; margin-bottom: 12px; font-size: 14px; font-weight: 500; }
a.back:hover { color: var(--text); }
.course-head { margin-bottom: 20px; }
.course-head h2 { margin: 0; overflow-wrap: anywhere; }
.course-head p { margin: 8px 0 0; }
.section-title { margin: 32px 0 12px; font-size: 18px; }
.type-label { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 500; }
.type-label .type-icon { width: 26px; height: 26px; }
.type-label .type-icon .svg-icon { width: 15px; height: 15px; }
.empty { text-align: center; padding: 44px 20px; }
.empty strong { display: block; font-size: 16px; }
.empty-icon { width: 48px; height: 48px; margin: 0 auto 12px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.empty-icon .svg-icon { width: 24px; height: 24px; }
.empty p { margin: 6px auto 0; max-width: 52ch; }
.notice { background: var(--ok-soft); border-color: transparent; box-shadow: none; }
.notice pre { background: var(--surface); padding: 10px 12px; border-radius: var(--radius); margin: 10px 0; white-space: pre-wrap; word-break: break-all; font-size: 14px; }
.notice-bad { background: var(--bad-soft); border-color: transparent; color: var(--bad); box-shadow: none; }
dl.props { display: grid; grid-template-columns: 150px 1fr; gap: 12px 16px; margin: 0; }
dl.props dt { color: var(--muted); }
dl.props dd { margin: 0; overflow-wrap: anywhere; font-weight: 500; }

/* settings: logo & brand colour */
.logo-setting { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.logo-preview { width: 140px; height: 64px; border: 1px dashed var(--border-strong); border-radius: var(--radius); display: grid; place-items: center; background: var(--surface-2); padding: 8px; }
.logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-preview .logo { width: 34px; height: 34px; border-radius: 9px; }
.swatch-row { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch-btn { flex-direction: column; gap: 6px; min-height: 0; padding: 8px 10px 6px; min-width: 84px; box-shadow: none; }
.swatch-btn span { width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.swatch-btn em { font-style: normal; font-size: 12px; font-weight: 500; color: var(--muted); }
.swatch-btn[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--ring); }
.swatch-btn[aria-pressed="true"] em { color: var(--accent-text); }
input[type=color] { width: 44px; height: 38px; padding: 3px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); cursor: pointer; }
.hex-input { width: 110px !important; font-family: ui-monospace, "SF Mono", Menlo, monospace; text-transform: uppercase; }
.lang-switch { display: flex; justify-content: center; gap: 4px; margin-top: 18px; }
.lang-switch button { min-height: 30px; padding: 4px 10px; font-size: 13px; border-color: transparent; background: transparent; box-shadow: none; color: var(--muted); }
.lang-switch button.active { color: var(--text); background: var(--surface); border-color: var(--border); }

/* admin preview of a course */
.preview-banner {
  position: sticky; top: 12px; z-index: 5; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: -8px 0 18px; padding: 10px 14px; border-radius: var(--radius-lg);
  background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); color: var(--text);
}
.preview-banner > .svg-icon { color: var(--warn); }
.preview-banner .grow { flex: 1; min-width: 200px; }
.preview-banner .btn { min-height: 32px; padding: 5px 12px; font-size: 13px; }
@media (max-width: 900px) { .preview-banner { top: 68px; } }

/* sign-in: SSO buttons, "or" divider */
.sso-box:empty { display: none; }
.sso-box { display: grid; gap: 8px; margin-bottom: 4px; }
.sso-btn { gap: 10px; min-height: 42px; font-weight: 600; }
.sso-mark { width: 18px; height: 18px; flex: none; background-size: 100% 100%; }
.sso-google .sso-mark { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23FFC107' d='M43.6 20.5H42V20H24v8h11.3C33.7 32.7 29.2 36 24 36c-6.6 0-12-5.4-12-12s5.4-12 12-12c3 0 5.8 1.1 7.9 3l5.7-5.7C34 6.1 29.3 4 24 4 12.9 4 4 12.9 4 24s8.9 20 20 20 20-8.9 20-20c0-1.3-.1-2.4-.4-3.5z'/%3E%3Cpath fill='%23FF3D00' d='m6.3 14.7 6.6 4.8C14.7 15.1 19 12 24 12c3 0 5.8 1.1 7.9 3l5.7-5.7C34 6.1 29.3 4 24 4 16.3 4 9.7 8.3 6.3 14.7z'/%3E%3Cpath fill='%234CAF50' d='M24 44c5.2 0 9.9-2 13.4-5.2l-6.2-5.2C29.2 35.1 26.7 36 24 36c-5.2 0-9.6-3.3-11.3-8l-6.5 5C9.5 39.6 16.2 44 24 44z'/%3E%3Cpath fill='%231976D2' d='M43.6 20.5H42V20H24v8h11.3c-.8 2.2-2.2 4.2-4.1 5.6l6.2 5.2C37 39.2 44 34 44 24c0-1.3-.1-2.4-.4-3.5z'/%3E%3C/svg%3E"); }
.sso-microsoft .sso-mark { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21'%3E%3Crect x='1' y='1' width='9' height='9' fill='%23F25022'/%3E%3Crect x='11' y='1' width='9' height='9' fill='%237FBA00'/%3E%3Crect x='1' y='11' width='9' height='9' fill='%2300A4EF'/%3E%3Crect x='11' y='11' width='9' height='9' fill='%23FFB900'/%3E%3C/svg%3E"); }
.auth-or { display: flex; align-items: center; gap: 12px; margin: 14px 0; color: var(--muted); font-size: 13px; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
label.field > span.row { display: flex; }
.status.invited { color: var(--warn); }

/* full-screen preview overlay (static/preview-overlay.js) */
body.preview-open { overflow: hidden; }
.preview-overlay { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; background: var(--bg); }
.preview-bar {
  display: flex; align-items: center; gap: 16px; padding: 10px 16px; min-height: 56px;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.preview-bar .seg { margin: 0; }
.preview-title { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.preview-title .svg-icon { color: var(--warn); }
.preview-stage { flex: 1; min-height: 0; display: flex; justify-content: center; overflow: auto; }
.preview-device { flex: 1; display: flex; }
.preview-frame { flex: 1; width: 100%; border: 0; background: var(--bg); }
.preview-stage.device-phone { padding: 24px 16px; background: var(--surface-2); }
.preview-stage.device-phone .preview-device {
  flex: none; width: 390px; max-width: 100%; height: min(844px, 100%); border-radius: 36px; padding: 10px;
  background: #111; box-shadow: var(--shadow-lg);
}
.preview-stage.device-phone .preview-frame { border-radius: 28px; }
@media (max-width: 640px) {
  .preview-title span.muted { display: none; }
  .preview-stage.device-phone { padding: 0; }
  .preview-stage.device-phone .preview-device { width: 100%; height: 100%; border-radius: 0; padding: 0; box-shadow: none; }
}

/* the app itself when shown inside the preview overlay */
html.embed-preview .topbar, html.embed-preview .sidebar, html.embed-preview .backdrop { display: none !important; }
html.embed-preview .wrap { padding-top: 24px; }

/* course status & deadlines */
.badge .svg-icon { width: 13px; height: 13px; margin-right: 4px; }
.badge.st-completed, .badge.st-overdue, .badge.st-in_progress, .badge.st-not_started, .badge.st-locked {
  background: none; padding: 2px 0; gap: 7px; color: var(--text-2); }
.badge.st-completed::before, .badge.st-overdue::before, .badge.st-in_progress::before, .badge.st-not_started::before, .badge.st-locked::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--dot, var(--border-strong)); }
.badge.st-completed { --dot: var(--ok); }
.badge.st-overdue { --dot: var(--bad); color: var(--bad); }
.badge.st-in_progress { --dot: var(--accent); }
.badge.st-locked { --dot: transparent; }
.badge.st-locked::before { box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.badge.st-completed .svg-icon, .badge.st-overdue .svg-icon { display: none; }
.badge.st-due { background: var(--surface-2); color: var(--text-2); }
.badge.st-soon { background: var(--spark-soft); color: var(--warn); }
.course-card.is-overdue { border-color: color-mix(in srgb, var(--bad) 40%, var(--border)); }
.overdue-text { color: var(--bad); }
.section-head { margin: 26px 0 10px; align-items: center; }
.section-head h3 { margin: 0; }
.due-rule { display: grid; gap: 10px; justify-items: start; }
.due-rule .seg { margin: 0; }
.due-extra:empty { display: none; }
.due-extra input[type=date] { width: 200px; }
.days-input { width: 90px !important; }
input[type=number], input[type=date] { min-height: 38px; padding: 8px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; }
input[type=number]:focus, input[type=date]:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.type-group { background: var(--surface-2); color: var(--text-2); }

/* notifications bell */
.bell { position: relative; }
.bell-btn { position: relative; }
.bell-count { position: absolute; top: 0; right: -2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; background: var(--bad); color: #fff; font-size: 11px; font-weight: 700; line-height: 17px; text-align: center; }
.bell-count.static { position: static; margin-left: 2px; }
.bell-panel { position: absolute; right: 0; top: calc(100% + 8px); width: min(380px, calc(100vw - 32px)); z-index: 40; padding: 12px; margin: 0; box-shadow: var(--shadow-lg); white-space: normal; }
.bell-head { margin-bottom: 6px; }
.bell-list { display: grid; max-height: 60vh; overflow-y: auto; }
.bell-item { display: flex; gap: 10px; padding: 10px 8px; border-radius: var(--radius); color: var(--text); text-decoration: none; }
.bell-item:hover { background: var(--surface-2); }
.bell-item .grow { display: grid; gap: 2px; min-width: 0; }
.bell-item .dot { width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; flex: none; background: transparent; }
.bell-item.unread .dot { background: var(--accent); }
.bell-item.unread .grow > span:first-child { font-weight: 600; }
.bell-item.k-overdue .dot { background: var(--bad); }
.bell-item:not(.unread).k-overdue .dot { background: transparent; }

/* activity type marks */
.type-icon { width: 32px; height: 32px; flex: none; border-radius: var(--radius); display: grid; place-items: center; }
.type-icon .svg-icon { width: 18px; height: 18px; }
.type-lesson { background: var(--accent-soft); color: var(--accent); }
.type-quiz { background: var(--quiz-soft); color: var(--quiz); }
.type-scorm { background: var(--warn-soft); color: var(--warn); }

/* ===== learner home & course page ===== */
.ring { position: relative; display: inline-grid; place-items: center; flex: none; }
.ring svg { position: absolute; inset: 0; }
.ring-track { fill: none; stroke: var(--surface-2); stroke-width: 4; }
.ring-value { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; transition: stroke-dasharray .6s ease; }
.ring.done .ring-value { stroke: var(--ok); }
.ring-text { position: relative; font-size: 11px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--text); }
.ring.done .ring-text { color: var(--ok); }
.ring.done .ring-text .svg-icon { width: 16px; height: 16px; }
.card-progress { gap: 10px; align-items: center; }

.continue-card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); padding: 0; overflow: hidden; margin-bottom: 8px; }
.continue-cover .cover { height: 100%; aspect-ratio: auto; min-height: 220px; }
.continue-cover, .done-card > a { display: block; text-decoration: none; }
.continue-body h2 a { color: var(--text); }
.continue-body h2 a:hover { color: var(--accent-text); }
.continue-body { padding: 24px 26px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.continue-kicker { font-size: 12px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text); }
.continue-body h2 { margin: 0; font-size: 24px; overflow-wrap: anywhere; }
.continue-next { display: flex; align-items: center; gap: 10px; }
.continue-foot { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 8px; flex-wrap: wrap; }
.continue-foot .grow { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }

.done-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.done-card { display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; margin: 0; }
.done-card .grow { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.done-card .muted .svg-icon { width: 14px; height: 14px; color: var(--ok); vertical-align: -2px; }
.cover.small { width: 72px; aspect-ratio: 1; border-radius: var(--radius); }
.cover.small .cover-letter { font-size: 26px; }
.btn.expired { color: var(--bad); }

.learner-head { display: flex; gap: 20px; align-items: flex-start; }
.learner-head > .grow, .completion-card > .grow, .done-card > .grow, .continue-foot > .grow { flex: 1; min-width: 0; }
.head-progress { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none; max-width: 220px; }
.head-progress .dsteps { justify-content: flex-end; }
.list-row.is-next { background: var(--accent-soft); }
.list-row.is-next:hover { background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface-2)); }

.completion-card { position: relative; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; overflow: hidden;
  background: linear-gradient(120deg, var(--ok-soft), var(--surface) 70%); border-color: color-mix(in srgb, var(--ok) 35%, var(--border)); }
.completion-card h3 { margin: 0 0 2px; font-size: 20px; }
.completion-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; flex: none; }
.completion-icon .svg-icon { width: 28px; height: 28px; }
.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti i { position: absolute; top: -12px; width: 8px; height: 12px; border-radius: 2px; opacity: 0; animation: confetti-fall ease-in forwards; }
@keyframes confetti-fall { 0% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 220px; rotate: 540deg; } }

/* ===== certificate: a sheet of A4 landscape paper, same on screen and in print ===== */
.cert-toolbar { margin-bottom: 14px; align-items: center; }
.cert-toolbar h2 { margin: 0; }
.verify-status { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-radius: var(--radius-lg); margin-bottom: 16px; }
.verify-status .svg-icon { width: 22px; height: 22px; flex: none; }
.verify-status.ok { background: var(--ok-soft); color: var(--ok); }
.verify-status.bad { background: var(--bad-soft); color: var(--bad); }
.verify-status strong { color: var(--text); }
.verify-status .small { color: var(--text-2); }
.certificate { container-type: inline-size; aspect-ratio: 297 / 210; width: 100%; max-width: 980px; margin: 0 auto 14px;
  background: #fff; color: #1b2330; border-radius: 6px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.certificate::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--cert) 22%, transparent) 0 22%, transparent 22.2%),
    radial-gradient(circle at 0 100%, color-mix(in srgb, var(--cert) 14%, transparent) 0 26%, transparent 26.2%); }
.cert-inner { position: absolute; inset: 3.2cqw; border: .25cqw solid var(--cert); border-radius: .6cqw; padding: 3.4cqw 4.4cqw 3cqw;
  display: flex; flex-direction: column; font-family: Inter, system-ui, sans-serif; }
.cert-top { display: flex; align-items: center; gap: 1.4cqw; }
.cert-logo { height: 4.4cqw; max-width: 16cqw; object-fit: contain; }
.cert-logo-mark { width: 3.6cqw; height: 3.6cqw; border-radius: .8cqw; background: var(--cert); }
.cert-org { font-weight: 650; font-size: 1.7cqw; }
.cert-no { margin-left: auto; font-size: 1.25cqw; color: #5b6573; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.cert-main { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: .6cqw; }
.cert-kicker { font-size: 4.6cqw; font-weight: 750; letter-spacing: .18em; text-transform: uppercase; color: var(--cert); line-height: 1; }
.cert-sub { font-size: 1.5cqw; letter-spacing: .12em; text-transform: uppercase; color: #5b6573; margin-bottom: 2.2cqw; }
.cert-name { font-size: 4.2cqw; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; padding: 0 2cqw .8cqw;
  border-bottom: .15cqw solid color-mix(in srgb, var(--cert) 45%, #d8dde3); max-width: 90%; overflow-wrap: anywhere; }
.cert-line { font-size: 1.6cqw; color: #5b6573; margin-top: 1.2cqw; }
.cert-course { font-size: 2.5cqw; font-weight: 650; max-width: 85%; overflow-wrap: anywhere; line-height: 1.25; }
.cert-bottom { display: flex; gap: 4cqw; align-items: flex-end; }
.cert-bottom div { display: flex; flex-direction: column; gap: .3cqw; }
.cert-bottom small { font-size: 1.05cqw; color: #5b6573; text-transform: uppercase; letter-spacing: .08em; }
.cert-bottom b { font-size: 1.45cqw; font-weight: 600; }
.cert-verify { margin-left: auto; text-align: right; align-items: flex-end; }
.cert-verify b { font-size: 1.2cqw; color: var(--cert); }

@media print {
  @page { size: A4 landscape; margin: 0; }
  html, body { background: #fff !important; }
  body * { visibility: hidden !important; }
  .certificate, .certificate * { visibility: visible !important; }
  .certificate { position: fixed; left: 0; top: 0; width: 297mm; max-width: none; height: 210mm; margin: 0; border-radius: 0; box-shadow: none; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

.cert-badge { margin-top: 10px; gap: 5px; background: var(--ok-soft); color: var(--ok); }
.cert-badge .svg-icon { width: 14px; height: 14px; }
.cert-settings { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px 4px; margin: 0 0 14px; }
.cert-settings legend { font-weight: 600; padding: 0 6px; }
.cert-settings label.check { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; cursor: pointer; }
.cert-settings label.check input { width: 18px; height: 18px; accent-color: var(--accent); }
.cert-settings .row.wrap-row { margin-bottom: 8px; }
.cert-settings .row.nowrap span { white-space: nowrap; }
.cert-settings .certificate { margin-top: 8px; }
.cert-link { color: var(--ok); display: inline-grid; }
.cert-link.expired { color: var(--bad); }
.cert-link .svg-icon { width: 18px; height: 18px; }

/* ===== plans & the platform console (static/console/) ===== */
.plan-warnings { display: grid; gap: 8px; margin-bottom: 14px; }
.plan-warning { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: var(--radius); background: var(--warn-soft); color: var(--text); }
.plan-warning .svg-icon { color: var(--warn); width: 18px; height: 18px; flex: none; margin-top: 1px; }
.usage { margin: 12px 0; display: grid; gap: 6px; }
.usage .progress > div.full { background: var(--bad); }
.ai-breakdown { margin: -6px 0 10px; }
.plan-feature-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.plan-feature-list .badge { gap: 4px; }
.plan-feature-list .svg-icon { width: 12px; height: 12px; }
.plan-lock { margin-left: 8px; font-size: 11px; background: var(--surface-2); color: var(--muted); }
.menu-item:disabled, .seg button:disabled { opacity: .6; cursor: not-allowed; }
.flag-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.spark.spark30 { grid-template-columns: repeat(30, 1fr); gap: 3px; }
.page-tools select { width: auto; }
.month-bars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; height: 140px; align-items: end; }
.month-bar { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 4px; text-align: center; }
.month-val { font-weight: 650; font-variant-numeric: tabular-nums; }
.plan-card { display: grid; gap: 10px; }
.plan-card > button { justify-self: start; }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0 14px; }
.plan-grid .field { margin-bottom: 8px; }
.console-badge { margin-left: 8px; font-size: 11px; font-weight: 650; letter-spacing: .02em; background: var(--text); color: var(--bg); }
.console .sb-user { cursor: default; }
.audit-list { display: grid; }
.audit-row { display: flex; gap: 14px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--border); }
.audit-row:first-child { border-top: 0; padding-top: 0; }
.audit-row .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.audit-when { flex: none; width: 110px; font-variant-numeric: tabular-nums; }
.audit-ip { flex: none; font-variant-numeric: tabular-nums; }
.note-card { margin-top: 14px; }
.lead-list { display: grid; }
.lead-row { display: flex; gap: 16px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--border); }
.lead-row:first-child { border-top: 0; padding-top: 0; }
.lead-row .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.lead-row select { width: auto; flex: none; }
.lead-msg { margin: 8px 0 0; white-space: pre-wrap; color: var(--text); }
.code-block { margin: 8px 0 0; padding: 12px 14px; border-radius: var(--radius); background: var(--surface-2); font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-x: auto; white-space: pre; }
.code-input { font: 600 22px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .3em; text-align: center; }
@media (max-width: 640px) {
  .audit-row { flex-wrap: wrap; gap: 2px 10px; }
  .audit-row .grow { flex-basis: 100%; order: 3; }
  .audit-ip { margin-left: auto; }
}
.plan-num, .plan-cur { width: 100% !important; }
.plan-feats { gap: 8px 18px; }
.plan-more summary { cursor: pointer; color: var(--muted); font-size: 14px; margin: 4px 0 10px; }
.plan-feats label.check { display: flex; gap: 6px; align-items: center; cursor: pointer; }
.plan-feats input { width: 17px; height: 17px; accent-color: var(--accent); }

/* ===== admin home ===== */
.steps-card h3 { margin: 0 0 2px; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.step { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius); }
.step.next { background: var(--accent-soft); }
.step .grow { flex: 1; min-width: 0; }
.step-title { font-weight: 600; }
.step.done .step-title { color: var(--muted); font-weight: 500; text-decoration: line-through; }
.step-mark { width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 650; font-size: 13px;
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.step.next .step-mark { background: var(--accent); color: #fff; border-color: var(--accent); }
.step.done .step-mark { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.step-mark .svg-icon { width: 15px; height: 15px; }
.stat-link { color: var(--text); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.stat-link:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
.stat-link.bad .stat-value { color: var(--bad); }
.dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 6px; }
.dash-grid .card { margin: 0; }
.dash-card h3 { margin: 0 0 10px; font-size: 16px; }
.dash-list { display: grid; }
.dash-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.dash-row:first-child { border-top: 0; }
.dash-row .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.dash-row button { flex: none; }
a.link-row { color: var(--text); text-decoration: none; }
a.link-row:hover .grow > div:first-child { color: var(--accent-text); }
.dash-empty { display: flex; align-items: center; gap: 8px; color: var(--ok); padding: 8px 0; }
.dash-empty .svg-icon { width: 18px; height: 18px; }
.done-dot { width: 26px; height: 26px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); display: grid; place-items: center; flex: none; }
.done-dot .svg-icon { width: 14px; height: 14px; }
.spark { display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; align-items: end; height: 64px; margin: 4px 0 10px; }
.spark-col { height: 100%; display: flex; align-items: flex-end; }
.spark-bar { width: 100%; background: var(--accent); border-radius: 3px 3px 0 0; opacity: .85; }

/* ===== dynamic groups ===== */
.dyn-badge { margin-left: 8px; gap: 4px; background: var(--quiz-soft); color: var(--quiz); vertical-align: middle; font-size: 11px; }
.dyn-badge .svg-icon { width: 12px; height: 12px; }
h2 .dyn-badge { font-size: 12px; }
.rules-editor { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin: 4px 0 14px; background: var(--surface-2); }
.rule-match { gap: 8px 10px; margin-bottom: 8px; }
.rule-match .seg { margin: 0; }
.rule-rows { display: grid; gap: 8px; }
.rule-row { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; display: grid; gap: 8px; }
.rule-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rule-head select { width: auto; min-width: 150px; }
.rule-head .icon-only { margin-left: auto; }
.rule-row input[type=text], .rule-row select:not(.rule-head select) { max-width: 360px; }
.rule-toggles { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-toggle { min-height: 0; padding: 4px 10px; border-radius: 99px; font-size: 13px; box-shadow: none; }
.chip-toggle.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }
.rule-preview { background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--radius); padding: 8px 12px; margin-bottom: 10px; display: grid; gap: 2px; }
.rule-preview strong { color: var(--text); }
.keep-check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.keep-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); flex: none; }
.rule-templates { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.rules-card { border-color: color-mix(in srgb, var(--quiz) 30%, var(--border)); }
.rules-card .grow { display: grid; gap: 4px; min-width: 0; flex: 1; }
.rules-title { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.rules-title .svg-icon { color: var(--quiz); width: 16px; height: 16px; }
.auto-groups { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.auto-groups .svg-icon { width: 14px; height: 14px; color: var(--quiz); }

/* ===== AI ===== */
.ai-btn { border-color: color-mix(in srgb, var(--quiz) 45%, var(--border-strong)); color: var(--quiz); }
.ai-btn:hover { background: var(--quiz-soft); }
.ai-panel { border-color: color-mix(in srgb, var(--quiz) 35%, var(--border)); margin-top: 14px; }
.ai-title { display: flex; align-items: center; gap: 8px; margin: 0; }
.ai-title .svg-icon { color: var(--quiz); }
.ai-panel .seg { margin: 6px 0 12px; }
.ai-lessons { display: grid; gap: 6px; }
.ai-panel label.check { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.ai-panel input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--accent); flex: none; }
.ai-options { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; margin: 14px 0 12px; }
.ai-options select { width: auto; }
.ai-note { margin: 12px 0 0; }
.ai-working { display: flex; gap: 14px; align-items: center; padding: 18px 4px; }
.sun-think { position: relative; width: 30px; height: 30px; flex: none; } /* AI is working: the wordmark's sun with pulsing rays */
.sun-think::before { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg stroke='%23EE9B2D' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 1.5V4M12 20v2.5M1.5 12H4M20 12h2.5M4.6 4.6l1.7 1.7M17.7 17.7l1.7 1.7M4.6 19.4l1.7-1.7M17.7 6.3l1.7-1.7'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; opacity: .55; }
.sun-think::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--spark); }
@media (prefers-reduced-motion: no-preference) { .sun-think::before { animation: sun-rays 2.4s ease-in-out infinite; } }
@keyframes sun-rays { 0%, 100% { opacity: .35; transform: rotate(0) scale(.86); } 50% { opacity: .9; transform: rotate(22deg) scale(1); } }
.spinner { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--quiz-soft); border-top-color: var(--quiz); animation: spin 0.8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.ai-draft { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--border); cursor: pointer; }
.ai-draft input { margin-top: 3px; }
.ai-draft .grow { flex: 1; min-width: 0; }
.ai-draft .opts { list-style: none; padding: 0; margin: 6px 0; }
.ai-draft .opts li { padding: 2px 0; }
.ai-draft .opts li.correct { color: var(--ok); font-weight: 600; }
.ai-draft .opts li.correct::before { content: "✓ "; }
.ai-draft .opts li:not(.correct)::before { content: "○ "; color: var(--muted); }
.ai-draft .opts.ordered { list-style: decimal; padding-left: 22px; }
.ai-draft .opts.ordered li::before { content: none; }
.ai-analysis { margin-bottom: 14px; }
.ai-analysis p { margin: 8px 0; }
.ai-findings { display: grid; gap: 10px; margin-top: 6px; }
.ai-finding { padding: 10px 12px; border-radius: var(--radius); background: var(--surface-2); display: grid; gap: 4px; }
.ai-finding .row { gap: 10px; align-items: center; }
.ai-lesson-preview { max-height: 420px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 18px; margin-top: 8px; }
.ai-panel > input[type=text] { width: 100%; }
.ai-badge { margin-left: 8px; background: var(--quiz-soft); color: var(--quiz); font-size: 11px; padding: 1px 7px; }

/* ===== my team ===== */
.team-scope { display: flex; gap: 8px; align-items: center; margin: -6px 0 14px; cursor: pointer; }
.team-scope input { width: 18px; height: 18px; accent-color: var(--accent); }
.team-member { padding: 0; overflow: hidden; margin-bottom: 10px; }
.team-head { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 18px; border: 0; border-radius: 0; background: none;
  box-shadow: none; text-align: left; color: var(--text); font: inherit; cursor: pointer; min-height: 0; }
.team-head:hover { background: var(--surface-2); }
.team-head .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.team-name { font-weight: 600; }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); display: grid;
  place-items: center; font-weight: 650; font-size: 13px; flex: none; }
.team-badges { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.team-head .chev { color: var(--muted); display: grid; transition: transform .15s; }
.team-head .chev .svg-icon { width: 18px; height: 18px; }
.team-member.open .chev { transform: rotate(90deg); }
.team-courses { border-top: 1px solid var(--border); padding: 4px 18px 8px 70px; }
.team-course { display: flex; align-items: center; gap: 16px; padding: 10px 0; border-top: 1px solid var(--border); }
.team-course:first-child { border-top: 0; }
.team-course .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.team-course-meta { gap: 8px; margin-top: 4px; }
.team-course-progress { width: 150px; flex: none; }
.team-remind-slot { width: 130px; flex: none; justify-content: center; }

/* ===== SCORM ===== */
.drop-zone { border: 1.5px dashed var(--border-strong); box-shadow: none; }
.drop-zone.over { border-color: var(--accent); background: var(--accent-soft); }
.drop-zone .center { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 0; text-align: center; }
.drop-zone .center p { margin: 0 0 8px; max-width: 460px; }
.scorm-head { align-items: flex-start; margin-bottom: 12px; }
.scorm-head h2 { margin: 0; }
.scorm-head p { margin: 6px 0 0; }
/* Most packages are made for 16:9: keep that shape, but never taller than the screen leaves room for */
.scorm-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: calc(100vh - 200px); min-height: min(420px, 70vh);
  border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: #fff; }
/* the top bar follows the page width, so their edges line up */
body.player .wrap, body.player .topbar-inner { max-width: 1440px; }
.scorm-stage:fullscreen, .scorm-stage.pseudo-full { height: 100vh; max-height: none; aspect-ratio: auto; border-radius: 0; border: 0; }
.scorm-stage.pseudo-full { position: fixed; inset: 0; z-index: 100; }
.scorm-frame { width: 100%; height: 100%; border: 0; display: block; }
.scorm-status { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; min-height: 38px; }
.scorm-status .btn { margin-left: auto; }

/* ===== users table ===== */
.card.table { padding: 0; overflow: hidden; }
.tr { display: grid; grid-template-columns: 1fr 150px 110px 100px; gap: 12px; align-items: center; padding: 14px 18px; border-top: 1px solid var(--border); }
.tr > div { min-width: 0; overflow-wrap: anywhere; }
.tr:not(.th):not(.edit):hover { background: var(--surface-2); }
.tr.th { border-top: none; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding-top: 11px; padding-bottom: 11px; background: var(--surface-2); }
.tr.inactive > div:first-child { opacity: .55; }
.tr.edit { display: block; background: var(--surface-2); }
.tr.edit .grid2 { margin-top: 12px; }
.actions { text-align: right; }
.users-table .tr { grid-template-columns: minmax(0, 1.4fr) minmax(0, 150px) minmax(0, 1fr) 130px 96px; }
.dept-cell { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-status { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 240px); gap: 8px; margin-bottom: 14px; }
.filters.three { grid-template-columns: minmax(0, 1fr) minmax(0, 200px) minmax(0, 200px); }
.filters.one { grid-template-columns: minmax(0, 420px); }
.report-filters.n2 { grid-template-columns: minmax(0, 1fr) minmax(0, 260px); }
.report-filters.n3 { grid-template-columns: minmax(0, 1fr) minmax(0, 220px) minmax(0, 240px); }
.report-filters.n5 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.report-filters.n5 input[type=search] { grid-column: 1 / -1; }

/* ===== reports ===== */
.report-list .list-row { padding: 16px 18px; }
.report-list .grow > div:first-child { margin-bottom: 2px; }
.report-icon { width: 38px; height: 38px; flex: none; border-radius: var(--radius); display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); }
.report-icon .svg-icon { width: 19px; height: 19px; }
.list-row .chev { color: var(--muted); display: grid; }
.list-row .chev .svg-icon { width: 18px; height: 18px; }
.pager { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 10px; }
.pager span { margin-right: 6px; }
.report-results { transition: opacity .15s; }
.report-results.loading { opacity: .55; }

/* ===== course cards ===== */
.course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.course-card {
  display: flex; flex-direction: column; color: var(--text); text-decoration: none; margin: 0; min-height: 140px;
  padding: 0; overflow: hidden;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.course-card-body { display: flex; flex-direction: column; flex: 1; padding: 16px 18px 18px; }
.course-card:hover .cover img { transform: scale(1.03); }

/* ===== course covers ===== */
.cover { position: relative; aspect-ratio: 16 / 7; overflow: hidden; background: var(--surface-2); flex: none; }
.cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.cover.gen { display: flex; align-items: flex-end; padding: 8% 7%;
  background-image:
    radial-gradient(rgb(255 255 255 / .2) 1.6px, transparent 1.9px),
    linear-gradient(135deg, var(--c1), var(--c2));
  background-size: 14px 14px, 100% 100%; }
.cover.gen::after { content: ""; position: absolute; right: 7%; top: 12%; width: 46px; height: 12px;
  background: radial-gradient(circle at 6px 6px, rgb(255 255 255 / .9) 5px, transparent 5.5px),
              radial-gradient(circle at 23px 6px, rgb(255 255 255 / .9) 5px, transparent 5.5px),
              radial-gradient(circle at 40px 6px, var(--spark) 5px, transparent 5.5px); }
.cover.tiny::after, .cover.small::after { display: none; }
.cover-letter { font-size: 40px; font-weight: 750; line-height: 1; color: rgb(255 255 255 / .95); letter-spacing: -.03em; }
.cover.tone-0 { --c1: #0E7C73; --c2: #34B39A; }
.cover.tone-1 { --c1: #2F5BD3; --c2: #5FA0F0; }
.cover.tone-2 { --c1: #6D4AC9; --c2: #A77BE8; }
.cover.tone-3 { --c1: #C2416B; --c2: #F08A8A; }
.cover.tone-4 { --c1: #C46A12; --c2: #F2B04B; }
.cover.tone-5 { --c1: #1F7A9E; --c2: #4CC3D9; }
.cover.tone-6 { --c1: #3E5566; --c2: #7D95A6; }
.cover.tone-7 { --c1: #4D7C2A; --c2: #93C35B; }
.cover.hero { aspect-ratio: 5 / 1; max-height: 180px; width: 100%; border-radius: var(--radius-lg); margin-bottom: 20px; border: 1px solid var(--border); }
.cover.hero .cover-letter { font-size: 56px; }
.cover.thumb { width: 176px; aspect-ratio: 16 / 9; border-radius: var(--radius); border: 1px solid var(--border); }
.cover.thumb .cover-letter { font-size: 34px; }
.course-head.with-cover { display: flex; gap: 20px; align-items: flex-start; }
.course-head.with-cover .grow { flex: 1; min-width: 0; }
.cover-editor { flex: none; display: flex; flex-direction: column; gap: 6px; }
.cover-actions { gap: 12px; font-size: 13px; }
button.link.danger-link { color: var(--bad); }
.course-card strong { font-size: 16px; font-weight: 650; letter-spacing: -.01em; }
.course-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow); transform: translateY(-1px); }
.course-card p { margin: 6px 0 0; font-size: 14px; }
.course-card .meta { margin-top: auto; padding-top: 14px; }
.clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.progress { height: 8px; background: var(--surface-2); border-radius: 99px; overflow: hidden; margin-bottom: 6px; }
.progress > div { height: 100%; background: var(--accent); border-radius: 99px; }

/* ===== tabs & segmented filter ===== */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; }
.tabs a { padding: 9px 14px; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; font-weight: 550; }
.tabs a:hover { color: var(--text); }
.tabs a.active { color: var(--text); border-color: var(--accent); }
.tabs .count { margin-left: 6px; font-size: 12px; background: var(--surface-2); color: var(--muted); padding: 1px 7px; border-radius: 99px; font-weight: 550; }
.tabs a.active .count { background: var(--accent-soft); color: var(--accent-text); }
.seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 12px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
/* next to inputs (toolbars, form fields) the switch lines up with them: same 38px height, no gap below */
.list-tools .seg, .learn-tools .seg, .row .seg { margin-bottom: 0; flex: none; align-self: stretch; }
.field .seg { margin-bottom: 0; min-height: 41px; } /* as tall as a select next to it */
.seg button { border: none; background: transparent; color: var(--muted); min-height: 30px; padding: 4px 12px; border-radius: 7px; white-space: nowrap; font-size: 13px; box-shadow: none; }
.seg button:hover { background: transparent; color: var(--text); }
.seg button.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

/* ===== lists (structure, access, results) ===== */
.card.list { padding: 0; overflow: hidden; }
.list-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-top: 1px solid var(--border); color: var(--text); text-decoration: none; }
.list-row:first-child { border-top: none; }
a.list-row:hover { background: var(--surface-2); }
.list-row a.grow:hover div:first-child { color: var(--accent-text); }
.list-row .grow { flex: 1; min-width: 0; color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.list-row .grow > div:first-child { font-weight: 550; }
.list-row.inactive .grow { opacity: .55; }
.list-row .num { width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--surface-2); color: var(--muted); display: grid; place-items: center; font-size: 12px; font-weight: 600; }
.list-row .num.done { background: var(--ok-soft); color: var(--ok); }
.list-row .num .svg-icon { width: 14px; height: 14px; }
.inline-form { background: var(--surface-2); }
.inline-form .row input { flex: 1; min-width: 0; }
a.plain { text-decoration: none; }
a.plain:hover { color: var(--accent-text); }

/* ===== add-activity "+" with type menu ===== */
.add-activity { margin-top: 6px; }
button.plus { width: 100%; min-height: 48px; border: 1.5px dashed var(--border-strong); background: transparent; color: var(--muted); box-shadow: none; }
button.plus:hover { border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft); }
button.plus span { font-size: 18px; font-weight: 600; }
.menu { margin-top: 8px; padding: 6px; box-shadow: var(--shadow); }
.menu-item { display: flex; gap: 12px; align-items: center; justify-content: flex-start; width: 100%; text-align: left; border: none; padding: 10px; box-shadow: none; font-weight: 400; }
.menu-item strong { font-weight: 600; }

/* ===== people: chips, pickers ===== */
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip { font-size: 12px; font-weight: 550; padding: 2px 9px; border-radius: 99px; background: var(--accent-soft); color: var(--accent-text); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.chip.more { background: var(--surface-2); color: var(--muted); }
.chip.removable { display: inline-flex; align-items: center; gap: 2px; padding: 3px 4px 3px 10px; font-size: 13px; }
.chip.removable button { border: none; background: none; color: inherit; padding: 0 5px; min-height: 0; line-height: 1; font-size: 16px; opacity: .7; box-shadow: none; }
.chip.removable button:hover { opacity: 1; background: none; }
.group-chooser { display: grid; gap: 8px; }
.group-results { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.group-results:empty { display: none; }
.chip-add { font-size: 13px; min-height: 28px; padding: 3px 11px; border-radius: 99px; border: 1px dashed var(--border-strong); background: transparent; color: var(--muted); box-shadow: none; font-weight: 500; }
.chip-add:hover { border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft); }
.one-line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 560px; }
.group-cell { min-width: 0; }
.pick-list { max-height: 340px; overflow-y: auto; margin: 10px 0; border: 1px solid var(--border); border-radius: var(--radius); }
.pick-list:empty::after { content: attr(data-empty); display: block; padding: 12px; color: var(--muted); }
.pick { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-top: 1px solid var(--border); cursor: pointer; }
.pick:first-child { border-top: none; }
.pick:hover { background: var(--surface-2); }
.pick:has(input:checked) { background: var(--accent-soft); }
.pick input { width: 17px; height: 17px; flex: none; }
.pick-text { display: grid; min-width: 0; line-height: 1.35; }

/* ===== quiz editor & taking ===== */
.opt-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.opt-row input[type=radio], .opt-row input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--ok); flex: none; }
.opt-row input[type=text] { flex: 1; min-width: 0; }
.order-num { width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--surface-2); color: var(--muted); display: grid; place-items: center; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.wrap-row { flex-wrap: wrap; gap: 10px 16px; }
.pct-input { width: 84px !important; }
.points-field { gap: 8px; }
.q-form .seg { margin: 0; }
.grading .wrap-row { margin-bottom: 6px; }
.grading label.check { display: flex; align-items: center; gap: 8px; font-weight: 550; cursor: pointer; }
.grading label.check input { width: 18px; height: 18px; accent-color: var(--accent); }
.q-view .opts.ordered { list-style: decimal; padding-left: 22px; }
.q-view .opts.ordered li::before { content: none; }
.q-hint { margin-top: 2px; }
.quiz-facts { margin-top: -6px; }
.order-list { list-style: none; padding: 0; margin: 10px 0 0; }
.order-item { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; border: 1px solid var(--border-strong); border-radius: 10px; margin-top: 8px; background: var(--surface); cursor: grab; user-select: none; }
.order-item .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.order-item.dragging { opacity: .5; border-style: dashed; }
.order-item.right { background: var(--ok-soft); border-color: var(--ok); }
.order-item.wrong { background: var(--bad-soft); border-color: var(--bad); }
.answered .order-item { cursor: default; }
.answered .order-item button { display: none; }
.correct-order { margin-top: 10px; padding: 10px 14px; border-radius: 10px; background: var(--surface-2); }
.correct-order ol { margin: 4px 0 0; padding-left: 20px; }
.ok-text { color: var(--ok); }
.badge.big { font-size: 14px; padding: 5px 14px; margin: 10px 0 14px; gap: 6px; }
.badge.big .svg-icon { width: 16px; height: 16px; }
.q-view .opts { list-style: none; padding: 0; margin: 10px 0 0; }
.q-view .opts li { padding: 4px 0; }
.q-view .opts li.correct { color: var(--ok); font-weight: 600; }
.q-view .opts li.correct::before { content: "✓ "; }
.q-view .opts li:not(.correct)::before { content: "○ "; color: var(--muted); }
.choice { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: 10px; margin-top: 8px; cursor: pointer; transition: border-color .12s, background .12s; }
.choice:hover { border-color: var(--accent); }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.choice input { margin-top: 3px; flex: none; }
.choice.right, .choice.right:has(input:checked) { background: var(--ok-soft); border-color: var(--ok); }
.choice.wrong, .choice.wrong:has(input:checked) { background: var(--bad-soft); border-color: var(--bad); }
.card.result { text-align: center; }
.score { font-size: 44px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* ===== reports ===== */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 8px; }
.stat { margin: 0; }
.stat-value { font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.report-course { margin-top: 28px; }
.report-course-head { margin-bottom: 10px; align-items: baseline; }
.report-course-head h3 { margin: 0; }
.report-course-head h3 a { color: var(--text); text-decoration: none; }
.report-course-head h3 a:hover { color: var(--accent-text); }
.report-course-head .type-icon { display: none; }
.card.table-card { padding: 0; overflow: hidden; }
table.dt { width: 100%; border-collapse: collapse; }
table.dt.fixed { table-layout: fixed; }
/* Wide tables (fixed columns) scroll sideways instead of squeezing the main column to nothing; the
   console's organization list is the widest. Below the mobile breakpoint rows become cards anyway. */
.card.table-card:has(table.dt.fixed) { overflow-x: auto; }
table.dt.fixed { min-width: 640px; }
table.dt.fixed:has(th:nth-child(6)) { min-width: 900px; } /* the widest: course stats, the console's organizations */
.dt th { text-align: left; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 11px 16px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.dt td { padding: 13px 16px; border-top: 1px solid var(--border); vertical-align: middle; }
.dt tbody tr:first-child td { border-top: none; }
.dt tr.clickable { cursor: pointer; }
.dt tr.clickable:hover td { background: var(--surface-2); }
.dt tr.clickable:hover .primary-cell { color: var(--accent-text); }
.dt .num-cell { text-align: right; font-variant-numeric: tabular-nums; }
.dt th.num-cell { text-align: right; }
.dt td.nowrap-cell { white-space: nowrap; color: var(--muted); font-size: 14px; }
/* in fixed-width tables a long value wraps instead of pushing the table sideways; dates stay in one piece */
table.dt.fixed td.nowrap-cell { white-space: normal; }
.nowrap { white-space: nowrap; }
.cell-stack { display: grid; line-height: 1.3; }
.cell-stack small { font-size: 12px; }
.dt .primary-cell { overflow-wrap: anywhere; font-weight: 550; }
.dt .primary-cell .row { gap: 12px; }
.pct { display: flex; align-items: center; gap: 10px; min-width: 130px; }
.pct .bar { flex: 1; height: 6px; background: var(--surface-2); border-radius: 99px; overflow: hidden; min-width: 50px; }
.pct .bar > div { height: 100%; border-radius: 99px; }
.pct .good { background: var(--ok); }
.pct .mid { background: var(--warn); }
.pct .low { background: var(--bad); }
.pct > span { font-size: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 3.4em; text-align: right; }
.q-stat .q-text { font-weight: 600; margin: 4px 0 10px; }
.q-summary { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.q-summary .pct { flex: 1; max-width: 360px; }
.opt-stats { list-style: none; padding: 0; margin: 0; }
.opt-stats li { display: grid; grid-template-columns: minmax(0, 1fr) 120px 32px; gap: 10px; align-items: center; padding: 5px 0; font-size: 14px; }
.opt-stats li.correct .opt-text { color: var(--ok); font-weight: 600; }
.opt-stats .opt-text { overflow-wrap: anywhere; }
.opt-stats .opt-bar { height: 8px; background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.opt-stats .opt-bar > span { display: block; height: 100%; background: var(--border-strong); border-radius: 99px; }
.opt-stats li.correct .opt-bar > span { background: var(--ok); }
.opt-stats .opt-count { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ===== lessons ===== */
.lesson-card { padding: 32px 40px; }
.lesson-card > h2 { font-size: 28px; margin: 8px 0 8px; }
.lesson-card .lead { font-size: 17px; margin: 0 0 10px; }
.lesson-body { font-size: 16.5px; line-height: 1.72; max-width: 70ch; overflow-wrap: anywhere; color: var(--text); }
.lesson-body > * { margin: 0 0 16px; }
.lesson-body h2 { font-size: 22px; margin-top: 32px; }
.lesson-body h3 { font-size: 19px; margin: 26px 0 10px; }
.lesson-body h4 { font-size: 17px; margin: 22px 0 8px; }
.lesson-body ul, .lesson-body ol { padding-left: 24px; }
.lesson-body li { margin: 5px 0; }
.lesson-body li::marker { color: var(--accent); }
.lesson-body li > ul, .lesson-body li > ol { margin: 4px 0; }
.lesson-body ul.checklist { list-style: none; padding-left: 4px; }
.lesson-body .check { margin-right: 8px; color: var(--muted); }
.lesson-body code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; font-size: .9em; }
.lesson-body mark { background: #FFF1A8; color: inherit; padding: 0 2px; border-radius: 2px; }
.lesson-body blockquote { margin-left: 0; padding: 12px 18px; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 var(--radius) var(--radius) 0; }
.lesson-body blockquote p { margin: 0; font-style: italic; }
.lesson-body blockquote cite { display: block; margin-top: 6px; color: var(--muted); font-size: 14px; font-style: normal; }
.lesson-body figure { margin: 24px 0; }
.lesson-body figcaption { color: var(--muted); font-size: 14px; margin-top: 8px; text-align: center; }
.lesson-image img { display: block; max-width: 100%; height: auto; border-radius: 10px; margin: 0 auto; }
.lesson-image.bordered img { border: 1px solid var(--border); }
.lesson-image.bg { background: var(--surface-2); padding: 16px; border-radius: 12px; }
.lesson-image.bg img { max-width: 70%; }
.lesson-image.stretched img { width: 100%; }
.lesson-embed .video { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; }
.lesson-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.attachment { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: 10px; text-decoration: none; color: var(--text); max-width: 520px; transition: border-color .12s, background .12s; }
.attachment:hover { border-color: var(--accent); background: var(--accent-soft); }
.attachment .ext { flex: none; width: 44px; height: 44px; border-radius: var(--radius); background: var(--accent-soft); color: var(--accent-text); display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.attachment .grow { display: grid; min-width: 0; line-height: 1.35; }
.att-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lesson-body .missing { padding: 12px; border: 1px dashed var(--border-strong); border-radius: var(--radius); color: var(--muted); font-size: 14px; }
.lesson-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.done-note { display: inline-flex; align-items: center; gap: 8px; color: var(--ok); font-weight: 600; }
.done-note .muted { font-weight: 400; }

/* lesson editor (Editor.js) */
.editor-bar { margin: 20px 0 8px; }
.save-status { font-size: 13px; color: var(--muted); }
.save-status.ok { color: var(--ok); }
.save-status.bad { color: var(--bad); }
.editor-card { padding: 24px 28px 8px; }
.lesson-editor { min-height: 300px; font-size: 16.5px; line-height: 1.65; }
.lesson-editor .ce-block__content, .lesson-editor .ce-toolbar__content { max-width: none; }
.lesson-editor .codex-editor__redactor { padding-bottom: 120px !important; }
.lesson-editor .ce-header { font-weight: 650; letter-spacing: -.01em; }
.lesson-editor h2.ce-header { font-size: 22px; }
.lesson-editor h3.ce-header { font-size: 19px; }
.lesson-editor h4.ce-header { font-size: 17px; }
.lesson-editor .cdx-attaches, .lesson-editor .image-tool__image { border-radius: var(--radius); }
.lesson-editor .ce-popover { border-radius: 10px; box-shadow: var(--shadow-lg); }
:root[data-theme="dark"] .lesson-editor { color: var(--text); }
:root[data-theme="dark"] .lesson-editor .ce-popover, :root[data-theme="dark"] .lesson-editor .ce-inline-toolbar, :root[data-theme="dark"] .lesson-editor .ce-conversion-toolbar,
:root[data-theme="dark"] .lesson-editor .ce-popover__container { background: var(--surface); border-color: var(--border); color: var(--text); }
:root[data-theme="dark"] .lesson-editor .ce-toolbar__plus, :root[data-theme="dark"] .lesson-editor .ce-toolbar__settings-btn { color: var(--text); background: var(--surface); }
:root[data-theme="dark"] .lesson-editor .ce-toolbar__plus:hover, :root[data-theme="dark"] .lesson-editor .ce-toolbar__settings-btn:hover,
:root[data-theme="dark"] .lesson-editor .ce-popover-item:hover { background: var(--surface-2); }
:root[data-theme="dark"] .lesson-editor .cdx-input, :root[data-theme="dark"] .lesson-editor .cdx-attaches, :root[data-theme="dark"] .lesson-editor .cdx-button { background: var(--surface-2); border-color: var(--border); color: var(--text); }
:root[data-theme="dark"] .lesson-editor .ce-block--selected .ce-block__content { background: var(--accent-soft); }
:root[data-theme="dark"] .lesson-body mark { background: #5C4D0A; }

/* ===== touch devices: comfortable tap targets ===== */
@media (pointer: coarse) {
  button, .btn { min-height: 40px; }
  button.link, .chip.removable button { min-height: 0; }
  button.icon-only { width: 40px; min-height: 40px; }
  #nav a, .tabs a, .sb-nav a, .sb-user, .sb-logout { padding-top: 10px; padding-bottom: 10px; }
}

/* ===== phones ===== */
@media (max-width: 640px) {
  html { scroll-padding-top: 100px; } /* keep anchored content clear of the sticky top bar */
  /* 16px stops iOS Safari from zooming into a field on focus */
  input[type=text], input[type=email], input[type=password], input[type=search], textarea, select { font-size: 16px; }
  .wrap { padding: 20px 16px calc(64px + env(safe-area-inset-bottom)); }
  h2 { font-size: 21px; }
  .card { padding: 16px; }
  .empty { padding: 32px 16px; }

  /* learner top bar: brand + logout on the first line, nav scrolls horizontally on the second */
  body:not(.has-sidebar) .topbar-inner { flex-wrap: wrap; gap: 0 12px; padding: 0 16px; min-height: 0; }
  body:not(.has-sidebar) .brand { flex: 1; padding: 12px 0 6px; }
  .user { padding: 12px 0 6px; }
  #user-name, #user-role { display: none; }
  #nav { order: 3; flex-basis: 100%; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 12px 8px; }
  #nav::-webkit-scrollbar, .tabs::-webkit-scrollbar, .seg::-webkit-scrollbar { display: none; }

  .grid2 { grid-template-columns: 1fr; }
  dl.props { grid-template-columns: 1fr; gap: 2px; }
  dl.props dd { margin-bottom: 10px; }

  .tr, .users-table .tr { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 14px; }
  .tr.th { display: none; }
  .tr > div:not(:first-child):not(.actions) { grid-column: 1; }
  .tr > .actions { grid-row: 1; grid-column: 2; }
  .dept-cell { white-space: normal; color: var(--muted); }
  .role-status { flex-direction: row; align-items: center; gap: 10px; }
  .filters, .filters.three, .report-filters.n2, .report-filters.n3, .report-filters.n5 { grid-template-columns: 1fr 1fr; }
  .report-filters.n2 select { grid-column: 1 / -1; }
  .filters input[type=search] { grid-column: 1 / -1; }
  .filters.one { grid-template-columns: 1fr; }
  .one-line { white-space: normal; }
  .inline-form .row.nowrap { flex-wrap: wrap; }

  .list-row { padding: 14px; gap: 10px; }
  .structure .list-row { gap: 8px; }
  .structure .num { display: none; }
  .structure .row.nowrap { gap: 4px; }
  .course-grid { grid-template-columns: 1fr; }
  .course-card { min-height: 0; }
  .course-head.with-cover { flex-direction: column; gap: 12px; }
  .continue-card, .course-card { padding: 0; }
  .dash-grid { grid-template-columns: 1fr; }
  .step { flex-wrap: wrap; }
  .team-head { padding: 12px 14px; gap: 10px; }
  .team-badges { display: none; }
  .team-courses { padding: 4px 14px 8px; }
  .team-course { flex-wrap: wrap; gap: 8px 12px; }
  .team-course .grow { flex-basis: 100%; }
  .team-course-progress { flex: 1; width: auto; }
  .team-remind-slot { width: auto; }
  .continue-card { grid-template-columns: 1fr; }
  .continue-cover .cover { min-height: 0; aspect-ratio: 16 / 7; }
  .continue-body { padding: 18px; }
  .continue-body h2 { font-size: 20px; }
  .done-list { grid-template-columns: 1fr; }
  .done-card { flex-wrap: wrap; }
  .done-card > .btn { width: 100%; justify-content: center; }
  .learner-head { gap: 12px; }
  .head-progress .ring { width: 44px !important; height: 44px !important; }
  .cert-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
  .certificate { border-radius: 3px; }
  .cover.thumb { width: 100%; }
  .cover.hero { aspect-ratio: 2 / 1; }

  /* data tables -> one card per row, label on the left, value on the right */
  .dt thead { display: none; }
  .dt, .dt tbody, .dt tr, .dt td { display: block; width: 100%; }
  table.dt.fixed, table.dt.fixed:has(th:nth-child(6)) { min-width: 0; }
  .dt tr { padding: 14px; border-top: 1px solid var(--border); }
  .dt tbody tr:first-child { border-top: none; }
  .dt td { border: none; padding: 3px 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: right; }
  .dt td::before { content: attr(data-label); color: var(--muted); font-size: 13px; text-align: left; flex: none; }
  .dt td.primary-cell { display: flex; justify-content: space-between; text-align: left; padding-bottom: 8px; }
  .dt td.primary-cell::before { display: none; }
  .dt tr.clickable td.primary-cell::after { content: "›"; color: var(--muted); font-size: 22px; line-height: 1; font-weight: 400; }
  .dt td.primary-cell .muted { font-weight: 400; }
  .dt td.nowrap-cell { font-size: 13px; }
  .dt th { width: auto !important; }
  .dt tr.clickable:hover td { background: none; }
  .dt tr.clickable:active { background: var(--surface-2); }
  .dt td .pct { min-width: 0; flex: 0 0 180px; }

  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .stat { padding: 12px; min-width: 0; }
  .stat-value { font-size: 20px; white-space: nowrap; }
  .stat .small { font-size: 12px; line-height: 1.3; }

  .opt-stats li { grid-template-columns: minmax(0, 1fr) 32px; gap: 4px 10px; }
  .opt-stats .opt-bar { grid-column: 1 / -1; grid-row: 2; }
  .opt-stats .opt-count { grid-row: 1; grid-column: 2; }
  .score { font-size: 36px; }

  .lesson-card { padding: 20px 16px; }
  .lesson-card > h2 { font-size: 23px; }
  .lesson-body { font-size: 16px; }
  .lesson-image.bg img { max-width: 100%; }
  .editor-card { padding: 12px 8px 4px; }
  .lesson-footer > * { flex: 1 1 100%; text-align: center; }
}

/* ===== learning paths ===== */
.continue-kicker .svg-icon, .path-tag .svg-icon, .path-chip .svg-icon { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }
.path-steps .list-row.is-locked { cursor: default; color: var(--muted); }
.path-steps .list-row.is-locked .cover { opacity: .5; filter: grayscale(.6); }
.num.locked { background: var(--surface-2); color: var(--muted); }
.num.locked .svg-icon { width: 14px; height: 14px; }
.cover.tiny { width: 56px; aspect-ratio: 16 / 10; border-radius: 8px; flex: none; }
.cover.tiny .cover-letter { font-size: 18px; }
.step-days { gap: 6px; }
.step-days .days-input { width: 70px !important; }
.path-tag { margin-bottom: 2px; }
.path-chip { text-decoration: none; display: inline-flex; align-items: center; }
.radio-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.radio-card { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; }
.radio-card:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.radio-card > span { display: flex; flex-direction: column; gap: 2px; }
.radio-card input { margin-top: 3px; }
@media (max-width: 640px) {
  .radio-cards { grid-template-columns: 1fr; }
  .path-steps .list-row { flex-wrap: wrap; }
  .path-steps .list-row > .grow { flex: 1 1 calc(100% - 50px); min-width: 0; }
  .path-steps .cover.tiny { display: none; }
  .path-steps .list-row > .row { width: 100%; justify-content: flex-end; padding-left: 38px; }
  .path-steps .step-days { width: auto; padding-left: 38px; }
}

/* ===== the dot language: one dot = one step / one person ===== */
.cover.small.gen, .cover.tiny.gen { align-items: center; justify-content: center; padding: 0; }
.dsteps { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dsteps i { width: 13px; height: 13px; border-radius: 50%; background: var(--border-strong); flex: none; }
.dsteps i.done { background: var(--spark); } /* done = the sun */
.dsteps i.current { background: linear-gradient(90deg, transparent 50%, var(--accent) 50%); box-shadow: inset 0 0 0 1.5px var(--accent); } /* in progress = half moon */
.dsteps i.late { background: var(--bad); }
.dsteps i.locked { background: none; box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.dsteps.lg i { width: 16px; height: 16px; }
.phase { display: inline-flex; width: 22px; height: 22px; flex: none; color: var(--accent); }
.phase svg { width: 100%; height: 100%; }
.phase.late { color: var(--bad); }
.sdot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--border-strong); display: inline-block; }
.sdot.st-overdue { background: var(--bad); }
.sdot.st-in_progress { background: var(--accent); }
.sdot.st-soon { background: var(--spark); }
.sdot.st-completed { background: var(--ok); }
.sdot.st-locked { background: none; box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.slim-bar { height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.slim-bar > span { display: block; height: 100%; background: var(--accent); border-radius: 99px; }

/* ===== learner: "Мій день" ===== */
.day-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.day-main, .day-side { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.day-label { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; margin: 0 0 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.day-label a { text-transform: none; letter-spacing: 0; font-weight: 550; font-size: 13px; text-decoration: none; }
.next-step { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 22px; padding: 22px; margin: 0; align-items: center; }
.next-step .cover { border-radius: var(--radius); aspect-ratio: 1; }
.next-step .cover-letter { font-size: 44px; }
.next-step h3 { font-size: 21px; font-weight: 700; letter-spacing: -.02em; margin: 6px 0 4px; line-height: 1.25; overflow-wrap: anywhere; }
.next-step h3 a { color: var(--text); text-decoration: none; }
.next-step .kick { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 650; color: var(--warn); }
.next-step .kick::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--spark); box-shadow: 0 0 0 3px var(--spark-soft); }
.next-step .ctx { font-size: 14px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.next-step .ctx .svg-icon { width: 14px; height: 14px; }
.next-step .kick.bad { color: var(--bad); }
.next-step .kick.bad::before { background: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }
.next-step .kick:not(.bad):not(.soon) { color: var(--accent-text); }
.next-step .kick:not(.bad):not(.soon)::before { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.next-step .foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.next-step .foot .grow { flex: 1; min-width: 140px; display: flex; flex-direction: column; gap: 6px; }
.queue { display: flex; flex-direction: column; }
.q-row { display: flex; align-items: center; gap: 12px; padding: 12px 2px; border-top: 1px solid var(--border); color: var(--text); text-decoration: none; }
.q-row:first-child { border-top: none; }
a.q-row:hover .q-title { color: var(--accent-text); }
.q-row .grow { flex: 1; min-width: 0; }
.q-title { font-weight: 550; overflow-wrap: anywhere; }
.q-meta { font-size: 13px; color: var(--muted); }
.q-row.is-locked { color: var(--muted); }
.side-row { display: flex; gap: 12px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--border); font-size: 14px; color: var(--text); text-decoration: none; }
.side-row:first-child { border-top: none; }
.side-row .when { width: 66px; flex: none; font-weight: 600; font-size: 13px; color: var(--text-2); }
.side-row .when.late { color: var(--bad); }
.side-row .grow { min-width: 0; overflow-wrap: anywhere; }
a.side-row:hover .grow { color: var(--accent-text); }
.side-row .svg-icon { width: 15px; height: 15px; color: var(--ok); vertical-align: -2px; }
.day-quiet { color: var(--muted); font-size: 14px; margin: 0; }
.learn-tools { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.learn-tools input[type=search] { flex: 1; min-width: 180px; max-width: 320px; }
.learn-list .q-row { padding: 12px 18px; }
.learn-list .q-row .cover.tiny { width: 64px; }
.cert-row .svg-icon { color: var(--spark); }
@media (max-width: 860px) {
  .day-grid { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 560px) {
  .next-step { grid-template-columns: 1fr; padding: 16px; gap: 14px; }
  .next-step .cover { aspect-ratio: 3 / 1; }
  .learn-list .q-row .cover.tiny { display: none; }
}

/* ===== admin: "Сьогодні" ===== */
.todo-list { padding: 4px 20px; }
.todo-item { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-top: 1px solid var(--border); }
.todo-item:first-child { border-top: none; }
.todo-item > .sdot { margin-top: 7px; }
.todo-item .grow { flex: 1; min-width: 0; }
.todo-title { font-weight: 600; overflow-wrap: anywhere; }
.todo-text { font-size: 14px; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }
.todo-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.todo-actions .btn, .todo-actions button { min-height: 32px; padding: 5px 12px; font-size: 13px; }
.todo-done { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ok); font-weight: 550; }
.todo-done .svg-icon { width: 16px; height: 16px; }
.pulse { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 12px; }
.pulse i { width: 11px; height: 11px; border-radius: 50%; background: var(--border-strong); }
.pulse.dense { gap: 3px; }
.pulse.dense i { width: 7px; height: 7px; }
.pulse .p-overdue, .pulse-legend .p-overdue::before { background: var(--bad); }
.pulse .p-in_progress, .pulse-legend .p-in_progress::before { background: var(--spark); }
.pulse .p-done, .pulse-legend .p-done::before { background: var(--accent); }
.pulse .p-none, .pulse-legend .p-none::before { background: var(--border-strong); }
.pulse-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--text-2); }
.pulse-legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.pulse-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.pulse-num { font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
/* side column: each block is its own card, so it doesn't melt into the page */
.day-side { gap: 14px; }
.day-side > section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px 10px; }
.day-side .day-label { margin-bottom: 6px; }
.side-row .when.ico { width: 22px; }
.side-row .when.stacked { display: grid; line-height: 1.25; }
.side-row .when.stacked small { font-weight: 450; font-size: 12px; color: var(--muted); }
.side-row .when:not(.ico) { color: var(--text); }
.side-row .when.late { color: var(--bad); }
.day-side .pulse-stats { margin-bottom: 6px; }

/* ===== command palette (⌘K) ===== */
.pal-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(12, 18, 15, .38); display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; }
.pal { width: min(640px, 100%); max-height: 70vh; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.pal-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.pal-head > .svg-icon { color: var(--muted); }
.pal-input, .pal-input:focus { flex: 1; min-width: 0; border: none !important; box-shadow: none !important; padding: 6px 0; font-size: 17px; background: transparent; }
.pal-crumbs { display: flex; gap: 6px; flex: none; max-width: 45%; overflow: hidden; }
.pal-crumb { font-size: 13px; font-weight: 600; background: var(--surface-2); padding: 3px 9px; border-radius: 99px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pal kbd, .pal-btn kbd { font: 600 11px/1 var(--font); padding: 3px 6px; border-radius: 6px; border: 1px solid var(--border-strong); color: var(--muted); background: var(--surface); }
.pal-list { overflow-y: auto; padding: 6px; }
.pal-group + .pal-group { margin-top: 6px; }
.pal-group-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 8px 10px 4px; }
.pal-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--radius); cursor: pointer; }
.pal-item.active { background: var(--surface-2); }
.pal-item.active .pal-label { color: var(--accent-text); }
.pal-item .grow { flex: 1; min-width: 0; }
.pal-label { font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pal-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pal-ico { width: 32px; height: 32px; border-radius: 8px; background: var(--surface-2); color: var(--text-2); display: grid; place-items: center; flex: none; }
.pal-ico .svg-icon { width: 16px; height: 16px; }
.pal-item .cover.tiny { width: 32px; height: 32px; aspect-ratio: 1; border-radius: 8px; }
.pal-item .cover.tiny .cover-letter { font-size: 14px; }
.pal-item .avatar { width: 32px; height: 32px; }
.pal-more { color: var(--muted); font-size: 14px; flex: none; }
.pal-more .svg-icon { width: 16px; height: 16px; }
.pal-empty { padding: 22px 14px; text-align: center; color: var(--muted); font-size: 14px; }
.pal-error { color: var(--bad); font-size: 14px; padding: 0 16px; }
.pal-error:not(:empty) { padding: 10px 16px 0; }
.pal-foot { display: flex; gap: 16px; flex-wrap: wrap; padding: 9px 16px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); background: var(--bg); }
.pal-foot kbd { margin-right: 3px; }
body.palette-open { overflow: hidden; }
.pal-btn { width: 100%; justify-content: flex-start; gap: 10px; margin: -6px 0 18px; color: var(--muted); font-weight: 500; background: var(--surface); }
.pal-btn .pal-btn-text { flex: 1; text-align: left; }
.pal-btn.top-pal { width: auto; margin: 0; min-height: 34px; padding: 5px 10px; }
@media (max-width: 760px) {
  .pal-btn.top-pal .pal-btn-text, .pal-btn.top-pal kbd { display: none; }
  .pal-foot { display: none; }
  .pal-backdrop { padding-top: 8vh; }
}
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 70; display: flex; align-items: center; gap: 8px;
  background: var(--text); color: var(--surface); padding: 10px 16px; border-radius: 99px; font-size: 14px; font-weight: 550; box-shadow: var(--shadow-lg); transition: opacity .3s, transform .3s; }
.toast .svg-icon { width: 16px; height: 16px; color: var(--spark); }
.toast.out { opacity: 0; transform: translate(-50%, 8px); }

/* ===== status mix: one bar per course / path, split by learner status ===== */
.mix { display: flex; flex-direction: column; gap: 5px; min-width: 150px; }
.mix-bar { display: flex; gap: 2px; height: 8px; border-radius: 99px; overflow: hidden; background: var(--surface-2); }
.mix-bar span { min-width: 4px; }
.mix-bar .done { background: var(--accent); }
.mix-bar .busy { background: var(--spark); }
.mix-bar .late { background: var(--bad); }
.mix-bar .idle { background: var(--border-strong); }
.mix-cap { font-size: 12.5px; color: var(--muted); }
.mix-cap.late { color: var(--bad); font-weight: 550; }

/* ===== admin lists: compact rows instead of big cards ===== */
.admin-list { padding: 0; }
.admin-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) 190px 20px; gap: 16px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--border); color: var(--text); text-decoration: none; }
.admin-row:first-child { border-top: none; }
.admin-row:hover { background: var(--surface-2); }
.admin-row:hover .ar-title { color: var(--accent-text); }
.admin-row .cover.tiny { width: 64px; }
.ar-title { font-weight: 600; overflow-wrap: anywhere; }
.ar-meta { font-size: 13px; color: var(--muted); margin-top: 2px; }
.ar-meta .draft { font-weight: 550; }
.admin-row .chev { color: var(--muted); display: grid; }
.admin-row .chev .svg-icon { width: 18px; height: 18px; }
.list-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.list-tools input[type=search] { max-width: 320px; }
@media (max-width: 640px) {
  .admin-row { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; }
  .admin-row .cover.tiny { width: 48px; }
  .admin-row > :nth-child(3) { grid-column: 2; }
  .admin-row .chev { display: none; }
}
.ar-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); justify-self: center; }
.ar-ico.dyn { background: var(--spark-soft); color: var(--warn); }
.ar-ico .svg-icon { width: 20px; height: 20px; }
.ar-title .badge { margin-left: 8px; vertical-align: 1px; }
/* course categories and tags */
.ar-cat { color: var(--text-2); font-weight: 550; }
.tag-row { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 5px; }
.tag { font: inherit; font-size: 12px; padding: 1px 8px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); cursor: default; white-space: nowrap; }
button.tag { cursor: pointer; min-height: 0; padding: 1px 8px; font-weight: 500; box-shadow: none; line-height: 1.5; border-radius: 99px; }
.list-tools select { width: auto; max-width: 240px; }
button.tag:hover, .tag.on { border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft); }
.tag-editor { display: grid; gap: 6px; }
.tag-editor .tag-row { margin-top: 0; }
.tag-editor .tag-row:empty { display: none; }
.tag-x { border: 0; background: none; padding: 0 0 0 4px; min-height: 0; box-shadow: none; line-height: 1; color: inherit; font: inherit; cursor: pointer; }
.course-head .tag { align-self: center; }
.course-author { margin: 6px 0 0; }
.cat-manager .cat-list { display: grid; margin: 6px 0 12px; }
.cat-manager .cat-item { padding: 8px 0; border-top: 1px solid var(--border); }
.cat-manager .cat-item:first-child { border-top: 0; }
.cat-manager form input { max-width: 320px; }
.plan-tag-filter select { width: auto; }
.catalog-shelves { margin-bottom: 12px; flex-wrap: wrap; }
.pulse.mini { margin: 0; gap: 3px; flex-wrap: nowrap; }
.pulse.mini i { width: 7px; height: 7px; }
.person-cell { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.person-cell .grow { min-width: 0; }
.avatar.with-dot { position: relative; margin-top: 2px; }
.avatar.with-dot::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--surface); background: var(--border-strong); }
.avatar.with-dot.on::after { background: var(--ok); }
.avatar.with-dot.invited::after { background: var(--spark); }

/* ---- removing a course (static/courses.js, removalPanel) ---- */
.removal { margin-top: 14px; border-color: var(--bad-soft, #f3d4d0); }
.removal h3 { margin: 0 0 8px; }
.removal p { margin: 0 0 12px; }
.removal-list { display: grid; gap: 4px; margin: 0 0 12px; }
.archived-badge { margin-left: 8px; font-size: 11px; }
.archived-toggle { margin: -4px 0 14px; color: var(--muted); font-size: 14px; }
.site-lists { gap: 16px; margin-top: 14px; }
@media (max-width: 760px) { .site-lists { grid-template-columns: 1fr; } }

/* ===== lesson editor: canvas, blocks, the "Add" panel and the "/" menu (static/lesson.js) ===== */
.editor-card { position: relative; padding: 28px 24px 0; }
.lesson-editor { max-width: 760px; margin: 0 auto; padding-left: 52px; } /* room for the + and ⠿ handles inside the card */
.lesson-editor .codex-editor__redactor { padding-bottom: 40px !important; }
.lesson-editor .ce-block__content { max-width: none; }
.lesson-editor .ce-paragraph { padding: 3px 0; }
.lesson-editor .ce-paragraph[data-placeholder]:empty::before { color: var(--muted); opacity: 1; }
.lesson-editor .codex-editor--empty .ce-block:first-child .ce-paragraph[data-placeholder]:empty::before { opacity: 1; }
.lesson-editor .ce-block { margin: 2px 0; }
.lesson-editor .ce-block--selected .ce-block__content { background: var(--accent-soft); border-radius: 6px; }
.lesson-editor h2.ce-header { margin: 18px 0 4px; }
.lesson-editor h3.ce-header, .lesson-editor h4.ce-header { margin: 12px 0 2px; }
.lesson-editor .ce-toolbar__plus, .lesson-editor .ce-toolbar__settings-btn { color: var(--muted); border-radius: 7px; }
.lesson-editor .ce-toolbar__plus:hover, .lesson-editor .ce-toolbar__settings-btn:hover { color: var(--text); background: var(--surface-2); }
.lesson-editor .cdx-quote { padding: 12px 16px; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 var(--radius) var(--radius) 0; }
.lesson-editor .cdx-quote__text { min-height: 0; margin-bottom: 6px; font-style: italic; border: 0; box-shadow: none; padding: 0; background: none; }
.lesson-editor .cdx-quote__caption { border: 0; box-shadow: none; padding: 0; background: none; color: var(--muted); font-size: 14px; }
.lesson-editor .cdx-list__item { padding: 3px 0; }
.lesson-editor .cdx-list__checkbox-check { border-radius: 5px; border-color: var(--border-strong); }
.lesson-editor .image-tool__caption, .lesson-editor .embed-tool__caption { border: 0; box-shadow: none; text-align: center; color: var(--muted); font-size: 14px; }
.lesson-editor .cdx-button { border-radius: 10px; box-shadow: none; border: 1px dashed var(--border-strong); background: var(--surface-2); color: var(--text); padding: 18px; font-weight: 600; }
.lesson-editor .cdx-button:hover { border-color: var(--accent); color: var(--accent-text); }
/* the "+" menu: tall enough, readable */
.lesson-editor .ce-popover { --width: 260px; --max-height: 420px; border-radius: 12px; box-shadow: var(--shadow-lg); border-color: var(--border); }
.lesson-editor .ce-popover__container { max-height: 420px; }
.lesson-editor .cdx-search-field { border-radius: 8px; background: var(--surface-2); border-color: transparent; }
.lesson-editor .ce-popover-item { border-radius: 8px; padding: 6px 8px; }
.lesson-editor .ce-popover-item__icon { border-radius: 7px; box-shadow: none; background: var(--surface-2); }
/* our blocks */
.cdx-callout { display: grid; gap: 4px; padding: 12px 16px; border-radius: var(--radius); background: var(--accent-soft); border-left: 3px solid var(--accent); }
.cdx-callout.warning { background: var(--warn-soft); border-left-color: var(--warn); }
.cdx-callout__label { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-text); user-select: none; }
.cdx-callout.warning .cdx-callout__label { color: var(--warn); }
.cdx-callout__text { outline: none; min-height: 1.6em; }
.cdx-callout__text:empty::before { content: attr(data-placeholder); color: var(--muted); }
.cdx-divider { display: flex; justify-content: center; gap: 14px; padding: 14px 0; }
.cdx-divider span { width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); }
/* the "Add" panel */
.block-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 -24px; padding: 12px 20px; border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.block-bar-title { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.block-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 11px 4px 8px; border-radius: 999px; font-size: 13.5px; font-weight: 550;
  background: var(--surface); border: 1px solid var(--border); color: var(--text); box-shadow: none; }
.block-chip:hover { border-color: var(--accent); color: var(--accent-text); }
.block-icon { display: inline-grid; place-items: center; color: var(--muted); }
.block-chip:hover .block-icon { color: var(--accent); }
/* the "/" menu and the video link prompt */
.block-menu { position: absolute; left: 76px; z-index: 30; width: min(320px, calc(100% - 96px)); padding: 8px; display: grid; gap: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); }
.block-menu > input { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); font-size: 14px; }
.block-menu-list { display: grid; gap: 2px; max-height: 340px; overflow-y: auto; }
.block-option { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; padding: 7px 8px; border: 0; border-radius: 8px; background: none; box-shadow: none; text-align: left; color: var(--text); min-height: 0; }
.block-option .block-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--surface-2); flex: none; }
.block-option .block-text { display: grid; justify-items: start; text-align: left; line-height: 1.3; }
.block-option b { font-size: 14px; font-weight: 600; }
.block-option small { font-size: 12.5px; color: var(--muted); }
.block-option.active, .block-option:hover { background: var(--accent-soft); }
.block-option.active .block-icon { color: var(--accent); background: var(--surface); }
.video-ask { gap: 10px; padding: 14px; }
.video-ask input { padding: 9px 10px; border-radius: 8px; border: 1px solid var(--border); font-size: 14px; }
.read-time::before { content: "·"; margin: 0 8px; color: var(--border-strong); }
.read-time:empty { display: none; }
/* the learner's view of the new blocks */
.lesson-body .callout { padding: 14px 18px; border-radius: var(--radius); background: var(--accent-soft); border-left: 3px solid var(--accent); }
.lesson-body .callout.warning { background: var(--warn-soft); border-left-color: var(--warn); }
.lesson-body .callout-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 4px; }
.lesson-body .callout.warning .callout-label { color: var(--warn); }
.lesson-body .callout p { margin: 0; }
.lesson-body .lesson-divider { border: 0; height: 6px; margin: 28px auto; width: 60px;
  background: radial-gradient(circle, var(--border-strong) 3px, transparent 3.5px) 0 0 / 20px 6px repeat-x; }
@media (max-width: 640px) {
  .editor-card { padding: 18px 14px 0; }
  .lesson-editor { padding-left: 0; }
  .block-bar { margin: 0 -14px; padding: 10px 12px; }
  .block-menu { left: 12px; width: calc(100% - 24px); }
}

/* ---- checklists the learner ticks off (static/lesson.js, renderChecklist) ---- */
.lesson-body .checklist { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.lesson-body .checklist.required { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.lesson-body .checklist.done { background: var(--ok-soft, var(--accent-soft)); border-color: transparent; }
.checklist-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13px; color: var(--muted); }
.checklist-tag { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 99px; background: var(--accent-soft); color: var(--accent-text); }
.checklist-progress { margin-left: auto; font-variant-numeric: tabular-nums; }
.lesson-body .checklist ul { list-style: none; padding-left: 0; margin: 0; }
.lesson-body .checklist ul ul { padding-left: 28px; }
.lesson-body .checklist li { margin: 2px 0; }
.check-item { display: flex; align-items: flex-start; gap: 10px; padding: 6px 4px; border-radius: 8px; cursor: pointer; }
.check-item:hover { background: var(--surface-2); }
.check-item input { width: 18px; height: 18px; margin-top: 3px; flex: none; accent-color: var(--accent); cursor: pointer; }
.check-item input:checked + span { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--border-strong); }
.check-item input:disabled { cursor: default; }
/* in the editor: a required checklist is marked */
.lesson-editor .checklist-required .cdx-list { border-left: 3px solid var(--accent); padding-left: 10px; }

/* activity report: a learner's checklist, opened under their row */
.dt tr.dt-expand > td { background: var(--surface-2); padding: 14px 18px 18px; }
.dt tr.expanded > td { border-bottom-color: transparent; }
.check-cell { display: flex; align-items: center; gap: 8px; min-width: 0; }
.check-cell .pct { flex: 1; min-width: 0; }
.dt .chev { flex: none; display: inline-flex; color: var(--muted); transform: rotate(90deg); transition: transform .15s; } .dt .chev.open { transform: rotate(-90deg); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.check-detail { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px 28px; }
.check-title { display: flex; gap: 10px; align-items: baseline; font-weight: 600; margin-bottom: 6px; }
.check-item { display: flex; gap: 9px; align-items: flex-start; padding: 4px 0; color: var(--muted); }
.check-item.on { color: var(--text); }
.check-item .box { width: 17px; height: 17px; flex: none; margin-top: 1px; border-radius: 5px; box-shadow: inset 0 0 0 1.5px var(--border-strong); display: inline-flex; align-items: center; justify-content: center; }
.check-item.on .box { background: var(--accent); box-shadow: none; color: #fff; }
.check-item .box .svg-icon { width: 12px; height: 12px; }

/* audit log */
.audit-changes { margin-top: 4px; font-size: 13.5px; display: grid; gap: 2px; }
.audit-old { text-decoration: line-through; color: var(--muted); }

.danger-zone { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }

.badge.open-badge { background: var(--accent-soft); color: var(--accent-text); }
.badge.open-badge .svg-icon { width: 13px; height: 13px; }
.chip.optional { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }

/* Today: an invisible label over the side column = the label's line + 10px, like "Needs attention" (14px gap - 4px) */
.day-side .day-spacer { visibility: hidden; margin-bottom: -4px; }
/* Reports: a row opened in place (department courses, path steps) */
.report-detail { display: grid; gap: 12px; justify-items: start; }
.report-detail > .card { width: 100%; margin: 0; }
.stuck-badge { margin-left: 8px; }
.report-scope { margin-bottom: 10px; }
/* Profile photos: avatar() shows the photo when there is one, initials otherwise */
.avatar.photo { background: var(--surface-2); overflow: hidden; }
.avatar.photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.avatar.with-dot.photo { overflow: visible; }
.avatar-sm { width: 28px; height: 28px; font-size: 11px; }
.avatar-md { width: 56px; height: 56px; font-size: 18px; }
.avatar-lg { width: 80px; height: 80px; font-size: 26px; }
.user-link { display: inline-flex; align-items: center; gap: 8px; }
.photo-picker { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.photo-picker .photo-actions { display: grid; gap: 4px; min-width: 0; }
.photo-picker .photo-actions .row { gap: 10px; }
.photo-picker .error:empty { display: none; }
.photo-picker.loading { opacity: .6; pointer-events: none; }
/* Emoji pictures: soft background per colour, the emoji itself at ~60% of the circle */
.avatar.emoji { overflow: hidden; }
.avatar.emoji .av-emoji { font-size: 1.55em; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.avatar-sm.emoji .av-emoji { font-size: 16px; }
.avatar.emoji:not(.avatar-sm):not(.avatar-md):not(.avatar-lg) .av-emoji { font-size: 19px; }
.avatar-md.emoji .av-emoji { font-size: 32px; }
.avatar-lg.emoji .av-emoji { font-size: 46px; }
.av-amber { background: #FDEBC8; } .av-rose { background: #FBDDE2; } .av-violet { background: #E7DEFA; } .av-sky { background: #D8EBFB; }
.av-teal { background: #D3F0EB; } .av-green { background: #DDF1D6; } .av-sand { background: #EEE6DA; } .av-slate { background: #E2E5EA; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .av-amber { background: #4A3918; } :root:not([data-theme="light"]) .av-rose { background: #4A2630; }
  :root:not([data-theme="light"]) .av-violet { background: #352A52; } :root:not([data-theme="light"]) .av-sky { background: #1E3A52; }
  :root:not([data-theme="light"]) .av-teal { background: #18403A; } :root:not([data-theme="light"]) .av-green { background: #243F1E; }
  :root:not([data-theme="light"]) .av-sand { background: #3E372D; } :root:not([data-theme="light"]) .av-slate { background: #2E333B; } }
:root[data-theme="dark"] .av-amber { background: #4A3918; } :root[data-theme="dark"] .av-rose { background: #4A2630; }
:root[data-theme="dark"] .av-violet { background: #352A52; } :root[data-theme="dark"] .av-sky { background: #1E3A52; }
:root[data-theme="dark"] .av-teal { background: #18403A; } :root[data-theme="dark"] .av-green { background: #243F1E; }
:root[data-theme="dark"] .av-sand { background: #3E372D; } :root[data-theme="dark"] .av-slate { background: #2E333B; }
.photo-picker-wrap { margin-bottom: 16px; }
.photo-picker-wrap .photo-picker { margin-bottom: 0; }
.photo-picker-wrap.loading { opacity: .6; pointer-events: none; }
.emoji-panel { margin-top: 14px; padding: 14px 16px 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-2);
  display: grid; gap: 14px; max-width: 520px; }
.emoji-panel > .seg { justify-self: start; margin: 0; }
.emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, 44px); gap: 4px; max-height: 196px; overflow-y: auto; padding: 2px; }
.emoji-grid button { width: 44px; height: 44px; min-height: 0; padding: 0; font-size: 26px; line-height: 1; background: transparent;
  border: 2px solid transparent; border-radius: 12px; box-shadow: none; }
.emoji-grid button:hover { background: var(--surface); }
.emoji-grid button.active { border-color: var(--accent); background: var(--surface); }
.emoji-opt { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.emoji-opt > .muted { width: 92px; flex: none; }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatches button { min-height: 0; padding: 0; border-radius: 50%; box-shadow: none; border: 2px solid var(--surface-2); outline: 2px solid transparent; }
.swatches button.active { outline-color: var(--accent); }
.swatch { width: 28px; height: 28px; }
.swatches .tone { width: 32px; height: 32px; font-size: 18px; line-height: 1; background: var(--surface); }
.emoji-foot { justify-content: flex-end; gap: 8px; border-top: 1px solid var(--border); padding-top: 12px; }
.photo-actions button.active { border-color: var(--accent); color: var(--accent-text); }
/* Development plans */
.plan-person { display: flex; align-items: center; gap: 16px; }
.plan-person-progress { width: 220px; display: grid; gap: 4px; justify-items: end; }
.plan-editor { display: grid; gap: 14px; }
.plan-editor h3, .plan-comments h3 { margin: 0; }
.plan-steps-edit { display: grid; gap: 10px; }
.plan-step-edit { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.plan-step-fields { display: grid; gap: 8px; min-width: 0; flex: 1; }
.plan-step-fields > input, .plan-step-fields > select { width: 100%; }
.plan-step-tools { display: flex; gap: 2px; }
.plan-step-kind { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); }
.plan-step-kind .svg-icon { width: 16px; height: 16px; }
.plan-step-meta { gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.plan-step-meta .pct { width: 160px; }
.plan-step-meta input[type=date] { min-height: 32px; padding: 4px 8px; }
.plan-editor-meta textarea { min-height: 84px; }
.plan-actions { gap: 10px; border-top: 1px solid var(--border); padding-top: 14px; }
.plan-steps { display: grid; }
.plan-step { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--border); }
.plan-step:first-child { border-top: 0; }
.plan-step.done > .grow > :first-child { color: var(--muted); }
.plan-check { width: 20px; height: 20px; margin: 6px; flex: none; accent-color: var(--accent); }
.plan-mine { display: grid; gap: 12px; }
.plan-message { margin: 0; padding: 10px 14px; border-left: 3px solid var(--spark); background: var(--surface-2); border-radius: 0 var(--radius) var(--radius) 0; }
.plan-goal-form .row { gap: 8px; }
.plan-goal-form input[type=text] { flex: 1; min-width: 200px; }
.plan-comments { display: grid; gap: 10px; }
.plan-comment-list { display: grid; gap: 10px; }
.plan-comment { padding: 10px 12px; background: var(--surface-2); border-radius: var(--radius); }
.plan-comment-form { display: grid; gap: 8px; }
.plan-awaiting { display: grid; gap: 8px; border-color: var(--spark); }
.team-plan { padding-top: 10px; }
.pre-wrap { white-space: pre-wrap; }
@media (max-width: 700px) { .plan-person { flex-wrap: wrap; } .plan-person-progress { width: 100%; justify-items: start; } }