/* BCM360 Messe-Demo – Styles. Tokens aus dem BCM360-Webapp-Branding (MACONIA 2026). */
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Bold.woff2") format("woff2"); font-weight: 700 800; font-display: swap; }

:root {
	--ink: #11110F; --text: #1B1B1B; --subtle: #686761; --white: #FFFFFF;
	--accent: #FF5A24; --accent-dark: #D9440F; --accent-tint: #FFEDE6; --accent-strong: #B8431A;
	--n700: #4A4944; --muted: #8C8B85; --grey-light: #A3A19A; --grey-soft: #C4C1BA;
	--border: #DCDAD6; --border-soft: #E8E6E2; --n100: #EFEEEB; --surface: #F4F3F1; --n25: #FAF9F8;
	--success: #3DA318; --success-light: #DAF8E6; --warning: #D9A400; --warning-light: #FEEAA3;
	--warning-ink: #7A5300; --danger: #DF2800; --error-light: #FFD9DA;
	--r-btn: 6px; --r-card: 10px;
	--shadow-sm: 0 1px 2px 0 rgba(0,0,0,.05); --shadow-card: 0 1px 2px 0 #11110F1F;
	--shadow-md: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
	--shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
	--shadow-xl: 0 25px 50px -12px rgba(0,0,0,.35);
	--font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	/* Fluid type: readable from laptop to TV (BCM360-426) */
	--fs: clamp(14px, 0.42vw + 9.5px, 20px);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body { font-family: var(--font); color: var(--text); background: var(--white); font-size: var(--fs); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; }
img { max-width: 100%; }
svg.i { width: 1em; height: 1em; flex: none; vertical-align: -0.125em; }
.hidden { display: none !important; }
.muted { color: var(--subtle); }
.small { font-size: .82em; }
b, strong { font-weight: 600; }

/* ---------- buttons, inputs, tags ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; white-space: nowrap; font-weight: 600; border-radius: var(--r-btn); border: 1px solid transparent; box-shadow: var(--shadow-sm); height: 2.6em; padding: 0 1.1em; transition: background .15s, transform .05s, box-shadow .15s; }
.btn:active { transform: translateY(1px); }
.btn-action { background: var(--accent); color: #fff; }
.btn-action:hover { background: var(--accent-dark); }
.btn-action:disabled, .btn-action.disabled { background: #FFB59C; cursor: not-allowed; }
.btn-white { background: #fff; border-color: var(--border); }
.btn-white:hover { background: var(--surface); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: #2a2a27; }
.btn-ghost { box-shadow: none; }
.btn-ghost:hover { background: var(--surface); }
.btn-danger { background: #fff; border-color: var(--border); color: var(--danger); }
.btn-sm { height: 2.1em; padding: 0 .8em; font-size: .88em; }
.btn-lg { height: 3.1em; padding: 0 1.6em; font-size: 1.08em; }
.btn-ok { background: var(--success); color: #fff; }
.icon-btn { width: 2.5em; height: 2.5em; border: 1px solid var(--border); border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: #fff; color: var(--n700); flex: none; position: relative; }
.icon-btn:hover { background: var(--surface); }
.icon-btn.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.icon-btn.ok { background: var(--success); border-color: var(--success); color: #fff; }
.icon-btn .dot-badge { position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--success); border: 2px solid #fff; }
.input { height: 2.75em; border: 1px solid var(--border); border-radius: var(--r-btn); padding: 0 .9em; width: 100%; background: #fff; }
.input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
textarea.input { height: auto; min-height: 4.5em; padding: .6em .9em; line-height: 1.5; resize: vertical; }
select.input { appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23686761' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .8em center; padding-right: 2.2em; }
.label { display: block; font-weight: 600; margin-bottom: .4em; }
.tag { display: inline-flex; align-items: center; gap: .4em; font-size: .78em; font-weight: 500; padding: .25em .6em; border-radius: 4px; background: var(--success-light); color: #1F5E0B; white-space: nowrap; }
.tag.grey { background: var(--surface); color: var(--n700); }
.tag.amber { background: var(--warning-light); color: var(--warning-ink); }
.tag.orange { background: var(--accent-tint); color: var(--accent-strong); }
.tag.red { background: var(--error-light); color: #9A1C00; }
.tag.ink { background: var(--ink); color: #fff; }
.count { background: var(--accent); color: #fff; font-size: .7em; font-weight: 700; border-radius: 999px; padding: .1em .55em; }
.dot { width: .55em; height: .55em; border-radius: 50%; display: inline-block; flex: none; }
.dot.on { background: var(--success); } .dot.wait { background: var(--warning); } .dot.off { background: var(--grey-soft); }
.card { background: #fff; border: 1px solid var(--border-soft); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.card-h { padding: .9em 1.2em; border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: space-between; gap: .8em; }
.card-h h3 { font-size: 1.05em; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: .5em; }
.card-b { padding: 1em 1.2em; }
.note { display: flex; gap: .6em; align-items: flex-start; font-size: .88em; line-height: 1.5; background: var(--n25); border: 1px solid var(--border-soft); padding: .7em .9em; border-radius: 8px; color: var(--n700); }
.note.warn { background: #FFF8E1; border-color: #F4DE8B; color: var(--warning-ink); }
.note.good { background: #F1FBEC; border-color: #BFE5AB; color: #1F5E0B; }
.pa { width: 2.3em; height: 2.3em; border-radius: 10px; color: #fff; font-weight: 600; font-size: .85em; display: inline-flex; align-items: center; justify-content: center; flex: none; overflow: hidden; background: var(--ink); position: relative; }
.pa img { width: 100%; height: 100%; object-fit: cover; object-position: top; background: var(--n100); }
.pa.round { border-radius: 50%; }
.md h3 { font-size: 1.15em; margin: 0 0 .6em; color: var(--ink); }
.md h4 { font-size: 1em; font-weight: 600; color: var(--ink); margin: .9em 0 .35em; }
.md h4:first-child { margin-top: 0; }
.md p, .md li { line-height: 1.6; }
.md p + p { margin-top: .6em; }
.md ul { padding-left: 1.3em; margin: .3em 0; }
.md .muted { margin-top: .6em; }
.tbl { width: 100%; border-collapse: collapse; margin: .6em 0 .9em; font-size: .92em; }
.tbl th { text-align: left; background: var(--n25); font-weight: 600; color: var(--subtle); padding: .5em .6em; border-bottom: 1px solid var(--border-soft); }
.tbl td { padding: .55em .6em; border-bottom: 1px solid var(--border-soft); vertical-align: top; }

/* ---------- attract / login ---------- */
.attract { min-height: 100vh; background: radial-gradient(1200px 600px at 80% 10%, rgba(255,90,36,.22), transparent 60%), var(--ink); color: #fff; display: flex; flex-direction: column; padding: 4vh 6vw; cursor: pointer; position: relative; overflow: hidden; }
.attract .logo-row { display: flex; align-items: center; gap: .8em; }
.attract .logo-row img { height: 1.6em; filter: invert(1); }
.attract .by { color: #A3A19A; font-size: .9em; }
.attract .center { flex: 1; display: flex; flex-direction: column; justify-content: center; max-width: 60em; }
.attract .kicker { color: var(--accent); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .9em; margin-bottom: 1em; }
.attract h1 { font-size: clamp(36px, 4.6vw, 86px); line-height: 1.05; font-weight: 800; letter-spacing: -.02em; }
.attract h1 span { color: var(--accent); }
.attract .lead { font-size: 1.35em; color: #DCDAD6; margin-top: 1em; max-width: 34em; line-height: 1.5; }
.attract .cta { margin-top: 2.2em; display: flex; gap: 1em; align-items: center; flex-wrap: wrap; }
.attract .cta .btn { font-size: 1.3em; }
.attract .tap { color: #C4C1BA; display: flex; align-items: center; gap: .5em; }
.attract .pulse-ring { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(255,90,36,.6); animation: ring 1.6s infinite; }
@keyframes ring { 70% { box-shadow: 0 0 0 14px rgba(255,90,36,0); } 100% { box-shadow: 0 0 0 0 rgba(255,90,36,0); } }
.attract .feat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1em; margin-top: 3em; max-width: 70em; }
.attract .feat div { border: 1px solid #2f2f2b; border-radius: 12px; padding: 1em; background: rgba(255,255,255,.03); }
.attract .feat b { display: block; color: #fff; margin-bottom: .3em; }
.attract .feat span { color: #A3A19A; font-size: .88em; line-height: 1.45; }
.attract .foot { color: #8C8B85; font-size: .8em; line-height: 1.5; max-width: 70em; margin-top: 2em; }
.login-wrap { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.login-side { background: url("../img/ransomware.jpg") center/cover; position: relative; }
.login-side::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17,17,15,.2), rgba(17,17,15,.85)); }
.login-side .q { position: absolute; left: 3em; right: 3em; bottom: 3em; color: #fff; z-index: 1; font-size: 1.4em; line-height: 1.4; font-weight: 600; }
.login-side .q small { display: block; font-size: .6em; color: #C4C1BA; font-weight: 400; margin-top: .8em; }
.login-main { display: flex; align-items: center; justify-content: center; padding: 2em; background: var(--surface); }
.login-card { width: min(30em, 100%); background: #fff; border: 1px solid var(--border-soft); border-radius: 16px; padding: 2.2em; box-shadow: var(--shadow-lg); }
.login-card .lg { height: 1.5em; margin-bottom: 1.6em; }
.login-card h2 { font-size: 1.6em; margin-bottom: .3em; }
.login-card .field { margin-top: 1em; }
.login-card .demo-hint { margin-top: 1.2em; }

/* ---------- app shell ---------- */
.shell { display: flex; min-height: 100vh; }
.sidebar-wrap { padding: 8px 0 16px 8px; flex: none; position: sticky; top: 0; height: 100vh; }
.sidebar { width: 80px; height: 100%; background: #fff; border: 1px solid var(--border-soft); border-radius: var(--r-card); display: flex; flex-direction: column; align-items: center; padding: 16px 0; gap: 8px; }
.sidebar .logo { width: 46px; height: 46px; border-radius: 10px; border: 1px solid var(--border-soft); box-shadow: var(--shadow-card); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.sidebar .logo img { width: 30px; }
.nav { width: 46px; height: 44px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--ink); position: relative; }
.nav svg { width: 22px; height: 22px; }
.nav:hover { background: var(--surface); }
.nav.active { background: var(--accent); color: #fff; }
.nav .tip { position: absolute; left: 56px; background: var(--ink); color: #fff; font-size: 13px; padding: 4px 8px; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 30; }
.nav:hover .tip { opacity: 1; }
.nav .new { position: absolute; top: -5px; right: -9px; background: var(--accent-strong); color: #fff; font-size: 9px; font-weight: 700; padding: 1px 4px; border-radius: 4px; }
.spacer { flex: 1; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { padding: 1.2em 1.5em; border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: space-between; gap: 1em; }
.topbar h1 { font-size: 1.75em; font-weight: 700; }
.user { display: flex; align-items: center; gap: .6em; }
.user .av { width: 2.7em; height: 2.7em; border-radius: 12px; background: var(--ink); color: #fff; font-size: 1em; display: flex; align-items: center; justify-content: center; text-transform: uppercase; }
.user .nm { font-weight: 600; line-height: 1.3; }
.user .em { font-size: .78em; color: var(--n700); }
.crumbs { padding: .8em 1.5em; border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; gap: .8em; font-weight: 500; }
.crumbs .back { width: 1.6em; height: 1.6em; border: 1px solid var(--border); border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.crumbs a { text-decoration: none; }
.page { padding: 1.5em; flex: 1; }

/* scenario list */
.list-intro { display: flex; align-items: center; justify-content: space-between; gap: 1.5em; margin-bottom: 1.3em; flex-wrap: wrap; }
.list-intro p { max-width: 46em; line-height: 1.5; color: var(--n700); }
.grid-sc { display: grid; grid-template-columns: repeat(auto-fill, minmax(18em, 1fr)); gap: 1.2em; }
.sc { background: var(--surface); border-radius: 16px; padding: 6px; display: flex; flex-direction: column; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.sc:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.sc .in { background: #fff; border-radius: 12px; overflow: hidden; flex: 1; display: flex; flex-direction: column; }
.sc .img { aspect-ratio: 16/9; background-size: cover; background-position: center; position: relative; }
.sc .img .lock { position: absolute; right: .6em; top: .6em; width: 2em; height: 2em; border-radius: 50%; background: rgba(255,255,255,.9); display: flex; align-items: center; justify-content: center; }
.sc .bd { padding: .9em 1em 1em; }
.sc .bd .tags { display: flex; gap: .4em; margin-bottom: .6em; }
.sc h3 { font-size: 1.05em; margin-bottom: .4em; }
.sc p { font-size: .86em; color: var(--n700); line-height: 1.5; }
.sc .more { padding: .8em 1em .5em; font-weight: 600; display: flex; align-items: center; gap: .4em; }
.sc.featured { background: var(--accent); }
.sc.featured .more { color: #fff; }
.sc.locked { opacity: .82; }

/* detail */
.detail { display: grid; grid-template-columns: minmax(0, 1fr) 22em; gap: 1.6em; }
.hero-img { aspect-ratio: 16/8; border-radius: 14px; background-size: cover; background-position: center; position: relative; overflow: hidden; }
.hero-img .ai { position: absolute; left: 1em; top: 1em; }
.detail h2 { font-size: 1.9em; margin: .6em 0 .3em; }
.detail .tabs-row { display: flex; align-items: center; justify-content: space-between; margin-top: 1em; border-bottom: 1px solid var(--border-soft); }
.tabs { display: flex; gap: .3em; }
.tabs button { padding: .7em .9em; font-weight: 600; color: var(--subtle); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs button.on { color: var(--accent-strong); border-color: var(--accent); }
.detail .facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8em; margin-top: 1.2em; }
.detail .facts div { background: var(--n25); border: 1px solid var(--border-soft); border-radius: 10px; padding: .8em 1em; }
.detail .facts b { display: block; font-size: 1.3em; color: var(--ink); }
.side-card { position: sticky; top: 1.5em; }

/* modal */
.scrim { position: fixed; inset: 0; background: rgba(17,17,15,.5); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 2vh 2vw; animation: fade .15s; }
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
.modal { width: min(42em, 100%); max-height: 94vh; overflow: auto; background: #fff; border-radius: 16px; box-shadow: var(--shadow-xl); position: relative; animation: pop .18s ease-out; }
.modal.wide { width: min(62em, 100%); }
@keyframes pop { from { transform: translateY(10px) scale(.98); opacity: 0 } to { transform: none; opacity: 1 } }
.modal .x { position: absolute; right: .8em; top: .8em; z-index: 2; }
.modal .mb { padding: 1.8em 1.8em 1.3em; }
.modal .badge { width: 3em; height: 3em; border-radius: 12px; border: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: center; margin-bottom: 1em; color: var(--accent-strong); background: var(--accent-tint); }
.modal .badge.warn { color: var(--warning-ink); background: var(--warning-light); }
.modal h3 { font-size: 1.25em; margin-bottom: .4em; }
.modal .mf { padding: 1em 1.8em; background: var(--n25); border-top: 1px solid var(--border-soft); display: flex; justify-content: flex-end; gap: .8em; flex-wrap: wrap; }
.modal .content-img { width: 100%; border-radius: 10px; margin-top: .8em; display: block; }
.toast-wrap { position: fixed; left: 50%; transform: translateX(-50%); bottom: 1.2em; align-items: center; display: flex; flex-direction: column; gap: .5em; z-index: 300; pointer-events: none; }
.toast { background: var(--ink); color: #fff; padding: .75em 1em; border-radius: 10px; box-shadow: var(--shadow-lg); max-width: 26em; font-size: .92em; animation: pop .2s; display: flex; gap: .6em; align-items: center; }

/* ---------- lobby ---------- */
.lobby-grid { display: grid; grid-template-columns: minmax(0, 1fr) 24em; gap: 1.4em; align-items: start; }
.lcol { display: flex; flex-direction: column; gap: 1.2em; min-width: 0; }
.hero { display: flex; gap: 1.2em; padding: 1.2em; align-items: center; }
.hero .thumb { width: 12em; aspect-ratio: 16/9; border-radius: 10px; background-size: cover; background-position: center; flex: none; }
.hero h2 { font-size: 1.4em; margin: .4em 0 .5em; }
.hero .meta { display: flex; gap: .4em; flex-wrap: wrap; }
.status-pill { display: inline-flex; align-items: center; gap: .5em; background: var(--warning-light); color: var(--warning-ink); font-weight: 600; font-size: .82em; padding: .35em .8em; border-radius: 999px; }
.status-pill .pulse { width: .55em; height: .55em; border-radius: 50%; background: var(--warning); animation: blink 1.4s infinite; }
.status-pill.go { background: var(--success-light); color: #1F5E0B; }
.status-pill.go .pulse { background: var(--success); }
@keyframes blink { 50% { opacity: .3 } }
table.pt { width: 100%; border-collapse: collapse; }
table.pt th { text-align: left; font-size: .72em; font-weight: 600; color: var(--subtle); padding: .7em .8em; background: var(--n25); border-bottom: 1px solid var(--border-soft); text-transform: uppercase; letter-spacing: .03em; }
table.pt td { padding: .7em .8em; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
table.pt tr:last-child td { border-bottom: none; }
table.pt tr.joining { animation: slidein .4s ease-out; }
@keyframes slidein { from { background: var(--accent-tint); opacity: .2; transform: translateX(-10px) } to { opacity: 1; transform: none } }
.pname { display: flex; align-items: center; gap: .8em; }
.pname .n { font-weight: 600; color: var(--ink); }
.pname .e { font-size: .78em; color: var(--subtle); }
.you { font-size: .68em; font-weight: 700; background: var(--ink); color: #fff; padding: .1em .45em; border-radius: 4px; margin-left: .4em; vertical-align: .1em; }
td select.input { height: 2.3em; min-width: 13em; }
.chk { display: inline-flex; align-items: center; gap: .4em; font-size: .85em; margin-right: .8em; white-space: nowrap; cursor: pointer; }
.chk input { accent-color: var(--accent); width: 1em; height: 1em; }
.empty-row td { text-align: center; color: var(--subtle); padding: 1.6em !important; }
.role-sum { display: flex; flex-direction: column; gap: .5em; }
.role-sum .r { display: flex; align-items: center; justify-content: space-between; gap: .5em; padding: .5em .7em; border-radius: 8px; background: var(--n25); border: 1px solid var(--border-soft); font-size: .92em; }
.role-sum .r.empty { background: #FFF8E1; border-color: #F4DE8B; }
.req { display: flex; align-items: center; gap: .6em; padding: .6em 0; }
.req + .req { border-top: 1px solid var(--border-soft); }
.req .grow { flex: 1; min-width: 0; }
.rolecard { border: 2px solid var(--accent); border-radius: var(--r-card); overflow: hidden; background: #fff; }
.rolecard .top { background: var(--ink); color: #fff; padding: 1em 1.2em; display: flex; align-items: center; gap: .9em; }
.rolecard .top .ic { width: 2.8em; height: 2.8em; border-radius: 12px; background: var(--accent); display: flex; align-items: center; justify-content: center; }
.rolecard .top small { color: #C4C1BA; font-size: .72em; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.rolecard .top h3 { font-size: 1.3em; }
.rolecard .body { padding: 1.1em 1.2em; }
.lock-line { display: flex; align-items: center; gap: .5em; font-size: .78em; color: var(--subtle); margin-top: .9em; padding-top: .7em; border-top: 1px dashed var(--border); }
.footer-bar { position: sticky; bottom: 0; background: #fff; border-top: 1px solid var(--border-soft); padding: .9em 1.5em; display: flex; align-items: center; justify-content: space-between; gap: 1em; z-index: 5; }
.footer-bar .left { display: flex; align-items: center; gap: .6em; font-size: .9em; color: var(--n700); }
.footer-bar .right { display: flex; gap: .8em; }
.coach { position: relative; }
.coach::after { content: attr(data-coach); position: absolute; right: 0; bottom: calc(100% + 10px); background: var(--ink); color: #fff; font-size: .8em; font-weight: 600; padding: .5em .8em; border-radius: 8px; white-space: nowrap; box-shadow: var(--shadow-lg); animation: bob 1.4s infinite; pointer-events: none; }
.coach.below::after { bottom: auto; top: calc(100% + 10px); }
@keyframes bob { 50% { transform: translateY(-4px) } }
.lrow { display: grid; grid-template-columns: 9em 1fr 12em 9em 12em; align-items: center; gap: 1.2em; padding: .9em; background: #fff; border: 1px solid var(--border-soft); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.lrow + .lrow { margin-top: .8em; }
.lrow.mine { border: 2px solid var(--accent); background: linear-gradient(90deg, var(--accent-tint) 0, #fff 40%); }
.lrow .thumb { aspect-ratio: 16/9; border-radius: 8px; background-size: cover; background-position: center; }
.lrow .ttl { font-weight: 600; color: var(--ink); margin-bottom: .4em; }

/* ---------- run screen ---------- */
.run { height: 100vh; display: flex; flex-direction: column; background: var(--surface); overflow: hidden; }
.run-top { background: #fff; border-bottom: 1px solid var(--border-soft); padding: .55em 1em; display: flex; align-items: center; gap: .8em; flex: none; }
.run-top .brand { display: flex; align-items: center; gap: .6em; padding-right: .8em; border-right: 1px solid var(--border-soft); }
.run-top .brand img { height: 1.1em; }
.run-top .title { min-width: 0; flex: 1; }
.run-top .title .sc-name { font-size: .78em; color: var(--subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.run-top .title .ph { font-size: 1.25em; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: .5em; }
.phase-chip { font-size: .62em; font-weight: 700; background: var(--accent-tint); color: var(--accent-strong); padding: .2em .55em; border-radius: 999px; }
.clocks { display: flex; gap: .5em; align-items: center; }
.clock-box { border: 1px solid var(--border); border-radius: 10px; padding: .3em .7em; text-align: center; line-height: 1.15; background: #fff; min-width: 6.2em; }
.clock-box small { display: block; font-size: .62em; color: var(--subtle); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.clock-box b { font-size: 1.15em; font-variant-numeric: tabular-nums; }
.clock-box.timer { border: 2px solid var(--danger); color: var(--danger); }
.clock-box.timer.urgent { background: var(--danger); color: #fff; animation: blink .8s infinite; }
.clock-box.timer.urgent small { color: #fff; }
.clock-box.scen { background: var(--ink); color: #fff; border-color: var(--ink); }
.clock-box.scen small { color: #C4C1BA; }
.top-actions { display: flex; gap: .45em; align-items: center; }
.avatars { display: flex; align-items: center; padding-left: .3em; }
.avatars .pa { width: 2.2em; height: 2.2em; border: 2px solid #fff; margin-left: -.55em; border-radius: 50%; font-size: .7em; }
.avatars .pa.speaking { box-shadow: 0 0 0 2px var(--success); z-index: 1; }
.hands { display: flex; gap: .4em; }
.hand-chip { display: inline-flex; align-items: center; gap: .4em; background: var(--warning-light); color: var(--warning-ink); font-weight: 600; font-size: .8em; padding: .35em .7em; border-radius: 999px; cursor: pointer; border: 1px solid #F4DE8B; animation: pop .2s; }
.run-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 27vw, 560px); gap: 1em; padding: 1em; }
.run-left { min-height: 0; display: flex; flex-direction: column; gap: 1em; }
.stage { flex: 1; min-height: 0; background: #fff; border: 1px solid var(--border-soft); border-radius: var(--r-card); overflow: auto; position: relative; }
.stage-inner { padding: 1.4em 1.6em; max-width: 72em; }
.conseq { display: flex; gap: .7em; align-items: flex-start; background: #FFF8E1; border: 1px solid #F4DE8B; color: var(--warning-ink); border-radius: 10px; padding: .8em 1em; margin-bottom: 1.1em; line-height: 1.5; }
.conseq svg { margin-top: .2em; }
.stage h2 { font-size: 1.5em; margin-bottom: .6em; color: var(--ink); }
.stage .two { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.4em; align-items: start; }
.stage .pic { width: 100%; border-radius: 12px; display: block; aspect-ratio: 16/10; object-fit: cover; max-height: 42vh; }
.stage .md p, .stage .md li { font-size: 1.05em; }
.facts { padding-left: 1.2em; }
.facts li { margin-bottom: .45em; }
.audio-row { display: flex; align-items: center; gap: .8em; margin-top: 1em; background: var(--n25); border: 1px solid var(--border-soft); border-radius: 10px; padding: .6em .8em; }
.audio-row .play { width: 2.4em; height: 2.4em; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.audio-row .bar { flex: 1; height: 6px; background: var(--n100); border-radius: 3px; overflow: hidden; }
.audio-row .bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s linear; }
.deadline-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9em; margin: 1em 0; }
.deadline { border: 1px solid var(--border-soft); border-radius: 12px; padding: .9em 1em; background: var(--n25); }
.deadline small { color: var(--subtle); font-weight: 600; font-size: .78em; text-transform: uppercase; letter-spacing: .04em; }
.deadline b { display: block; font-size: 1.6em; font-variant-numeric: tabular-nums; color: var(--ink); margin: .15em 0; }
.deadline.hot { border-color: #F5B6A0; background: var(--accent-tint); }
.deadline.hot b { color: var(--accent-strong); }
.deadline span { font-size: .85em; color: var(--n700); line-height: 1.4; display: block; }

/* ransom */
.ransom { background: #0b0b0b; color: #e8e8e8; border-radius: 12px; padding: 1.4em 1.6em; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; border: 2px solid #7a0d0d; box-shadow: inset 0 0 60px rgba(160,0,0,.35); font-size: .9em; line-height: 1.55; }
.ransom p + p { margin-top: .7em; }
.ransom-h { font-size: 2.2em; font-weight: 800; color: #ff2d2d; letter-spacing: .12em; text-shadow: 0 0 18px rgba(255,0,0,.5); }
.ransom-h span { font-size: .38em; color: #aaa; letter-spacing: .05em; margin-left: .5em; }
.ransom-big { color: #ff4d4d; font-weight: 700; font-size: 1.15em; margin-top: .4em; }
.ransom code { color: #ffb4b4; }
.ransom-demand { border: 1px dashed #ff4d4d; padding: .7em .9em; border-radius: 6px; }
.ransom-small { color: #8a8a8a; font-size: .85em; }

/* tasks / protocol panel */
.panel { background: #fff; border: 1px solid var(--border-soft); border-radius: var(--r-card); display: flex; flex-direction: column; min-height: 0; flex: none; height: clamp(230px, 38vh, 480px); transition: height .25s; }
.panel.min { height: 3.3em; overflow: hidden; }
.panel-h { display: flex; align-items: center; justify-content: space-between; padding: 0 .9em; border-bottom: 1px solid var(--border-soft); height: 3.3em; flex: none; }
.panel-h .tabs button { padding: .55em .8em; }
.panel-b { flex: 1; min-height: 0; overflow: auto; padding: .9em 1em; background: var(--n25); }
.decision { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 1em 1.1em; box-shadow: var(--shadow-card); }
.decision .q { display: flex; align-items: center; justify-content: space-between; gap: .8em; margin-bottom: .8em; }
.decision .q b { font-size: 1.08em; color: var(--ink); }
.opt { display: grid; grid-template-columns: 1fr auto; gap: .8em; align-items: center; padding: .7em .9em; border: 1px solid var(--border-soft); border-radius: 10px; margin-bottom: .55em; cursor: pointer; background: #fff; transition: border-color .15s, background .15s; }
.opt:hover { border-color: var(--grey-soft); }
.opt.mine { border-color: var(--accent); background: var(--accent-tint); }
.opt .lab b { display: block; }
.opt .lab span { font-size: .84em; color: var(--n700); }
.opt .votes { display: flex; align-items: center; gap: .3em; }
.opt .votes .pa { width: 1.7em; height: 1.7em; font-size: .62em; border-radius: 50%; border: 2px solid #fff; margin-left: -.45em; }
.opt .bar { grid-column: 1 / -1; height: 4px; background: var(--n100); border-radius: 2px; overflow: hidden; }
.opt .bar i { display: block; height: 100%; background: var(--accent); width: 0; transition: width .4s; }
.radio { width: 1.15em; height: 1.15em; border-radius: 50%; border: 2px solid var(--grey-soft); flex: none; margin-top: .15em; background: #fff; }
.radio.on { border-color: var(--accent); box-shadow: inset 0 0 0 .2em #fff; background: var(--accent); }
.opt:hover .radio { border-color: var(--accent); }
.pulse-btn { animation: ring2 1.6s infinite; }
@keyframes ring2 { 0% { box-shadow: 0 0 0 0 rgba(255,90,36,.55) } 70% { box-shadow: 0 0 0 12px rgba(255,90,36,0) } 100% { box-shadow: 0 0 0 0 rgba(255,90,36,0) } }
.feed-h { margin: 1.4em 0 .6em; font-size: 1.05em; display: flex; align-items: center; gap: .4em; }
.feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(18em, 1fr)); gap: .6em; }
.mobile-only { display: none; }
.decision .confirm-row { display: flex; align-items: center; justify-content: space-between; gap: .8em; margin-top: .8em; flex-wrap: wrap; }
.proto-row { display: grid; grid-template-columns: 4.2em 7em 1fr; gap: .8em; padding: .55em .2em; border-bottom: 1px solid var(--border-soft); font-size: .9em; align-items: start; }
.proto-row .t { font-variant-numeric: tabular-nums; color: var(--subtle); }
.proto-row .w { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proto-row.sys .w { color: var(--accent-strong); }
.proto-new { display: grid; grid-template-columns: 1fr auto; gap: .6em; margin-top: .8em; }

/* right column */
.side { min-height: 0; background: #fff; border: 1px solid var(--border-soft); border-radius: var(--r-card); display: flex; flex-direction: column; }
.side .tabs { padding: 0 .6em; border-bottom: 1px solid var(--border-soft); flex: none; }
.side .tabs button { position: relative; }
.side .tabs .count { position: absolute; top: .2em; right: -.2em; }
.side-b { flex: 1; min-height: 0; overflow: auto; }
.chat { display: flex; flex-direction: column; height: 100%; }
.chat-list { flex: 1; overflow: auto; padding: .9em; display: flex; flex-direction: column; gap: .7em; background: var(--n25); }
.msg { display: flex; gap: .6em; align-items: flex-start; animation: pop .2s; }
.msg .bub { background: #fff; border: 1px solid var(--border-soft); border-radius: 4px 12px 12px 12px; padding: .5em .75em; box-shadow: var(--shadow-card); max-width: 100%; }
.msg .who { font-size: .78em; font-weight: 600; color: var(--ink); display: flex; gap: .5em; align-items: baseline; flex-wrap: wrap; }
.msg .who span { color: var(--subtle); font-weight: 500; }
.msg .tx { line-height: 1.45; margin-top: .15em; }
.msg.me { flex-direction: row-reverse; }
.msg.me .bub { background: var(--accent-tint); border-color: #F5C9B5; border-radius: 12px 4px 12px 12px; }
.msg.voice .bub { border-style: dashed; }
.msg.sys { justify-content: center; }
.msg.sys .bub { background: transparent; border: none; box-shadow: none; color: var(--subtle); font-size: .82em; text-align: center; padding: .1em; }
.chat-in { display: grid; grid-template-columns: 1fr auto; gap: .5em; padding: .7em; border-top: 1px solid var(--border-soft); }
.info-list { padding: .8em; display: flex; flex-direction: column; gap: .6em; }
.info-item { display: grid; grid-template-columns: 2.4em 1fr; gap: .7em; padding: .7em .8em; border: 1px solid var(--border-soft); border-radius: 10px; background: #fff; cursor: pointer; text-align: left; animation: pop .2s; }
.info-item:hover { border-color: var(--grey-soft); background: var(--n25); }
.info-item .ic { width: 2.4em; height: 2.4em; border-radius: 8px; background: var(--surface); display: flex; align-items: center; justify-content: center; color: var(--n700); }
.info-item .ic.call { background: #E8F7E0; color: #1F5E0B; }
.info-item .ic.link { background: #E6ECF8; color: #1F3B7A; }
.info-item .ic.private { background: var(--accent-tint); color: var(--accent-strong); }
.info-item .meta { display: flex; gap: .4em; align-items: center; flex-wrap: wrap; font-size: .74em; color: var(--subtle); margin-bottom: .15em; }
.info-item .tt { font-weight: 600; font-size: .92em; color: var(--ink); line-height: 1.35; }
.team-list { padding: .6em .9em; }
.team-row { display: flex; align-items: center; gap: .7em; padding: .55em 0; border-bottom: 1px solid var(--border-soft); }
.team-row .grow { flex: 1; min-width: 0; }
.team-row .n { font-weight: 600; font-size: .92em; }
.team-row .r { font-size: .76em; color: var(--subtle); }
.wave { display: inline-flex; gap: 2px; align-items: flex-end; height: 1em; }
.wave i { width: 3px; background: var(--success); border-radius: 2px; height: 30%; }
.speaking .wave i { animation: wv .5s infinite alternate; }
.speaking .wave i:nth-child(2) { animation-delay: .15s } .speaking .wave i:nth-child(3) { animation-delay: .3s }
@keyframes wv { to { height: 100% } }
.voice-box { margin: .9em; padding: .8em; border-radius: 10px; background: var(--ink); color: #fff; display: flex; gap: .7em; align-items: center; }
.voice-box .grow { flex: 1; font-size: .86em; line-height: 1.4; }
.voice-box small { color: #C4C1BA; }

/* link card */
.linkcard { display: grid; grid-template-columns: 10em 1fr; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; cursor: pointer; background: #fff; box-shadow: var(--shadow-md); transition: box-shadow .15s, transform .15s; text-align: left; width: 100%; }
.linkcard:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); }
.linkcard .img { background-size: cover; background-position: center; min-height: 9em; background-color: var(--n100); }
.linkcard .bd { padding: .9em 1em; display: flex; flex-direction: column; gap: .35em; }
.linkcard .src { display: flex; align-items: center; gap: .5em; font-size: .78em; color: var(--subtle); font-weight: 600; }
.linkcard .fav { width: 1.3em; height: 1.3em; border-radius: 4px; color: #fff; font-size: .7em; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.linkcard h4 { font-size: 1.08em; line-height: 1.3; color: var(--ink); }
.linkcard p { font-size: .86em; color: var(--n700); line-height: 1.45; }
.linkcard .u { margin-top: auto; font-size: .78em; color: var(--accent-strong); font-weight: 600; display: flex; align-items: center; gap: .4em; word-break: break-all; }
.photo-screen { background: radial-gradient(ellipse at 50% 45%, #3a0606 0%, #120202 70%), #000; position: relative; overflow: hidden; }
.photo-screen::before { content: "SPIRE\A YOUR NETWORK\A HAS BEEN ENCRYPTED"; white-space: pre; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-4deg) skewX(-4deg); color: #ff3a3a; font: 800 1em/1.2 ui-monospace, monospace; text-align: center; text-shadow: 0 0 10px rgba(255,0,0,.7); filter: blur(.3px); }
.photo-screen::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 2px, transparent 2px 4px), radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.7)); }

/* incoming call */
.call-scrim { position: fixed; inset: 0; background: rgba(17,17,15,.6); display: flex; align-items: center; justify-content: center; z-index: 250; animation: fade .2s; }
.phone { width: min(22em, 92vw); background: var(--ink); border-radius: 2.6em; padding: 2.4em 1.6em 2em; color: #fff; display: flex; flex-direction: column; align-items: center; gap: .8em; box-shadow: 0 30px 60px rgba(0,0,0,.45); animation: pop .25s; }
.phone .ring { font-size: .85em; color: #C4C1BA; display: flex; align-items: center; gap: .5em; }
.phone .ring i { width: .55em; height: .55em; border-radius: 50%; background: var(--success); animation: blink 1s infinite; }
.phone .av { width: 7em; height: 7em; border-radius: 50%; background: linear-gradient(135deg, #FF5A24, #B8431A); display: flex; align-items: center; justify-content: center; font-size: 2.2em; font-weight: 800; box-shadow: 0 0 0 .5em rgba(255,90,36,.15), 0 0 0 1.1em rgba(255,90,36,.07); margin: .4em 0; }
.phone.ringing .av { animation: shake 1.2s infinite; }
@keyframes shake { 0%,60%,100% { transform: none } 10%,30%,50% { transform: rotate(-4deg) } 20%,40% { transform: rotate(4deg) } }
.phone .whoc { font-size: 1.5em; font-weight: 700; text-align: center; }
.phone .sub { font-size: .9em; color: #C4C1BA; text-align: center; }
.phone .private { font-size: .72em; background: rgba(255,255,255,.1); padding: .3em .7em; border-radius: 999px; color: #FFD9C9; display: flex; align-items: center; gap: .4em; }
.phone .btns { display: flex; gap: 4em; margin-top: 1em; }
.phone .b { display: flex; flex-direction: column; align-items: center; gap: .5em; font-size: .78em; color: #C4C1BA; }
.phone .b button { width: 4em; height: 4em; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.1em; }
.phone .b .no { background: var(--danger); } .phone .b .yes { background: var(--success); }
.phone .timer { font-variant-numeric: tabular-nums; color: #C4C1BA; }
.phone .transcript { background: rgba(255,255,255,.07); border-radius: 12px; padding: .8em 1em; font-size: .85em; line-height: 1.5; color: #E8E6E2; max-height: 9em; overflow: auto; }

/* staff panel, idle */
.staff-btn { position: fixed; left: .25em; bottom: .25em; width: 1.9em; height: 1.9em; border-radius: 50%; background: transparent; color: var(--grey-soft); opacity: .55; display: flex; align-items: center; justify-content: center; z-index: 150; }
.staff-btn:hover { background: var(--ink); color: #fff; }
.staff { position: fixed; left: .8em; bottom: 3.6em; background: var(--ink); color: #fff; border-radius: 14px; padding: 1em; z-index: 160; width: 17em; box-shadow: var(--shadow-xl); display: flex; flex-direction: column; gap: .5em; animation: pop .15s; }
.staff h4 { font-size: .8em; text-transform: uppercase; letter-spacing: .08em; color: #A3A19A; margin-bottom: .2em; }
.staff .btn { width: 100%; justify-content: flex-start; }
.staff .btn-white { background: #2a2a27; border-color: #3a3a36; color: #fff; }
.staff small { color: #8C8B85; font-size: .72em; line-height: 1.4; }
.idle { position: fixed; inset: 0; background: rgba(17,17,15,.75); z-index: 400; display: flex; align-items: center; justify-content: center; }
.idle .box { background: #fff; border-radius: 18px; padding: 2em 2.4em; text-align: center; max-width: 26em; }
.idle .n { font-size: 3em; font-weight: 800; color: var(--accent); margin: .2em 0; font-variant-numeric: tabular-nums; }

/* transition overlay */
.phase-over { position: fixed; inset: 0; background: rgba(17,17,15,.85); z-index: 220; display: flex; align-items: center; justify-content: center; color: #fff; text-align: center; animation: fade .25s; }
.phase-over small { color: var(--accent); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.phase-over h2 { font-size: clamp(28px, 3.6vw, 64px); margin: .3em 0; }
.phase-over p { color: #C4C1BA; max-width: 36em; margin: 0 auto; line-height: 1.5; }

/* debrief */
.debrief { max-width: 80em; margin: 0 auto; padding: 1.6em; }
.end-hero { border-radius: 18px; padding: 2em 2.2em; color: #fff; display: grid; grid-template-columns: 1fr auto; gap: 2em; align-items: center; background: var(--ink); position: relative; overflow: hidden; }
.end-hero.good { background: linear-gradient(120deg, #11110F 40%, #1f4d10); }
.end-hero.mid { background: linear-gradient(120deg, #11110F 40%, #6b4d00); }
.end-hero.bad { background: linear-gradient(120deg, #11110F 40%, #7a1a00); }
.end-hero small { color: var(--accent); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.end-hero h1 { font-size: clamp(28px, 3vw, 54px); margin: .25em 0 .4em; }
.end-hero .btn-white { color: var(--text); }
.end-hero p { color: #DCDAD6; line-height: 1.55; max-width: 44em; font-size: 1.05em; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1em; margin: 1.3em 0; }
.kpi { background: #fff; border: 1px solid var(--border-soft); border-radius: 14px; padding: 1em 1.2em; box-shadow: var(--shadow-card); }
.kpi small { color: var(--subtle); font-weight: 600; font-size: .78em; text-transform: uppercase; letter-spacing: .04em; }
.kpi b { display: block; font-size: 1.9em; color: var(--ink); margin: .2em 0; font-variant-numeric: tabular-nums; }
.kpi .meter { height: 8px; background: var(--n100); border-radius: 4px; overflow: hidden; margin-top: .4em; }
.kpi .meter i { display: block; height: 100%; border-radius: 4px; }
.timeline { display: flex; flex-direction: column; gap: .6em; }
.tl { display: grid; grid-template-columns: 2.6em 1fr auto; gap: .9em; align-items: center; padding: .8em 1em; background: #fff; border: 1px solid var(--border-soft); border-radius: 12px; }
.tl .nr { width: 2.6em; height: 2.6em; border-radius: 10px; background: var(--accent); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.tl .q { font-size: .8em; color: var(--subtle); }
.tl .a { font-weight: 600; color: var(--ink); }
.tl .c { font-size: .85em; color: var(--n700); margin-top: .2em; }
.debrief-grid { display: grid; grid-template-columns: minmax(0, 1fr) 22em; gap: 1.4em; align-items: start; }
.qr-card { text-align: center; }
.qr-card .qr { width: 11em; height: 11em; margin: .4em auto; }
.qr-card .qr svg { width: 100%; height: 100%; }

/* responsive */
@media (max-width: 900px) {
	.run-body { grid-template-columns: 1fr; overflow: auto; }
	.run { height: auto; min-height: 100vh; overflow: visible; }
	.side { min-height: 26em; }
}
@media (max-width: 1100px) {
	.lobby-grid, .detail, .debrief-grid { grid-template-columns: 1fr; }
	.lrow { grid-template-columns: 7em 1fr; }
	.lrow > :nth-child(n+3) { grid-column: 2; }
	.kpis { grid-template-columns: repeat(2, 1fr); }
	.attract .feat { grid-template-columns: repeat(2, 1fr); }
	.stage .two { grid-template-columns: 1fr; }
	.login-wrap { grid-template-columns: 1fr; } .login-side { display: none; }
	.clocks .clock-box.local { display: none; }
}
@media (max-width: 720px) {
	.sidebar-wrap { display: none; }
	.page { padding: 1em; }
	.topbar { padding: .9em 1em; } .topbar h1 { font-size: 1.4em; } .user .em { display: none; }
	.lobby-grid { display: flex; flex-direction: column; gap: 1em; }
	.lobby-grid .lcol { display: contents; }
	.o1 { order: 1 } .o2 { order: 2 } .o3 { order: 3 } .o4 { order: 4 } .o5 { order: 5 } .o6 { order: 6 } .o7 { order: 7 }
	.hero { flex-direction: column; align-items: stretch; } .hero .thumb { width: 100%; }
	.card-h { flex-wrap: wrap; } .card-h > .small { width: 100%; }
	table.pt th:nth-child(2), table.pt td:nth-child(2) { display: none; }
	td select.input { min-width: 9em; }
	.pname .e { display: none; }
	.footer-bar { flex-direction: column; align-items: stretch; padding: .7em 1em; } .footer-bar .left { display: none; } .footer-bar .right { justify-content: stretch; } .footer-bar .right .btn { flex: 1; }
	.coach::after { display: none; }
	.run-top .brand { display: none; } .run-top .title .sc-name { display: none; } .mobile-only { display: inline-flex; }
	.decision .q { flex-wrap: wrap; } .hand-chip { font-size: .7em; }
	.attract .logo-row { margin-bottom: 1.5em; } .clocks .clock-box { min-width: 0; padding: .25em .5em; } .avatars { display: none; }
	.detail .facts { grid-template-columns: 1fr; }
	.kpis { grid-template-columns: 1fr 1fr; }
	.end-hero { grid-template-columns: 1fr; padding: 1.4em; }
	.decision .confirm-row .btn { width: 100%; }
	.run-top { flex-wrap: wrap; }
	.deadline-grid { grid-template-columns: 1fr; }
	table.pt th:nth-child(4), table.pt td:nth-child(4) { display: none; }
	.linkcard { grid-template-columns: 1fr; }
}

/* print (Protokoll-Export) */
@media print {
	body { font-size: 11pt; }
	.no-print, .staff-btn, .toast-wrap { display: none !important; }
	.debrief { padding: 0; max-width: none; }
	.end-hero { background: #fff !important; color: #000; border: 2px solid #000; }
	.end-hero p { color: #000; }
	.kpi, .tl, .card { box-shadow: none; break-inside: avoid; }
	.debrief-grid { grid-template-columns: 1fr; }
}