/* ============================================================
   FILE: app/static/css/ui.css
   PURPOSE: PandaDev v2 design system — minimal, modern components
   BATCH: 2 (homepage redesign + every new page in Batches 2-4)

   RULES
   - Prefix: `ui-` (never collides with legacy style.css/components.css).
   - Colours come ONLY from theme.css variables, so dark/light mode works
     automatically. Never hardcode a text colour here.
   - Loaded by base.html after header-footer.css (wins over legacy CSS)
     and before rtl.css.

   TROUBLESHOOTING
   - Text invisible in light mode -> a rule is using a literal colour
     instead of var(--text-*). Search this file for '#fff'.
   - Layout wider than the phone -> a child has a fixed width; the
     container uses min(…) so check the child.
   ============================================================ */

/* ---------- Extra tokens (built on theme.css) ---------- */
:root {
    --ui-radius: 14px;
    --ui-radius-sm: 10px;
    --ui-gap: clamp(16px, 2.5vw, 28px);
    --ui-max: 1180px;
    --ui-ring: 0 0 0 3px color-mix(in srgb, var(--primary) 35%, transparent);
    --ui-tint: color-mix(in srgb, var(--primary) 10%, transparent);
    --ui-tint-2: color-mix(in srgb, var(--secondary) 10%, transparent);
    --ui-card: var(--surface);
    --ui-code-bg: #0A0C10;
    --ui-code-fg: #E4E7EE;
}
html[data-theme="light"] {
    --ui-card: var(--surface-raised);
    --ui-code-bg: #161A22;
}

/* ---------- Layout ---------- */
.ui-container { width: min(var(--ui-max), 100% - 32px); margin-inline: auto; }
.ui-narrow { width: min(760px, 100% - 32px); margin-inline: auto; }
.ui-section { padding-block: clamp(48px, 8vw, 96px); }
.ui-section-sm { padding-block: clamp(28px, 5vw, 56px); }
.ui-section + .ui-section { padding-top: 0; }
.ui-stack > * + * { margin-top: 12px; }
.ui-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.ui-between { justify-content: space-between; }
.ui-center { text-align: center; }
.ui-grid { display: grid; gap: var(--ui-gap); }
/* grid-2: one column on narrow screens, never more than two (a third column used to form at 1440px) */
.ui-grid-2 { grid-template-columns: repeat(auto-fit, minmax(max(min(100%, 340px), calc((100% - var(--ui-gap)) / 2)), 1fr)); }
.ui-grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }

/* Fixed 1 / 2 / 3 columns (no orphan rows of 1 on wide screens, unlike auto-fit) */
.ui-cols-3 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .ui-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .ui-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ui-sidebar-layout { display: grid; gap: var(--ui-gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) {
    .ui-sidebar-layout { grid-template-columns: 260px minmax(0, 1fr); }
    .ui-sidebar-layout.ui-sidebar-right { grid-template-columns: minmax(0, 1fr) 340px; }
}

/* ---------- Typography ---------- */
.ui-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font: 600 0.78rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--primary-light, var(--primary));
}
html[data-theme="light"] .ui-eyebrow { color: var(--primary); }
.ui-h1 { font: 700 clamp(2.1rem, 5.2vw, 3.6rem)/1.08 var(--font-display); letter-spacing: -0.03em; color: var(--text-primary); margin: 14px 0; }
.ui-h2 { font: 700 clamp(1.6rem, 3.4vw, 2.3rem)/1.15 var(--font-display); letter-spacing: -0.02em; color: var(--text-primary); margin: 10px 0 12px; }
.ui-h3 { font: 600 1.15rem/1.3 var(--font-display); color: var(--text-primary); margin: 0 0 6px; }
.ui-lead { font-size: clamp(1.02rem, 1.6vw, 1.18rem); line-height: 1.65; color: var(--text-secondary); max-width: 62ch; }
.ui-center .ui-lead { margin-inline: auto; }
.ui-muted { color: var(--text-muted); }
.ui-small { font-size: 0.86rem; }
.ui-mono { font-family: var(--font-mono); }
.ui-nowrap { white-space: nowrap; }
/* Monitoring: four tables in an even 2x2 grid, each starting at the top */
.ui-mon-tables { align-items: start; }
.ui-mon-tables > section { min-width: 0; }
.ui-mon-tables .ui-h3 { min-height: 1.6em; }

/* ---------- Buttons ---------- */
.ui-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 10px 18px; border-radius: 999px;
    font: 600 0.95rem/1 var(--font-family); text-decoration: none; cursor: pointer;
    border: 1px solid transparent; transition: transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
    white-space: nowrap;
}
.ui-btn:focus-visible { outline: none; box-shadow: var(--ui-ring); }
.ui-btn:active { transform: translateY(1px); }
.ui-btn .material-icons { font-size: 1.15rem; }
.ui-btn-primary { background: var(--primary-strong); color: var(--on-primary); }
.ui-btn-primary:hover { background: var(--primary-dark); color: var(--on-primary); }
.ui-btn-outline { background: transparent; color: var(--text-primary); border-color: var(--border-light); }
.ui-btn-outline:hover { border-color: var(--primary); color: var(--text-primary); background: var(--ui-tint); }
.ui-btn-ghost { background: transparent; color: var(--text-secondary); }
.ui-btn-ghost:hover { color: var(--text-primary); background: var(--ui-tint); }
.ui-btn-danger { background: transparent; color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.ui-btn-danger:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); }
.ui-btn-sm { min-height: 34px; padding: 6px 12px; font-size: 0.85rem; }
.ui-btn-block { width: 100%; }
.ui-btn[disabled], .ui-btn.is-disabled { opacity: .55; pointer-events: none; }
.ui-link { color: var(--primary-light, var(--primary)); text-decoration: none; font-weight: 600; }
html[data-theme="light"] .ui-link { color: var(--primary); }
.ui-link:hover { text-decoration: underline; }
button.ui-link { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }

/* ---------- Cards ---------- */
.ui-card {
    background: var(--ui-card); border: 1px solid var(--border); border-radius: var(--ui-radius);
    padding: clamp(18px, 2.4vw, 26px); color: var(--text-primary);
}
.ui-card-hover { transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.ui-card-hover:hover { border-color: color-mix(in srgb, var(--primary) 55%, var(--border)); transform: translateY(-2px); box-shadow: var(--shadow); }
a.ui-card { display: block; text-decoration: none; }
.ui-card p { color: var(--text-secondary); margin: 0; line-height: 1.6; }
.ui-card-icon {
    width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
    background: var(--ui-tint); color: var(--primary-light, var(--primary)); margin-bottom: 14px;
}
html[data-theme="light"] .ui-card-icon { color: var(--primary); }
.ui-card-icon .material-icons { font-size: 1.4rem; }
.ui-card-footer { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }

/* ---------- Badges ---------- */
.ui-badge {
    display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px;
    font: 600 0.74rem/1.2 var(--font-family); border: 1px solid var(--border-light);
    color: var(--text-secondary); background: transparent; white-space: nowrap;
}
.ui-badge .material-icons { font-size: 0.95rem; }
.ui-badge-primary { color: var(--text-primary); background: var(--ui-tint); border-color: color-mix(in srgb, var(--primary) 45%, transparent); }
.ui-badge-success { color: var(--text-primary); background: color-mix(in srgb, var(--success) 14%, transparent); border-color: color-mix(in srgb, var(--success) 45%, transparent); }
.ui-badge-warning { color: var(--text-primary); background: color-mix(in srgb, var(--warning) 16%, transparent); border-color: color-mix(in srgb, var(--warning) 50%, transparent); }
.ui-badge-danger { color: var(--text-primary); background: color-mix(in srgb, var(--danger) 14%, transparent); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }

/* ---------- Forms ---------- */
.ui-field { display: block; margin-bottom: 16px; }
.ui-label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 6px; color: var(--text-primary); }
.ui-input, .ui-select, .ui-textarea {
    width: 100%; min-height: 44px; padding: 10px 14px; border-radius: var(--ui-radius-sm);
    border: 1px solid var(--border-light); background: var(--background); color: var(--text-primary);
    font: 400 0.95rem/1.4 var(--font-family); transition: border-color .15s ease, box-shadow .15s ease;
}
.ui-textarea { min-height: 120px; resize: vertical; }
.ui-input.ui-mono, .ui-textarea.ui-mono { font-family: var(--font-mono); font-size: 0.88rem; }
.ui-input:focus, .ui-select:focus, .ui-textarea:focus { outline: none; border-color: var(--primary); box-shadow: var(--ui-ring); }
.ui-input::placeholder, .ui-textarea::placeholder { color: var(--text-muted); }
.ui-help { font-size: 0.82rem; color: var(--text-muted); margin-top: 6px; display: block; }
.ui-error { font-size: 0.82rem; color: var(--danger); margin-top: 6px; display: block; }
.ui-check { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9rem; color: var(--text-secondary); }
.ui-check input { margin-top: 3px; accent-color: var(--primary); }
.ui-divider { display: flex; align-items: center; gap: 12px; color: var(--text-muted); font-size: 0.82rem; margin: 18px 0; }
.ui-divider::before, .ui-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
/* plain horizontal rule between sections of one card */
.ui-rule { border: 0; border-top: 1px solid var(--border); margin: 20px 0; }

/* ---------- Alerts / banners ---------- */
.ui-alert {
    display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--ui-radius-sm);
    border: 1px solid var(--border-light); background: var(--ui-tint); color: var(--text-primary); font-size: 0.92rem;
}
.ui-alert .material-icons { font-size: 1.25rem; flex-shrink: 0; }
.ui-alert-warning { background: color-mix(in srgb, var(--warning) 12%, transparent); border-color: color-mix(in srgb, var(--warning) 45%, transparent); }
.ui-alert-danger { background: color-mix(in srgb, var(--danger) 10%, transparent); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.ui-alert-success { background: color-mix(in srgb, var(--success) 10%, transparent); border-color: color-mix(in srgb, var(--success) 40%, transparent); }
/* Thin site-wide banner under the navbar (email verify, offline, etc.) */
.ui-topbar {
    position: relative; z-index: 5; background: var(--ui-tint); border-bottom: 1px solid var(--border);
    color: var(--text-primary); font-size: 0.88rem;
}
.ui-topbar .ui-container { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; padding-block: 10px; }
.ui-topbar form { display: inline; margin: 0; }

/* ---------- Tabs ---------- */
.ui-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; margin-bottom: 20px; }
.ui-tabs::-webkit-scrollbar { display: none; }
.ui-tab {
    padding: 12px 16px; border: 0; background: none; cursor: pointer; white-space: nowrap;
    color: var(--text-muted); font: 600 0.92rem/1 var(--font-family); border-bottom: 2px solid transparent; margin-bottom: -1px;
    text-decoration: none; display: inline-flex; gap: 6px; align-items: center;
}
.ui-tab:hover { color: var(--text-primary); }
.ui-tab[aria-selected="true"], .ui-tab.is-active { color: var(--text-primary); border-bottom-color: var(--primary); }
.ui-tab .material-icons { font-size: 1.05rem; }

/* ---------- Tables ---------- */
.ui-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--ui-radius); }
.ui-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; color: var(--text-primary); }
.ui-table th, .ui-table td { padding: 12px 14px; text-align: start; border-bottom: 1px solid var(--border); vertical-align: middle; }
.ui-table th { font-weight: 600; color: var(--text-secondary); background: var(--background-secondary); font-size: 0.82rem; text-transform: uppercase; letter-spacing: .04em; }
.ui-table tr:last-child td { border-bottom: 0; }

/* ---------- Hero ---------- */

.ui-center .ui-row { justify-content: center; }

/* ---------- Stats ---------- */
.ui-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--ui-radius); overflow: hidden; }
.ui-stat { background: var(--ui-card); padding: 20px; text-align: center; }
.ui-stat strong { display: block; font: 700 1.7rem/1.1 var(--font-display); color: var(--text-primary); }
.ui-stat span { font-size: 0.84rem; color: var(--text-muted); }

/* ---------- Steps / list rows ---------- */
.ui-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--ui-radius); overflow: hidden; }
.ui-list > li { border-bottom: 1px solid var(--border); }
.ui-list > li:last-child { border-bottom: 0; }
.ui-list-row { display: flex; gap: 14px; align-items: center; padding: 14px 16px; color: var(--text-primary); text-decoration: none; background: var(--ui-card); }
a.ui-list-row:hover { background: var(--surface-hover); }
.ui-list-row .ui-grow { flex: 1; min-width: 0; }
.ui-list-row .ui-grow > * { overflow-wrap: anywhere; }
.ui-num {
    width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center;
    font: 600 0.85rem/1 var(--font-mono); background: var(--ui-tint); color: var(--text-primary);
}
.ui-num.is-done { background: color-mix(in srgb, var(--success) 22%, transparent); }
.ui-num.is-locked { background: transparent; border: 1px dashed var(--border-light); color: var(--text-muted); }

/* ---------- Progress ---------- */
.ui-progress { height: 8px; border-radius: 999px; background: var(--border); overflow: hidden; }
.ui-progress > span { display: block; height: 100%; background: var(--gradient-primary); border-radius: inherit; transition: width .4s ease; }

/* ---------- Code + prose (markdown output) ---------- */
.ui-code, .ui-prose pre {
    background: var(--ui-code-bg); color: var(--ui-code-fg); border-radius: var(--ui-radius-sm);
    padding: 16px; overflow-x: auto; font: 0.86rem/1.6 var(--font-mono); margin: 0; tab-size: 4;
}
.ui-code-wrap { position: relative; }
.ui-copy-btn {
    position: absolute; top: 8px; inset-inline-end: 8px; padding: 4px 10px; border-radius: 8px; cursor: pointer;
    border: 1px solid #2A303B; background: #1A1F28; color: #E4E7EE; font-size: 0.75rem;
}
@media (max-width: 640px) { .ui-code-wrap > pre, .ui-code-wrap > .ui-code { padding-top: 44px; } }
.ui-prose { color: var(--text-secondary); line-height: 1.75; font-size: 1rem; overflow-wrap: anywhere; }
.ui-prose h1, .ui-prose h2, .ui-prose h3, .ui-prose h4 { color: var(--text-primary); font-family: var(--font-display); line-height: 1.25; margin: 1.8em 0 .6em; }
.ui-prose h1 { font-size: 1.8rem; } .ui-prose h2 { font-size: 1.45rem; } .ui-prose h3 { font-size: 1.15rem; }
.ui-prose > :first-child { margin-top: 0; }
.ui-prose p, .ui-prose ul, .ui-prose ol, .ui-prose pre, .ui-prose blockquote, .ui-prose table { margin: 0 0 1.1em; }
.ui-prose ul, .ui-prose ol { padding-inline-start: 1.4em; }
.ui-prose li + li { margin-top: .3em; }
.ui-prose a { color: var(--primary-light, var(--primary)); }
html[data-theme="light"] .ui-prose a { color: var(--primary); }
.ui-prose strong { color: var(--text-primary); }
.ui-prose code { font-family: var(--font-mono); font-size: .88em; background: var(--ui-tint); padding: 2px 6px; border-radius: 6px; color: var(--text-primary); }
.ui-prose pre code { background: none; padding: 0; color: inherit; font-size: inherit; }
.ui-prose blockquote { border-inline-start: 3px solid var(--primary); padding: 6px 16px; background: var(--ui-tint); border-radius: 0 8px 8px 0; }
.ui-prose table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.ui-prose th, .ui-prose td { border: 1px solid var(--border); padding: 8px 10px; text-align: start; }
.ui-prose img { max-width: 100%; border-radius: var(--ui-radius-sm); }

/* ---------- Empty state ---------- */
.ui-empty { text-align: center; padding: 48px 16px; color: var(--text-muted); border: 1px dashed var(--border-light); border-radius: var(--ui-radius); }
.ui-empty .material-icons { font-size: 2.4rem; opacity: .6; }

/* ---------- Auth pages ---------- */
.ui-auth { min-height: calc(100vh - 72px); display: grid; place-items: center; padding: 40px 16px 64px; }
.ui-auth-card { width: min(440px, 100%); }
.ui-auth-card .ui-card { padding: clamp(22px, 4vw, 34px); }
.ui-auth-head { text-align: center; margin-bottom: 22px; }
.ui-auth-head .ui-card-icon { margin-inline: auto; }
.ui-auth-head h1 { font: 700 1.6rem/1.2 var(--font-display); margin: 0 0 6px; color: var(--text-primary); }
.ui-auth-head p { color: var(--text-secondary); margin: 0; }
.ui-oauth { display: grid; gap: 10px; }
.ui-oauth .ui-btn { border-radius: var(--ui-radius-sm); }
.ui-auth-foot { text-align: center; margin-top: 18px; font-size: 0.9rem; color: var(--text-secondary); }
.ui-codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; font: 600 1rem/1 var(--font-mono); }
.ui-codes span { padding: 10px; text-align: center; border-radius: 8px; background: var(--ui-tint); color: var(--text-primary); }

/* ---------- Ecosystem cards ---------- */

/* ---------- Tools / playground ---------- */
.ui-tool-out { min-height: 120px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ui-kbd { font: 600 0.78rem/1 var(--font-mono); padding: 3px 7px; border-radius: 6px; border: 1px solid var(--border-light); color: var(--text-secondary); }
.ui-swatch { width: 100%; aspect-ratio: 3 / 1; border-radius: var(--ui-radius-sm); border: 1px solid var(--border); }
.ui-diff { font: 0.85rem/1.55 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.ui-diff .add { background: color-mix(in srgb, var(--success) 18%, transparent); display: block; }
.ui-diff .del { background: color-mix(in srgb, var(--danger) 16%, transparent); display: block; text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--danger) 60%, transparent); }

/* ---------- Chat (AI assistant) ---------- */
.ui-chat { display: flex; flex-direction: column; height: min(70vh, 640px); }

.ui-chat-msg { padding: 10px 14px; border-radius: 14px; max-width: 92%; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.92rem; line-height: 1.55; }
.ui-chat-msg.user { align-self: flex-end; background: var(--primary-strong); color: #fff; border-end-end-radius: 4px; }
.ui-chat-msg.bot { align-self: flex-start; background: var(--background-secondary); color: var(--text-primary); border: 1px solid var(--border); border-end-start-radius: 4px; }
.ui-chat form { display: flex; gap: 8px; margin-top: 10px; }

/* ---------- Utilities ---------- */
.ui-mt-0 { margin-top: 0 !important; } .ui-mt-1 { margin-top: 8px; } .ui-mt-2 { margin-top: 16px; } .ui-mt-3 { margin-top: 28px; } .ui-mt-4 { margin-top: 44px; }
.ui-mb-0 { margin-bottom: 0 !important; } .ui-mb-2 { margin-bottom: 16px; } .ui-mb-3 { margin-bottom: 28px; }
.ui-hide-mobile { display: none; }
@media (min-width: 768px) { .ui-hide-mobile { display: initial; }  }
.ui-sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
    .ui-card-hover, .ui-btn, .ui-progress > span { transition: none; }
    .ui-card-hover:hover { transform: none; }
}

/* ============================================================
   BRAND (logo) — original PandaDev mark: gradient rounded square with
   the Material "code" icon + gradient wordmark. Used by header, drawer
   and footer. Do not swap the icon for an emoji.
   ============================================================ */
.ui-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.ui-brand-mark {
    width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; border-radius: 10px;
    background: var(--gradient-primary); color: #FFFFFF;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 35%, transparent);
    transition: transform .2s ease, box-shadow .2s ease;
}
.ui-brand-mark .material-icons { font-size: 1.25rem; }
.ui-brand:hover .ui-brand-mark { transform: rotate(-6deg) scale(1.04); }
.ui-brand-name {
    font: 900 1.3rem/1 var(--font-display); letter-spacing: -0.03em;
    background: var(--gradient-primary); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}

/* ============================================================
   ICONS — Material Symbols Rounded behind the existing .material-icons
   class (base.html loads the font). Ligature names match Material Icons.
   ============================================================ */
.material-icons, .material-symbols-rounded {
    font-family: 'Material Symbols Rounded'; font-weight: normal; font-style: normal;
    font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none;
    display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr;
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
    font-feature-settings: 'liga'; font-variation-settings: 'FILL' 0, 'wght' 450, 'GRAD' 0, 'opsz' 24;
    user-select: none; vertical-align: middle; overflow: hidden; max-width: 1.2em;
}
.ui-tabbar a.is-active .material-icons { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }

/* ============================================================
   APP SHELL (v3.30: top navigation; partials/header.html + js/header.js)
     header.ui-nav   fixed top bar: brand, grouped dropdown menus
                     (>= 1100px), language, theme, Start a project,
                     account menu; below 1100px a menu button opens
     #uiMenu         a full-screen grouped menu (phones and tablets; also
                     opened by the "Menu" tab of the phone tab bar)
     .ui-shell       content column: <main> grows, footer at the bottom
   Breakpoint 1100px: keep DESKTOP_BP in header.js in sync.
   ============================================================ */
:root { --bar-h: 64px; --nav-max: 1240px; }

body.ui-app { margin: 0; min-height: 100vh; min-height: 100dvh; }
.ui-shell { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; min-width: 0; }
.ui-shell > main { flex: 1 0 auto; padding-top: var(--bar-h); min-width: 0; }
body.ui-menu-open { overflow: hidden; }

/* Coloured icons (tokens in theme.css, readable in both themes) */
.ui-ic-blue   { --ic: var(--ic-blue); }   .ui-ic-mint   { --ic: var(--ic-mint); }
.ui-ic-violet { --ic: var(--ic-violet); } .ui-ic-amber  { --ic: var(--ic-amber); }
.ui-ic-rose   { --ic: var(--ic-rose); }   .ui-ic-sky    { --ic: var(--ic-sky); }
.ui-ic-green  { --ic: var(--ic-green); }  .ui-ic-orange { --ic: var(--ic-orange); }

/* ---- Top bar ---- */
.ui-nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: var(--bar-h);
    padding-top: env(safe-area-inset-top, 0px);
    background: color-mix(in srgb, var(--background) 86%, transparent);
    backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--border);
    transition: background .2s ease, box-shadow .2s ease;
}
.ui-nav.scrolled { background: color-mix(in srgb, var(--background) 96%, transparent); box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }
.ui-nav-inner {
    height: var(--bar-h); max-width: var(--nav-max); margin: 0 auto; display: flex; align-items: center; gap: 8px;
    padding-inline: 16px;
}
.ui-nav-actions { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; }
@media (min-width: 1100px) { .ui-nav-actions { margin-inline-start: 0; } }
.ui-nav-brand-text { display: grid; line-height: 1.1; min-width: 0; }
.ui-nav .ui-brand-name { font-size: 1.15rem; }
.ui-nav .ui-brand-mark { width: 34px; height: 34px; }
.ui-nav .ui-mark-glyph { font-size: 13px; }
.ui-brand-tag { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em; color: var(--text-secondary); white-space: nowrap; }

/* desktop menus */
.ui-topnav { display: none; align-items: center; gap: 2px; margin-inline: auto; }   /* v3.30: centred between brand and actions */
.ui-topnav-link {
    display: inline-flex; align-items: center; gap: 2px; height: 38px; padding: 0 12px; border-radius: 10px; border: 0;
    background: none; color: var(--text-secondary); font: 600 0.92rem/1 var(--font-family); text-decoration: none; cursor: pointer;
    white-space: nowrap;
}
.ui-topnav-link .material-icons { font-size: 1.1rem; transition: transform .15s ease; }
.ui-topnav-link:hover, .ui-menu.open > .ui-topnav-link { color: var(--text-primary); background: var(--surface-hover); }
.ui-menu.open > .ui-topnav-link .material-icons { transform: rotate(180deg); }
.ui-topnav-link:focus-visible { outline: none; box-shadow: var(--ui-ring); }
.ui-topnav-link.is-active { color: var(--text-primary); }
.ui-topnav-link.is-active::after {
    content: ''; position: absolute; inset-inline: 12px; bottom: -13px; height: 2px; border-radius: 2px; background: var(--primary-light);
}
.ui-topnav .ui-menu, .ui-topnav > .ui-topnav-link { position: relative; }
.ui-topnav-panel { min-width: 250px; }
.ui-topnav-panel .ui-menu-item > .material-icons { color: var(--ic, var(--primary-light)); }
.ui-nav-cta { margin-inline-start: 6px; white-space: nowrap; }
/* v3.31 client sign-in button (signed-out visitors): icon only on narrower desktops so the bar never wraps */
.ui-nav-signin { white-space: nowrap; }
@media (max-width: 1279.98px) { .ui-nav-signin .ui-nav-signin-label { display: none; } .ui-nav-signin { padding-inline: 8px; } }

/* phone / tablet full-screen menu */
.ui-mmenu {
    position: fixed; inset: 0; z-index: 1100; display: flex; flex-direction: column; background: var(--background);
    padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
    animation: ui-pop .16s ease-out;
}
.ui-mmenu[hidden] { display: none; }
.ui-mmenu-head { height: var(--bar-h); flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding-inline: 16px; border-bottom: 1px solid var(--border); }
.ui-mmenu-body { flex: 1; overflow-y: auto; padding: 14px 16px 24px; display: grid; gap: 18px; align-content: start; overscroll-behavior: contain; }
.ui-mmenu-group h2 { margin: 0 0 6px; padding: 0 4px; font: 600 0.7rem/1.2 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted); }
.ui-mmenu-links { display: grid; gap: 4px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.ui-mmenu-link {
    display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 8px 12px; border-radius: 12px; text-decoration: none;
    color: var(--text-primary); font: 600 0.98rem/1.2 var(--font-family); background: var(--surface); border: 1px solid var(--border);
}
.ui-mmenu-link .material-icons { color: var(--ic, var(--primary-light)); font-size: 1.3rem; }
.ui-mmenu-link.is-active { border-color: color-mix(in srgb, var(--ic, var(--primary)) 55%, var(--border)); background: color-mix(in srgb, var(--ic, var(--primary)) 12%, var(--surface)); }
.ui-mmenu-link:focus-visible { outline: none; box-shadow: var(--ui-ring); }
.ui-mmenu-foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ui-mmenu-foot form { margin: 0; }
.ui-mmenu-langs { display: flex; flex-wrap: wrap; gap: 6px; }
.ui-mmenu-langs a { padding: 6px 10px; border-radius: 99px; border: 1px solid var(--border); color: var(--text-secondary); text-decoration: none; font-size: 0.85rem; }
.ui-mmenu-langs a.is-active { color: var(--text-primary); border-color: var(--primary); font-weight: 600; }
.ui-mmenu-help { margin: 0; font-size: 0.8rem; color: var(--text-secondary); }
.ui-mmenu-account { display: grid; gap: 2px; padding: 6px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.ui-mmenu-account .ui-menu-item[class*="ui-ic-"] > .material-icons, .ui-topnav-panel .ui-menu-item[class*="ui-ic-"] > .material-icons,
#menu-account .ui-menu-item[class*="ui-ic-"] > .material-icons { color: var(--ic); }

@media (min-width: 1100px) {
    .ui-topnav { display: flex; }
    .ui-nav-burger, .ui-mmenu { display: none !important; }
    .ui-nav-inner { padding-inline: 24px; gap: 10px; }
}
@media (max-width: 1099.98px) {
    .ui-nav-cta, .ui-nav-desk { display: none !important; }
}
@media (max-width: 359.98px) {
    .ui-nav .ui-brand-tag { font-size: 0.62rem; letter-spacing: 0; }   /* smallest phones: the tagline stays, a little smaller */
}
@media (prefers-reduced-motion: reduce) {
    .ui-nav, .ui-mmenu, .ui-topnav-link .material-icons { transition: none !important; animation: none !important; }
}

/* ---- Menus (language, account) ---- */
.ui-menu { position: relative; }
.ui-menu-panel {
    position: absolute; top: calc(100% + 10px); inset-inline-start: 0; min-width: 260px; padding: 8px; display: none; z-index: 5;
    background: var(--surface-raised); border: 1px solid var(--border-light); border-radius: var(--ui-radius);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35); max-height: calc(100vh - 90px); overflow-y: auto;
}
.ui-menu.open > .ui-menu-panel { display: block; animation: ui-pop .16s ease-out; }
@keyframes ui-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.ui-menu-panel-end { inset-inline-start: auto; inset-inline-end: 0; }
.ui-menu-item {
    display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; text-decoration: none;
    color: var(--text-primary); width: 100%; background: none; border: 0; cursor: pointer; font: inherit; text-align: start;
}
.ui-menu-item:hover, .ui-menu-item:focus-visible { background: var(--ui-tint); outline: none; }
.ui-menu-item > .material-icons { font-size: 1.2rem; flex-shrink: 0; color: var(--primary-light); }
.ui-menu-compact { align-items: center; padding: 8px 10px; font-size: 0.9rem; }
.ui-menu-compact > .material-icons { font-size: 1.15rem; }
.ui-menu-head { padding: 10px 12px 12px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.ui-menu-head b { display: block; color: var(--text-primary); }
.ui-menu-head small { color: var(--text-muted); font-size: 0.8rem; overflow-wrap: anywhere; }
.ui-menu-form { margin: 6px 0 0; padding-top: 6px; border-top: 1px solid var(--border); }
.ui-menu-item.is-active { background: var(--ui-tint); font-weight: 600; }

.ui-icon-btn {
    min-width: 38px; height: 38px; padding: 0 8px; border-radius: 10px; border: 1px solid transparent; background: none; cursor: pointer;
    color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 0.82rem;
    text-decoration: none;
}
.ui-icon-btn:hover { color: var(--text-primary); background: var(--surface-hover); }
.ui-icon-btn:focus-visible { outline: none; box-shadow: var(--ui-ring); }
.ui-icon-btn .material-icons { font-size: 1.3rem; }
/* `.ui-icon-btn { display: inline-flex }` must not beat the [hidden] attribute */
.ui-icon-btn[hidden], .ui-btn[hidden] { display: none !important; }
.ui-avatar-btn { border: 2px solid var(--border-light); padding: 0; border-radius: 50%; width: 36px; height: 36px; overflow: hidden; cursor: pointer; background: none; margin-inline-start: 4px; }
.ui-avatar-btn:hover { border-color: var(--primary); }
.ui-avatar-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ui-lang-panel { display: none; grid-template-columns: 1fr 1fr; gap: 2px; min-width: min(320px, calc(100vw - 32px)); }
.ui-menu.open > .ui-lang-panel { display: grid; }
.ui-lang-item { padding: 9px 10px; border-radius: 8px; text-decoration: none; color: var(--text-secondary); font-size: 0.9rem; display: flex; gap: 8px; align-items: center; }
.ui-lang-item:hover { background: var(--ui-tint); color: var(--text-primary); }
.ui-lang-item.is-active { color: var(--text-primary); background: var(--ui-tint); font-weight: 600; }

/* ============================================================
   FOOTER (partials/footer.html) — one slim bar at the bottom of the
   content column. Fixed sizes (no inherited font-size), so it looks the
   same on every page.
   ============================================================ */
.ui-footer {
    flex-shrink: 0; margin-top: clamp(28px, 4vw, 48px); border-top: 1px solid var(--border);
    background: var(--background-secondary); color: var(--text-muted); font: 400 13px/1.4 var(--font-family);
}
.ui-footer-bar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 20px; min-height: 52px;
    padding: 10px clamp(16px, 3vw, 24px);
}
.ui-footer a { color: var(--text-secondary); text-decoration: none; }
.ui-footer a:hover { color: var(--text-primary); }
.ui-footer-copy { color: var(--text-muted); white-space: nowrap; }
.ui-footer-legal { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.ui-footer-social { display: flex; align-items: center; gap: 4px; }   /* v3.30: footer centred */
.ui-footer-social a:not(.ui-footer-dot) { width: 32px; height: 32px; display: inline-grid; place-items: center; border-radius: 8px; }
.ui-footer-social a:not(.ui-footer-dot):hover { background: var(--surface-hover); }
.ui-footer-social .material-icons { font-size: 18px; }
.ui-footer-social .fab { font-size: 16px; }
.ui-footer-social .ui-footer-dot { margin-inline-start: 6px; }
@media (max-width: 560px) {
    .ui-footer-bar { justify-content: center; text-align: center; }
    .ui-footer-legal { justify-content: center; width: 100%; order: 2; }
    .ui-footer-social { margin-inline-start: 0; }
}

/* ============================================================
   MOBILE TAB BAR (partials/mobile_tabbar.html) — app-style navigation
   on phones and in the installed PWA. Hidden from 900px up.
   ============================================================ */
.ui-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 999; display: grid; grid-template-columns: repeat(5, 1fr);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--background) 92%, transparent);
    backdrop-filter: saturate(170%) blur(16px); -webkit-backdrop-filter: saturate(170%) blur(16px);
    border-top: 1px solid var(--border);
}
.ui-tabbar a, .ui-tabbar button {
    display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: 12px;
    color: var(--text-muted); text-decoration: none; font-size: 0.7rem; font-weight: 600; min-width: 0;
    background: none; border: 0; cursor: pointer; font-family: var(--font-family);
}
.ui-tabbar button:focus-visible, .ui-tabbar a:focus-visible { outline: none; box-shadow: var(--ui-ring); }
.ui-tabbar a span:last-child, .ui-tabbar button span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-tabbar .material-icons { font-size: 1.45rem; }
.ui-tabbar a.is-active { color: var(--primary-light, var(--primary)); background: var(--ui-tint); }
html[data-theme="light"] .ui-tabbar a.is-active { color: var(--primary); }
@media (max-width: 899.98px) {
    body { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
    .flash-container { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 900px) { .ui-tabbar { display: none; } }
/* Installed app: no browser chrome, so keep the top bar compact */
html.is-standalone { --bar-h: 58px; }

/* ============================================================
   HOMEPAGE (index.html)
   ============================================================ */

.ui-window {
    border: 1px solid var(--border); border-radius: 18px; overflow: hidden; background: var(--ui-code-bg);
    box-shadow: 0 30px 80px rgba(2, 6, 23, .45), 0 0 0 1px color-mix(in srgb, var(--primary) 18%, transparent);
}
.ui-window-bar { display: flex; align-items: center; gap: 7px; padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
.ui-window-bar i { width: 11px; height: 11px; border-radius: 50%; background: #F87171; display: block; }
.ui-window-bar i:nth-child(2) { background: #FBBF24; } .ui-window-bar i:nth-child(3) { background: #34D399; }
.ui-window-bar span { margin-inline-start: 8px; font: 0.78rem/1 var(--font-mono); color: #94A3B8; }
.ui-window pre { margin: 0; padding: 18px 20px 22px; font: 0.86rem/1.75 var(--font-mono); color: #E2E8F0; overflow-x: auto; direction: ltr; text-align: left; }
.ui-window .k { color: #C4B5FD; } .ui-window .s { color: #67E8F9; } .ui-window .c { color: #64748B; } .ui-window .f { color: #F9A8D4; }
.ui-section-head { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: flex-end; justify-content: space-between; margin-bottom: 26px; }
.ui-section-head .ui-lead { margin: 0; }

/* a.ui-track-card: must beat `a.ui-card { display: block }`, otherwise the
   flex gap and the bottom-pinned meta row are ignored (icons touched titles
   and badge rows sat at different heights across a grid row). */
.ui-track-card, a.ui-track-card { display: flex; flex-direction: column; gap: 12px; height: 100%; }
.ui-track-card .ui-card-icon { margin: 0; }
.ui-track-card .ui-h3 { margin: 4px 0 0; line-height: 1.3; }
.ui-track-card > p {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ui-track-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 8px; }
.ui-tool-tile { display: flex; gap: 12px; align-items: center; padding: 14px 16px; }
.ui-tool-tile .ui-card-icon { margin: 0; width: 38px; height: 38px; flex-shrink: 0; }
.ui-tool-tile b { display: block; color: var(--text-primary); font-size: 0.95rem; }
.ui-tool-tile small { display: block; color: var(--text-muted); font-size: 0.8rem; line-height: 1.35; margin-top: 2px; }

.ui-band {
    border: 1px solid var(--border); border-radius: calc(var(--ui-radius) + 6px); padding: clamp(24px, 5vw, 48px);
    background:
        radial-gradient(70% 120% at 0% 0%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 60%),
        radial-gradient(60% 120% at 100% 100%, color-mix(in srgb, var(--secondary) 14%, transparent), transparent 60%),
        var(--ui-card);
}

/* ============================================================
   PRICING (pricing.html)
   ============================================================ */
.ui-price-card { display: flex; flex-direction: column; gap: 14px; height: 100%; position: relative; }
.ui-price-card.is-featured { border-color: color-mix(in srgb, var(--primary) 65%, var(--border)); box-shadow: 0 20px 60px color-mix(in srgb, var(--primary) 18%, transparent); }
.ui-price-card .ui-badge { position: absolute; top: -12px; inset-inline-start: 20px; background: var(--primary-strong); color: #FFFFFF; border-color: transparent; }
.ui-price { font: 700 2.2rem/1 var(--font-display); color: var(--text-primary); }
.ui-price small { font: 500 0.9rem/1 var(--font-family); color: var(--text-muted); }
.ui-price-setup { font-size: 0.86rem; color: var(--text-muted); }
.ui-check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; font-size: 0.92rem; color: var(--text-secondary); }
.ui-check-list li { display: flex; gap: 8px; align-items: flex-start; }
.ui-check-list .material-icons { font-size: 1.05rem; color: var(--success); margin-top: 1px; }
.ui-price-card .ui-btn { margin-top: auto; }

/* ============================================================
   LEARNING (templates/learn/*)
   ============================================================ */
.ui-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; font-size: 0.88rem;
    border: 1px solid var(--border); color: var(--text-secondary); text-decoration: none; background: var(--ui-card);
}
.ui-chip:hover { color: var(--text-primary); border-color: var(--border-light); }
.ui-chip.is-active { color: #FFFFFF; background: var(--primary-strong); border-color: var(--primary); }
.ui-track-icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; color: #FFFFFF; flex-shrink: 0; }
.ui-track-icon .material-icons { font-size: 1.6rem; }
.ui-track-head { display: flex; gap: 18px; align-items: flex-start; }
.ui-breadcrumb { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 0.86rem; color: var(--text-muted); margin-bottom: 14px; }
.ui-breadcrumb a { color: var(--text-secondary); text-decoration: none; }
.ui-breadcrumb a:hover { color: var(--text-primary); }
.ui-module-nav { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); }
.ui-sticky { position: sticky; top: calc(var(--bar-h) + 20px); }

/* Gamification (learn/my_progress.html) */

/* ============================================================
   ADMIN (v2.1): learning manager, staff, analytics
   ============================================================ */
.ui-chart { position: relative; height: 260px; }
.ui-right { text-align: end; }
.ui-actions { display: inline-flex; flex-wrap: wrap; gap: 2px; justify-content: flex-end; }
.ui-actions form { margin: 0; display: inline; }
.ui-actions .ui-icon-btn { min-width: 34px; height: 34px; padding: 0 6px; }
.ui-actions .ui-icon-btn .material-icons { font-size: 1.1rem; }
.ui-icon-btn.ui-danger:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.ui-dialog {
    border: 1px solid var(--border); border-radius: var(--ui-radius); padding: 22px; width: min(460px, calc(100% - 32px));
    background: var(--ui-card); color: var(--text-primary); box-shadow: 0 30px 80px rgba(2, 6, 23, .45);
}
.ui-dialog::backdrop { background: rgba(2, 6, 23, .6); backdrop-filter: blur(2px); }
.ui-editor { display: grid; gap: 16px; grid-template-columns: 1fr; }
.ui-preview { max-height: 560px; overflow: auto; min-height: 200px; }
@media (min-width: 1100px) { .ui-editor { grid-template-columns: 1fr 1fr; } .ui-editor textarea { min-height: 560px; } }
.ui-table td, .ui-table th { vertical-align: middle; }

/* ============================================================
   DEV TOOLS + PRACTICE TERMINAL (templates/tools/*)
   ============================================================ */
.ui-menu-item.is-active { background: var(--ui-tint); font-weight: 600; }
.ui-code mark { background: color-mix(in srgb, #FACC15 45%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.ui-term-layout { display: grid; gap: 18px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1024px) { .ui-term-layout { grid-template-columns: minmax(0, 1fr) 340px; } }
.ui-term { border-radius: 16px; overflow: hidden; background: #0A0C10; border: 1px solid var(--border); box-shadow: 0 24px 60px rgba(2, 6, 23, .4); }
.ui-term .ui-window-bar { background: #12151B; }
.ui-term-reset { margin-inline-start: auto; background: none; border: 1px solid rgba(255,255,255,.15); color: #94A3B8; border-radius: 8px; padding: 3px 10px; font-size: 0.75rem; cursor: pointer; }
.ui-term-reset:hover { color: #E2E8F0; border-color: rgba(255,255,255,.35); }
.ui-term-screen {
    height: min(60vh, 520px); overflow-y: auto; padding: 14px 16px; cursor: text;
    font: 0.88rem/1.6 var(--font-mono); color: #E2E8F0; direction: ltr; text-align: left; overflow-wrap: anywhere;
}
/* pre-wrap only on output lines: on the screen itself the template's own
   newlines and indentation rendered as blank lines above the banner */
.ui-term-screen [data-term-out] > * { white-space: pre-wrap; }
/* desktop: the terminal fills the row so it ends level with the missions
   panel; height:0 + flex-grow keeps output from stretching the row */
@media (min-width: 1024px) {
    .ui-term-layout { align-items: stretch; }
    .ui-term { display: flex; flex-direction: column; }
    .ui-term-screen { flex: 1 1 auto; height: 0; min-height: 420px; }
}
.ui-term-screen:focus { outline: none; }
.ui-term-line { display: flex; gap: 8px; align-items: baseline; }
.ui-term-prompt { color: #34D399; white-space: nowrap; font-weight: 600; }
.ui-term-input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: #F8FAFC; font: inherit; caret-color: #34D399; padding: 0; }
.ui-term-echo { color: #94A3B8; }
.ui-term-ok { color: #34D399; }
.ui-term-dim { color: #64748B; }
.ui-term-mlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ui-term-mlist li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; padding: 8px; border-radius: 10px; }
.ui-term-mlist li > .material-icons { color: var(--text-muted); font-size: 1.2rem; }
.ui-term-mlist li.is-done { background: color-mix(in srgb, var(--success) 10%, transparent); }
.ui-term-mlist li.is-done > .material-icons { color: var(--success); }
.ui-term-mlist b { display: block; font-size: 0.9rem; color: var(--text-primary); }
.ui-term-mlist small { display: block; font-size: 0.78rem; color: var(--text-muted); line-height: 1.4; }
.ui-term-mlist small code { font-family: var(--font-mono); background: var(--ui-tint); padding: 0 4px; border-radius: 4px; }

/* About page (about.html) */

/* ============================================================
   SEARCH BAR (learn catalogue) — icon centred inside the input's own box
   ============================================================ */
.ui-search { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 18px; max-width: 760px; }
.ui-search-field { position: relative; flex: 1 1 260px; min-width: 0; }
.ui-search-field > .material-icons {
    position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%);
    font-size: 1.25rem; line-height: 1; color: var(--text-muted); pointer-events: none;
}
.ui-search-field:focus-within > .material-icons { color: var(--primary); }
.ui-search-field .ui-input { width: 100%; padding-inline-start: 42px; }
.ui-search-hits { display: flex; gap: 6px; align-items: flex-start; font-size: .85rem; color: var(--text-muted); margin: 0; }
.ui-search-hits .material-icons { font-size: 1rem; margin-top: 2px; }

/* ============================================================
   PAGE HERO (partials/_page_hero.html) — the shared top section of every
   page: centred card, gradient icon circle, title, subtitle. Matches the
   /portfolio and /collaborate headers.
   ============================================================ */
.ui-page-hero-wrap { padding-top: clamp(20px, 4vw, 40px); }
.ui-page-hero-wrap .ui-breadcrumb { margin-bottom: 14px; }
.ui-page-hero {
    position: relative; overflow: hidden; text-align: center;
    padding: clamp(36px, 6vw, 52px) clamp(18px, 4vw, 40px);
    margin-bottom: clamp(24px, 4vw, 44px);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg, 20px);
    transition: border-color .3s ease;
}
.ui-page-hero:hover { border-color: color-mix(in srgb, var(--primary) 60%, var(--border)); }
.ui-page-hero::before, .ui-page-hero::after {
    content: ''; position: absolute; border-radius: 50%; pointer-events: none;
}
.ui-page-hero::before {
    top: -50%; inset-inline-end: -20%; width: 500px; height: 500px;
    background: radial-gradient(circle, color-mix(in srgb, var(--primary) 7%, transparent) 0%, transparent 70%);
}
.ui-page-hero::after {
    bottom: -40%; inset-inline-start: -10%; width: 400px; height: 400px;
    background: radial-gradient(circle, color-mix(in srgb, var(--secondary) 5%, transparent) 0%, transparent 70%);
}
.ui-page-hero > * { position: relative; z-index: 1; }
.ui-page-hero-icon {
    width: 72px; height: 72px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center;
    background: var(--gradient-primary); color: #FFFFFF;
    box-shadow: 0 8px 36px color-mix(in srgb, var(--primary) 30%, transparent); transition: transform .3s ease;
}
.ui-page-hero-icon:hover { transform: scale(1.05) rotate(-5deg); }
.ui-page-hero-icon .material-icons { font-size: 2.3rem; }
.ui-page-hero-title {
    margin: 0 auto 10px; max-width: 22ch; color: var(--text-primary);
    font: 800 clamp(1.9rem, 4.6vw, 2.8rem)/1.12 var(--font-display); letter-spacing: -0.02em;
}
.ui-page-hero-sub {
    margin: 0 auto; max-width: 620px; color: var(--text-secondary);
    font-size: clamp(1rem, 2vw, 1.15rem); line-height: 1.7;
}
.ui-page-hero-body { margin-top: 22px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ui-page-hero-body .ui-row { justify-content: center; margin: 0; }
.ui-page-hero-body .ui-track-meta { justify-content: center; margin: 0; }
.ui-page-hero-lg { padding-block: clamp(48px, 8vw, 84px); }
.ui-page-hero-lg .ui-page-hero-icon { width: 84px; height: 84px; }
.ui-page-hero-lg .ui-page-hero-icon .material-icons { font-size: 2.7rem; }
.ui-page-hero-lg .ui-page-hero-title { font-size: clamp(2.2rem, 6vw, 3.6rem); max-width: 18ch; }
.ui-page-hero-lg .ui-page-hero-sub { max-width: 640px; }
/* Homepage tech theme: faint grid that fades out at the edges + a terminal line */
.ui-page-hero-lg {
    background-image:
        linear-gradient(color-mix(in srgb, var(--primary) 9%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--primary) 9%, transparent) 1px, transparent 1px);
    background-size: 36px 36px; background-color: var(--surface);
}
.ui-page-hero-lg::before { background: radial-gradient(circle, color-mix(in srgb, var(--surface) 0%, transparent) 0%, transparent 70%); }

@keyframes ui-blink { 50% { opacity: 0; } }

/* ============================================================
   FEATURE CARD (tools hub "Practice terminal" band): icon | text | button,
   the button drops under the text (aligned with it) on narrow screens
   ============================================================ */
.ui-feature-card, a.ui-card.ui-feature-card {   /* must beat `a.ui-card { display: block }` */
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px 18px;
    margin-bottom: 22px; text-decoration: none;
}
.ui-feature-card h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 4px; }
.ui-feature-card p { margin: 0; }
.ui-feature-card .ui-btn { white-space: nowrap; }
@media (max-width: 719.98px) {
    .ui-feature-card { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
    .ui-feature-card > .ui-btn { grid-column: 2; justify-self: start; }
}

/* ============================================================
   HOMEPAGE v2.3 — contact call-to-action band (the form lives on /collaborate)
   ============================================================ */

/* ============================================================
   FOOTER STAFF DOT — a small dot at the end of the footer bar that links to
   the staff sign-in portal (requested by the owner). The portal still
   enforces MFA, 3 attempts/hour, lockout and audit logging.
   ============================================================ */
.ui-footer-dot {
    width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; display: inline-block;
    background: color-mix(in srgb, var(--primary) 70%, var(--text-muted));
    opacity: .55; transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease;
}
.ui-footer-dot:hover, .ui-footer-dot:focus-visible {
    opacity: 1; transform: scale(1.3); outline: none;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 25%, transparent);
}

/* ============================================================
   PLANNER TOOLS (tools/stack.html, tools/cost.html): form + result,
   side by side from 1000px; pill-style radio/checkbox choices
   ============================================================ */
.ui-planner { display: grid; gap: var(--ui-gap); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1000px) { .ui-planner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.ui-choice-group { border: 0; margin: 0 0 18px; padding: 0; min-width: 0; }
.ui-choice-group > legend { margin-bottom: 10px; padding: 0; }
.ui-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-choice { position: relative; cursor: pointer; }
.ui-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ui-choice span {
    display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 999px; font-size: 0.9rem;
    border: 1px solid var(--border); color: var(--text-secondary); transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.ui-choice:hover span { border-color: color-mix(in srgb, var(--primary) 50%, var(--border)); color: var(--text-primary); }
.ui-choice input:checked + span { background: var(--ui-tint); border-color: var(--primary); color: var(--text-primary); font-weight: 600; }
.ui-choice input:focus-visible + span { box-shadow: var(--ui-ring); }
.ui-stack-rows { margin: 0; display: grid; gap: 0; }
.ui-stack-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.ui-stack-row:last-child { border-bottom: 0; }
.ui-stack-row dt { font: 600 0.75rem/1.6 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.ui-stack-row dd { margin: 0; }
.ui-stack-row dd b { color: var(--text-primary); }
.ui-stack-row dd p { margin: 4px 0 6px; font-size: 0.9rem; color: var(--text-secondary); }
@media (max-width: 480px) { .ui-stack-row { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
.ui-planner .ui-table th[scope="row"] { text-transform: none; letter-spacing: 0; font-size: 0.92rem; font-weight: 500; background: none; }
.ui-text-danger { color: var(--danger, #EF4444); }

/* ============================================================
   PAGE HERO v3 (desktop app look): from 1100px the standard page hero is
   a compact, left-aligned page header (icon tile | title + subtitle,
   actions underneath). The large homepage hero keeps its centred layout.
   ============================================================ */
@media (min-width: 1100px) {
    .ui-page-hero:not(.ui-page-hero-lg) {
        display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 20px; align-items: center;
        text-align: start; padding: 26px 30px; margin-bottom: 28px;
        background: linear-gradient(120deg, color-mix(in srgb, var(--primary) 9%, var(--surface)) 0%, var(--surface) 55%);
    }
    .ui-page-hero:not(.ui-page-hero-lg)::before, .ui-page-hero:not(.ui-page-hero-lg)::after { display: none; }
    .ui-page-hero:not(.ui-page-hero-lg) .ui-page-hero-icon {
        grid-row: 1 / span 2; width: 60px; height: 60px; margin: 0; border-radius: 16px;
    }
    .ui-page-hero:not(.ui-page-hero-lg) .ui-page-hero-icon .material-icons { font-size: 1.9rem; }
    .ui-page-hero:not(.ui-page-hero-lg) .ui-page-hero-title { margin: 0 0 4px; max-width: none; font-size: 1.75rem; }
    .ui-page-hero:not(.ui-page-hero-lg) .ui-page-hero-sub { margin: 0; max-width: 72ch; font-size: 1rem; line-height: 1.55; }
    .ui-page-hero:not(.ui-page-hero-lg) .ui-page-hero-body { grid-column: 2; align-items: flex-start; margin-top: 14px; }
    .ui-page-hero:not(.ui-page-hero-lg) .ui-page-hero-body .ui-row,
    .ui-page-hero:not(.ui-page-hero-lg) .ui-page-hero-body .ui-track-meta { justify-content: flex-start; }
}
.ui-page-hero-icon { color: var(--on-primary); }

/* ============================================================
   v3 SHARED BITS
   ============================================================ */
.ui-container-wide { width: min(1500px, 100% - 32px); margin-inline: auto; }
.ui-cols-2 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .ui-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ui-inline-icon { font-size: 1.15em; vertical-align: -0.2em; margin-inline-end: 6px; color: var(--primary-light); }
.ui-chip-count { font: 600 0.72rem/1 var(--font-mono); padding: 2px 6px; border-radius: 999px; background: var(--ui-tint); color: var(--text-secondary); }
.ui-chip.is-active .ui-chip-count { background: rgba(0, 0, 0, .28); color: #FFFFFF; }
.ui-chip-sm { padding: 5px 10px; font-size: 0.8rem; }
.ui-chip .material-icons { font-size: 1rem; }
.ui-stretched::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.ui-snippet-card, .ui-challenge-card { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ui-snippet-card .ui-h3, .ui-challenge-card .ui-h3 { margin: 4px 0 0; }
.ui-snippet-card .ui-h3 a, .ui-challenge-card .ui-h3 a { color: var(--text-primary); text-decoration: none; }
.ui-snippet-card .ui-track-meta { margin-top: auto; }
.ui-star { color: var(--warning); font-size: 1.15rem; font-variation-settings: "FILL" 1; }
.ui-lang-pill {
    display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 6px; font: 600 0.72rem/1.3 var(--font-mono);
    text-transform: lowercase; border: 1px solid var(--border-light); color: var(--text-primary); background: var(--surface-hover);
}
.ui-lang-python, .ui-lang-flask { border-color: color-mix(in srgb, #3776AB 70%, var(--border)); background: color-mix(in srgb, #3776AB 18%, transparent); }
.ui-lang-javascript { border-color: color-mix(in srgb, #E5C100 70%, var(--border)); background: color-mix(in srgb, #E5C100 16%, transparent); }
.ui-lang-sql { border-color: color-mix(in srgb, #E38C00 65%, var(--border)); background: color-mix(in srgb, #E38C00 16%, transparent); }
.ui-lang-html { border-color: color-mix(in srgb, #E34F26 65%, var(--border)); background: color-mix(in srgb, #E34F26 15%, transparent); }
.ui-lang-css { border-color: color-mix(in srgb, #2965F1 65%, var(--border)); background: color-mix(in srgb, #2965F1 15%, transparent); }
.ui-lang-bash { border-color: color-mix(in srgb, #2BD47D 60%, var(--border)); background: color-mix(in srgb, #2BD47D 14%, transparent); }
.ui-snippet-peek {
    margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--ui-code-bg); color: #A9B1C1;
    font: 0.74rem/1.5 var(--font-mono); white-space: pre; overflow: hidden; max-height: 92px;
    -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent);
}
.ui-code-lg { font-size: 0.88rem; padding: 20px; border: 1px solid var(--border); }
pre.ui-code code.hljs, .ui-prose pre code.hljs { background: transparent; padding: 0; }

.ui-news-mini { display: block; padding: 10px 0; border-bottom: 1px solid var(--border); text-decoration: none; }
.ui-news-mini:last-of-type { border-bottom: 0; margin-bottom: 8px; }
.ui-news-mini b { display: block; color: var(--text-primary); font-size: 0.9rem; line-height: 1.4; }
.ui-news-mini small { color: var(--text-muted); font-size: 0.78rem; }
.ui-news-mini:hover b { color: var(--primary-light); }

/* ============================================================
   BLOG (templates/blog/*)
   ============================================================ */
.ui-post-card, a.ui-post-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; height: 100%; text-decoration: none; }
.ui-post-card img, .ui-post-featured img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; display: block; background: var(--surface-hover); }
.ui-post-cover-fallback {
    aspect-ratio: 16 / 8; display: grid; place-items: center; color: #FFFFFF;
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 70%, #000), color-mix(in srgb, var(--secondary) 60%, #000));
}
.ui-post-cover-fallback .material-icons { font-size: 2.6rem; opacity: .9; }
.ui-post-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ui-post-body .ui-h3, .ui-post-body .ui-h2 { margin: 0; color: var(--text-primary); }
.ui-post-body p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ui-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 0.8rem; color: var(--text-muted); }
.ui-post-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.ui-post-meta .material-icons { font-size: 0.95rem; }
.ui-post-featured, a.ui-post-featured { padding: 0; overflow: hidden; display: grid; grid-template-columns: 1fr; text-decoration: none; }
@media (min-width: 900px) {
    .ui-post-featured, a.ui-post-featured { grid-template-columns: 1.1fr 1fr; }
    .ui-post-featured img, .ui-post-featured .ui-post-cover-fallback { aspect-ratio: auto; height: 100%; min-height: 260px; }
    .ui-post-featured .ui-post-body { padding: 28px; justify-content: center; }
}
.ui-post-head { margin-bottom: 20px; }
.ui-post-head .ui-h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); }
.ui-post-cover { width: 100%; border-radius: var(--ui-radius); margin-bottom: 18px; border: 1px solid var(--border); }
.ui-news-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ui-news-link {
    display: flex; gap: 16px; align-items: flex-start; padding: 14px 16px; border-radius: var(--ui-radius);
    border: 1px solid var(--border); background: var(--ui-card); text-decoration: none; transition: border-color .15s ease, background .15s ease;
}
.ui-news-link:hover { border-color: color-mix(in srgb, var(--primary) 50%, var(--border)); background: var(--surface-hover); }
.ui-news-link img { width: 120px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px; flex-shrink: 0; background: var(--surface-hover); }
.ui-news-link h3 { margin: 4px 0; font: 600 1rem/1.4 var(--font-family); color: var(--text-primary); letter-spacing: 0; }
.ui-news-link h3 .material-icons { font-size: 0.9rem; color: var(--text-muted); vertical-align: 0; }
.ui-news-link p { margin: 0 0 6px; font-size: 0.88rem; color: var(--text-secondary); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ui-news-src { font: 600 0.7rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .05em; padding: 3px 7px; border-radius: 5px; background: var(--ui-tint); color: var(--text-primary); }
.ui-news-src-hackernews { background: color-mix(in srgb, #FF6600 22%, transparent); }
.ui-news-src-devto { background: color-mix(in srgb, var(--text-primary) 12%, transparent); }
.ui-news-src-gnews { background: color-mix(in srgb, var(--secondary) 20%, transparent); }
@media (max-width: 560px) { .ui-news-link img { width: 84px; } }

/* ============================================================
   PLAYGROUND (templates/playground/_editor.html, js/playground.js)
   The editor + console are always dark (code surfaces), in both themes.
   ============================================================ */
.ui-pg { display: grid; gap: 12px; }
.ui-pg-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--border); border-radius: var(--ui-radius); background: var(--surface); }
.ui-pg-lang { width: auto; min-height: 36px; padding-block: 6px; }
.ui-pg-title { width: min(260px, 100%); min-height: 36px; padding-block: 6px; }
.ui-pg-spacer { flex: 1; }
.ui-pg-split { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 980px) { .ui-pg-split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.ui-pg-pane { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--border); border-radius: var(--ui-radius); overflow: hidden; background: var(--ui-code-bg); }
.ui-pg-pane-head {
    display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 10px; border-bottom: 1px solid #1E232C;
    background: #0E1116; color: #A9B1C1; font-size: 0.82rem;
}
.ui-pg-pane-head > .material-icons { font-size: 1.05rem; }
.ui-pg-pane-head .ui-kbd { margin-inline-start: auto; color: #8A93A5; border-color: #2A303B; }
.ui-pg-pane-head .ui-icon-btn { color: #A9B1C1; min-width: 32px; height: 32px; }
.ui-pg-pane-head .ui-icon-btn:hover { background: #1A1F28; color: #ECEEF3; }
.ui-pg-tabs { display: flex; gap: 2px; }
.ui-pg-tabs button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 0; border-radius: 8px; background: none; color: #8A93A5; font: 600 0.8rem/1 var(--font-family); cursor: pointer; }
.ui-pg-tabs button[aria-selected="true"] { background: #1A1F28; color: #ECEEF3; }
.ui-pg-tabs button[hidden] { display: none; }
.ui-pg-tabs .material-icons { font-size: 1rem; }
.ui-pg-status { margin-inline-start: auto; font: 0.75rem/1 var(--font-mono); color: #8A93A5; }
.ui-pg-status.is-ok { color: #2BD47D; }
.ui-pg-status.is-warn { color: #F5B13D; }
.ui-pg-status.is-err { color: #FF6B6B; }
.ui-pg-source, .ui-pg .CodeMirror { height: min(62vh, 560px); min-height: 320px; }
.ui-pg-source.is-plain {
    width: 100%; border: 0; resize: none; outline: none; padding: 14px; background: var(--ui-code-bg); color: #E4E7EE;
    font: 0.88rem/1.6 var(--font-mono); tab-size: 4;
}
.ui-pg-console {
    margin: 0; flex: 1; height: min(62vh, 560px); min-height: 240px; overflow: auto; padding: 14px; color: #E4E7EE;
    font: 0.85rem/1.6 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; direction: ltr; text-align: left;
}
.ui-pg-console .pg-err { color: #FF8A8A; }
.ui-pg-console .pg-warn { color: #F5C26B; }
.ui-pg-console .pg-result { color: #7AA5FF; }
.ui-pg-console .pg-dim { color: #8A93A5; font-style: italic; }
.ui-pg-preview { flex: 1; height: min(62vh, 560px); min-height: 240px; background: #FFFFFF; }
.ui-pg-preview[hidden], .ui-pg-console[hidden] { display: none; }
.ui-pg-frame { width: 100%; height: 100%; border: 0; display: block; background: #FFFFFF; }
.ui-pg-console ~ .ui-pg-frame { display: none; }
.ui-pg-saved summary { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; color: var(--text-primary); }
.ui-pg-saved-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.ui-pg-saved-list li { display: flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 10px; padding: 4px 4px 4px 0; }
.ui-pg-saved-open { flex: 1; min-width: 0; text-align: start; background: none; border: 0; padding: 6px 10px; cursor: pointer; color: var(--text-primary); }
.ui-pg-saved-open b { display: block; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-pg-saved-open small { color: var(--text-muted); font-size: 0.76rem; }
/* CodeMirror on the graphite palette */
.ui-pg .CodeMirror { background: var(--ui-code-bg); color: #E4E7EE; font: 0.88rem/1.6 var(--font-mono); direction: ltr; text-align: left; }
.ui-pg .CodeMirror-gutters { background: #0B0D11; border-right: 1px solid #1E232C; }
.ui-pg .CodeMirror-linenumber { color: #6B7385; }
.ui-pg .CodeMirror-cursor { border-left: 2px solid #7AA5FF; }
.ui-pg .CodeMirror-selected, .ui-pg .CodeMirror-focused .CodeMirror-selected { background: rgba(47, 107, 255, .28); }
.ui-pg .cm-s-default .cm-keyword { color: #C792EA; }
.ui-pg .cm-s-default .cm-def { color: #82AAFF; }
.ui-pg .cm-s-default .cm-variable-2 { color: #E4E7EE; }
.ui-pg .cm-s-default .cm-string { color: #C3E88D; }
.ui-pg .cm-s-default .cm-number { color: #F78C6C; }
.ui-pg .cm-s-default .cm-comment { color: #7D8595; font-style: italic; }
.ui-pg .cm-s-default .cm-builtin { color: #FFCB6B; }
.ui-pg .cm-s-default .cm-operator { color: #89DDFF; }
.ui-pg .cm-s-default .cm-property { color: #80CBC4; }
.ui-pg .cm-s-default .cm-tag { color: #F07178; }
.ui-pg .cm-s-default .cm-attribute { color: #FFCB6B; }
.ui-pg .cm-s-default .cm-atom { color: #F78C6C; }
.ui-pg .cm-s-default .cm-meta { color: #FFCB6B; }
.ui-challenge-layout { display: grid; gap: var(--ui-gap); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1200px) { .ui-challenge-layout { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }

/* ============================================================
   PROFILES + PLAYBOOKS
   ============================================================ */

.ui-pb-toc { margin: 0; padding-inline-start: 1.3em; display: grid; gap: 6px; font-size: 0.9rem; }
.ui-pb-toc a { color: var(--text-secondary); text-decoration: none; }
.ui-pb-toc a:hover { color: var(--text-primary); }
.ui-pb-toc a.is-done { color: var(--success); text-decoration: line-through; }
.ui-pb-step { scroll-margin-top: calc(var(--bar-h) + 16px); }
.ui-pb-step .ui-h3 { display: flex; align-items: center; gap: 10px; }
.ui-pb-step.is-locked { opacity: .7; border-style: dashed; }
.ui-pb-step.is-locked .ui-num .material-icons { font-size: 1rem; }

/* Icons carry direction: ltr (icon-font ligatures), so inset-inline-* on the
   icon itself resolves to the LEFT even in RTL. Position absolute icons by side. */

[dir="rtl"] .ui-search-field > .material-icons { left: auto; right: 12px; }
/* Code is always left-to-right, also on Arabic / Hebrew pages */
.ui-code, .ui-prose pre, .ui-snippet-peek, .ui-code-wrap { direction: ltr; text-align: left; }
[dir="rtl"] .ui-code-wrap .ui-copy-btn { right: 8px; left: auto; }

/* ============================================================
   HOME v3.5 (index.html): one full-screen welcome hero.
   Centred block on a faint grid with two soft glows that drift slowly;
   a fade-up on load. All motion is off with prefers-reduced-motion.
   ============================================================ */
.ui-btn-lg { min-height: 50px; padding: 12px 24px; font-size: 1rem; }
.ui-hello {
    position: relative; overflow: hidden; text-align: center; display: grid; align-items: center;
    /* fill the window between the app bar and the footer bar */
    min-height: calc(100svh - var(--bar-h, 64px) - 64px);
    padding-block: clamp(48px, 8vw, 96px);
}

@keyframes ui-orb-a { to { transform: translate(12%, 10%) scale(1.08); } }
@keyframes ui-orb-b { to { transform: translate(-14%, -8%) scale(.94); } }

.ui-hello-mark {
    width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; color: #FFFFFF;
    background: var(--gradient-primary); box-shadow: 0 14px 40px color-mix(in srgb, var(--primary) 35%, transparent);
}
.ui-hello-mark .material-icons { font-size: 2rem; }

.ui-hello-name {
    background: linear-gradient(110deg, var(--primary-light) 0%, var(--secondary) 50%, var(--primary-light) 100%);
    background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: ui-shine 8s linear infinite;
}
html[data-theme="light"] .ui-hello-name { background-image: linear-gradient(110deg, var(--primary) 0%, var(--secondary) 50%, var(--primary) 100%); }
@keyframes ui-shine { to { background-position: -200% 0; } }

@keyframes ui-hello-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) { .ui-hello-name{ animation: none; } }

/* Dense tables (request log) */
.ui-table-compact th, .ui-table-compact td { padding: 7px 10px; }


/* ============================================================
   v3.30 restored: About sections and App Catalogue filter bar
   (lost with the sidebar CSS; same rules as v3.29)
   ============================================================ */
.ui-pb-section { padding-bottom: clamp(32px, 5vw, 56px); }
.ui-pf-filters { padding: 18px 20px; margin-bottom: 28px; }
.ui-pf-top { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ui-pf-search { flex: 1 1 280px; margin: 0; }
   ABOUT v3.6 (about.html): six clearly separated sections, each a
   softly tinted panel in its own colour (--ic via .ui-ic-*), with an
   icon, a number, a title and a lead, then feature cards.
   ============================================================ */
.ui-about-jump {
    position: sticky; top: calc(var(--bar-h) + 10px); z-index: 5; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
    padding: 10px; margin-bottom: 26px; border: 1px solid var(--border); border-radius: 16px;
    background: color-mix(in srgb, var(--background) 88%, transparent); backdrop-filter: blur(10px);
}
.ui-about-jump a {
    display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; text-decoration: none;
    color: var(--text-secondary); font-weight: 600; font-size: 0.88rem;
}
.ui-about-jump a .material-icons { font-size: 1.1rem; color: var(--ic); }
.ui-about-jump a:hover { color: var(--text-primary); background: color-mix(in srgb, var(--ic) 12%, transparent); }
.ui-about-sec {
    position: relative; margin-bottom: 26px; padding: clamp(20px, 3.5vw, 34px); border-radius: 20px;
    border: 1px solid color-mix(in srgb, var(--ic) 22%, var(--border));
    background: linear-gradient(160deg, color-mix(in srgb, var(--ic) 7%, var(--surface)) 0%, var(--surface) 45%);
    scroll-margin-top: calc(var(--bar-h) + 80px);
}
.ui-about-sec::before {
    content: ''; position: absolute; inset-block: 22px; inset-inline-start: 0; width: 3px; border-radius: 0 3px 3px 0; background: var(--ic);
}
.ui-about-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 22px; }
.ui-about-icon {
    width: 52px; height: 52px; flex-shrink: 0; display: grid; place-items: center; border-radius: 14px;
    background: color-mix(in srgb, var(--ic) 16%, transparent); color: var(--ic);
}
.ui-about-icon .material-icons { font-size: 1.7rem; }
.ui-about-num { font: 700 0.75rem/1 var(--font-mono); letter-spacing: .12em; color: var(--ic); }
.ui-about-head h2 { margin: 6px 0 6px; font: 700 clamp(1.35rem, 2.6vw, 1.7rem)/1.2 var(--font-display); color: var(--text-primary); }
.ui-about-head p { margin: 0; max-width: 70ch; color: var(--text-secondary); line-height: 1.65; }
.ui-about-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; }
.ui-about-card {
    display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: 14px; text-decoration: none;
    background: var(--background-secondary); border: 1px solid var(--border); color: inherit;
    transition: border-color .15s ease, transform .15s ease;
}
a.ui-about-card:hover { border-color: color-mix(in srgb, var(--ic) 55%, var(--border)); transform: translateY(-2px); }
.ui-about-card > .material-icons { color: var(--ic); font-size: 1.4rem; margin-top: 1px; flex-shrink: 0; }
.ui-about-card h3 { margin: 0 0 4px; font-size: 0.98rem; font-weight: 700; color: var(--text-primary); }
.ui-about-card p { margin: 0; font-size: 0.88rem; line-height: 1.55; color: var(--text-secondary); }
.ui-about-steps { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.ui-about-steps li { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 14px; border: 1px dashed color-mix(in srgb, var(--ic) 35%, var(--border)); }
.ui-about-steps .ui-num { background: color-mix(in srgb, var(--ic) 18%, transparent); color: var(--ic); flex-shrink: 0; }
.ui-about-steps b { color: var(--text-primary); }
.ui-about-steps p { margin: 4px 0 0; font-size: 0.88rem; color: var(--text-secondary); line-height: 1.5; }
.ui-about-checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 10px 18px; }
.ui-about-checks li { display: flex; gap: 10px; align-items: flex-start; color: var(--text-secondary); line-height: 1.55; }
.ui-about-checks .material-icons { color: var(--ic); font-size: 1.2rem; }
.ui-about-more { margin: 16px 0 0; font-size: 0.9rem; color: var(--text-muted); }
@media (max-width: 640px) { .ui-about-jump { position: static; } }

/* ============================================================
   v3.31 SUPPORT: ticket threads, project timeline, attachments,
   assistant feedback. Plain-text bodies keep their line breaks (.ui-pre).
   ============================================================ */
.ui-pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.ui-alert-info { border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); background: color-mix(in srgb, var(--primary) 8%, var(--surface)); color: var(--text-primary); }
.ui-thread { display: grid; gap: 12px; }
.ui-thread-msg { border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; background: var(--surface); }
.ui-thread-msg.is-client { border-inline-start: 3px solid var(--primary); }
.ui-thread-msg.is-staff { border-inline-start: 3px solid var(--success); background: color-mix(in srgb, var(--success) 5%, var(--surface)); }
.ui-thread-msg.is-note { border-style: dashed; border-inline-start: 3px solid var(--warning); background: color-mix(in srgb, var(--warning) 6%, var(--surface)); }
.ui-thread-msg.is-system { border: 0; background: transparent; padding: 2px 4px; color: var(--text-muted); font-size: 0.85rem; }
.ui-thread-head { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; margin-bottom: 6px; font-size: 0.85rem; color: var(--text-muted); }
.ui-thread-head b { color: var(--text-primary); font-size: 0.92rem; }
.ui-thread-body { margin: 0; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-primary); }
.ui-thread-files { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ui-thread-files a { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); font-size: 0.82rem; text-decoration: none; color: var(--text-secondary); }
.ui-thread-files a:hover { color: var(--text-primary); border-color: var(--primary); }
.ui-thread-files .material-icons { font-size: 1rem; }
.ui-timeline { list-style: none; margin: 0; padding: 0 0 0 18px; border-inline-start: 2px solid var(--border); display: grid; gap: 14px; }
.ui-timeline li { position: relative; }
.ui-timeline li::before { content: ''; position: absolute; inset-inline-start: -25px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 3px var(--background); }
.ui-timeline small { display: block; }
.ui-progress-bar { height: 8px; border-radius: 999px; background: var(--background-secondary); overflow: hidden; margin: 6px 0; }
.ui-progress-bar > span { display: block; height: 100%; background: var(--gradient-primary, var(--primary)); }
.ui-ticket-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.ui-ticket-row .ui-grow small { display: block; }
.ui-dot-unread { width: 9px; height: 9px; border-radius: 50%; background: var(--primary); display: inline-block; }
.ui-asst-feedback { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 0 44px; font-size: 0.85rem; color: var(--text-muted); }
.ui-asst-feedback button { border: 1px solid var(--border); background: transparent; color: var(--text-secondary); border-radius: 999px; padding: 3px 12px; cursor: pointer; font: inherit; }
.ui-asst-feedback button:hover, .ui-asst-feedback button:focus-visible { border-color: var(--primary); color: var(--text-primary); }
.ui-asst-handoff { margin: 6px 0 0 44px; padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--primary); background: color-mix(in srgb, var(--primary) 6%, transparent); font-size: 0.9rem; }
.ui-asst-handoff p { margin: 0 0 8px; }
[dir="rtl"] .ui-asst-feedback, [dir="rtl"] .ui-asst-handoff { margin-left: 0; margin-right: 44px; }
@media (max-width: 640px) {
    .ui-ticket-row { grid-template-columns: minmax(0, 1fr) auto; }
    .ui-ticket-row > .material-icons { display: none; }
    .ui-asst-feedback, .ui-asst-handoff { margin-inline-start: 0; }
}

/* v3.31 numbered steps with coloured icons (Join PandaDev "How it works") */
.ui-steps-ic { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; }
.ui-steps-ic li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 0.92rem; line-height: 1.5; color: var(--text-secondary); }
.ui-steps-ic-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
    background: color-mix(in srgb, var(--ic, var(--primary)) 16%, transparent); color: var(--ic, var(--primary)); }
.ui-steps-ic-icon .material-icons { font-size: 1.15rem; }

/* v3.31 Admin guide page (admin/guide.html) */
.ui-guide table { width: 100%; border-collapse: collapse; margin: 10px 0 18px; font-size: 0.9rem; }
.ui-guide th, .ui-guide td { text-align: start; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.ui-guide th { color: var(--text-primary); background: var(--background-secondary); }
.ui-guide h2 { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--border); }
.ui-guide code { overflow-wrap: anywhere; }
@media (max-width: 640px) { .ui-guide table { display: block; overflow-x: auto; } }
@media print {
    .ui-nav, .ui-mmenu, .ui-footer, .ui-tabbar, .ui-breadcrumb, .ui-guide-actions { display: none !important; }
    .ui-guide { border: 0; box-shadow: none; }
}

/* END OF FILE — app/static/css/ui.css */

/* ============================================================
   FAQ (support.html): native <details> accordion
   ============================================================ */
.ui-faq { display: grid; gap: 10px; margin-top: 18px; }
.ui-faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--ui-radius, 14px); }
.ui-faq-item summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px 18px; font-weight: 600; color: var(--text-primary);
}
.ui-faq-item summary::-webkit-details-marker { display: none; }
.ui-faq-item summary .material-icons { color: var(--text-muted); transition: transform .2s ease; flex-shrink: 0; }
.ui-faq-item[open] summary .material-icons { transform: rotate(180deg); }
.ui-faq-item summary:focus-visible { outline: none; box-shadow: var(--ui-ring); border-radius: inherit; }
.ui-faq-item p { margin: 0; padding: 0 18px 16px; color: var(--text-secondary); line-height: 1.7; }

/* ============================================================
   LEGACY PAGES (Batch 1 templates: portfolio, donate, legal pages,
   collaborate, payments, contracts, user and admin pages)
   These templates keep their own markup; this layer makes them match the
   v3 pages: same container width as .ui-container, page headers that look
   like page_hero() (centred card on phones, compact left-aligned header
   with an icon tile from 1100px), Material icons (.ui-fa, from the Font
   Awesome conversion) and theme colours. Selectors only match legacy
   class names, so v3 pages are unaffected. New pages use page_hero() and
   ui-* classes directly. body.ui-admin-page marks staff pages (base.html).
   ============================================================ */
/* Converted Font Awesome icons: Material Symbols sized like FA (1em of the
   surrounding text), so legacy rules such as ".header-icon i" still size them */
.ui-fa {
    font-family: 'Material Symbols Rounded'; font-weight: normal; font-style: normal; font-size: 1.2em;
    line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap;
    direction: ltr; vertical-align: -0.2em; font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 450, 'GRAD' 0, 'opsz' 24; user-select: none; overflow: hidden; max-width: 1.2em;
}

@keyframes ui-spin { to { transform: rotate(360deg); } }

/* page wrappers + containers: same rhythm and width as v3 pages */
body.ui-app main > [class$="-wrapper"]:not(.auth-wrapper):not(.error-wrapper),
body.ui-app main > [class*="-wrapper "]:not(.auth-wrapper):not(.error-wrapper) {
    padding-top: clamp(20px, 4vw, 40px); padding-bottom: 48px; background: none; min-height: 0;
}
body.ui-app main > [class*="-wrapper"] > .container { max-width: none; width: min(var(--ui-max), 100% - 32px); padding-inline: 0; margin-inline: auto; }
body.ui-admin-page main > [class*="-wrapper"] > .container { width: min(1320px, 100% - 32px); }

/* shared card look for both header families */
body.ui-app :is(.portfolio-hero, .donate-hero, .terms-hero, .privacy-hero, .cookies-hero, .collab-page-header, .payments-header, .contracts-header, .subscriptions-header, [class*="-header-modern"], .categories-header, .admin-contracts-header, .admin-downloads-header, .admin-payments-header, .admin-subscriptions-header, .analytics-header, .uploads-header, .admin-header) {
    position: relative; overflow: hidden; margin: 0 0 28px; border: 1px solid var(--border);
    border-radius: var(--radius-lg, 20px); background: var(--surface); box-shadow: none;
}
body.ui-app :is(.portfolio-hero, .donate-hero, .terms-hero, .privacy-hero, .cookies-hero, .collab-page-header, .payments-header, .contracts-header, .subscriptions-header, [class*="-header-modern"], .categories-header, .admin-contracts-header, .admin-downloads-header, .admin-payments-header, .admin-subscriptions-header, .analytics-header, .uploads-header, .admin-header)::before, body.ui-app :is(.portfolio-hero, .donate-hero, .terms-hero, .privacy-hero, .cookies-hero, .collab-page-header, .payments-header, .contracts-header, .subscriptions-header, [class*="-header-modern"], .categories-header, .admin-contracts-header, .admin-downloads-header, .admin-payments-header, .admin-subscriptions-header, .analytics-header, .uploads-header, .admin-header)::after { display: none; }
body.ui-app :is(.portfolio-hero, .donate-hero, .terms-hero, .privacy-hero, .cookies-hero, .collab-page-header, .payments-header, .contracts-header, .subscriptions-header, [class*="-header-modern"], .categories-header, .admin-contracts-header, .admin-downloads-header, .admin-payments-header, .admin-subscriptions-header, .analytics-header, .uploads-header, .admin-header) h1 {
    margin: 0 0 6px; font: 700 clamp(1.5rem, 3.4vw, 1.75rem)/1.2 var(--font-display); letter-spacing: -0.02em;
    color: var(--text-primary); -webkit-text-fill-color: currentColor; background: none;
}
body.ui-app :is(.portfolio-hero, .donate-hero, .terms-hero, .privacy-hero, .cookies-hero, .collab-page-header, .payments-header, .contracts-header, .subscriptions-header, [class*="-header-modern"], .categories-header, .admin-contracts-header, .admin-downloads-header, .admin-payments-header, .admin-subscriptions-header, .analytics-header, .uploads-header, .admin-header) h1 + p, body.ui-app :is(.portfolio-hero, .donate-hero, .terms-hero, .privacy-hero, .cookies-hero, .collab-page-header, .payments-header, .contracts-header, .subscriptions-header) .subtitle { margin: 0; color: var(--text-secondary); font-size: 1rem; line-height: 1.55; max-width: 72ch; }
body.ui-app :is(.portfolio-hero, .donate-hero, .terms-hero, .privacy-hero, .cookies-hero, .collab-page-header, .payments-header, .contracts-header, .subscriptions-header, [class*="-header-modern"], .categories-header, .admin-contracts-header, .admin-downloads-header, .admin-payments-header, .admin-subscriptions-header, .analytics-header, .uploads-header, .admin-header) :is(.hero-icon, .header-icon) {
    width: 60px; height: 60px; flex-shrink: 0; display: grid; place-items: center; border-radius: 16px;
    background: var(--gradient-primary); color: var(--on-primary); box-shadow: none; animation: none;
}
body.ui-app :is(.portfolio-hero, .donate-hero, .terms-hero, .privacy-hero, .cookies-hero, .collab-page-header, .payments-header, .contracts-header, .subscriptions-header, [class*="-header-modern"], .categories-header, .admin-contracts-header, .admin-downloads-header, .admin-payments-header, .admin-subscriptions-header, .analytics-header, .uploads-header, .admin-header) :is(.hero-icon, .header-icon) :is(.ui-fa, .material-icons) { font-size: 1.9rem; max-width: none; color: inherit; }

/* centred family (title + subtitle + optional badges), like page_hero() */
body.ui-app :is(.portfolio-hero, .donate-hero, .terms-hero, .privacy-hero, .cookies-hero, .collab-page-header, .payments-header, .contracts-header, .subscriptions-header) { text-align: center; padding: clamp(28px, 6vw, 44px) clamp(18px, 4vw, 36px); }
body.ui-app :is(.portfolio-hero, .donate-hero, .terms-hero, .privacy-hero, .cookies-hero, .collab-page-header, .payments-header, .contracts-header, .subscriptions-header) :is(.hero-icon, .header-icon) { margin: 0 auto 16px; }
@media (min-width: 1100px) {
    body.ui-app :is(.portfolio-hero, .donate-hero, .terms-hero, .privacy-hero, .cookies-hero, .collab-page-header, .payments-header, .contracts-header, .subscriptions-header) {
        display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 20px; align-items: center;
        text-align: start; padding: 26px 30px;
        background: linear-gradient(120deg, color-mix(in srgb, var(--primary) 9%, var(--surface)) 0%, var(--surface) 55%);
    }
    body.ui-app :is(.portfolio-hero, .donate-hero, .terms-hero, .privacy-hero, .cookies-hero, .collab-page-header, .payments-header, .contracts-header, .subscriptions-header) :is(.hero-icon, .header-icon) { grid-row: 1 / span 6; margin: 0; }
    body.ui-app :is(.portfolio-hero, .donate-hero, .terms-hero, .privacy-hero, .cookies-hero, .collab-page-header, .payments-header, .contracts-header, .subscriptions-header) > :not(.hero-icon):not(.header-icon) { grid-column: 2; justify-self: start; justify-content: flex-start; margin-inline: 0; }
}

body.ui-app :is(.portfolio-hero, .donate-hero, .terms-hero, .privacy-hero, .cookies-hero, .collab-page-header, .payments-header, .contracts-header, .subscriptions-header) > br { display: none; }

/* left/right family (title block | actions), user and admin pages */
body.ui-app :is([class*="-header-modern"], .categories-header, .admin-contracts-header, .admin-downloads-header, .admin-payments-header, .admin-subscriptions-header, .analytics-header, .uploads-header, .admin-header) {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px;
    padding: 26px 30px; text-align: start;
    background: linear-gradient(120deg, color-mix(in srgb, var(--primary) 9%, var(--surface)) 0%, var(--surface) 55%);
}
body.ui-app :is([class*="-header-modern"], .categories-header, .admin-contracts-header, .admin-downloads-header, .admin-payments-header, .admin-subscriptions-header, .analytics-header, .uploads-header, .admin-header) > div:first-child { display: flex; align-items: center; gap: 18px; min-width: 0; }

/* ============================================================
   ADMIN DASHBOARD v3.5 (admin/dashboard.html)
   ============================================================ */
.ui-quick-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr)); gap: 10px; }
.ui-quick-link {
    display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 14px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    color: var(--text-primary); font-weight: 600; font-size: 0.92rem; text-decoration: none;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.ui-quick-link .material-icons {
    width: 34px; height: 34px; max-width: none; flex-shrink: 0; display: grid; place-items: center; border-radius: 9px;
    font-size: 1.25rem; color: var(--ic, var(--primary)); background: color-mix(in srgb, var(--ic, var(--primary)) 14%, transparent);
}
.ui-quick-link:hover { border-color: color-mix(in srgb, var(--ic, var(--primary)) 55%, var(--border)); background: var(--surface-hover); transform: translateY(-1px); }
.ui-quick-link:focus-visible { outline: none; box-shadow: var(--ui-ring); }
.ui-text-warning { color: var(--warning); }

.ui-attention, .ui-activity, .ui-people, .ui-rank { border: 0; border-radius: 0; }
.ui-attention > li > a, .ui-activity > li, .ui-people > li, .ui-rank > li {
    display: flex; align-items: center; gap: 12px; padding: 11px 2px; color: var(--text-primary); text-decoration: none; min-width: 0;
}
.ui-attention > li > a:hover { color: var(--primary-light); }
.ui-attention .material-icons { color: var(--text-muted); font-size: 1.2rem; }
.ui-activity .ui-grow, .ui-people .ui-grow, .ui-rank .ui-grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ui-people img { border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.ui-people .ui-grow { display: grid; }
.ui-people small { font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-rank .ui-num { flex-shrink: 0; }
.ui-meter { display: block; height: 4px; margin-top: 6px; border-radius: 99px; background: var(--border); overflow: hidden; }
.ui-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--gradient-primary); }

/* Filter bar (admin lists): fields in a row, wrapping on small screens */
.ui-filter-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 12px 16px; align-items: end; padding: 16px 18px; }
.ui-filter-bar .ui-field { margin: 0; }
.ui-filter-actions { gap: 8px; }
.ui-log-msg { min-width: 260px; overflow-wrap: anywhere; }
.ui-log-msg details { margin-top: 4px; }
.ui-log-msg details code { display: block; margin-top: 4px; padding: 6px 8px; border-radius: 8px; background: var(--background-secondary); color: var(--text-secondary); font: 0.78rem/1.5 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }

/* Settings (admin/settings.html) */
.ui-hint { display: block; margin-top: 6px; color: var(--text-muted); font-size: 0.82rem; line-height: 1.5; }
.ui-settings-panel { margin-top: 16px; }

.ui-kv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; margin: 0; align-items: center; }
.ui-kv dt { color: var(--text-secondary); overflow-wrap: anywhere; }
.ui-kv dd { margin: 0; text-align: end; overflow-wrap: anywhere; }
.ui-kv .ui-meter { width: 140px; margin-inline-start: auto; }

section[id] { scroll-margin-top: calc(var(--bar-h) + 16px); }

/* Login / sign-up: brand panel + form card (from 900px) */
.ui-auth-aside { display: none; }
@media (min-width: 900px) {
    .ui-auth-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: clamp(28px, 4vw, 56px);
                     align-items: center; max-width: 1040px; margin-inline: auto; }
    .ui-auth-split .ui-auth-card { width: 100%; max-width: none; margin: 0; }
    .ui-auth-aside {
        display: flex; flex-direction: column; align-items: flex-start; position: relative; overflow: hidden;
        padding: clamp(28px, 4vw, 44px); border-radius: 24px; border: 1px solid var(--border);
        background:
            radial-gradient(80% 70% at 0% 0%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 70%),
            radial-gradient(70% 60% at 100% 100%, color-mix(in srgb, var(--secondary) 16%, transparent), transparent 70%),
            var(--surface);
    }
    .ui-auth-aside .ui-hello-mark { width: 56px; height: 56px; animation: ui-float 6s ease-in-out infinite; }
    .ui-auth-aside .ui-hello-mark::after { display: none; }
    .ui-auth-aside h2 { margin: 22px 0 10px; font: 800 clamp(1.8rem, 3vw, 2.4rem)/1.1 var(--font-display); color: var(--text-primary); letter-spacing: -0.02em; }
    .ui-auth-aside > p { margin: 0 0 20px; color: var(--text-secondary); line-height: 1.65; }
    .ui-auth-aside ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
    .ui-auth-aside li { display: flex; gap: 10px; align-items: center; color: var(--text-primary); font-weight: 500; }
    .ui-auth-aside li .material-icons { width: 34px; height: 34px; max-width: none; display: grid; place-items: center; border-radius: 10px;
        background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary-light); font-size: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) { .ui-auth-aside .ui-hello-mark { animation: none; } }
/* legacy .theme-toggle rules (style.css) give it a fixed square size */

/* ============================================================
   v3.8: staff page headers (.ui-admin-head[data-icon]) look like
   page_hero(): gradient card, icon tile (Material ligature from
   data-icon), title + subtitle, actions on the right.
   ============================================================ */
.ui-admin-head {
    display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; padding: 24px 28px; margin-bottom: 26px;
    border: 1px solid var(--border); border-radius: var(--radius-lg, 20px);
    background: linear-gradient(120deg, color-mix(in srgb, var(--primary) 9%, var(--surface)) 0%, var(--surface) 55%);
}
.ui-admin-head::before {
    content: attr(data-icon); width: 60px; height: 60px; flex-shrink: 0; display: grid; place-items: center; border-radius: 16px;
    background: var(--gradient-primary); color: var(--on-primary);
    font: normal 1.9rem/1 'Material Symbols Rounded'; font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased;
}
.ui-admin-head > div:first-of-type { flex: 1 1 260px; min-width: 0; }
.ui-admin-head h1 { margin: 0 0 4px !important; font: 700 1.75rem/1.2 var(--font-display); color: var(--text-primary); }
.ui-admin-head p { margin: 0; }

/* the money panel replaces the legacy stat tiles on Payments / Subscriptions */
body.ui-admin-page .ui-money-panel ~ .admin-stats-grid { display: none; }

/* v3.8: snippet filter card, homepage service row, collaborate services */
.ui-filter-card { display: grid; gap: 14px; padding: 18px 20px; }
.ui-filter-row { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.ui-filter-label { flex: 0 0 90px; font-size: 0.78rem; font-weight: 600; color: var(--text-muted); }
.ui-filter-row > .ui-chips, .ui-filter-row > nav { flex: 1; min-width: 0; }
.ui-chip-tag { color: var(--text-secondary); }
.ui-more-tags { display: contents; }
.ui-more-tags > summary { list-style: none; cursor: pointer; }
.ui-more-tags > summary::-webkit-details-marker { display: none; }
.ui-more-tags[open] > summary { display: none; }

.ui-svc-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 12px; }
.ui-svc-list li { display: flex; gap: 10px; align-items: flex-start; }
.ui-svc-list .material-icons { color: var(--primary-light); font-size: 1.25rem; }
.ui-svc-list b { display: block; color: var(--text-primary); font-size: 0.92rem; }
.ui-svc-list small { color: var(--text-muted); font-size: 0.8rem; line-height: 1.45; }
.ui-collab-form .ui-h3 { display: flex; align-items: center; }

/* Learning categories editor (admin/categories.html, v3.9) */
.ui-lcat-form { gap: 8px; flex-wrap: wrap; align-items: center; }
.ui-lcat-form .ui-input { width: auto; flex: 1 1 180px; height: 36px; padding-block: 0; }
.ui-lcat-form .ui-lcat-icon { flex: 0 1 140px; font-family: var(--font-mono); font-size: 0.85rem; }
.ui-lcat-preview { width: 34px; height: 34px; max-width: none; display: grid; place-items: center; border-radius: 9px;
    color: var(--primary-light); background: color-mix(in srgb, var(--primary) 14%, transparent); font-size: 1.2rem; }

/* 2FA status card (partials/_security_panel.html, v3.9) */
.ui-2fa {
    --tone: var(--warning); display: flex; flex-wrap: wrap; gap: 16px 20px; align-items: flex-start;
    padding: 20px; margin-bottom: 18px; border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--tone) 35%, var(--border));
    background: linear-gradient(135deg, color-mix(in srgb, var(--tone) 9%, var(--surface)) 0%, var(--surface) 60%);
}
.ui-2fa.is-on { --tone: var(--success); }
.ui-2fa-icon { width: 52px; height: 52px; flex-shrink: 0; display: grid; place-items: center; border-radius: 14px;
    background: color-mix(in srgb, var(--tone) 16%, transparent); color: var(--tone); }
.ui-2fa-icon .material-icons { font-size: 1.8rem; }
.ui-2fa-body { flex: 1 1 280px; min-width: 0; }
.ui-2fa-body p { margin: 8px 0 0; color: var(--text-secondary); line-height: 1.6; }
.ui-2fa-steps { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.ui-2fa-steps li { display: flex; gap: 10px; align-items: center; color: var(--text-secondary); font-size: 0.9rem; }
.ui-2fa-steps .material-icons { font-size: 1.15rem; color: var(--primary-light); }
.ui-2fa-cta { align-self: center; }

/* v3.9: external project links in the sidebar; auth panel aligned to the form top */

@media (min-width: 900px) { .ui-auth-split { align-items: start; } }

/* Services page cards (pricing.html, v3.9) */
.ui-svc-card .ui-svc-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 13px; margin-bottom: 14px;
    background: color-mix(in srgb, var(--ic) 15%, transparent); color: var(--ic); }
.ui-svc-card .ui-svc-icon .material-icons { font-size: 1.6rem; }
.ui-svc-card { border-top: 3px solid color-mix(in srgb, var(--ic) 60%, transparent); }

/* Mock AI chat (tools/tool.html aichat, v3.9) */
.ui-chat { height: 380px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 16px;
    border: 1px solid var(--border); border-radius: 14px; background: var(--background-secondary); }
.ui-chat-msg { display: flex; }
.ui-chat-msg.is-user { justify-content: flex-end; }
.ui-chat-bubble { max-width: 78%; padding: 10px 14px; border-radius: 14px; line-height: 1.55; font-size: 0.93rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.ui-chat-msg.is-bot .ui-chat-bubble { background: var(--surface); border: 1px solid var(--border); color: var(--text-primary); border-end-start-radius: 4px; }
.ui-chat-msg.is-user .ui-chat-bubble { background: var(--primary-strong); color: var(--on-primary); border-end-end-radius: 4px; }
.ui-chat-form { display: flex; gap: 8px; margin-top: 10px; }
.ui-chat-form .ui-input { flex: 1; }

/* Admin dashboard list columns (v3.10): two stacks, no gaps under short cards */
.ui-dash-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ui-gap); align-items: start; }
@media (min-width: 900px) { .ui-dash-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ui-dash-cols > .ui-stack { display: grid; gap: var(--ui-gap); align-content: start; }
.ui-dash-cols > .ui-stack > * + * { margin-top: 0; }

/* Staff portal (auth/login.html, portal="admin", v3.10): amber accents so it
   is never mistaken for the regular sign-in page */
.ui-auth-split.is-staff .ui-auth-card > .ui-card { border-color: color-mix(in srgb, var(--warning) 55%, var(--border)); border-top: 4px solid var(--warning); }
.ui-staff-badge { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; font-size: 0.78rem; }
.ui-staff-badge .material-icons { font-size: 1rem; }
.ui-staff-icon { background: color-mix(in srgb, var(--warning) 18%, transparent) !important; color: var(--warning) !important; }
.ui-auth-aside-staff { background: radial-gradient(80% 70% at 0% 0%, color-mix(in srgb, var(--warning) 20%, transparent), transparent 70%), var(--surface) !important; }
.ui-staff-mark { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; background: color-mix(in srgb, var(--warning) 20%, transparent); color: var(--warning); }
.ui-staff-mark .material-icons { font-size: 1.9rem; }
.ui-auth-aside-staff li .material-icons { background: color-mix(in srgb, var(--warning) 14%, transparent) !important; color: var(--warning) !important; }

/* Review management (admin/reviews.html, v3.10) */
.ui-review-card { border-left: 4px solid var(--border); display: grid; gap: 10px; }
.ui-review-card.is-warning { border-left-color: var(--warning); }
.ui-review-card.is-success { border-left-color: var(--success); }
.ui-review-card.is-danger { border-left-color: var(--danger); }
.ui-review-top { display: flex; align-items: flex-start; gap: 12px; }
.ui-review-top input[type="checkbox"] { margin-top: 4px; accent-color: var(--primary); width: 18px; height: 18px; flex: none; }
.ui-review-who { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ui-review-who small { flex-basis: 100%; overflow-wrap: anywhere; }
.ui-review-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }

.ui-review-text { margin: 0; color: var(--text-secondary); white-space: pre-line; overflow-wrap: anywhere; }
.ui-review-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border); }

.ui-review-actions .ui-icon-btn { margin-inline-start: auto; }

/* Services: one merged "what we do / why us" section (pricing.html, v3.10) */

/* Meet the team (about.html #team, v3.10) */

/* Contact messages (admin/collaborations.html, v3.10); reuses .ui-review-* */
.ui-review-card.is-primary { border-left-color: var(--primary); }
.ui-review-card.is-muted { border-left-color: var(--border-light); opacity: .85; }
.ui-msg-avatar { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; font-weight: 700; color: var(--on-primary, #fff); background: var(--primary-strong); }

/* Legacy headers whose icon, <h1> and <p> are direct siblings (user pages:
   profile, downloads, learning, referral, requests, reviews, subscriptions).
   v3.11: the flex "space-between" layer spread them across the row (title in
   the middle, subtitle far right). Grid instead: icon | title over subtitle |
   actions. */
body.ui-app :is([class*="-header-modern"], .subscriptions-header):has(> .header-icon:first-child) {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 20px; row-gap: 4px;
    align-items: center; justify-content: stretch; text-align: start;
}
body.ui-app :is([class*="-header-modern"], .subscriptions-header):has(> .header-icon:first-child) > .header-icon { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
body.ui-app :is([class*="-header-modern"], .subscriptions-header):has(> .header-icon:first-child) > h1 { grid-column: 2; grid-row: 1; align-self: end; margin: 0; text-align: start; }
body.ui-app :is([class*="-header-modern"], .subscriptions-header):has(> .header-icon:first-child) > p { grid-column: 2; grid-row: 2; align-self: start; margin: 0; text-align: start; max-width: 72ch; }
body.ui-app :is([class*="-header-modern"], .subscriptions-header):has(> .header-icon:first-child):not(:has(> p)) > h1 { grid-row: 1 / span 2; align-self: center; }
body.ui-app :is([class*="-header-modern"], .subscriptions-header):has(> .header-icon:first-child) > :not(.header-icon):not(h1):not(p) { grid-column: 3; grid-row: 1 / span 2; justify-self: end; margin: 0; }
@media (max-width: 640px) {
    body.ui-app :is([class*="-header-modern"], .subscriptions-header):has(> .header-icon:first-child) { grid-template-columns: auto minmax(0, 1fr); }
    body.ui-app :is([class*="-header-modern"], .subscriptions-header):has(> .header-icon:first-child) > :not(.header-icon):not(h1):not(p) { grid-column: 1 / -1; grid-row: 3; justify-self: start; margin-top: 8px; }
}

/* Homepage: one minimal hero, no page scroll (v3.11, owner's request). The
   shell is exactly one window tall and the hero takes whatever the footer
   (and the phone bars) leave. Very short windows keep scrolling so nothing
   is ever cut off. */
@media (min-height: 560px) {
    body.ui-app:has(.ui-hello) .ui-shell { height: 100vh; height: 100dvh; min-height: 0; }
    body.ui-app:has(.ui-hello) .ui-shell > main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
    body.ui-app:has(.ui-hello) .ui-hello { flex: 1 1 auto; min-height: 0; padding-block: clamp(16px, 4vh, 56px); }
}
@media (min-height: 560px) and (max-width: 899.98px) {
    /* the body keeps 68px free for the fixed mobile tab bar */
    body.ui-app:has(.ui-hello) .ui-shell { height: calc(100dvh - 68px - env(safe-area-inset-bottom, 0px)); }
}

/* Footer legal links, one colour each (v3.11); tokens are AA in both themes */
.ui-footer-legal a[class*="ui-ic-"] { color: var(--ic); font-weight: 600; }
.ui-footer-legal a[class*="ui-ic-"]:hover { color: var(--ic); text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   PHONES v3.12: compact footer, sign-in/out in the top bar, homepage
   hero that fits one screen with the full tagline (no scroll, no clipping)
   ============================================================ */
.ui-footer-legal-menu { display: none; }

@media (max-width: 899.98px) {
    .ui-footer-bar { flex-wrap: nowrap; justify-content: space-between; text-align: start; gap: 8px; padding-block: 8px; }
    .ui-footer-legal { display: none; }
    .ui-footer-copy { font-size: 0.8rem; white-space: nowrap; }
    .ui-footer-legal-menu { display: block; position: relative; }
    .ui-footer-legal-menu > summary { list-style: none; display: inline-flex; align-items: center; gap: 2px; cursor: pointer; padding: 6px 10px; border-radius: 8px; font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); border: 1px solid var(--border); }
    .ui-footer-legal-menu > summary::-webkit-details-marker { display: none; }
    .ui-footer-legal-menu > summary .material-icons { font-size: 18px; transition: transform .2s; }
    .ui-footer-legal-menu:not([open]) > summary .material-icons { transform: rotate(180deg); }
    .ui-footer-legal-pop { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 30; display: grid; gap: 2px; min-width: 190px; padding: 8px; border-radius: 12px; background: var(--surface-raised, var(--surface)); border: 1px solid var(--border); box-shadow: 0 12px 32px rgba(0, 0, 0, .35); }
    .ui-footer-legal-pop a { padding: 9px 12px; border-radius: 8px; color: var(--ic); font-weight: 600; font-size: 0.92rem; text-decoration: none; }
    .ui-footer-legal-pop a:hover { background: var(--surface-hover); }
    .ui-footer-social { margin-inline-start: 0; }
}
@media (max-width: 359.98px) {
    /* smallest phones (320px): the one-row footer is 15px too wide; let it wrap, centred */
    .ui-footer-bar { flex-wrap: wrap; justify-content: center; row-gap: 4px; }
}
@media (max-width: 899.98px) {
    /* hero: same tagline, sized to fit */
    .ui-hello { padding-block: 12px; }
    .ui-hello-mark { width: 52px; height: 52px; border-radius: 15px; }
    .ui-hello-mark .material-icons { font-size: 1.6rem; }
    
    
    
    
}

/* Brand mark glyph "</>" (v3.12, matches the app icons; Material "code" has no slash) */
.ui-mark-glyph { font: 800 15px/1 Consolas, "Cascadia Mono", "SFMono-Regular", Menlo, monospace; letter-spacing: -0.08em; color: #FFFFFF; transform: translateX(-0.04em); }

.ui-hello-mark .ui-mark-glyph { font-size: 1.75rem; }

@media (max-width: 899.98px) { .ui-hello-mark .ui-mark-glyph { font-size: 1.25rem; } }

/* ============================================================
   USER DASHBOARD v3.13 (user/dashboard.html)
   ============================================================ */

/* My Progress + public profile polish (v3.13): tinted tiles, track colours */

/* ============================================================
   SUBTLE COLOUR LAYER v3.13: plain pages get gentle, consistent colour.
   Card grids, stat strips and FAQ lists cycle through the --ic-* tokens
   (checked at AA in both themes). Every selector is wrapped in :where(),
   so an explicit .ui-ic-* class or text colour on a page always wins.
   ============================================================ */
:where(.ui-grid, .ui-cols-2, .ui-cols-3, .ui-stats, .ui-faq, .ui-stack) > :where(:nth-child(6n+1)) { --ic: var(--ic-blue); }
:where(.ui-grid, .ui-cols-2, .ui-cols-3, .ui-stats, .ui-faq, .ui-stack) > :where(:nth-child(6n+2)) { --ic: var(--ic-green); }
:where(.ui-grid, .ui-cols-2, .ui-cols-3, .ui-stats, .ui-faq, .ui-stack) > :where(:nth-child(6n+3)) { --ic: var(--ic-amber); }
:where(.ui-grid, .ui-cols-2, .ui-cols-3, .ui-stats, .ui-faq, .ui-stack) > :where(:nth-child(6n+4)) { --ic: var(--ic-violet); }
:where(.ui-grid, .ui-cols-2, .ui-cols-3, .ui-stats, .ui-faq, .ui-stack) > :where(:nth-child(6n+5)) { --ic: var(--ic-sky); }
:where(.ui-grid, .ui-cols-2, .ui-cols-3, .ui-stats, .ui-faq, .ui-stack) > :where(:nth-child(6n+6)) { --ic: var(--ic-rose); }
/* icon tiles take the colour (real selectors so they beat the base rules;
   --ic falls back to the brand colour outside a cycling container) */
.ui-card-icon, html[data-theme="light"] .ui-card-icon {
    color: var(--ic, var(--primary)); background: color-mix(in srgb, var(--ic, var(--primary)) 14%, transparent);
}
/* cards in grids: a faint colour wash from the top corner */
:is(.ui-grid, .ui-cols-2, .ui-cols-3) > .ui-card:not(.ui-svc-card) {
    background-image: linear-gradient(150deg, color-mix(in srgb, var(--ic, var(--primary)) 7%, transparent), transparent 55%);
}
:is(.ui-grid, .ui-cols-2, .ui-cols-3) > a.ui-card:hover { border-color: color-mix(in srgb, var(--ic, var(--primary)) 55%, var(--border)); }
/* stat strips: coloured numbers (a <strong> with its own class keeps its colour) */
.ui-stats > .ui-stat strong:not([class]) { color: var(--ic, var(--text-primary)); }
/* FAQ: colour edge and chevron */
.ui-faq-item { border-inline-start: 3px solid color-mix(in srgb, var(--ic, var(--primary)) 60%, transparent); }
.ui-faq-item[open] { background-image: linear-gradient(90deg, color-mix(in srgb, var(--ic, var(--primary)) 6%, transparent), transparent 60%); }
.ui-faq-item summary .material-icons { color: var(--ic, var(--text-muted)); }
/* tables: tinted header */
.ui-table th { background: color-mix(in srgb, var(--primary) 7%, var(--background-secondary)); }
/* eyebrow labels */
.ui-eyebrow { color: var(--primary); }

/* ============================================================
   SUBTLE COLOUR, PART 2 (v3.14): auth pages, legal pages, API docs,
   Tech Blogs, Collaborate, Portfolio. Same --ic cycle as part 1; the
   cycling rules use :where() so explicit page colours always win.
   ============================================================ */
:where(.ui-auth-aside ul, .ui-svc-list, .ui-news-list, .portfolio-stats-row,
       .privacy-content, .terms-content, .cookies-content) > :where(:nth-child(6n+1)) { --ic: var(--ic-blue); }
:where(.ui-auth-aside ul, .ui-svc-list, .ui-news-list, .portfolio-stats-row,
       .privacy-content, .terms-content, .cookies-content) > :where(:nth-child(6n+2)) { --ic: var(--ic-green); }
:where(.ui-auth-aside ul, .ui-svc-list, .ui-news-list, .portfolio-stats-row,
       .privacy-content, .terms-content, .cookies-content) > :where(:nth-child(6n+3)) { --ic: var(--ic-amber); }
:where(.ui-auth-aside ul, .ui-svc-list, .ui-news-list, .portfolio-stats-row,
       .privacy-content, .terms-content, .cookies-content) > :where(:nth-child(6n+4)) { --ic: var(--ic-violet); }
:where(.ui-auth-aside ul, .ui-svc-list, .ui-news-list, .portfolio-stats-row,
       .privacy-content, .terms-content, .cookies-content) > :where(:nth-child(6n+5)) { --ic: var(--ic-sky); }
:where(.ui-auth-aside ul, .ui-svc-list, .ui-news-list, .portfolio-stats-row,
       .privacy-content, .terms-content, .cookies-content) > :where(:nth-child(6n+6)) { --ic: var(--ic-rose); }

/* Sign in / sign up: coloured service icons, accent on the form card */
.ui-auth-split:not(.is-staff) .ui-auth-aside li .material-icons {
    color: var(--ic, var(--primary)); background: color-mix(in srgb, var(--ic, var(--primary)) 15%, transparent);
}
.ui-auth-split:not(.is-staff) .ui-auth-card > .ui-card {
    /* v3.17: border-image ignores border-radius (square corners); an inset
       shadow draws the same accent line and keeps the card rounded */
    box-shadow: inset 0 3px 0 var(--primary);
    background-image: linear-gradient(170deg, color-mix(in srgb, var(--primary) 8%, transparent), transparent 45%);
}
.ui-auth-split:not(.is-staff) .ui-auth-head .ui-card-icon { color: var(--primary); background: color-mix(in srgb, var(--primary) 15%, transparent); }

/* Legal pages: each section gets its own colour edge, number and icons */
body.ui-app :is(.privacy-card, .terms-card, .cookies-card) {
    border-inline-start: 3px solid color-mix(in srgb, var(--ic, var(--primary)) 65%, transparent);
    background-image: linear-gradient(150deg, color-mix(in srgb, var(--ic, var(--primary)) 6%, transparent), transparent 50%);
}
body.ui-app :is(.privacy-card, .terms-card, .cookies-card) .section-number { color: var(--ic, var(--primary)); background: color-mix(in srgb, var(--ic, var(--primary)) 14%, transparent); }
body.ui-app :is(.privacy-card, .terms-card, .cookies-card) .card-header :is(.ui-fa, .material-icons) { color: var(--ic, var(--primary)); }

/* Public API docs: one colour per endpoint */
.ui-stack > section.ui-card[id^="ep-"] { border-inline-start: 3px solid color-mix(in srgb, var(--ic, var(--primary)) 65%, transparent); }
.ui-stack > section.ui-card[id^="ep-"] code.ui-mono { color: var(--ic, var(--primary)); font-weight: 600; }

/* Tech Blogs: colour edge on headlines, coloured placeholders */
.ui-news-item > .ui-news-link { border-inline-start: 3px solid color-mix(in srgb, var(--ic, var(--primary)) 60%, var(--border)); }
.ui-post-cover-fallback { background: linear-gradient(135deg, color-mix(in srgb, var(--ic, var(--primary)) 22%, var(--surface)), color-mix(in srgb, var(--secondary) 12%, var(--surface))); }
.ui-post-cover-fallback .material-icons { color: var(--ic, var(--primary)); }

/* Collaborate: coloured "what we do" icons, accent on the form */
.ui-svc-list li > .material-icons { color: var(--ic, var(--primary)); background: color-mix(in srgb, var(--ic, var(--primary)) 14%, transparent); border-radius: 10px; }
.ui-sidebar-layout > .ui-card:first-child form, .ui-sidebar-layout > :first-child > form.ui-card { background-image: linear-gradient(170deg, color-mix(in srgb, var(--primary) 6%, transparent), transparent 40%); }

/* Portfolio: coloured stat numbers; one project per row on phones/tablets */
body.ui-app .portfolio-stats-row .stat-card-mini .stat-number {
    color: var(--ic, var(--primary)); background: none; -webkit-text-fill-color: currentColor;
}
body.ui-app .portfolio-stats-row .stat-card-mini { background-image: linear-gradient(150deg, color-mix(in srgb, var(--ic, var(--primary)) 9%, transparent), transparent 60%); }
@media (max-width: 899.98px) {
    /* style.css forces 2 columns with !important at <= 768px; win it back */
    body.ui-app .project-grid-modern { grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; }
    body.ui-app .project-grid-modern .project-card-modern .card-body { padding: 14px 16px 16px; }
}

/* ============================================================
   AI ASSISTANT (assistant.html, v3.15)
   ============================================================ */
.ui-asst-wrap { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .ui-asst-wrap { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; } }
.ui-asst-main { display: flex; flex-direction: column; padding: 0; overflow: hidden; height: calc(100dvh - 120px); min-height: 520px;
    background-image: linear-gradient(170deg, color-mix(in srgb, var(--primary) 6%, transparent), transparent 35%); }
@media (max-width: 1099.98px) { .ui-asst-main { height: calc(100dvh - var(--bar-h, 64px) - 150px); } }
.ui-asst-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.ui-asst-head .ui-badge { vertical-align: 3px; font-size: 0.68rem; }
.ui-asst-avatar { position: relative; flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--gradient-primary); }
.ui-asst-avatar .ui-mark-glyph { font-size: 12px; }
.ui-asst-avatar.is-lg { width: 42px; height: 42px; border-radius: 12px; }
.ui-asst-avatar.is-lg .ui-mark-glyph { font-size: 15px; }
.ui-asst-online { position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border-radius: 50%; background: var(--success); border: 2px solid var(--ui-card); }
.ui-asst-log { flex: 1 1 auto; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 16px; scroll-behavior: smooth; }
.ui-asst-msg { display: flex; gap: 10px; align-items: flex-start; max-width: 100%; }
.ui-asst-msg.is-user { justify-content: flex-end; }
.ui-asst-bubble { position: relative; max-width: min(720px, 88%); padding: 11px 15px; border-radius: 16px; line-height: 1.6; font-size: 0.95rem; overflow-wrap: anywhere; color: var(--text-primary); }
.ui-asst-msg.is-user .ui-asst-bubble { background: var(--primary-strong); color: var(--on-primary, #fff); border-bottom-right-radius: 5px; white-space: pre-wrap; }
.ui-asst-msg.is-bot .ui-asst-bubble { background: var(--surface); border: 1px solid var(--border); border-top-left-radius: 5px; padding-bottom: 30px; }
.ui-asst-bubble p { margin: 0 0 8px; } .ui-asst-bubble p:last-child { margin-bottom: 0; }
.ui-asst-bubble ul, .ui-asst-bubble ol { margin: 4px 0 8px; padding-inline-start: 20px; }
.ui-asst-bubble li { margin: 3px 0; }
.ui-asst-bubble a { color: var(--primary); font-weight: 600; }
.ui-asst-bubble code { font-family: Consolas, "Cascadia Mono", Menlo, monospace; font-size: 0.86em; padding: 1px 6px; border-radius: 6px; background: color-mix(in srgb, var(--primary) 12%, transparent); }
.ui-asst-h { font-weight: 800; font-size: 1.02rem; }
.ui-asst-code { margin: 8px 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); direction: ltr; text-align: left; }
.ui-asst-code-head { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; font-size: 0.75rem; color: var(--text-muted); background: color-mix(in srgb, var(--primary) 8%, var(--background-secondary)); }
.ui-asst-copy { border: 0; background: none; color: var(--text-secondary); cursor: pointer; font-size: 0.75rem; }
.ui-asst-code pre { margin: 0; padding: 12px; overflow-x: auto; background: var(--background-secondary); }
.ui-asst-code pre code { background: none; padding: 0; font-size: 0.84rem; line-height: 1.55; white-space: pre; }
.ui-asst-tools { position: absolute; left: 10px; bottom: 4px; display: flex; gap: 2px; opacity: .55; transition: opacity .15s; }
.ui-asst-msg:hover .ui-asst-tools, .ui-asst-tools:focus-within { opacity: 1; }
.ui-asst-tools button { border: 0; background: none; color: var(--text-muted); width: 26px; height: 24px; border-radius: 6px; cursor: pointer; display: grid; place-items: center; }
.ui-asst-tools button:hover { background: var(--surface-hover); color: var(--text-primary); }
.ui-asst-tools .material-icons { font-size: 15px; }
.ui-asst-typing { display: inline-flex; gap: 4px; padding: 4px 0; }
.ui-asst-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); animation: ui-asst-dot 1.2s infinite ease-in-out; }
.ui-asst-typing i:nth-child(2) { animation-delay: .15s; } .ui-asst-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes ui-asst-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.ui-asst-caret { display: inline-block; width: 7px; height: 1em; margin-inline-start: 2px; vertical-align: -2px; background: var(--primary); animation: ui-asst-blink 1s steps(2) infinite; }
@keyframes ui-asst-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ui-asst-typing i, .ui-asst-caret { animation: none; } }
.ui-asst-chips { padding: 0 18px 8px; gap: 6px; }
.ui-asst-chips:empty { display: none; }
.ui-asst-form { display: flex; align-items: flex-end; gap: 8px; margin: 0 14px; padding: 8px 8px 8px 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--background-secondary); }
.ui-asst-form:focus-within { border-color: var(--primary); box-shadow: var(--ui-ring); }
.ui-asst-input { flex: 1; border: 0; outline: 0; resize: none; background: transparent; color: var(--text-primary); font: inherit; font-size: 0.95rem; line-height: 1.5; max-height: 160px; padding: 6px 0; }
.ui-asst-send { flex: none; width: 38px; height: 38px; border-radius: 11px; border: 0; cursor: pointer; display: grid; place-items: center; color: #fff; background: var(--primary-strong); }
.ui-asst-send:hover { filter: brightness(1.1); }
.ui-asst-note { margin: 8px 18px 12px; font-size: 0.74rem; color: var(--text-muted); text-align: center; }
.ui-asst-side { display: grid; gap: 16px; }
@media (max-width: 1099.98px) { .ui-asst-side { display: none; } }
.ui-asst-topics { gap: 6px; }
.ui-asst-topic { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--border); background: transparent; color: var(--text-primary); cursor: pointer; text-align: start; font: inherit; font-size: 0.88rem; }
.ui-asst-topic:hover { border-color: color-mix(in srgb, var(--ic, var(--primary)) 55%, var(--border)); background: color-mix(in srgb, var(--ic, var(--primary)) 7%, transparent); }
.ui-asst-topic .material-icons { color: var(--ic, var(--primary)); font-size: 1.15rem; }
.ui-asst-human { display: flex; gap: 12px; align-items: flex-start; }
.ui-asst-human > .material-icons { color: var(--secondary); font-size: 1.6rem; }
@media (max-width: 600px) { .ui-asst-hide-sm { display: none; } .ui-asst-bubble { max-width: 92%; } }
.ui-asst-head > .ui-grow { flex: 1 1 auto; min-width: 0; }
.ui-asst-msg.is-bot .ui-asst-bubble:not(:has(.ui-asst-tools)) { padding-bottom: 11px; }

/* Support / donate (v3.16): amount picker, then Stripe Checkout */
.ui-don-card { background-image: linear-gradient(160deg, color-mix(in srgb, var(--ic-rose) 8%, transparent), transparent 45%); }

.ui-don-badges { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 0.82rem; color: var(--text-secondary); }
.ui-don-badges .material-icons { font-size: 1rem; vertical-align: -3px; margin-inline-end: 4px; color: var(--success); }
.ui-don-thanks { display: flex; gap: 14px; align-items: center; border-color: color-mix(in srgb, var(--success) 50%, var(--border)); }
.ui-don-thanks > .material-icons { font-size: 2rem; color: var(--ic-rose); }

/* ============================================================
   HOMEPAGE v3.16 (index.html, .ui-lp-*): business-first long page
   ============================================================ */
.ui-lp-hero { position: relative; overflow: hidden; padding: clamp(36px, 6vw, 84px) 0 clamp(32px, 5vw, 64px); }
.ui-lp-hero-bg { position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(40% 50% at 15% 10%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 70%),
        radial-gradient(35% 45% at 90% 30%, color-mix(in srgb, var(--secondary) 18%, transparent), transparent 70%),
        linear-gradient(color-mix(in srgb, var(--text-primary) 4%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--text-primary) 4%, transparent) 1px, transparent 1px);
    background-size: auto, auto, 44px 44px, 44px 44px;
    -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent); mask-image: linear-gradient(to bottom, #000 60%, transparent); }

.ui-lp-title { margin: 18px 0 16px; font: 800 clamp(2.2rem, 5.2vw, 4rem)/1.05 var(--font-display); letter-spacing: -0.035em; color: var(--text-primary); }
.ui-lp-hl { background: var(--gradient-primary); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.ui-lp-lead { margin: 0; max-width: 58ch; font-size: clamp(1.02rem, 1.6vw, 1.18rem); line-height: 1.65; color: var(--text-secondary); }
.ui-lp-ctas { margin: 26px 0 18px; gap: 12px; }
.ui-lp-trust { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 0.9rem; color: var(--text-secondary); }
.ui-lp-trust li { display: inline-flex; align-items: center; gap: 6px; }
.ui-lp-trust .material-icons { font-size: 1.05rem; color: var(--success); }
/* dashboard mockup */

@keyframes ui-lp-grow { from { width: 0; } }

@keyframes ui-lp-rise { from { height: 0; } }

/* sections */
.ui-lp { padding-bottom: clamp(40px, 6vw, 72px); }
.ui-lp-stack { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 20px; padding: 18px 0 8px; border-top: 1px solid var(--border); }
.ui-lp-stack p { margin: 0; font-size: 0.82rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; }
.ui-lp-stack ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; }
.ui-lp-stack li { font: 700 1.02rem var(--font-display); color: var(--text-secondary); }

.ui-lp-section { margin-top: clamp(48px, 7vw, 88px); }
.ui-lp-head { text-align: center; max-width: 720px; margin: 0 auto 26px; }

.ui-lp-head h2 { margin: 6px 0 8px; font: 800 clamp(1.7rem, 3.4vw, 2.5rem)/1.12 var(--font-display); letter-spacing: -0.02em; }
.ui-lp-head p { margin: 0; color: var(--text-secondary); font-size: 1.02rem; }
.ui-lp-more { text-align: center; margin: 18px 0 0; }

.ui-lp-work { display: grid; gap: 8px; padding: 0 0 18px; overflow: hidden; text-decoration: none; color: var(--text-primary); }
.ui-lp-work > :not(.ui-lp-work-img) { margin-inline: 18px; }
.ui-lp-work p { margin: 0; color: var(--text-secondary); font-size: 0.92rem; }
.ui-lp-work-img { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; background: var(--gradient-primary); color: #fff; font-weight: 700; margin-bottom: 6px; padding: 12px; text-align: center; }
.ui-lp-work-img img { width: 100%; height: 100%; object-fit: cover; }

.ui-lp-learn { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: clamp(48px, 7vw, 88px); }
.ui-lp-learn .ui-card-icon { margin: 0; }

.ui-lp-cta { margin-top: clamp(48px, 7vw, 88px); padding: clamp(32px, 5vw, 56px) 20px; text-align: center; border-radius: 24px; border: 1px solid var(--border);
    background: radial-gradient(60% 80% at 50% 0%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 70%), var(--background-secondary); }
.ui-lp-cta h2 { margin: 0 0 8px; font: 800 clamp(1.8rem, 3.6vw, 2.6rem)/1.1 var(--font-display); }
.ui-lp-cta > p { margin: 0 auto 16px; max-width: 60ch; color: var(--text-secondary); }
.ui-lp-cta .ui-lp-trust { justify-content: center; margin-bottom: 4px; }
/* reveal on scroll: only once the script added html.lp-anim (no JS = all visible) */
html.lp-anim .ui-lp-reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
html.lp-anim .ui-lp-reveal.is-in { opacity: 1; transform: none; }

/* About: story paragraph (v3.16) */

/* Homepage tech strip v3.17: continuous auto-scroll, colourful chips */
.ui-lp-stack { display: block; text-align: center; }
.ui-lp-stack > p { margin: 0 0 12px; }
.ui-lp-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ui-lp-marquee-track { display: flex; width: max-content; animation: ui-lp-marquee 38s linear infinite; }
.ui-lp-marquee:hover .ui-lp-marquee-track, .ui-lp-marquee:focus-within .ui-lp-marquee-track { animation-play-state: paused; }
.ui-lp-marquee-list { list-style: none; margin: 0; padding: 4px 6px 4px 0; display: flex; gap: 12px; }
.ui-lp-marquee-list li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; white-space: nowrap;
    font: 700 0.95rem var(--font-display); color: var(--text-primary);
    border: 1px solid color-mix(in srgb, var(--ic) 45%, var(--border));
    background: linear-gradient(135deg, color-mix(in srgb, var(--ic) 18%, var(--ui-card)), color-mix(in srgb, var(--ic) 6%, var(--ui-card))); }
.ui-lp-marquee-list .material-icons { font-size: 1.15rem; color: var(--ic); }
@keyframes ui-lp-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
[dir="rtl"] .ui-lp-marquee-track { animation-direction: reverse; }
@media (prefers-reduced-motion: reduce) {
    .ui-lp-marquee { -webkit-mask-image: none; mask-image: none; }
    .ui-lp-marquee-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
    .ui-lp-marquee-list { flex-wrap: wrap; justify-content: center; }
    .ui-lp-marquee-list[aria-hidden="true"] { display: none; }
}
/* Blog v3.17: full-width search above the content */
.ui-blog-search { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding: 14px 16px;
    background-image: linear-gradient(120deg, color-mix(in srgb, var(--primary) 10%, transparent), color-mix(in srgb, var(--secondary) 6%, transparent)); }
.ui-blog-search .ui-search-field { flex: 1; }
.ui-blog-search .ui-input { height: 50px; font-size: 1rem; }
@media (max-width: 600px) { .ui-blog-search { flex-wrap: wrap; } .ui-blog-search .ui-btn { width: 100%; } }

/* ===== v3.17: colourful account menu (each item has its own --ic) ===== */
.ui-menu-panel .ui-menu-head {
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 12%, transparent), transparent 70%);
    border-radius: 10px 10px 0 0; box-shadow: inset 0 3px 0 var(--primary);
}
.ui-menu-item[class*="ui-ic-"] > .material-icons {
    color: var(--ic); width: 28px; height: 28px; display: grid; place-items: center; font-size: 1.05rem;
    border-radius: 8px; background: color-mix(in srgb, var(--ic) 14%, transparent);
}
.ui-menu-item[class*="ui-ic-"]:hover, .ui-menu-item[class*="ui-ic-"]:focus-visible {
    background: color-mix(in srgb, var(--ic) 12%, transparent);
}
.ui-menu-item[class*="ui-ic-"]:hover > .material-icons { background: color-mix(in srgb, var(--ic) 24%, transparent); }
.ui-menu-logout { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 6px; }
.ui-menu-logout .ui-menu-item { color: var(--ic-rose); }

/* ===== v3.17: hero mockup, "your live business app" ===== */

@keyframes ui-lp-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ic) 55%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } }

@keyframes ui-lp-draw { from { stroke-dashoffset: 320; } }

          /* stays light text on the dark terminal in light theme */

  
 

@keyframes ui-lp-line { from { opacity: 0; transform: translateY(4px); } }
@keyframes ui-lp-blink { 50% { opacity: 0; } }

@keyframes ui-lp-bob { 50% { transform: translateY(-7px); } }

/* ===== v3.17: colour on track, module, snippet and dev tool pages =====
   --ic is the track colour (hex-checked in the template), the snippet's
   language colour, or the tool's colour from the ui-ic-* cycle. */
.ui-badge-tint[class*="ui-ic-"] { color: var(--ic); border-color: color-mix(in srgb, var(--ic) 40%, var(--border)); background: color-mix(in srgb, var(--ic) 12%, transparent); }
.ui-badge-tint[class*="ui-ic-"] .material-icons { color: var(--ic); }
.ui-tc-list { border-color: color-mix(in srgb, var(--ic) 30%, var(--border)); box-shadow: inset 0 3px 0 var(--ic); overflow: hidden; }
.ui-tc-list .ui-list-row { transition: background .15s ease; }
.ui-tc-list .ui-list-row:hover { background: color-mix(in srgb, var(--ic) 8%, var(--ui-card)); }
.ui-tc-list .ui-num:not(.is-done):not(.is-locked) { color: var(--ic); background: color-mix(in srgb, var(--ic) 16%, transparent); }
.ui-tc-list .ui-num.is-done { color: var(--success); }
.ui-tc-card { border-color: color-mix(in srgb, var(--ic) 30%, var(--border)); box-shadow: inset 0 3px 0 var(--ic);
    background-image: linear-gradient(165deg, color-mix(in srgb, var(--ic) 9%, transparent), transparent 50%); }
.ui-tc-card .ui-progress > span { background: linear-gradient(90deg, var(--ic), color-mix(in srgb, var(--ic) 55%, var(--success))); }
.ui-tc-pill { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; padding: 4px 12px 4px 6px; border-radius: 99px; text-decoration: none;
    font-size: 0.82rem; font-weight: 600; color: var(--ic); border: 1px solid color-mix(in srgb, var(--ic) 40%, var(--border)); background: color-mix(in srgb, var(--ic) 11%, transparent); }
.ui-tc-pill .material-icons { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font-size: 0.9rem; color: #fff; background: var(--ic); }
.ui-tc-lesson { box-shadow: inset 3px 0 0 var(--ic); }
.ui-tc-lesson > h2 { display: flex; align-items: center; gap: 10px; }
.ui-tc-n { flex-shrink: 0; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; font: 700 0.85rem var(--font-display); color: var(--ic); background: color-mix(in srgb, var(--ic) 16%, transparent); }
.ui-tc-mod { border-radius: 8px; color: var(--text-secondary); }
.ui-tc-mod:hover { background: color-mix(in srgb, var(--ic) 8%, transparent) !important; }
.ui-tc-mod.is-active { color: var(--text-primary); font-weight: 600; background: color-mix(in srgb, var(--ic) 14%, transparent) !important; box-shadow: inset 3px 0 0 var(--ic); }
.ui-tc-mod.is-active small { color: var(--ic); }
.ui-tc-codehead { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border: 1px solid color-mix(in srgb, var(--ic) 35%, var(--border)); border-bottom: 0;
    border-radius: 14px 14px 0 0; background: linear-gradient(90deg, color-mix(in srgb, var(--ic) 18%, var(--background-secondary)), var(--background-secondary));
    font-size: 0.8rem; color: var(--text-secondary); min-width: 0; }
.ui-tc-codehead .ui-mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-tc-dots { display: inline-flex; gap: 6px; flex-shrink: 0; }
.ui-tc-dots i { width: 10px; height: 10px; border-radius: 50%; background: #FF5F57; }
.ui-tc-dots i:nth-child(2) { background: #FEBC2E; } .ui-tc-dots i:nth-child(3) { background: #28C840; }
.ui-tc-code { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; border-color: color-mix(in srgb, var(--ic) 35%, var(--border)); }
.ui-tc .ui-news-mini b { color: var(--text-primary); }
.ui-tc .ui-news-mini:hover b { color: var(--ic); }
.ui-tool-nav { box-shadow: inset 0 3px 0 var(--primary); }
.ui-menu-item[class*="ui-ic-"].is-active { background: color-mix(in srgb, var(--ic) 15%, transparent); color: var(--text-primary); box-shadow: inset 3px 0 0 var(--ic); }
.ui-tool-title { display: flex; align-items: center; gap: 12px; }
.ui-tool-title > .material-icons { width: 44px; height: 44px; display: grid; place-items: center; flex-shrink: 0; border-radius: 12px; font-size: 1.5rem;
    color: var(--ic); background: color-mix(in srgb, var(--ic) 16%, transparent); border: 1px solid color-mix(in srgb, var(--ic) 35%, transparent); }

/* ===== v3.17: in-page list search (Dev tools, Weekend Builds, Challenges) ===== */
.ui-list-search { margin-bottom: 8px; }
.ui-list-search-status:empty { display: none; }
.ui-list-search-status { margin: 0 0 14px; }
.ui-list-search-scope [hidden] { display: none !important; }

/* v3.18: same gap at the seam between the two marquee copies as between chips */
.ui-lp-marquee-list { padding-inline-end: 12px; }

/* v3.19 purchase page (reuses the Support page .ui-don-* styles) */
.ui-pur-price { font: 800 1.6rem/1 var(--font-display); color: var(--success); }

/* v3.23 terminal guest notes */

/* ===== v3.24: "Powered by Modern Web Technology" strip, cleaner =====
   The old `.ui-lp-stack ul` rule (more specific) reset the list padding to 0 and
   the gap to 22px, so the two marquee copies met with no gap (PWA|Python).
   These selectors win and give the seam exactly the same gap as every chip. */
.ui-lp-stack { --mq-gap: 14px; border-top: 0; padding: 34px 0 10px; }
.ui-lp-stack-title { margin: 0 0 18px; font: 700 clamp(1.05rem, 2vw, 1.3rem)/1.3 var(--font-display); color: var(--text-primary); letter-spacing: -.01em; }
.ui-lp-stack-title::after { content: ""; display: block; width: 44px; height: 3px; margin: 10px auto 0; border-radius: 3px; background: var(--gradient-primary); }
.ui-lp-stack .ui-lp-marquee-list { gap: var(--mq-gap); padding: 6px 0; padding-inline-end: var(--mq-gap); flex-wrap: nowrap; }
.ui-lp-stack .ui-lp-marquee-track { animation-duration: 46s; }
.ui-lp-stack .ui-lp-marquee-list li {
    font: 600 0.92rem var(--font-family); color: var(--text-primary); padding: 8px 15px; gap: 8px;
    background: var(--surface); border: 1px solid var(--border); box-shadow: none;
    transition: border-color .2s ease, transform .2s ease;
}
.ui-lp-stack .ui-lp-marquee-list li:hover { border-color: color-mix(in srgb, var(--ic) 55%, var(--border)); transform: translateY(-1px); }
.ui-lp-stack .ui-lp-marquee-list .material-icons { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; font-size: 1rem;
    color: var(--ic); background: color-mix(in srgb, var(--ic) 14%, transparent); }
@media (prefers-reduced-motion: reduce) { .ui-lp-stack .ui-lp-marquee-list { flex-wrap: wrap; padding-inline-end: 0; } }

/* ===== v3.25: colour on Code Challenge and Guided Project detail pages (reuses .ui-tc*) ===== */
.ui-tc .ui-tc-card > .ui-row .ui-lang-pill { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ic) 14%, transparent); }
.ui-ch-solved { display: flex; align-items: center; gap: 6px; }
.ui-ch-solved .material-icons { font-size: 1.05rem; color: var(--ic); }
.ui-ch-work [data-playground] { border-radius: 14px; box-shadow: inset 0 3px 0 var(--ic), 0 0 0 1px color-mix(in srgb, var(--ic) 30%, var(--border)); }
.ui-tc .ui-pb-step .ui-num:not(.is-locked) { color: var(--ic); background: color-mix(in srgb, var(--ic) 16%, transparent); }
.ui-tc .ui-pb-toc a { border-radius: 6px; }
.ui-tc .ui-pb-toc a:hover { color: var(--ic); }
.ui-tc .ui-pb-toc a.is-done { color: var(--success); }
.ui-tc .ui-pb-step .ui-check input { accent-color: var(--ic); }

/* ===== v3.26: homepage hero (no mockup, no grid lines), three doors, offers,
   ready-made apps store, learning hub tabs ===== */
.ui-lp-hero-solo .ui-lp-hero-bg {
    background:
        radial-gradient(40% 55% at 20% 10%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 70%),
        radial-gradient(35% 50% at 85% 25%, color-mix(in srgb, var(--secondary) 18%, transparent), transparent 70%);
    background-size: auto;
}
.ui-lp-hero-inner { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.ui-lp-hero-solo .ui-lp-lead { max-width: 62ch; margin-inline: auto; }
.ui-lp-hero-solo .ui-lp-ctas, .ui-lp-hero-solo .ui-lp-trust { justify-content: center; }
.ui-lp-doors { display: grid; gap: 14px; width: 100%; max-width: 1060px; margin-top: 30px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) { .ui-lp-doors { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ui-lp-door { display: flex; align-items: flex-start; gap: 12px; padding: 18px; text-align: start; text-decoration: none;
    border-color: color-mix(in srgb, var(--ic) 32%, var(--border));
    background-image: linear-gradient(160deg, color-mix(in srgb, var(--ic) 11%, transparent), transparent 65%); }
.ui-lp-door-icon { flex-shrink: 0; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px;
    color: var(--ic); background: color-mix(in srgb, var(--ic) 16%, transparent); }
.ui-lp-door-text b { display: block; font-size: 1.02rem; color: var(--text-primary); }
.ui-lp-door-text small { display: block; margin-top: 4px; line-height: 1.5; font-size: 0.86rem; color: var(--text-secondary); }
.ui-lp-door-arrow { margin-inline-start: auto; color: var(--ic); transition: transform .2s ease; }
.ui-lp-door:hover .ui-lp-door-arrow { transform: translateX(3px); }
[dir="rtl"] .ui-lp-door-arrow { transform: scaleX(-1); }
.ui-offer-price { margin: 10px 0 0; font-weight: 700; font-size: 0.9rem; color: var(--ic, var(--primary)); }

.ui-app-price { margin: 0; font: 800 1.3rem/1.2 var(--font-display); color: var(--success); }
.ui-app-price small { font: 600 0.75rem var(--font-family); color: var(--text-muted); }
.ui-app-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }

.ui-learn-tab { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; white-space: nowrap; padding: 8px 14px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); font-weight: 600; font-size: 0.88rem; text-decoration: none; }
.ui-learn-tab .material-icons { font-size: 1.05rem; color: var(--ic); }
.ui-learn-tab:hover { color: var(--text-primary); border-color: color-mix(in srgb, var(--ic) 50%, var(--border)); }
.ui-learn-tab.is-active { color: var(--text-primary); background: color-mix(in srgb, var(--ic) 14%, var(--surface)); border-color: color-mix(in srgb, var(--ic) 50%, var(--border)); }
/* v3.26 fixes: a.ui-card is display:block in an older layer; door cards are flex rows */
a.ui-card.ui-lp-door { display: flex; }
.ui-lp-door-arrow { align-self: center; }

.ui-lp-door-arrow { flex-shrink: 0; }
.ui-svc-card .ui-offer-price { color: var(--ic); }

/* ===== v3.27: larger hero, pricing page, learning hub widgets, portfolio, screenshots ===== */
.ui-lp-hero-solo .ui-lp-title { font-size: clamp(2.7rem, 6.2vw, 4.8rem); }
.ui-lp-hero-solo .ui-lp-lead { font-size: clamp(1.1rem, 1.9vw, 1.32rem); max-width: 64ch; }
.ui-pz-plans .ui-check-list b { color: var(--text-primary); font-weight: 600; }
.ui-pz-wrap { overflow-x: auto; margin-top: 8px; }
.ui-pz-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 0.92rem; }
.ui-pz-table th, .ui-pz-table td { padding: 11px 12px; border-bottom: 1px solid var(--border); text-align: center; }
.ui-pz-table th[scope="row"], .ui-pz-table thead th:first-child { text-align: start; font-weight: 600; color: var(--text-primary); }
.ui-pz-table thead th { font: 700 0.95rem var(--font-display); color: var(--text-primary); background: color-mix(in srgb, var(--primary) 8%, transparent); }
.ui-pz-table thead th:nth-child(3) { background: color-mix(in srgb, var(--primary) 16%, transparent); }
.ui-pz-table tr.is-price td, .ui-pz-table tr.is-price th { background: color-mix(in srgb, var(--success) 7%, transparent); }
.ui-pz-yes { color: var(--success); font-size: 1.2rem; vertical-align: middle; }
.ui-pz-no { color: var(--text-muted); }
.ui-pz-addons { list-style: none; margin: 0; padding: 0; }
.ui-pz-addons li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--border); }
.ui-pz-addons li b { color: var(--success); white-space: nowrap; }
.ui-learn-hub { display: grid; gap: 12px; margin: 0 0 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .ui-learn-hub { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .ui-learn-hub { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.ui-learn-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; border-radius: 14px; white-space: normal;
    border: 1px solid color-mix(in srgb, var(--ic) 30%, var(--border)); background: linear-gradient(160deg, color-mix(in srgb, var(--ic) 9%, var(--surface)), var(--surface) 70%); }
.ui-learn-card-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: var(--ic); background: color-mix(in srgb, var(--ic) 16%, transparent); }
.ui-learn-card-icon .material-icons { font-size: 1.25rem; color: var(--ic); }
.ui-learn-card-text b { display: block; font-size: 0.95rem; color: var(--text-primary); }
.ui-learn-card-text small { display: block; margin-top: 2px; font-size: 0.78rem; line-height: 1.4; color: var(--text-secondary); font-weight: 500; }
.ui-learn-card-n { position: absolute; top: 12px; inset-inline-end: 12px; min-width: 26px; padding: 2px 8px; border-radius: 99px; text-align: center;
    font: 700 0.78rem var(--font-display); color: var(--ic); background: color-mix(in srgb, var(--ic) 14%, transparent); }
.ui-learn-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--ic) 60%, var(--border)); }
.ui-learn-card.is-active { box-shadow: inset 0 3px 0 var(--ic); background: color-mix(in srgb, var(--ic) 16%, var(--surface)); }
.ui-pf-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.ui-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
    color: var(--text-secondary); font-size: 0.86rem; font-weight: 600; text-decoration: none; }
.ui-chip .material-icons { font-size: 1rem; color: var(--ic, var(--primary-light)); }
.ui-chip.is-active { color: var(--text-primary); border-color: color-mix(in srgb, var(--ic, var(--primary)) 55%, var(--border)); background: color-mix(in srgb, var(--ic, var(--primary)) 14%, var(--surface)); }
a.ui-card.ui-pf-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; text-decoration: none; }
.ui-pf-shot { position: relative; aspect-ratio: 16 / 10; background: radial-gradient(70% 80% at 30% 20%, color-mix(in srgb, var(--ic) 22%, transparent), transparent 70%), var(--background-secondary); }
.ui-pf-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ui-pf-ph { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; color: var(--text-secondary); font-weight: 600; }
.ui-pf-ph .material-icons { font-size: 2.4rem; color: var(--ic); }
.ui-pf-status { position: absolute; top: 10px; inset-inline-start: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 99px;
    font-size: 0.74rem; font-weight: 700; color: #fff; background: color-mix(in srgb, var(--ic) 85%, #000); }
.ui-pf-status .material-icons { font-size: 0.95rem; }
.ui-pf-body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; flex: 1; }
.ui-pf-body .ui-h3 { margin: 0; color: var(--text-primary); }
.ui-pf-body p { margin: 0; color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ui-pf-cat { color: var(--ic); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 0.7rem; }
.ui-pf-tech { display: flex; flex-wrap: wrap; gap: 6px; }
.ui-pf-tech span { font-size: 0.72rem; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--border); color: var(--text-secondary); }
.ui-pf-more { margin-top: auto; }
.ui-pf-pages { justify-content: center; margin-top: 18px; }
.ui-shots { display: grid; gap: 12px; margin: 0 0 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.ui-shot { margin: 0; }
.ui-shot-open { display: block; width: 100%; padding: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; cursor: zoom-in; background: var(--background-secondary); }
.ui-shot-open img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.ui-shot figcaption { margin-top: 6px; font-size: 0.8rem; color: var(--text-secondary); }
.ui-shot-dialog { max-width: min(1100px, 94vw); padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text-primary); }
.ui-shot-dialog::backdrop { background: rgba(0, 0, 0, .7); }
.ui-shot-dialog img { display: block; max-width: 100%; max-height: 80vh; margin: 0 auto; border-radius: 8px; }
.ui-shot-dialog p { margin: 8px 0 0; text-align: center; color: var(--text-secondary); }
.ui-shot-close { position: absolute; top: 8px; inset-inline-end: 8px; }
.ui-shot-admin-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.ui-shot-admin { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--border); border-radius: 12px; }
.ui-shot-admin img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px; }

/* ===== v3.27: Start a project, agreements, e-signature, contracts library ===== */
.ui-ag-narrow { max-width: 860px; }
.ui-ag-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .ui-ag-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ui-ag-steps li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
    color: var(--text-primary); font-weight: 600; font-size: 0.92rem; }
.ui-ag-steps .material-icons { color: var(--primary-light); }
.ui-ag-step-n { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; font: 700 0.8rem var(--font-display); color: #fff; background: var(--primary); }
a.ui-card.ui-ag-service { display: flex; align-items: flex-start; gap: 14px; text-decoration: none; border-color: color-mix(in srgb, var(--ic) 28%, var(--border));
    background: linear-gradient(160deg, color-mix(in srgb, var(--ic) 8%, var(--surface)), var(--surface) 70%); }
.ui-ag-service .ui-card-icon { margin: 0; flex: none; }
.ui-ag-service-text { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.ui-ag-service-text b { color: var(--text-primary); font-size: 1.02rem; }
.ui-ag-service-text small { color: var(--text-secondary); line-height: 1.45; }
.ui-ag-service-text .ui-badge { align-self: flex-start; }
.ui-ag-go { color: var(--ic); transition: transform .15s; }
a.ui-ag-service:hover .ui-ag-go { transform: translateX(3px); }
.ui-ag-note { display: flex; align-items: flex-start; gap: 12px; border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
    background: color-mix(in srgb, var(--primary) 6%, var(--surface)); }
.ui-ag-note .material-icons { color: var(--primary-light); }
.ui-ag-pair { gap: 0 16px; }
/* v3.31: a label that wraps to two lines must not push its input down;
   the fields stretch and every input sits on the same line */
.ui-ag-pair > .ui-field { display: flex; flex-direction: column; justify-content: flex-end; }
.ui-ag-pair > .ui-field > .ui-label { margin-bottom: auto; padding-bottom: 6px; }
.ui-ag-form .ui-field { margin-bottom: 14px; }
.ui-ag-fieldset { border: 0; padding: 0; margin: 0 0 14px; }
.ui-ag-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-ag-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
    cursor: pointer; font-size: 0.9rem; color: var(--text-primary); }
.ui-ag-chip:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, var(--surface)); }
.ui-ag-chip small { color: var(--success); font-weight: 700; }
.ui-ag-chip small.is-included { color: var(--text-muted); text-decoration: line-through; }
.ui-ag-check { display: flex; align-items: flex-start; gap: 10px; margin: 6px 0 12px; color: var(--text-primary); }
.ui-ag-check input { margin-top: 4px; width: 18px; height: 18px; flex: none; accent-color: var(--primary); }
.ui-ag-estimate { position: sticky; top: 84px; border-color: color-mix(in srgb, var(--success) 35%, var(--border));
    background: linear-gradient(160deg, color-mix(in srgb, var(--success) 9%, var(--surface)), var(--surface) 75%); }
.ui-ag-total { margin: 4px 0 0; }
.ui-ag-total b { font: 800 2rem var(--font-display); color: var(--text-primary); }
.ui-ag-total-sub b { font: 700 1.2rem var(--font-display); color: var(--text-primary); }
.ui-ag-total small, .ui-ag-total-sub small { color: var(--text-secondary); }
.ui-ag-schedule { list-style: none; margin: 10px 0; padding: 0; }
.ui-ag-schedule li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px dashed var(--border); font-size: 0.9rem; color: var(--text-secondary); }
.ui-ag-schedule b { color: var(--text-primary); }
.ui-ag-progress { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ui-ag-progress li { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 99px; border: 1px solid var(--border); font-size: 0.86rem;
    font-weight: 600; color: var(--text-muted); background: var(--surface); }
.ui-ag-progress li .material-icons { font-size: 1.05rem; }
.ui-ag-progress li.is-done { color: var(--success); border-color: color-mix(in srgb, var(--success) 40%, var(--border)); background: color-mix(in srgb, var(--success) 8%, var(--surface)); }
.ui-ag-progress li.is-now { color: var(--text-primary); border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
.ui-ag-doc { max-height: 70vh; overflow-y: auto; padding: 4px 18px 4px 4px; border-radius: 10px; }
.ui-ag-doc h1 { font-size: 1.5rem; margin-top: 0; }
.ui-ag-doc h2 { font-size: 1.08rem; margin: 1.3em 0 .4em; color: var(--primary-light); }
.ui-ag-doc table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 0.92rem; }
.ui-ag-doc th, .ui-ag-doc td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: start; }
.ui-ag-doc td:last-child, .ui-ag-doc th:last-child { text-align: end; }
.ui-ag-sign { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.ui-ag-pad { position: relative; border: 2px dashed color-mix(in srgb, var(--primary) 45%, var(--border)); border-radius: 12px; background: #fff; overflow: hidden; }
.ui-ag-pad canvas { display: block; width: 100%; height: auto; aspect-ratio: 10 / 3; touch-action: none; cursor: crosshair; }
.ui-ag-pad .ui-btn { position: absolute; top: 6px; inset-inline-end: 6px; color: #334155; }
.ui-block { display: block; margin-top: 6px; }
.ui-ag-answers summary { cursor: pointer; }
.ui-ag-answers dl, .ui-ag-dl { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: 6px 14px; margin: 10px 0 0; font-size: 0.9rem; }
.ui-ag-answers dt, .ui-ag-dl dt { color: var(--text-secondary); font-weight: 600; }
.ui-ag-answers dd, .ui-ag-dl dd { margin: 0; color: var(--text-primary); overflow-wrap: anywhere; }
a.ui-card.ui-ag-row { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.ui-ag-row .ui-card-icon { margin: 0; flex: none; }
.ui-ag-row b { display: block; color: var(--text-primary); }
.ui-ag-row small { display: block; }
.ui-ag-next { margin: 0; padding-inline-start: 20px; display: grid; gap: 8px; color: var(--text-primary); }
.ui-ag-drop { position: relative; display: grid; justify-items: center; gap: 6px; padding: 26px 16px; margin: 4px 0 12px; text-align: center; cursor: pointer;
    border: 2px dashed color-mix(in srgb, var(--success) 45%, var(--border)); border-radius: 14px; background: color-mix(in srgb, var(--success) 6%, var(--surface)); }
.ui-ag-drop .material-icons { font-size: 2.2rem; color: var(--success); }
.ui-ag-drop b { color: var(--text-primary); }
.ui-ag-drop small { color: var(--text-secondary); }
.ui-ag-drop input { max-width: 100%; margin-top: 6px; color: var(--text-secondary); }
.ui-ag-files { list-style: none; margin: 0; padding: 0; }
.ui-ag-files li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.ui-ag-files .material-icons { color: var(--primary-light); }
.ui-ag-qr { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 12px; margin-bottom: 12px; border-radius: 12px; background: color-mix(in srgb, var(--primary) 6%, var(--surface)); }
.ui-ag-qr > div { flex: 1; min-width: 200px; }
.ui-ag-qr img, .ui-ag-qr-card img { background: #fff; border-radius: 10px; padding: 6px; }
.ui-ag-qr-card { display: grid; justify-items: center; align-content: start; text-align: center; }
.ui-ag-qr-empty { font-size: 5rem; color: var(--text-muted); }
.ui-ag-catform { flex-wrap: wrap; align-items: center; }
.ui-ag-catform .ui-input { width: auto; flex: 1 1 160px; }
.ui-ag-docrow { border-top: 1px solid var(--border); padding: 10px 0; }
.ui-ag-docrow summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; cursor: pointer; }
.ui-ag-docrow summary .material-icons { color: var(--danger); }
.ui-ag-docform { margin: 10px 0; }
.ui-cl-group { margin-top: 28px; }
.ui-cl-head { display: flex; align-items: center; gap: 12px; }
.ui-cl-head .ui-card-icon { margin: 0; }
.ui-cl-doc { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ui-cl-doc .ui-h3 { margin: 0; padding-inline-end: 48px; }
.ui-cl-doc p { margin: 0 0 8px; flex: 1; }
.ui-cl-pdf { position: absolute; top: 16px; inset-inline-end: 16px; padding: 3px 8px; border-radius: 6px; font: 800 0.7rem var(--font-display); letter-spacing: .06em;
    color: #fff; background: #DC2626; }

/* v3.28: the active portfolio pill shows an x (click clears the filter) */
.ui-chip .ui-chip-x { font-size: 0.95rem; margin-inline-start: 2px; opacity: .75; color: inherit; }
.ui-input.ui-input-sm { padding: 6px 10px; font-size: 0.85rem; min-height: 0; width: auto; }

/* v3.28: pricing calculator, Help Center FAQ groups */
.ui-pz-calc-grid { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .ui-pz-calc-grid { grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); align-items: start; } }
.ui-pz-calc-total { position: sticky; top: 84px; }
.ui-pz-pick { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.ui-pz-pick-item { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; background: var(--surface); }
.ui-pz-pick-item input { margin-top: 4px; accent-color: var(--primary); }
.ui-pz-pick-item b { display: block; color: var(--text-primary); }
.ui-pz-pick-item small { color: var(--text-secondary); }
.ui-pz-pick-item:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, var(--surface)); }
.ui-faq-group { display: flex; align-items: center; gap: 8px; margin: 22px 0 10px; }

/* v3.28: "What we do": the doors sit at the top of the section, then the offers */
.ui-lp-section .ui-lp-doors { margin: 0 auto 30px; max-width: none; }

/* v3.28: raised "Start" button in the middle of the phone tab bar */
.ui-tabbar a.is-cta .material-icons { width: 44px; height: 44px; margin-top: -18px; display: grid; place-items: center; border-radius: 50%;
    color: #fff; background: linear-gradient(135deg, var(--primary), #059669); box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 40%, transparent); }
.ui-tabbar a.is-cta.is-active { background: none; }

/* v3.28: the staff account menu holds every admin page; it scrolls on short screens */
#menu-account { max-height: min(78vh, 720px); overflow-y: auto; overscroll-behavior: contain; }

/* v3.31: staff links grouped under small headings (partials/_account_links.html).
   Desktop account menu: two columns, so the list is half as tall; phone menu: one column. */
.ui-menu-groups { display: grid; gap: 4px; }
.ui-menu-group { display: grid; gap: 1px; align-content: start; }
.ui-menu-label { margin: 8px 10px 4px; font: 600 0.68rem/1.2 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted); }
@media (min-width: 1100px) {
    /* columns (not grid rows), so a short group never leaves a gap beside a long one */
    #menu-account:has(.ui-menu-groups) { width: min(560px, calc(100vw - 32px)); }
    #menu-account .ui-menu-groups { display: block; columns: 2; column-gap: 8px; }
    #menu-account .ui-menu-group { break-inside: avoid; margin-bottom: 6px; }
}

/* v3.28: on/off switch (admin projects list: App Store) */

/* v3.29: About page, compact Meet the team row */
.ui-about-team { margin: 28px 0 8px; }
.ui-team-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.ui-team-mini { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border: 1px solid var(--border); border-radius: 99px; background: var(--surface); }
.ui-team-mini img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.ui-team-mini b { display: block; color: var(--text-primary); font-size: 0.92rem; }
.ui-team-mini small { color: var(--text-secondary); }
.ui-team-mini small { display: block; }
.ui-team-mini-skills { color: var(--text-muted) !important; font-size: 0.75rem; }

/* ============================================================
   v3.30 — App Catalogue app page, Join PandaDev prompt, team area
   ============================================================ */
.ui-btn-success { background: var(--success); color: #fff; }
.ui-btn-success:hover { background: color-mix(in srgb, var(--success) 86%, #000); }
.ui-app-hero { display: grid; gap: 22px; padding: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .ui-app-hero { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; padding: 22px; } }
.ui-app-hero-media { position: relative; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: var(--background-secondary); border: 1px solid var(--border); }
.ui-app-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ui-app-title { margin: 12px 0 6px; }
.ui-app-price { margin: 0 0 12px; font: 800 1.5rem/1 var(--font-display); color: var(--success); }
.ui-app-actions { gap: 8px; margin: 14px 0 8px; }
.ui-app-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ui-app-facts li { display: flex; justify-content: space-between; gap: 12px; font-size: 0.9rem; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.ui-app-facts li:last-child { border-bottom: 0; padding-bottom: 0; }
.ui-app-facts span { color: var(--text-muted); }
.ui-app-facts b { text-align: end; color: var(--text-primary); }
.ui-app-store-btn .fab { font-size: 1.05rem; }
.ui-join-prompt { margin-top: 16px; }
.ui-lp-seemore { margin: 4px 0 0; font-size: 0.95rem; }
.ui-lp-doors-3 { margin: 0 auto; }
.ui-page-hero-body .ui-lp-trust { justify-content: center; }
.ui-about-team-top { margin: 0 0 26px; }
.ui-snippet-save { position: relative; z-index: 2; min-width: 32px; height: 32px; padding: 0 4px; }
/* ============================================================
   v3.32 PROJECT WORKSPACE (templates/workspace/*.html)
   ============================================================ */
/* milestone list (client) */
.ui-ws-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ui-ws-item { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.ui-ws-item b { overflow-wrap: anywhere; }
/* approve form under a milestone waiting for review */
.ui-ws-approve { display: grid; gap: 8px; margin-top: 8px; padding-top: 10px; border-top: 1px dashed var(--border); }
/* invoice list (client sidebar and staff page) */
.ui-ws-invoices { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.ui-ws-invoices li { padding: 10px 0; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.ui-ws-invoices li:last-child { border-bottom: 0; }
/* staff: one collapsible milestone, and the "add" forms */
.ui-ws-admin-ms { border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; margin-bottom: 10px; background: var(--surface); }
.ui-ws-admin-ms > summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; list-style: none; }
.ui-ws-admin-ms > summary::-webkit-details-marker { display: none; }
.ui-ws-admin-ms[open] > summary { margin-bottom: 10px; }
.ui-ws-add { display: grid; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border); }
.ui-ws-add .ui-btn { justify-self: start; }
@media (max-width: 959.98px) { .ui-ws-due-first { order: -1; } }   /* an invoice due: phones show it first */
/* v3.32 round 2: task board (staff workspace) and task cards (My tasks) */
.ui-task-board { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ui-task-col { display: grid; gap: 8px; align-content: start; padding: 10px; border-radius: 12px; background: var(--ui-tint, rgba(127, 127, 127, .06)); min-height: 80px; }
.ui-task-col h3 { margin: 0 0 2px; }
.ui-task-card { padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); overflow-wrap: anywhere; }
details.ui-task-card > summary { cursor: pointer; list-style: none; }
details.ui-task-card > summary::-webkit-details-marker { display: none; }
.ui-task-card.is-overdue { border-color: color-mix(in srgb, var(--danger, #ef4444) 55%, var(--border)); }
.ui-task-card.is-done { opacity: .7; }
.ui-task-moves { flex-wrap: wrap; gap: 6px; margin-top: 8px; }
@media (max-width: 1099.98px) { .ui-task-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599.98px) { .ui-task-board { grid-template-columns: 1fr; } }
/* v3.32: Admin -> Categories: two columns on wide screens, collapsible category rows */
.ui-cat-layout { grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1100px) { .ui-cat-layout { grid-template-columns: 3fr 2fr; } }
.ui-cat-row { border-bottom: 1px solid var(--border); padding: 8px 0; }
.ui-cat-row:last-of-type { border-bottom: 0; }
.ui-cat-row > summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; min-width: 0; }
.ui-cat-row > summary::-webkit-details-marker { display: none; }
.ui-cat-row > summary .ui-grow { min-width: 0; }
.ui-cat-desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-cat-add > summary { color: var(--primary); }
/* v3.32 round 4: right-aligned table cells (amounts in the accounting export) */
.ui-text-right { text-align: right; }
/* v3.32 round 3: leads board (3 open stages) and lead cards */
.ui-lead-board { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ui-lead-card { display: block; text-decoration: none; color: var(--text-primary); }
.ui-lead-card:hover { border-color: var(--primary); }
@media (max-width: 1099.98px) { .ui-lead-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599.98px) { .ui-lead-board { grid-template-columns: 1fr; } }
/* v3.32 round 3: public booking page: days of free slots as pill radios */
.ui-bk-days { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.ui-bk-day { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px 12px; margin: 0; min-width: 0; }
.ui-bk-day legend { padding: 0 6px; }
.ui-bk-slots { display: flex; flex-wrap: wrap; gap: 6px; }
.ui-bk-slot { position: relative; cursor: pointer; }
.ui-bk-slot input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ui-bk-slot span { display: inline-block; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; font-size: .9rem; font-variant-numeric: tabular-nums; }
.ui-bk-slot:hover span { border-color: var(--primary); }
.ui-bk-slot input:checked + span { background: var(--primary-strong); border-color: var(--primary); color: #FFFFFF; }
.ui-bk-slot input:focus-visible + span { box-shadow: var(--ui-ring); }
.ui-ws-entry { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text-primary); }
@media (max-width: 640px) {
    .ui-ws-admin-ms .ui-grid, .ui-ws-add .ui-grid { grid-template-columns: 1fr !important; }
}

@media print {
    .ui-nav, .ui-mmenu, .ui-tabbar, .ui-footer, .ui-no-print, .flash-container { display: none !important; }
    .ui-shell > main { padding-top: 0; }
    body.ui-app { background: #fff; color: #000; }
}