/* Site pages (login, register, account, access, dashboard, pricing): header, footer and the few pieces the old
   auth CSS (assets/legacy/auth) doesn't cover. Header matches the lesson pages' header (viewer.css). */
[hidden] { display: none !important; }
body { background: #f8fafc; color: #1f2937; min-height: 100vh; display: flex; flex-direction: column; }
.bl-top { height: 60px; display: flex; align-items: center; gap: 12px; padding: 0 1.5rem; background: #fff;
  border-bottom: 1px solid #e5e7eb; position: sticky; top: 0; z-index: 1000; }
.bl-brand { display: inline-flex; align-items: center; gap: 8px; color: #1e293b; text-decoration: none; font-weight: 700; font-size: 1.1rem; }
.bl-brand b { color: #667eea; }
.bl-nav { margin-left: auto; display: flex; align-items: center; gap: 1rem; font-size: .95rem; }
.bl-nav a, .bl-nav button { color: #374151; text-decoration: none; font: inherit; background: none; border: 0; cursor: pointer; padding: .25rem 0; }
.bl-nav a:hover, .bl-nav button:hover { color: #667eea; }
.bl-nav .bl-nav-cta { background: #667eea; color: #fff; padding: .45rem .9rem; border-radius: 6px; font-weight: 600; }
.bl-nav .bl-nav-cta:hover { background: #5568d3; color: #fff; }
.bl-main { flex: 1; }

/* auth pages: the old .login-box etc.; additions */
.login-container { min-height: calc(100vh - 60px - 64px); }
.login-box h1 { font-size: 1.6rem; }
.form-hint { display: block; margin-top: .35rem; font-size: .82rem; color: #6b7280; }
.form-check { display: flex; align-items: center; gap: .5rem; margin: -0.5rem 0 1.25rem; font-size: .9rem; color: #374151; }
.form-check input { width: auto; }
.success-message { background: #ecfdf5; color: #065f46; padding: .75rem; border-radius: 4px; margin-bottom: 1rem; border: 1px solid #a7f3d0; }
.info-message { background: #eff6ff; color: #1e40af; padding: .75rem; border-radius: 4px; margin-bottom: 1rem; border: 1px solid #bfdbfe; font-size: .92rem; }
.link-button { background: none; border: 0; padding: 0; color: #667eea; font: inherit; cursor: pointer; text-decoration: underline; }
.auth-links { margin-top: 1.25rem; text-align: center; font-size: .92rem; color: #6b7280; display: grid; gap: .5rem; }
.auth-links a { color: #667eea; }
.code-input { letter-spacing: .35em; font-size: 1.25rem; text-align: center; }
.submit-btn[disabled] { opacity: .65; cursor: progress; }

/* account / dashboard cards */
/* Contact page (site/pages/contact.html) and its result popup (pages.js popup()) */
.bl-contact-form { display: grid; gap: .9rem; }
.bl-contact-form label { display: grid; gap: .35rem; font-weight: 500; color: #374151; }
.bl-contact-form input, .bl-contact-form textarea { padding: .6rem .75rem; border: 1px solid #d1d5db; border-radius: 6px; font: inherit; }
.bl-contact-form input:focus, .bl-contact-form textarea:focus { outline: 3px solid rgba(102, 126, 234, .25); border-color: #667eea; }
.bl-contact-form textarea { min-height: 140px; resize: vertical; }
.bl-hp { position: absolute; left: -9999px; }
.bl-facts { border-collapse: collapse; width: 100%; }
.bl-facts th, .bl-facts td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid #f1f5f9; vertical-align: top; }
.bl-facts th { width: 38%; color: #64748b; font-weight: 500; }
.bl-popup { margin: auto; border: 0; border-radius: 16px; padding: 28px 24px 22px; width: min(400px, calc(100vw - 32px)); text-align: center;
  box-shadow: 0 20px 50px rgba(15, 23, 42, .25); color: #1e293b; }
.bl-popup::backdrop { background: rgba(15, 23, 42, .5); }
.bl-popup-icon { width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center;
  font-size: 28px; font-weight: 700; color: #fff; background: #16a34a; }
.bl-popup.bl-popup-error .bl-popup-icon { background: #dc2626; }
.bl-popup h2 { font-size: 1.3rem; margin: 0 0 6px; }
.bl-popup p { color: #64748b; margin: 0 0 20px; }
.bl-popup .bl-btn { min-width: 120px; }
.bl-page { max-width: 760px; margin: 2rem auto; padding: 0 1rem; display: grid; gap: 1.25rem; }
.bl-page h1 { font-size: 1.6rem; margin: 0; }
.bl-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 1.25rem 1.5rem; }
.bl-card h2 { font-size: 1.1rem; margin: 0 0 .75rem; }
.bl-card p { margin: 0 0 .75rem; color: #4b5563; }
.bl-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.bl-row input { flex: 1; min-width: 200px; padding: .6rem .75rem; border: 1px solid #d1d5db; border-radius: 6px; font: inherit; }
.bl-btn { padding: .6rem 1.1rem; border-radius: 6px; border: 1px solid #667eea; background: #667eea; color: #fff; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-block; }
.bl-btn:hover { background: #5568d3; }
.bl-btn-ghost { background: #fff; color: #667eea; }
.bl-btn-ghost:hover { background: #eef2ff; }
.bl-btn-danger { background: #fff; color: #b91c1c; border-color: #fca5a5; }
.bl-btn-danger:hover { background: #fef2f2; }
.bl-status { font-size: .9rem; margin-top: .5rem; min-height: 1.2em; }
.bl-status.ok { color: #047857; } .bl-status.err { color: #b91c1c; }
.bl-badge { display: inline-block; font-size: .8rem; font-weight: 600; border-radius: 999px; padding: .1rem .6rem; }
.bl-badge-ok { background: #d1fae5; color: #065f46; } .bl-badge-off { background: #f3f4f6; color: #4b5563; }
.bl-secret { font-family: ui-monospace, Consolas, monospace; background: #f3f4f6; padding: .4rem .6rem; border-radius: 4px; word-break: break-all; }
.bl-center { text-align: center; }
/* My courses (old CoursesNew.css + the old page's inline styles for path buttons) */
.courses-new-container a.access-btn, .courses-new-container a.subscribe-btn, a.banner-btn { display: inline-block; text-decoration: none; text-align: center; }
.bl-paths-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-bottom: 1.25rem; }
.bl-paths-label { font-size: .9rem; color: #64748b; font-weight: 500; }
.bl-paths { display: flex; flex-wrap: wrap; gap: .5rem; }
.bl-path { padding: .5rem 1rem; border-radius: 8px; border: 2px solid #e2e8f0; background: #fff; color: #475569; font-weight: 500; cursor: pointer; font-size: .9rem; }
.bl-path.active { border-color: #667eea; background: #eff6ff; color: #1e40af; font-weight: 600; }
.bl-course-progress { margin: .25rem 0 .75rem; font-size: .85rem; color: #4b5563; display: grid; gap: .35rem; }
.bl-bar { height: 6px; background: #e5e7eb; border-radius: 999px; overflow: hidden; }
.bl-bar span { display: block; height: 100%; background: #10b981; }

/* admin panel */
.bl-admin { display: grid; grid-template-columns: 220px 1fr; min-height: calc(100vh - 60px); }
.bl-admin-nav { background: #fff; border-right: 1px solid #e5e7eb; padding: 1rem .75rem; display: flex; flex-direction: column; gap: .25rem; }
.bl-admin-nav a { color: #374151; text-decoration: none; padding: .5rem .75rem; border-radius: 6px; font-size: .92rem; }
.bl-admin-nav a:hover { background: #f3f4f6; } .bl-admin-nav a.active { background: #eef2ff; color: #4338ca; font-weight: 600; }
.bl-admin-main { padding: 1.5rem; display: grid; gap: 1rem; align-content: start; min-width: 0; }
.bl-admin-main section { display: grid; gap: 1rem; }
.bl-admin-main h1 { font-size: 1.4rem; margin: 0; } .bl-admin-main h2 { font-size: 1.1rem; margin: .5rem 0 0; } .bl-admin-main h3 { font-size: 1rem; margin: 1rem 0 .5rem; }
.bl-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .75rem; }
.bl-tile { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 1rem; text-decoration: none; color: #4b5563; display: grid; gap: .35rem; font-size: .88rem; }
.bl-tile b { font-size: 1.6rem; color: #1f2937; } .bl-tile:hover { border-color: #667eea; }
.bl-table-wrap { overflow-x: auto; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; }
.bl-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.bl-table th, .bl-table td { text-align: left; padding: .5rem .75rem; border-bottom: 1px solid #f1f5f9; vertical-align: top; }
.bl-table th { background: #f8fafc; font-weight: 600; color: #374151; white-space: nowrap; }
/* admin > Learning data: tabs, learner search with suggestions */
[data-view="learning"] .bl-tabs { margin: .25rem 0 1rem; border-bottom: 1px solid #e5e7eb; padding-bottom: .75rem; }
.bl-picker { position: relative; max-width: 560px; margin-bottom: 1rem; }
.bl-picker input { width: 100%; padding: .6rem .8rem; border: 1px solid #cbd5e1; border-radius: 8px; font: inherit; }
.bl-picker input:focus { outline: 3px solid rgba(102, 126, 234, .25); border-color: #667eea; }
.bl-picker-list { position: absolute; z-index: 50; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: .3rem 0; list-style: none;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, .12); max-height: 340px; overflow: auto; }
.bl-picker-list button { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: .45rem .8rem; border: 0;
  background: none; font: inherit; text-align: left; cursor: pointer; }
.bl-picker-list button span { font-size: .85rem; color: #6b7280; }
.bl-picker-list button:hover, .bl-picker-list button:focus { background: #f5f7ff; outline: none; }
.bl-picker-none { padding: .5rem .8rem; color: #6b7280; font-size: .9rem; }
[data-view="learning"] h2 small { font-weight: 400; color: #6b7280; font-size: .9rem; margin-left: .4rem; }
[data-view="learning"] .bl-tiles { margin-bottom: 1rem; }
[data-lpanel="course"] > .bl-row { margin-bottom: 1rem; }
[data-lpanel="course"] select { padding: .55rem .8rem; border: 1px solid #cbd5e1; border-radius: 8px; font: inherit; min-width: 260px; }
/* admin: a quiz's attempts, opened under its row with "Details" */
.bl-detail-row > td { background: #f5f7ff; padding: .5rem .75rem .9rem; border-left: 3px solid #667eea; }
.bl-detail-row .bl-table-wrap { border-color: #dbe1fb; }
.bl-detail-row .bl-table th { background: #eef1fe; }
.bl-actions { gap: .5rem; } .bl-actions .bl-btn { padding: .45rem .8rem; font-size: .88rem; }
.bl-form-grid { display: grid; gap: .9rem; max-width: 560px; } .bl-form-grid label { display: grid; gap: .3rem; font-size: .9rem; color: #374151; }
.bl-form-grid input { padding: .55rem .7rem; border: 1px solid #d1d5db; border-radius: 6px; font: inherit; }
.bl-row select { padding: .5rem .7rem; border: 1px solid #d1d5db; border-radius: 6px; font: inherit; }
.bl-code-big { font-size: 1.3rem; letter-spacing: .2em; font-family: ui-monospace, Consolas, monospace; }
.bl-msg { max-width: 520px; white-space: pre-wrap; } .bl-small { font-size: .78rem; word-break: break-all; }
@media (max-width: 800px) { .bl-admin { grid-template-columns: 1fr; } .bl-admin-nav { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid #e5e7eb; } }

/* ---- admin panel in the site's theme (home page: purple gradient, slate text, soft rounded cards). Scoped to
   .bl-admin so lesson pages, which share some class names (.bl-btn in code blocks), are not affected. */
.bl-admin { --a-primary: #667eea; --a-secondary: #764ba2; --a-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --a-text: #1e293b; --a-muted: #64748b; --a-line: #e2e8f0; --a-tint: #f5f3ff; --a-tint-2: #eef2ff;
  --a-shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 4px 14px rgba(15, 23, 42, .05);
  background: #f8fafc; color: var(--a-text); }
/* side menu */
.bl-admin .bl-admin-nav { background: #fff; border-right: 1px solid var(--a-line); padding: 1.25rem .9rem; gap: .3rem; }
.bl-admin-brand { margin: 0 .25rem .75rem; padding: .7rem .9rem; border-radius: 12px; background: var(--a-gradient); color: #fff;
  font-weight: 700; letter-spacing: .02em; box-shadow: 0 4px 14px rgba(102, 126, 234, .35); }
.bl-admin .bl-admin-nav a { display: flex; align-items: center; gap: .65rem; color: #334155; padding: .6rem .85rem; border-radius: 10px;
  font-size: .93rem; font-weight: 500; transition: background .15s, color .15s, transform .15s; }
.bl-admin .bl-admin-nav a i { font-style: normal; width: 1.3rem; text-align: center; }
.bl-admin .bl-admin-nav a:hover { background: var(--a-tint-2); color: var(--a-primary); transform: translateX(2px); }
.bl-admin .bl-admin-nav a.active { background: var(--a-gradient); color: #fff; font-weight: 600; box-shadow: 0 4px 12px rgba(102, 126, 234, .35); }
/* page */
.bl-admin .bl-admin-main { padding: 1.75rem 2rem 2.5rem; gap: 1.25rem; }
.bl-admin .bl-admin-main h1 { font-size: 1.6rem; font-weight: 700; color: var(--a-text); padding-bottom: .55rem; position: relative; }
.bl-admin .bl-admin-main h1::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 4px; border-radius: 4px; background: var(--a-gradient); }
.bl-admin .bl-admin-main h2 { font-size: 1.15rem; font-weight: 700; color: var(--a-text); margin-top: .75rem; }
.bl-admin .bl-admin-main h3 { font-size: 1rem; font-weight: 700; color: #334155; margin: 1.25rem 0 .6rem; padding-left: .6rem; border-left: 3px solid var(--a-primary); }
.bl-admin .form-hint { color: var(--a-muted); }
.bl-admin .bl-card { border: 1px solid var(--a-line); border-radius: 16px; padding: 1.5rem 1.75rem; box-shadow: var(--a-shadow); }
.bl-admin .bl-card h2 { margin-top: 0; }
/* tiles */
.bl-admin .bl-tiles { gap: 1rem; }
.bl-admin .bl-tile { position: relative; overflow: hidden; border: 1px solid var(--a-line); border-radius: 14px; padding: 1.1rem 1.2rem 1.1rem 1.35rem;
  color: var(--a-muted); font-weight: 500; box-shadow: var(--a-shadow); transition: transform .2s, box-shadow .2s, border-color .2s; }
.bl-admin .bl-tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--a-gradient); }
.bl-admin .bl-tile b { font-size: 1.75rem; font-weight: 800; background: var(--a-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bl-admin a.bl-tile:hover { transform: translateY(-2px); border-color: #c7d2fe; box-shadow: 0 10px 24px rgba(102, 126, 234, .18); }
/* tables */
.bl-admin .bl-table-wrap { border: 1px solid var(--a-line); border-radius: 12px; box-shadow: var(--a-shadow); }
.bl-admin .bl-table { font-size: .9rem; }
.bl-admin .bl-table th { background: var(--a-tint); color: #4c1d95; font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: .7rem .9rem; border-bottom: 1px solid #ddd6fe; }
.bl-admin .bl-table td { padding: .65rem .9rem; border-bottom: 1px solid #f1f5f9; color: #334155; }
.bl-admin .bl-table tbody tr:last-child > td { border-bottom: 0; }
.bl-admin .bl-table tbody tr:hover > td { background: #fafaff; }
.bl-admin .bl-table td small { color: var(--a-muted); }
.bl-admin .bl-table a { color: var(--a-primary); font-weight: 600; text-decoration: none; }
.bl-admin .bl-table a:hover { text-decoration: underline; }
.bl-admin .bl-card .bl-table-wrap { box-shadow: none; }
/* buttons and links */
.bl-admin .bl-btn { border: 0; border-radius: 10px; background: var(--a-gradient); color: #fff; font-weight: 600; padding: .6rem 1.15rem;
  box-shadow: 0 2px 8px rgba(102, 126, 234, .35); transition: transform .15s, box-shadow .15s, filter .15s; }
.bl-admin .bl-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(102, 126, 234, .4); filter: brightness(1.03); }
.bl-admin .bl-btn:disabled { opacity: .6; cursor: not-allowed; box-shadow: none; }
.bl-admin .bl-btn-ghost { background: #fff; color: var(--a-primary); border: 1.5px solid #c7d2fe; box-shadow: none; }
.bl-admin .bl-btn-ghost:hover:not(:disabled) { background: var(--a-tint-2); border-color: var(--a-primary); box-shadow: 0 2px 8px rgba(102, 126, 234, .18); }
.bl-admin .bl-btn-danger { background: #fff; color: #b91c1c; border: 1.5px solid #fecaca; box-shadow: none; }
.bl-admin .bl-btn-danger:hover:not(:disabled) { background: #fef2f2; border-color: #f87171; box-shadow: 0 2px 8px rgba(220, 38, 38, .15); }
.bl-admin .bl-table .bl-btn { padding: .4rem .8rem; font-size: .84rem; white-space: nowrap; }
.bl-admin .link-button { color: var(--a-primary); font-weight: 600; }
/* form fields */
.bl-admin input:not([type=checkbox]):not([type=radio]), .bl-admin select, .bl-admin textarea {
  border: 1px solid #cbd5e1; border-radius: 10px; padding: .6rem .85rem; font: inherit; color: var(--a-text); background: #fff;
  transition: border-color .15s, box-shadow .15s; }
.bl-admin input:focus, .bl-admin select:focus, .bl-admin textarea:focus { outline: none; border-color: var(--a-primary); box-shadow: 0 0 0 3px rgba(102, 126, 234, .2); }
.bl-admin .bl-row input[type=checkbox] { flex: none; min-width: 0; width: 1.05rem; height: 1.05rem; accent-color: var(--a-primary); }
.bl-admin .bl-row .form-check { display: inline-flex; align-items: center; gap: .4rem; flex: none; color: #475569; font-size: .9rem; }
.bl-admin .bl-row input[type=number] { flex: 0 0 120px; min-width: 0; }
.bl-admin .bl-row input[type=month], .bl-admin .bl-row input[type=date] { flex: 0 0 220px; min-width: 0; }
/* audit log: before/after data folded under "View" */
.bl-admin .bl-small { word-break: break-word; }
.bl-audit-details summary { cursor: pointer; color: var(--a-primary); font-weight: 600; }
.bl-audit-details[open] summary { margin-bottom: .35rem; }
.bl-audit-details b { display: block; font-size: .75rem; color: var(--a-muted); text-transform: uppercase; letter-spacing: .04em; margin-top: .3rem; }
.bl-audit-details pre { margin: .2rem 0 0; padding: .5rem .65rem; max-width: 420px; max-height: 260px; overflow: auto; background: #f8fafc;
  border: 1px solid var(--a-line); border-radius: 8px; font-size: .76rem; white-space: pre-wrap; word-break: break-word; }
.bl-admin .bl-card p > a:not(.bl-btn) { color: var(--a-primary); font-weight: 600; text-decoration: none; }
.bl-admin .bl-card p > a:not(.bl-btn):hover { text-decoration: underline; }
/* no sideways scrolling: wide tables scroll inside their own box */
.bl-admin .bl-admin-main section, .bl-admin .bl-admin-main section > *, .bl-admin [data-lpanel] > *, .bl-admin .bl-card { min-width: 0; max-width: 100%; }
@media (max-width: 800px) { .bl-admin { grid-template-columns: minmax(0, 1fr); } }
/* Prices & settings: one row per setting, its own Save on the right (enabled only once changed) */
.bl-admin .bl-settings { display: grid; gap: .75rem; max-width: 680px; }
.bl-admin .bl-settings h2 { margin: .75rem 0 0; font-size: 1.05rem; }
.bl-admin .bl-settings h2:first-child { margin-top: 0; }
.bl-admin .bl-setting { display: flex; align-items: flex-end; gap: .75rem; }
.bl-admin .bl-setting label { flex: 1; min-width: 0; display: grid; gap: .3rem; font-size: .9rem; color: #374151; }
.bl-admin .bl-setting label.bl-setting-check { display: flex; align-items: center; gap: .5rem; align-self: center; }
.bl-admin .bl-setting .bl-btn { flex: none; }
.bl-admin .bl-setting .bl-btn:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 520px) { .bl-admin .bl-setting { flex-direction: column; align-items: stretch; } }
/* tabs (Learning data): a segmented control */
.bl-admin .bl-tabs { display: inline-flex; gap: .25rem; padding: .3rem; background: #fff; border: 1px solid var(--a-line); border-radius: 12px;
  box-shadow: var(--a-shadow); width: max-content; }
.bl-admin [data-view="learning"] .bl-tabs { margin: .25rem 0 .5rem; padding: .3rem; border: 1px solid var(--a-line); }
.bl-admin .bl-tabs button { border: 0; border-radius: 9px; padding: .55rem 1.4rem; background: transparent; color: #475569; font-weight: 600; }
.bl-admin .bl-tabs button:hover { color: var(--a-primary); background: var(--a-tint-2); }
.bl-admin .bl-tabs button[aria-selected="true"] { background: var(--a-gradient); color: #fff; box-shadow: 0 2px 8px rgba(102, 126, 234, .35); }
/* learner search */
.bl-admin .bl-picker input[type=search] { padding: .75rem 1rem .75rem 2.5rem; border-radius: 12px; box-shadow: var(--a-shadow);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23667eea' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='M16.5 16.5 12.5 12.5'/%3E%3C/svg%3E") no-repeat .85rem center; }
.bl-admin .bl-picker-list { border-radius: 12px; border-color: var(--a-line); }
.bl-admin .bl-picker-list button b { color: var(--a-text); }
.bl-admin .bl-picker-list button:hover, .bl-admin .bl-picker-list button:focus { background: var(--a-tint-2); }
/* a quiz's attempts under its row */
.bl-admin .bl-detail-row > td { background: linear-gradient(90deg, #f5f3ff 0%, #f8fafc 100%); border-left: 4px solid var(--a-secondary); padding: .75rem 1rem 1rem; }
.bl-admin .bl-detail-row .bl-table-wrap { border-color: #ddd6fe; box-shadow: none; }
/* status line */
.bl-admin .bl-status:not(:empty) { justify-self: start; padding: .5rem .9rem; border-radius: 999px; font-weight: 600; font-size: .88rem; }
.bl-admin .bl-status.ok:not(:empty) { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.bl-admin .bl-status.err:not(:empty) { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
@media (max-width: 800px) {
  .bl-admin .bl-admin-main { padding: 1.25rem 1rem 2rem; }
  .bl-admin .bl-admin-nav { padding: .75rem; }
  .bl-admin-brand { width: 100%; margin: 0 0 .25rem; }
  .bl-admin .bl-admin-nav a { padding: .45rem .7rem; font-size: .88rem; }
  .bl-admin .bl-admin-nav a:hover { transform: none; }
}

/* pricing */
.bl-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; }
.bl-plan { position: relative; text-align: center; display: grid; gap: .5rem; justify-items: center; padding: 1.75rem 1.5rem; }
.bl-plan h2 { margin: 0; }
.bl-plan-price { font-size: 2rem; font-weight: 700; color: #1f2937; margin: 0; }
.bl-plan-price span { font-size: .95rem; font-weight: 500; color: #6b7280; }
.bl-plan-total { margin: 0 0 .5rem; color: #6b7280; }
.bl-plan-best { border: 2px solid #667eea; }
.bl-plan-tag { position: absolute; top: -12px; background: #667eea; color: #fff; font-size: .75rem; font-weight: 700; padding: .2rem .7rem; border-radius: 999px; }
.bl-list { margin: 0 0 1rem; padding-left: 1.2rem; color: #374151; display: grid; gap: .4rem; }
@media (max-width: 600px) { .bl-top { padding: 0 1rem; } .bl-nav { gap: .6rem; font-size: .9rem; } .login-box { padding: 1.75rem 1.25rem; } }

/* site-wide announcement (admin panel > Settings > banner) */
.bl-site-banner { background: #fef3c7; color: #92400e; text-align: center; padding: .5rem 1rem; font-size: .9rem; border-bottom: 1px solid #fde68a; }

/* Set up your computer (/setup) */
.bl-lead { color: #4b5563; margin: 0; }
.bl-tabs { display: flex; gap: .5rem; }
.bl-tabs button { padding: .5rem 1.1rem; border-radius: 8px; border: 2px solid #e2e8f0; background: #fff; color: #475569; font: inherit; font-weight: 500; cursor: pointer; }
.bl-tabs button[aria-selected="true"] { border-color: #667eea; background: #eff6ff; color: #1e40af; font-weight: 600; }
.bl-need { font-size: .75rem; font-weight: 600; color: #4b5563; background: #f3f4f6; border-radius: 999px; padding: .1rem .55rem; margin-left: .4rem; vertical-align: middle; }
.bl-warn { background: #fffbeb; border: 1px solid #fde68a; color: #92400e !important; padding: .6rem .75rem; border-radius: 6px; }
.bl-setup pre { background: #1e293b; color: #e2e8f0; padding: .6rem .8rem; border-radius: 6px; overflow-x: auto; margin: 0 0 .75rem; }
.bl-setup code { font-family: ui-monospace, Consolas, monospace; font-size: .88em; }
.bl-setup p code { background: #f3f4f6; padding: .05rem .3rem; border-radius: 4px; }
.bl-checks { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .4rem; }
.bl-checks li::before { display: inline-block; width: 1.4em; font-weight: 700; }
.bl-checks li::after { content: " · " attr(data-detail); color: #6b7280; font-size: .88rem; }
.bl-check-wait::before { content: "…"; color: #9ca3af; }
.bl-check-ok::before { content: "✓"; color: #047857; }
.bl-check-no::before { content: "✗"; color: #b91c1c; }

/* Phones: the header's links must fit beside the logo (no sideways scrolling) */
@media (max-width: 480px) {
  .bl-top { padding: 0 1rem; gap: 8px; }
  .bl-brand span { white-space: nowrap; font-size: 1rem; }
  .bl-nav { gap: .65rem; font-size: .88rem; white-space: nowrap; }
  .bl-nav .bl-nav-cta { padding: .4rem .65rem; }
  .bl-nav a[href="/pricing/"] { display: none; }
}
/* grid items may shrink below their content (long code lines scroll inside their box instead) */
.bl-page > * { min-width: 0; }