:root {
    --ink: #12202d;
    --muted: #627181;
    --navy: #102a43;
    --blue: #176b87;
    --teal: #159a9c;
    --gold: #c7973e;
    --line: #dfe6ec;
    --soft: #f5f7f8;
    --tint: #eef5f5;
    --white: #fff;
    --positive: #087f5b;
    --warning: #ae6320;
    --danger: #a93434;
    --shadow: 0 12px 35px rgba(16, 42, 67, .07);
    --radius: 16px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--ink);
    background: var(--white);
    font-family: Arial, "Helvetica Neue", sans-serif;
    line-height: 1.55;
}
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--navy); }
h1, h2, h3 { color: var(--navy); line-height: 1.16; margin: 0 0 .65rem; }
h1 { font-size: clamp(2.2rem, 4vw, 3.75rem); letter-spacing: -.055em; }
h2 { font-size: clamp(1.35rem, 2.3vw, 2rem); letter-spacing: -.03em; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1rem; }
ul, ol { padding-left: 1.2rem; }
input, textarea, select, button { font: inherit; }
input, textarea, select {
    width: 100%;
    border: 1px solid #cdd7df;
    border-radius: 9px;
    padding: .72rem .78rem;
    color: var(--ink);
    background: var(--white);
}
input:focus, textarea:focus, select:focus {
    outline: 2px solid rgba(21, 154, 156, .25);
    border-color: var(--teal);
}
textarea { resize: vertical; }
button { cursor: pointer; border: 0; }
button:disabled { cursor: not-allowed; opacity: .55; }
.container { width: min(1180px, calc(100% - 2.5rem)); margin: 0 auto; }
.section { padding: 4.5rem 0; }
.section-tint { background: var(--tint); }
.eyebrow, .label {
    color: var(--blue);
    font-weight: 700;
    font-size: .73rem;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.muted { color: var(--muted); }
.button {
    align-items: center;
    background: var(--navy);
    border: 1px solid var(--navy);
    border-radius: 9px;
    color: var(--white);
    display: inline-flex;
    font-weight: 700;
    justify-content: center;
    min-height: 48px;
    padding: .7rem 1.35rem;
    transition: background .18s ease, transform .18s ease;
}
.button:hover { background: var(--blue); border-color: var(--blue); color: var(--white); transform: translateY(-1px); }
.button-secondary { color: var(--navy); background: var(--white); border-color: var(--line); }
.button-secondary:hover { color: var(--navy); background: var(--soft); border-color: #cbd5dd; }
.button-small { min-height: 42px; padding: .55rem 1rem; }
.button-block { width: 100%; }
.text-link { font-weight: 700; }
.site-header {
    background: var(--white);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 20;
}
.nav-wrap { align-items: center; display: flex; justify-content: space-between; min-height: 76px; }
.brand { align-items: center; color: var(--navy); display: inline-flex; gap: .72rem; }
.brand:hover { color: var(--navy); }
.brand-mark {
    align-items: center;
    background: var(--navy);
    border-radius: 9px;
    color: var(--white);
    display: inline-flex;
    font-weight: 700;
    height: 43px;
    justify-content: center;
    letter-spacing: .04em;
    width: 43px;
}
.brand strong { display: block; font-size: 1.02rem; line-height: 1.05; }
.brand small { color: var(--muted); display: block; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
.nav-links { align-items: center; display: flex; gap: 1.6rem; font-weight: 600; }
.nav-toggle { background: none; color: var(--navy); display: none; font-weight: 700; }
.inline-form { display: inline; }
.link-button { background: transparent; color: var(--blue); font-weight: 600; padding: 0; }
.hero { padding: 5.5rem 0; background: linear-gradient(125deg, #fff 45%, #f0f6f7); }
.hero-grid {
    align-items: center;
    display: grid;
    gap: 4rem;
    grid-template-columns: minmax(400px, 1fr) 375px;
}
.hero-copy { color: var(--muted); font-size: 1.18rem; max-width: 650px; }
.hero-actions { display: flex; gap: .85rem; margin-top: 2rem; }
.hero-panel, .brief-card, .start-card, .prompt-card, .report-card, .score-panel {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.hero-panel { padding: 2rem; }
.journey-list { margin: 1.35rem 0 2.2rem; padding-left: 1.35rem; }
.journey-list li { margin: .8rem 0; padding-left: .4rem; }
.panel-stat { border-top: 1px solid var(--line); display: flex; gap: .8rem; padding-top: 1.35rem; }
.panel-stat strong { color: var(--teal); font-size: 2.2rem; line-height: 1; }
.panel-stat span { color: var(--muted); }
.section-heading { margin-bottom: 2.2rem; max-width: 600px; }
.card-grid { display: grid; gap: 1.2rem; }
.category-grid { grid-template-columns: repeat(4, 1fr); }
.category-card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.6rem;
    transition: box-shadow .18s ease, transform .18s ease;
}
.category-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.category-icon {
    align-items: center;
    background: var(--tint);
    border-radius: 8px;
    color: var(--blue);
    display: flex;
    font-size: 1.2rem;
    font-weight: 700;
    height: 43px;
    justify-content: center;
    margin-bottom: 1.15rem;
    width: 43px;
}
.feature-grid { align-items: start; display: grid; gap: 4rem; grid-template-columns: .9fr 1.1fr; }
.feature-list { display: grid; gap: 1.2rem; grid-template-columns: repeat(3, 1fr); }
.feature-list div { border-left: 2px solid var(--teal); padding-left: 1rem; }
.feature-list p { color: var(--muted); font-size: .94rem; margin-top: .4rem; }
.page-banner { background: var(--soft); border-bottom: 1px solid var(--line); padding: 3.2rem 0; }
.page-banner h1 { font-size: clamp(2rem, 3.2vw, 2.8rem); }
.page-banner p:last-child { color: var(--muted); margin-bottom: 0; }
.filter-bar {
    align-items: end;
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 12px;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(4, 1fr) auto;
    margin-bottom: 2rem;
    padding: 1.15rem;
}
.filter-bar label, .stack-form label {
    color: var(--navy);
    display: block;
    font-size: .92rem;
    font-weight: 700;
}
.filter-bar select, .filter-bar input, .stack-form input { display: block; font-weight: 400; margin-top: .35rem; }
.result-count { color: var(--muted); margin-bottom: 1.25rem; }
.simulation-grid { grid-template-columns: repeat(3, 1fr); }
.simulation-card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    min-height: 340px;
    padding: 1.45rem;
}
.simulation-card h2 { font-size: 1.35rem; margin: 1.15rem 0 .45rem; }
.simulation-card .button { margin-top: auto; }
.card-top { align-items: center; display: flex; justify-content: space-between; gap: .55rem; }
.pill, .level, .emotion {
    border-radius: 30px;
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    padding: .35rem .7rem;
}
.pill { background: var(--tint); color: var(--blue); }
.level { background: #f1f3f5; color: var(--muted); }
.level-advanced { background: #f9eee6; color: var(--warning); }
.level-intermediate { background: #eef4fa; color: var(--blue); }
.meta { color: var(--muted); }
.tag-list { display: flex; flex-wrap: wrap; gap: .38rem; margin: .6rem 0 1.5rem; }
.tag-list span {
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 6px;
    color: #465767;
    font-size: .79rem;
    padding: .25rem .45rem;
}
.empty-state { background: var(--soft); border-radius: var(--radius); padding: 2.2rem; text-align: center; }
.brief-banner .pill { margin-bottom: 1rem; }
.split-layout { align-items: start; display: grid; gap: 1.4rem; grid-template-columns: 1fr 380px; }
.brief-card { padding: 2rem; }
.detail-grid {
    background: var(--soft);
    border-radius: 12px;
    display: grid;
    gap: 1.4rem;
    grid-template-columns: repeat(2, 1fr);
    margin: 2rem 0;
    padding: 1.4rem;
}
.detail-grid p:last-child { margin-bottom: 0; }
.start-card { padding: 1.65rem; position: sticky; top: 96px; }
.stack-form { display: grid; gap: 1.05rem; margin-top: 1.4rem; }
.alert {
    border-radius: 9px;
    margin: 1rem auto;
    padding: .8rem 1rem;
}
.alert-error { background: #fff0f0; border: 1px solid #efc8c8; color: var(--danger); }
.alert-success { background: #eaf8f2; border: 1px solid #b9e4d2; color: var(--positive); }
.practice-header { background: var(--soft); border-bottom: 1px solid var(--line); padding: 2rem 0 1.5rem; }
.practice-header h1 { font-size: 1.8rem; }
.practice-meta { align-items: end; display: flex; justify-content: space-between; }
.progress-text { color: var(--muted); font-weight: 700; }
.progress-track { background: #d8e2e7; border-radius: 15px; height: 8px; margin-top: 1.5rem; overflow: hidden; }
.progress-track span { background: var(--teal); border-radius: inherit; display: block; height: 100%; }
.practice-section { background: #fbfcfc; }
.practice-layout { align-items: start; display: grid; gap: 1.35rem; grid-template-columns: 180px 1fr; max-width: 990px; }
.question-nav {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 12px;
    display: grid;
    gap: .4rem;
    padding: 1rem;
}
.question-nav a { align-items: center; border-radius: 7px; color: var(--muted); display: flex; gap: .6rem; padding: .42rem; }
.question-nav span {
    align-items: center;
    background: var(--soft);
    border-radius: 50%;
    display: inline-flex;
    font-size: .8rem;
    height: 27px;
    justify-content: center;
    width: 27px;
}
.question-nav a.active { background: var(--tint); color: var(--navy); font-weight: 700; }
.question-nav a.answered span { background: var(--teal); color: var(--white); }
.prompt-card { padding: clamp(1.4rem, 3vw, 2.35rem); }
.prompt-card h2 { font-size: clamp(1.35rem, 2.5vw, 1.8rem); margin: 1rem 0; }
.emotion { background: #f9eee6; color: var(--warning); }
.response-help { color: var(--muted); }
.response-form textarea { font-size: 1.05rem; margin-top: .55rem; padding: 1rem; }
.textarea-meta { color: var(--muted); display: flex; font-size: .82rem; justify-content: space-between; margin: .45rem 0 1.35rem; }
.form-actions { display: flex; gap: .8rem; justify-content: flex-end; }
.review-layout { max-width: 890px; }
.review-card {
    border: 1px solid var(--line);
    border-radius: 12px;
    margin-bottom: 1rem;
    padding: 1.35rem;
}
.review-card h2 { font-size: 1.15rem; }
.review-heading { display: flex; justify-content: space-between; }
.learner-answer { background: var(--soft); border-radius: 8px; margin: 1rem 0 0; padding: 1rem; }
.submit-panel {
    align-items: center;
    background: var(--tint);
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    margin-top: 1.8rem;
    padding: 1.25rem;
}
.submit-panel p { margin: 0; }
.report-hero { background: var(--navy); color: var(--white); padding: 3rem 0; }
.report-hero h1, .report-hero .eyebrow { color: var(--white); }
.report-title { align-items: center; display: flex; justify-content: space-between; }
.overall-score { border-left: 1px solid rgba(255,255,255,.25); min-width: 210px; padding-left: 2rem; }
.overall-score strong { color: #58d4d0; display: block; font-size: 3.8rem; line-height: 1; }
.report-section { background: #fbfcfc; }
.report-actions { display: flex; gap: .8rem; justify-content: flex-end; margin-bottom: 1.35rem; }
.report-grid { display: grid; gap: 1.25rem; grid-template-columns: 1.45fr .9fr; margin-bottom: 1.25rem; }
.score-panel, .report-card { padding: 1.65rem; }
.radar-summary { display: grid; gap: 1rem; margin-top: 1.5rem; }
.radar-axis div { display: flex; font-size: .93rem; justify-content: space-between; margin-bottom: .35rem; }
.radar-axis meter { height: 14px; width: 100%; }
.radar-axis meter::-webkit-meter-bar { background: #edf1f3; border: 0; border-radius: 10px; }
.radar-axis meter::-webkit-meter-optimum-value { background: linear-gradient(90deg, var(--blue), var(--teal)); border-radius: 10px; }
.insight-stack { display: grid; gap: 1.2rem; }
.insight-card { border-radius: var(--radius); padding: 1.35rem; }
.insight-card h2 { font-size: 1.25rem; }
.insight-card li { margin: .55rem 0; }
.insight-card.positive { background: #eaf8f2; }
.insight-card.improve { background: #fff5e9; }
.report-card { margin-bottom: 1.25rem; }
.plan-table { margin-top: 1.35rem; }
.plan-head, .plan-row { display: grid; gap: 1rem; grid-template-columns: .85fr 1fr 1fr 1fr; padding: .8rem .6rem; }
.plan-head { border-bottom: 1px solid var(--line); color: var(--muted); font-size: .78rem; font-weight: 700; text-transform: uppercase; }
.plan-row { border-bottom: 1px solid var(--line); }
.plan-row span:first-child { color: var(--navy); font-weight: 700; }
.example-list > div { border-top: 1px solid var(--line); padding: 1.15rem 0; }
.example-list h3 { font-size: 1rem; }
.example-list p { color: #435362; margin: 0; }
.next-actions { border-left: 4px solid var(--teal); }
.site-footer { border-top: 1px solid var(--line); color: var(--muted); padding: 2.4rem 0; }
.footer-grid { display: flex; gap: 3rem; justify-content: space-between; }
.footer-grid > div { max-width: 530px; }

/* Admin interface */
.admin-body { background: #fbfcfc; }
.admin-shell { padding: 2.6rem 0 4rem; }
.admin-heading { align-items: center; display: flex; justify-content: space-between; margin-bottom: 1.7rem; }
.stats-grid { display: grid; gap: 1rem; grid-template-columns: repeat(4, 1fr); margin-bottom: 2rem; }
.stat-card, .admin-panel {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 1.3rem;
}
.stat-card strong { color: var(--navy); display: block; font-size: 2.25rem; }
.admin-panel { margin-bottom: 1.3rem; }
.table-wrap { overflow-x: auto; }
.data-table { border-collapse: collapse; min-width: 680px; width: 100%; }
.data-table th {
    color: var(--muted);
    font-size: .76rem;
    letter-spacing: .08em;
    text-align: left;
    text-transform: uppercase;
}
.data-table td, .data-table th { border-bottom: 1px solid var(--line); padding: .78rem .55rem; vertical-align: top; }
.table-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.table-actions button { background: transparent; color: var(--blue); padding: 0; }
.status { border-radius: 20px; font-size: .76rem; font-weight: 700; padding: .25rem .5rem; }
.status-active { background: #eaf8f2; color: var(--positive); }
.status-inactive { background: #f1f3f5; color: var(--muted); }
.editor-form { display: grid; gap: 1rem; }
.editor-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
.editor-form label { color: var(--navy); font-size: .91rem; font-weight: 700; }
.editor-form label input, .editor-form label textarea, .editor-form label select { display: block; font-weight: 400; margin-top: .35rem; }
.editor-form input[type="checkbox"] { display: inline-block; margin: 0 .45rem 0 0; width: auto; }
.field-full { grid-column: 1 / -1; }
.admin-login { margin: 4.5rem auto; max-width: 430px; }
.admin-login .admin-panel { padding: 2rem; }

@media (max-width: 980px) {
    .hero-grid, .feature-grid, .split-layout, .report-grid { grid-template-columns: 1fr; gap: 2rem; }
    .hero { padding: 4rem 0; }
    .hero-panel { max-width: 520px; }
    .category-grid, .simulation-grid { grid-template-columns: repeat(2, 1fr); }
    .feature-list, .filter-bar { grid-template-columns: repeat(2, 1fr); }
    .start-card { position: static; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
    .container { width: min(100% - 1.5rem, 1180px); }
    .section { padding: 3rem 0; }
    .nav-toggle { display: block; }
    .nav-links {
        background: var(--white);
        border-bottom: 1px solid var(--line);
        display: none;
        flex-direction: column;
        gap: 1rem;
        left: 0;
        padding: 1rem 1.25rem 1.4rem;
        position: absolute;
        right: 0;
        top: 76px;
    }
    .nav-links.open { display: flex; }
    .hero-grid { grid-template-columns: 1fr; }
    .hero-actions, .report-actions, .submit-panel { align-items: stretch; flex-direction: column; }
    .category-grid, .simulation-grid, .feature-list, .filter-bar, .detail-grid, .editor-grid, .stats-grid { grid-template-columns: 1fr; }
    .practice-layout { grid-template-columns: 1fr; }
    .question-nav { display: flex; overflow-x: auto; }
    .question-nav .label { display: none; }
    .practice-meta, .report-title, .footer-grid { align-items: start; flex-direction: column; gap: 1.2rem; }
    .overall-score { border-left: 0; border-top: 1px solid rgba(255,255,255,.25); padding: 1.2rem 0 0; }
    .plan-head { display: none; }
    .plan-row { display: block; padding: 1rem 0; }
    .plan-row span { display: block; margin-bottom: .5rem; }
    .plan-row span:not(:first-child)::before { color: var(--muted); content: 'Action: '; font-size: .8rem; font-weight: 700; text-transform: uppercase; }
}
@media print {
    .site-header, .site-footer, .no-print { display: none !important; }
    body { color: #000; font-size: 11pt; }
    .report-hero { background: #fff; color: #000; padding: 0 0 20px; }
    .report-hero h1, .report-hero .eyebrow { color: #000; }
    .overall-score strong { color: #000; }
    .report-section, .report-card, .score-panel { background: #fff; box-shadow: none; }
    .report-grid { grid-template-columns: 1fr 1fr; }
    .report-card, .score-panel, .insight-card { break-inside: avoid; }
}

/* --- Applied visual refresh --- */

/* =========================================================
   BBT SaaS/LMS Builder Visual Refresh - May 2026
   Inspired by modern AI-builder landing pages; keeps all existing PHP logic intact.
   ========================================================= */
:root{
  --ink:#0b1020;
  --muted:#667085;
  --line:#e7e9f3;
  --soft:#f6f7fb;
  --panel:#ffffff;
  --brand:#111827;
  --accent:#2737ff;
  --accent2:#7c3aed;
  --gold:#f59e0b;
  --shadow:0 22px 60px rgba(17,24,39,.11);
  --radius:28px;
}
body{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif!important;
  color:var(--ink)!important;
  background:radial-gradient(circle at 10% -5%,rgba(39,55,255,.12),transparent 32%),radial-gradient(circle at 88% 0,rgba(124,58,237,.10),transparent 34%),linear-gradient(180deg,#fff 0%,#f7f8fc 100%)!important;
}
a{color:var(--accent);text-decoration:none} a:hover{text-decoration:none;color:#101828}
.container{width:min(1180px,calc(100% - 40px));margin-inline:auto}.page{padding-top:38px;padding-bottom:56px}
.site-header,.topbar{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.84)!important;color:var(--ink)!important;border-bottom:1px solid rgba(231,233,243,.9)!important;box-shadow:none!important;backdrop-filter:blur(18px)
}
.site-header.admin,.site-header.learner{background:rgba(255,255,255,.86)!important}.nav,.nav-wrap{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:22px}.brand,.logo{display:flex;align-items:center;gap:12px;color:#101828!important;font-weight:850}.brand:hover,.logo:hover{color:#101828!important}.brand-mark,.logo-mark{width:44px!important;height:44px!important;border-radius:15px!important;display:grid;place-items:center;color:#fff!important;background:linear-gradient(135deg,#111827,#2737ff 55%,#7c3aed)!important;box-shadow:0 12px 28px rgba(39,55,255,.18)!important;font-weight:900!important}.brand small{color:var(--muted)!important;font-weight:650!important;letter-spacing:0!important;text-transform:none!important}.nav nav,.nav-links,nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.nav a,nav a,.nav-links a{display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent!important;border-radius:999px!important;padding:9px 12px!important;color:#344054!important;font-weight:750!important;background:transparent!important}.nav a:hover,nav a:hover,.nav-links a:hover{background:#f2f4ff!important;color:#101828!important}.button,.btn,button,input[type=submit],.link-button{border-radius:999px!important;border:1px solid transparent!important;background:linear-gradient(135deg,#111827,#2737ff)!important;color:#fff!important;font-weight:850!important;box-shadow:0 14px 30px rgba(39,55,255,.18)!important;padding:11px 17px!important;min-height:42px!important}.button:hover,.btn:hover,button:hover,input[type=submit]:hover{filter:none!important;transform:translateY(-1px);box-shadow:0 18px 38px rgba(39,55,255,.23)!important;color:#fff!important}.button-secondary,.btn.secondary,.btn.ghost{background:#fff!important;color:#101828!important;border-color:#d8ddec!important;box-shadow:0 10px 24px rgba(17,24,39,.06)!important}.hero,.bbt-hero{position:relative;overflow:hidden;padding:70px 0 54px!important;background:radial-gradient(circle at 78% 0,rgba(39,55,255,.11),transparent 35%),linear-gradient(180deg,#fff,#f8f9ff)!important;border-bottom:1px solid var(--line)}.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,.8fr);gap:48px;align-items:center}.eyebrow,.label,.kicker{display:inline-flex;align-items:center;gap:8px;width:max-content;background:#fff!important;border:1px solid var(--line)!important;border-radius:999px!important;box-shadow:0 8px 24px rgba(17,24,39,.05)!important;color:#2330cf!important;font-weight:850!important;padding:8px 13px!important;text-transform:none!important;letter-spacing:.01em!important;margin-bottom:16px}h1{font-size:clamp(2.25rem,5vw,4.85rem)!important;line-height:.97!important;letter-spacing:-.07em!important;color:#080d1d!important}h2{font-size:clamp(1.55rem,3vw,2.65rem)!important;line-height:1.05!important;letter-spacing:-.045em!important;color:#101828!important}h3{letter-spacing:-.02em;color:#101828!important}.hero-copy,.lead,p,.muted,.small-muted{color:#667085}.card,.panel,.report-card,.hero-panel,.brief-card,.start-card,.prompt-card,.score-panel,.category-card,.simulation-card,.metric,.stat,.question,.concept-block,.case-block,.takeaway-box,.chosen-answer,.correct-answer-box{background:#fff!important;border:1px solid var(--line)!important;border-radius:24px!important;box-shadow:0 12px 34px rgba(17,24,39,.055)!important}.card,.panel,.report-card,.hero-panel,.brief-card,.start-card,.prompt-card,.score-panel{padding:24px!important}.category-card:hover,.simulation-card:hover,.card:hover{box-shadow:0 22px 48px rgba(17,24,39,.09)!important;transform:translateY(-2px)}.category-icon,.module-index{background:linear-gradient(135deg,#eef2ff,#e0f7ff)!important;color:#2330cf!important;border-radius:15px!important}.section,.section-tint{padding:62px 0!important}.section-tint{background:linear-gradient(180deg,#f8f9ff,#fff)!important;border-block:1px solid var(--line)}.grid.two,.grid.three,.grid-2,.grid-3,.grid-4,.card-grid,.category-grid,.simulation-grid{gap:20px!important}.brand-strip{background:#fff!important;border:1px solid var(--line)!important;border-radius:26px!important;box-shadow:0 16px 38px rgba(17,24,39,.07)!important;border-left:0!important}.table-wrap{border:1px solid var(--line)!important;border-radius:20px!important;overflow:auto}table{border-collapse:collapse;width:100%;background:#fff!important}th{background:#f8f9ff!important;color:#667085!important;font-size:.78rem!important;letter-spacing:.08em!important;text-transform:uppercase!important}th,td{border-bottom:1px solid var(--line)!important;padding:13px!important}.badge,.pill,.level,.emotion{border-radius:999px!important;background:#eef2ff!important;color:#2330cf!important;font-weight:850!important}.score-circle{background:linear-gradient(135deg,#2737ff,#7c3aed)!important;box-shadow:0 18px 38px rgba(39,55,255,.2)!important}.footer{background:#fff!important;border-top:1px solid var(--line)!important;color:#667085!important}.footer a{color:#2330cf!important;font-weight:800}@media(max-width:900px){.hero-grid,.grid.two,.grid.three,.grid-2,.grid-3,.grid-4,.card-grid,.category-grid,.simulation-grid,.feature-grid,.feature-list,.split-layout{grid-template-columns:1fr!important}.nav,.nav-wrap,.topbar{align-items:flex-start;flex-direction:column;padding:12px 0!important}nav,.nav-links{width:100%;overflow-x:auto;flex-wrap:nowrap!important;padding-bottom:6px}.container{width:min(100% - 28px,1180px)!important}.page{padding-top:24px}.hero{padding:48px 0 36px!important}h1{font-size:clamp(2rem,11vw,3.2rem)!important}.card,.panel,.report-card{padding:20px!important;border-radius:22px!important}}


/* Breaking Barriers Training official logo update */
.brand-logo{
  width:52px!important;
  height:46px!important;
  object-fit:contain!important;
  display:block!important;
  flex:0 0 auto!important;
  background:transparent!important;
  border-radius:0!important;
  box-shadow:none!important;
}
@media(max-width:800px){.brand-logo{width:44px!important;height:40px!important}}


/* BBT logo size refinement - compact text-height header logo */
.brand-logo{
  width:30px!important;
  height:22px!important;
  max-width:30px!important;
  max-height:22px!important;
  object-fit:contain!important;
  display:block!important;
  flex:0 0 30px!important;
  background:transparent!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.logo .brand-logo,.brand .brand-logo{margin-right:2px!important;}
.footer .brand-logo{width:30px!important;height:22px!important;max-width:30px!important;max-height:22px!important;}
.certificate-logo{
  width:86px!important;
  height:auto!important;
  max-width:86px!important;
  object-fit:contain!important;
  margin-bottom:12px!important;
}
@media print{.certificate-logo{width:78px!important;max-width:78px!important;margin-bottom:10px!important;}}
@media(max-width:800px){.brand-logo{width:28px!important;height:20px!important;max-width:28px!important;max-height:20px!important;flex-basis:28px!important}.footer .brand-logo{width:28px!important;height:20px!important}.certificate-logo{width:76px!important;max-width:76px!important;}}

/* =========================================================
   Mobile UX Optimization Patch - May 2026
   For digital roleplay practice, reports and admin pages.
   ========================================================= */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{ overflow-x:hidden; }
img,svg,video,iframe{ max-width:100%; height:auto; }
p,li,a,h1,h2,h3,label,td,th,.card,.hero-panel,.brief-card,.start-card,.prompt-card,.report-card,.score-panel{ overflow-wrap:anywhere; }
button,.button,.link-button,.nav-links a{ min-height:44px; touch-action:manipulation; }
input,textarea,select{ font-size:16px; }
.table-wrap,.question-nav{ -webkit-overflow-scrolling:touch; }
@media(max-width:760px){
  .site-header{ position:sticky; top:0; z-index:70; }
  .nav-wrap{ min-height:64px!important; padding:10px 0!important; gap:12px!important; position:relative; }
  .brand{ min-width:0; flex:1 1 auto; gap:8px!important; }
  .brand span{ min-width:0; }
  .brand small{ display:none!important; }
  .nav-toggle{ display:inline-flex!important; align-items:center; justify-content:center; min-height:42px; padding:9px 13px!important; border-radius:999px!important; border:1px solid var(--line)!important; background:#fff!important; box-shadow:0 8px 20px rgba(17,24,39,.08); }
  .nav-links{ display:none!important; position:fixed!important; top:72px!important; left:12px!important; right:12px!important; max-height:calc(100dvh - 92px); overflow-y:auto; background:rgba(255,255,255,.97)!important; border:1px solid var(--line)!important; border-radius:20px!important; box-shadow:0 24px 70px rgba(17,24,39,.18)!important; padding:12px!important; flex-direction:column!important; align-items:stretch!important; gap:8px!important; }
  .nav-links.open{ display:flex!important; }
  .nav-links a,.nav-links .button,.link-button{ width:100%; justify-content:flex-start!important; padding:11px 13px!important; border-radius:999px!important; }
  .nav-links .button{ justify-content:center!important; }
  .inline-form{ width:100%; }
  .inline-form button{ width:100%; text-align:left; background:#fff!important; color:var(--blue)!important; border:1px solid var(--line)!important; }
  .container{ width:min(100% - 24px,1180px)!important; }
  .hero{ padding:38px 0 30px!important; }
  .section{ padding:42px 0!important; }
  h1{ font-size:clamp(1.95rem,10vw,2.8rem)!important; line-height:1.06!important; letter-spacing:-.05em!important; }
  h2{ font-size:clamp(1.35rem,6.5vw,1.9rem)!important; }
  .hero-copy{ font-size:1rem!important; }
  .hero-actions,.report-actions,.submit-panel{ display:grid!important; grid-template-columns:1fr!important; gap:10px!important; }
  .hero-actions .button,.report-actions .button,.submit-panel .button,button[type=submit]{ width:100%!important; }
  .hero-panel,.brief-card,.start-card,.prompt-card,.report-card,.score-panel,.admin-panel{ padding:16px!important; border-radius:18px!important; }
  .category-grid,.simulation-grid,.feature-list,.filter-bar,.detail-grid,.editor-grid,.stats-grid,.practice-layout,.report-grid{ grid-template-columns:1fr!important; gap:14px!important; }
  .question-nav{ display:flex!important; overflow-x:auto!important; gap:8px!important; padding-bottom:6px; }
  .question-nav a,.question-nav button{ flex:0 0 auto; min-width:42px; }
  textarea{ min-height:150px!important; }
  .footer-grid{ flex-direction:column!important; align-items:flex-start!important; gap:12px!important; }
}
@media(max-width:420px){
  .container{ width:min(100% - 20px,1180px)!important; }
  .brand strong{ font-size:.95rem!important; }
  .nav-links{ top:68px!important; left:10px!important; right:10px!important; }
  .hero{ padding:32px 0 24px!important; }
  .section{ padding:34px 0!important; }
}

/* =========================================================
   Roleplay Simulation Engine V2 UX Upgrade
   ========================================================= */
.prebrief-box{margin-top:24px;padding:18px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg,#fff,#f8f9ff)}
.prebrief-grid,.debrief-principles,.dashboard-analytics-grid,.debrief-report-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.prebrief-grid div,.debrief-principles div,.debrief-report-grid div,.persona-snapshot{padding:14px;border:1px solid var(--line);border-radius:16px;background:#fff}
.checkline{display:flex!important;gap:10px;align-items:flex-start;font-weight:650!important;line-height:1.45}.checkline input{margin-top:4px}.persona-start-card hr{border:0;border-top:1px solid var(--line);margin:18px 0}.persona-snapshot .label{margin-top:10px;margin-bottom:8px}
.simulation-command-centre{background:linear-gradient(135deg,#0f172a,#2737ff)!important;color:#fff!important}.simulation-command-centre h1,.simulation-command-centre .eyebrow,.simulation-command-centre .progress-text{color:#fff!important}.simulation-meters{display:grid;grid-template-columns:1fr 1fr auto;gap:14px;margin-top:18px}.simulation-meters div{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);border-radius:18px;padding:13px}.simulation-meters span{display:block;font-size:.78rem;font-weight:850;text-transform:uppercase;letter-spacing:.05em;opacity:.85}.simulation-meters strong{color:#fff}.simulation-meters meter{width:100%;height:12px;margin:8px 0}.state-pill{display:inline-flex!important;align-items:center;min-height:34px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.16)}
.practice-layout-v2{grid-template-columns:320px minmax(0,1fr);align-items:start}.simulation-sidebar{display:block}.compact-card{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:0 12px 34px rgba(17,24,39,.055);padding:16px;margin-bottom:14px}.persona-card h2{font-size:1.22rem!important;line-height:1.12!important}.persona-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.persona-tags span{border:1px solid var(--line);border-radius:999px;padding:6px 9px;font-size:.78rem;font-weight:800;color:#344054;background:#f8f9ff}.scenario-brief-mini p:last-child{margin-bottom:0}
.chat-simulation-card{padding:0!important;overflow:hidden}.chat-window{background:linear-gradient(180deg,#f8f9ff,#fff);border-bottom:1px solid var(--line);max-height:520px;overflow:auto;padding:22px}.chat-message{display:flex;gap:12px;margin-bottom:16px}.chat-message .avatar{align-items:center;background:#111827;border-radius:50%;color:#fff;display:flex;flex:0 0 42px;font-size:.78rem;font-weight:900;height:42px;justify-content:center}.learner-message{justify-content:flex-end}.learner-message .avatar{background:#2737ff;order:2}.bubble{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 10px 24px rgba(17,24,39,.055);max-width:78%;padding:14px}.learner-message .bubble{background:#eef2ff}.bubble p:last-child{margin-bottom:0}.bubble-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px}.bubble-meta span{border-radius:999px;background:#eef2ff;color:#2330cf;font-size:.75rem;font-weight:850;padding:4px 8px}.response-panel{padding:22px}.response-panel-heading{align-items:start;display:flex;justify-content:space-between;gap:16px}.score-band{border-radius:999px;display:inline-flex;font-size:.78rem;font-weight:900;padding:7px 11px;white-space:nowrap}.band-developing{background:#fff4e6;color:#9a3412}.band-capable{background:#eef4fa;color:#1d4ed8}.band-strong{background:#ecfdf5;color:#047857}.band-advanced{background:#f0fdf4;color:#166534}.coach-panel{background:#f8f9ff;border:1px solid var(--line);border-radius:18px;margin:18px 0;padding:16px}.coach-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.coach-grid ul{margin:0;padding-left:18px}.missed-cue,.best-practice{background:#fff;border-left:4px solid #2737ff;border-radius:12px;margin:14px 0 0;padding:12px}.split-actions{align-items:center;display:flex;gap:10px;flex-wrap:wrap}.stacked-actions{display:grid!important;gap:10px!important}.transcript-list{display:grid;gap:16px}.transcript-card{border:1px solid var(--line);border-radius:20px;background:#fff;padding:18px}.transcript-heading{display:flex;justify-content:space-between;gap:12px;align-items:center}.transcript-card blockquote{border-left:4px solid #d8ddec;margin:12px 0;padding:10px 0 10px 14px;color:#344054;background:#f8f9ff;border-radius:10px}.manager-card ol{margin-bottom:0}.check-list{padding-left:20px}.alert-warning{background:#fff7ed;border-color:#fed7aa;color:#9a3412}.alert-success{background:#ecfdf5;border-color:#a7f3d0;color:#047857}.stats-grid-wide{grid-template-columns:repeat(5,minmax(0,1fr))}.compact-feedback{margin-top:10px!important}.compact-feedback p{margin:0}.debrief-banner{background:linear-gradient(135deg,#f8f9ff,#fff)!important}
@media(max-width:900px){.practice-layout-v2,.simulation-meters,.prebrief-grid,.debrief-principles,.dashboard-analytics-grid,.debrief-report-grid,.coach-grid{grid-template-columns:1fr!important}.simulation-sidebar{display:grid;grid-template-columns:1fr;gap:10px}.simulation-sidebar .compact-card{margin-bottom:0}.chat-window{max-height:none;padding:16px}.bubble{max-width:calc(100% - 54px)}.response-panel-heading{flex-direction:column}.split-actions{display:grid!important;grid-template-columns:1fr!important}.split-actions .button{width:100%!important}.stats-grid-wide{grid-template-columns:1fr!important}}
@media(max-width:760px){.simulation-command-centre{padding:22px 0!important}.simulation-meters div{padding:11px}.chat-window{padding:12px}.chat-message{gap:8px}.chat-message .avatar{height:34px;flex-basis:34px;font-size:.68rem}.bubble{border-radius:15px;padding:12px}.response-panel{padding:14px}.transcript-heading{align-items:flex-start;flex-direction:column}.prebrief-box{padding:14px}.compact-card{padding:14px}.score-band{white-space:normal}.question-nav .compact-card{min-width:250px}.simulation-sidebar{overflow:visible!important}}