/* Battleline control panel. Same visual language as the player landing page (game/jungle-lan.html #prelaunch). */
@font-face { font-family: 'BL Stencil'; src: url(/m/fonts/big-shoulders-stencil.woff2) format('woff2'); font-weight: 100 900; font-display: block; }
@font-face { font-family: 'BL Body'; src: url(/m/fonts/barlow-sc-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'BL Body'; src: url(/m/fonts/barlow-sc-600.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'BL Body'; src: url(/m/fonts/barlow-sc-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --slate: #1F2226; --slate-deep: #121417; --slate-up: #262a2f; --olive: #3B443B; --olive-deep: #252b25; --khaki: #D2B589; --khaki-dim: #9c8a69;
  --paper: #ece3cf; --paper-dim: #cfc4ad; --mute: #8a8170; --ochre: #E56717; --ochre-hot: #ff8a3a; --blue: #86b6ff; --green: #b2e27a;
  --good: #b2e27a; --ok: #f2c14e; --bad: #ff6a3d; --line: #d2b58933; --line-soft: #d2b5891a;
  --display: 'BL Stencil', 'Arial Narrow', Impact, sans-serif; --body: 'BL Body', 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --pad: clamp(16px, 2.2vw, 44px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--slate); }
body { margin: 0; min-height: 100vh; color: var(--paper); background: transparent; font: 400 15px/1.45 var(--body); -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; color: inherit; }
a { color: var(--khaki); }
:focus-visible { outline: 2px solid var(--ochre-hot); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
code, .mono { font-family: var(--mono); font-size: .86em; }

/* atmosphere: the battlefield, blurred into the slate, a survey grid and grain */
.atmos { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.atmos::before { content: ''; position: absolute; inset: -60px; background: url(/m/assets/battlefield-small.webp) center/cover; filter: blur(30px) saturate(.6) brightness(.5); opacity: .38; }
.atmos::after { content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 70% 0%, #1f222600 0%, #1f2226cc 55%, var(--slate) 100%),
    repeating-linear-gradient(0deg, transparent 0 63px, #d2b58910 63px 64px), repeating-linear-gradient(90deg, transparent 0 63px, #d2b58910 63px 64px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"); }

/* shared bits */
.kicker { margin: 0; font: 700 .78em/1 var(--body); letter-spacing: .26em; text-transform: uppercase; color: var(--ochre); display: flex; align-items: center; gap: .8em; }
.kicker::before { content: ''; width: 2.4em; height: 2px; background: var(--ochre); }
.mark { display: flex; align-items: center; gap: .7em; color: var(--khaki); font: 700 .82em/1 var(--body); letter-spacing: .24em; text-transform: uppercase; text-decoration: none; }
.mark i { width: .8em; height: .8em; background: var(--ochre); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.label { font: 700 .7em/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--khaki-dim); }
.dot { display: inline-block; width: .62em; height: .62em; border-radius: 50%; background: currentColor; }
.pulse { animation: pulse 1.6s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 currentColor; } 70% { box-shadow: 0 0 0 .5em transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* buttons */
.btn { --c: var(--khaki); display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 40px; padding: .55em 1.05em; border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);
  background: color-mix(in srgb, var(--c) 8%, transparent); color: var(--c); font: 700 .8em/1 var(--body); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; transition: background .15s, border-color .15s, transform .1s; white-space: nowrap; }
.btn:hover:not(:disabled) { background: color-mix(in srgb, var(--c) 18%, transparent); border-color: var(--c); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .38; cursor: not-allowed; }
.btn.go { --c: var(--green); } .btn.stop { --c: var(--bad); } .btn.ghost { --c: var(--paper-dim); border-color: transparent; background: transparent; }
.btn.cta { --c: var(--ochre); background: var(--ochre); color: #1a0d04; border: 0; font: 900 1.12em/1 var(--display); letter-spacing: .08em; padding: .55em 1.4em;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); box-shadow: 0 8px 30px #e5671733; }
.btn.cta:hover:not(:disabled) { background: var(--ochre-hot); }
.btn.cta:disabled { background: #6f4a2f; color: #1a0d04aa; opacity: .6; }
.btn kbd { font: 700 .82em/1 var(--body); padding: .2em .4em; border: 1px solid currentColor; border-radius: 3px; opacity: .7; }

/* ---------------- login */
.login { min-height: 100vh; display: grid; place-items: center; padding: var(--pad); }
.login-card { width: min(460px, 100%); display: grid; gap: 22px; animation: rise .5s ease both; }
.login-card .brand { display: grid; gap: 14px; }
.login-card .title { margin: 0 0 -.1em -.03em; font: 900 clamp(64px, 12vw, 104px)/.86 var(--display); color: var(--khaki); letter-spacing: .015em; text-shadow: 0 .04em 0 #0007; }
.login-card .sub { margin: 0; color: var(--paper-dim); }
.login-form { display: grid; gap: 16px; padding: 22px; background: linear-gradient(180deg, #3b443b55, #3b443b22); border: 1px solid var(--line); border-left: 3px solid var(--khaki); }
.field-l { display: grid; gap: 7px; }
.input { width: 100%; min-height: 42px; padding: .55em .75em; background: #0b0d0f99; border: 1px solid #d2b5894d; color: var(--paper); border-radius: 0; }
.input:hover { border-color: #d2b58980; }
.input:focus { border-color: var(--ochre); outline: none; box-shadow: 0 0 0 1px var(--ochre); }
.login-form .btn.cta { width: 100%; min-height: 54px; font-size: 1.5em; }
.alert { padding: .7em .9em; border-left: 3px solid var(--bad); background: #ff6a3d14; color: #ffb7a0; font-weight: 600; }
.alert:empty { display: none; }
.hint { margin: 0; color: var(--mute); font-size: .9em; }
.hint code { color: var(--khaki); }

/* ---------------- panel */
.shell { max-width: 1760px; margin: 0 auto; padding: var(--pad) var(--pad) 120px; display: grid; gap: clamp(16px, 1.8vw, 28px); }
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--line); animation: rise .4s ease both; }
.top-left { display: flex; align-items: baseline; gap: 22px; flex-wrap: wrap; }
.top-left h1 { margin: 0; font: 900 clamp(26px, 2.2vw, 36px)/1 var(--display); letter-spacing: .06em; color: var(--paper); text-transform: uppercase; }
.top-meta { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; font: 600 .76em/1 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--khaki-dim); }
.top-meta b { color: var(--paper); font-weight: 700; letter-spacing: .1em; }
.top-meta form { margin: 0; }

/* hero */
.hero { display: grid; grid-template-columns: minmax(280px, 1.05fr) minmax(260px, 1fr) minmax(320px, 1.25fr); gap: 0; background: linear-gradient(180deg, #3b443b4d, #3b443b1a); border: 1px solid var(--line); animation: rise .5s .05s ease both; position: relative; }
.hero::before { content: ''; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 3px; background: var(--state-c, var(--mute)); transition: background .3s; }
.hero > section { padding: clamp(16px, 1.6vw, 26px); min-width: 0; display: grid; gap: 12px; align-content: start; }
.hero > section + section { border-left: 1px solid var(--line); }
.state-word { display: flex; align-items: center; gap: 14px; font: 900 clamp(44px, 4.4vw, 76px)/.9 var(--display); letter-spacing: .03em; color: var(--state-c, var(--paper)); text-transform: uppercase; }
.state-word .dot { width: .2em; height: .2em; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; margin: 0; }
.facts div { min-width: 0; } .facts dt { margin: 0 0 4px; } .facts dd { margin: 0; font: 700 1.05em/1.15 var(--body); color: var(--paper); overflow-wrap: anywhere; }
.play { display: flex; align-items: center; gap: 8px; min-width: 0; padding: .55em .7em; background: #0b0d0f80; border: 1px solid var(--line); }
.play a { flex: 1; min-width: 0; font: 600 .95em/1.2 var(--mono); color: var(--green); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.play a:hover { text-decoration: underline; }
.play .btn { min-height: 30px; padding: .35em .7em; font-size: .7em; }

.big { font: 800 clamp(46px, 4.2vw, 72px)/.9 var(--display); font-variant-numeric: tabular-nums; color: var(--paper); letter-spacing: .01em; }
.big small { font-size: .42em; color: var(--khaki-dim); letter-spacing: .04em; margin-left: .15em; }
.players { display: flex; align-items: flex-end; gap: 22px; }
.score { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: .2em 1em; }
.score .side { font: 700 .7em/1 var(--body); letter-spacing: .2em; text-transform: uppercase; }
.score .tk { font: 800 1.9em/1 var(--display); font-variant-numeric: tabular-nums; }
.score .blue { color: var(--blue); } .score .green { color: var(--green); text-align: right; }
.score .vs { align-self: center; text-align: center; font: 600 .7em/1.3 var(--body); letter-spacing: .18em; color: var(--khaki-dim); text-transform: uppercase; }
.tkbar { grid-column: 1 / -1; height: 5px; display: flex; gap: 3px; margin-top: .4em; }
.tkbar span { display: block; height: 100%; transition: flex-grow .8s ease; } .tkbar .b { background: var(--blue); flex: 1 1 0; } .tkbar .g { background: var(--green); flex: 1 1 0; }

.health-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.health-word { font: 900 1.5em/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--h-c, var(--mute)); }
.gauge { position: relative; height: 34px; margin-top: 4px; }
.gauge .track { position: absolute; left: 0; right: 0; top: 10px; height: 10px; display: flex; gap: 2px; }
.gauge .track span { height: 100%; } .gauge .z1 { background: #b2e27a66; flex: 8 0 0; } .gauge .z2 { background: #f2c14e55; flex: 8.7 0 0; } .gauge .z3 { background: #ff6a3d44; flex: 8.3 0 0; }
.gauge .needle { position: absolute; top: 4px; width: 3px; height: 22px; margin-left: -1.5px; background: var(--paper); box-shadow: 0 0 10px #0009; transition: left .6s cubic-bezier(.2,.8,.2,1); }
.gauge .p50 { position: absolute; top: 12px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--slate-deep); border: 2px solid var(--paper-dim); transition: left .6s cubic-bezier(.2,.8,.2,1); }
.gauge .scale { position: absolute; left: 0; right: 0; top: 24px; font: 600 .66em/1 var(--body); color: var(--mute); letter-spacing: .06em; }
.gauge .scale span { position: absolute; transform: translateX(-50%); } .gauge .scale span:first-child { transform: none; } .gauge .scale span:last-child { transform: translateX(-100%); }
.metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 4px 0 0; padding: 0; list-style: none; }
.metrics li { padding: .1em .8em; border-left: 1px solid var(--line); min-width: 0; } .metrics li:nth-child(3n+1) { padding-left: 0; border-left: 0; }
.metrics b { display: block; font: 800 1.45em/1.1 var(--display); color: var(--paper); font-variant-numeric: tabular-nums; white-space: nowrap; }
.metrics b small { font: 600 .55em/1 var(--body); color: var(--khaki-dim); margin-left: .2em; letter-spacing: .05em; }

.banner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: .75em 1em; background: #e5671714; border: 1px solid #e5671755; border-left: 3px solid var(--ochre); color: #ffd2b0; font-weight: 600; }
.banner[hidden] { display: none; }
.banner.danger { background: #ff6a3d14; border-color: #ff6a3d66; border-left-color: var(--bad); color: #ffc4b2; }
.banner b { color: var(--paper); }

/* main layout */
.main { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(360px, 1fr); gap: clamp(16px, 1.8vw, 28px); align-items: start; }
.col { display: grid; gap: clamp(16px, 1.8vw, 28px); min-width: 0; }
.panel { background: #1f2226cc; border: 1px solid var(--line); animation: rise .5s .1s ease both; min-width: 0; }
.panel-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.panel-h h2 { margin: 0; display: flex; align-items: baseline; gap: 12px; font: 900 1.45em/1 var(--display); letter-spacing: .07em; text-transform: uppercase; color: var(--khaki); }
.panel-h h2 .num { font-size: .7em; color: var(--ochre); letter-spacing: .1em; }
.panel-h .label { white-space: nowrap; }

/* settings */
.group { border-top: 1px solid var(--line-soft); }
.group:first-of-type { border-top: 0; }
.group-h { display: flex; align-items: center; gap: 12px; padding: 16px 18px 6px; }
.group-h h3 { margin: 0; font: 700 .78em/1 var(--body); letter-spacing: .26em; text-transform: uppercase; color: var(--ochre); }
.group-h::after { content: ''; flex: 1; height: 1px; background: var(--line-soft); }
.group-h .lock { font: 600 .72em/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.setting { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 300px); gap: 8px 24px; padding: 12px 18px; border-left: 3px solid transparent; transition: background .15s, border-color .15s; }
.setting:hover { background: #ffffff05; }
.setting.dirty { border-left-color: var(--ochre); background: #e567170d; }
.setting.invalid { border-left-color: var(--bad); background: #ff6a3d0f; }
.setting.locked { opacity: .78; }
.s-name { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.s-name label, .s-name .lbl { font: 700 1.04em/1.2 var(--body); color: var(--paper); }
.s-key { font: 600 .72em/1 var(--mono); color: var(--khaki-dim); padding: .25em .45em; background: #0b0d0f66; border: 1px solid var(--line-soft); }
.chip { font: 700 .62em/1 var(--body); letter-spacing: .16em; text-transform: uppercase; padding: .35em .5em; border: 1px solid currentColor; color: var(--mute); }
.chip.mod { color: var(--ochre); } .chip.warn { color: var(--bad); } .chip.restart { color: var(--khaki-dim); border-color: var(--line); }
.s-desc { margin: 4px 0 0; color: var(--paper-dim); font-size: .93em; max-width: 62ch; }
.s-note { margin: 6px 0 0; color: var(--khaki); font-size: .86em; max-width: 62ch; padding-left: 10px; border-left: 2px solid var(--khaki-dim); }
.s-danger { margin: 6px 0 0; color: #ffb7a0; font-size: .86em; font-weight: 600; max-width: 62ch; padding: .45em .6em; background: #ff6a3d14; border-left: 2px solid var(--bad); }
.s-danger[hidden] { display: none; }
.s-ctl { display: grid; gap: 6px; align-content: start; }
.s-meta { font: 600 .74em/1.3 var(--body); letter-spacing: .04em; color: var(--mute); }
.s-meta b { color: var(--paper-dim); font-weight: 700; }
.s-err { font-weight: 600; font-size: .85em; color: var(--bad); }
.s-err:empty { display: none; }
.num-wrap { position: relative; }
.num-wrap .unit { position: absolute; right: .75em; top: 50%; transform: translateY(-50%); color: var(--mute); font: 600 .8em/1 var(--body); pointer-events: none; }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--khaki) 50%), linear-gradient(135deg, var(--khaki) 50%, transparent 50%); background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2.2em; }
.input:disabled { color: var(--paper-dim); background: #0b0d0f40; border-style: dashed; cursor: not-allowed; }
.input[aria-invalid=true] { border-color: var(--bad); }
.switch { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .82em; color: var(--paper-dim); min-height: 42px; }
.switch input { appearance: none; margin: 0; width: 54px; height: 26px; border: 1px solid #d2b5894d; background: #0b0d0f99; position: relative; cursor: pointer; transition: background .15s, border-color .15s; flex: none; }
.switch input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: var(--khaki-dim); transition: transform .18s cubic-bezier(.2,.8,.2,1), background .15s; }
.switch input:checked { background: #b2e27a33; border-color: var(--green); }
.switch input:checked::after { transform: translateX(28px); background: var(--green); }
.switch.danger input:checked { background: #ff6a3d33; border-color: var(--bad); } .switch.danger input:checked::after { background: var(--bad); }
.switch input:focus-visible { outline: 2px solid var(--ochre-hot); outline-offset: 2px; }
.unmanaged { padding: 10px 18px 16px; color: var(--mute); font-size: .86em; }
.envpath { padding: 12px 18px; border-top: 1px solid var(--line-soft); color: var(--mute); font-size: .82em; overflow-wrap: anywhere; }
.envpath code { color: var(--paper-dim); }

/* rules */
details.rules > summary { list-style: none; cursor: pointer; }
details.rules > summary::-webkit-details-marker { display: none; }
details.rules > summary .chev { display: inline-block; transition: transform .2s; color: var(--ochre); }
details.rules[open] > summary .chev { transform: rotate(90deg); }
.hl { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1px; background: var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.hl div { background: var(--slate); padding: 12px 16px; display: grid; gap: 5px; align-content: start; }
.hl b { font: 800 1.35em/1.1 var(--display); color: var(--paper); letter-spacing: .02em; }
.hl div.wide { grid-column: 1 / -1; } .hl div.wide b { font: 700 1em/1.4 var(--body); color: var(--paper-dim); }
.rfile { padding: 6px 18px 14px; }
.rfile h4 { margin: 14px 0 8px; font: 700 .78em/1 var(--body); letter-spacing: .22em; text-transform: uppercase; color: var(--khaki); }
.rfile h4 code { color: var(--mute); letter-spacing: 0; text-transform: none; margin-left: .6em; }
.rgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.rgroup { border: 1px solid var(--line-soft); background: #0b0d0f40; }
.rgroup h5 { margin: 0; padding: 7px 10px; font: 700 .7em/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--ochre); border-bottom: 1px solid var(--line-soft); }
.rgroup table { width: 100%; border-collapse: collapse; font-size: .82em; }
.rgroup td { padding: 3px 10px; border-bottom: 1px solid #ffffff08; vertical-align: top; }
.rgroup td:first-child { color: var(--paper-dim); font-family: var(--mono); font-size: .9em; overflow-wrap: anywhere; }
.rgroup td:last-child { text-align: right; color: var(--paper); font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* log + audit */
.log { margin: 0; padding: 12px 0; max-height: 440px; overflow: auto; background: #0b0d0fb3; font: 12.5px/1.55 var(--mono); color: #d9d1bf; scrollbar-color: #3b443b transparent; }
.log li { list-style: none; display: grid; grid-template-columns: 68px 1fr; gap: 10px; padding: 0 14px; }
.log li:hover { background: #ffffff06; }
.log time { color: #6f6857; }
.log .sys { color: var(--khaki); }
.log .warn { color: var(--ok); } .log .err { color: var(--bad); }
.log .msg { white-space: pre-wrap; overflow-wrap: anywhere; }
.audit { list-style: none; margin: 0; padding: 0; max-height: 420px; overflow: auto; }
.audit li { display: grid; grid-template-columns: 86px 1fr; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--line-soft); }
.audit time { font: 600 .8em/1.3 var(--body); color: var(--mute); letter-spacing: .04em; }
.audit .act { font: 700 .74em/1 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--khaki); }
.audit .act.bad { color: var(--bad); } .audit .act.stop { color: var(--bad); } .audit .act.go { color: var(--green); } .audit .act.apply { color: var(--ochre); }
.audit .who { color: var(--paper); font-weight: 700; }
.audit .chg { margin-top: 4px; font: .78em/1.5 var(--mono); color: var(--paper-dim); }
.audit .chg s { color: var(--mute); text-decoration-color: #ff6a3d99; }
.audit .chg ins { text-decoration: none; color: var(--green); }
.audit .det { margin-top: 3px; font-size: .84em; color: var(--mute); }
.empty { padding: 18px; color: var(--mute); font-style: italic; }

/* sticky action bar */
.bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: linear-gradient(180deg, #121417e6, #121417fa); border-top: 1px solid #d2b58955; box-shadow: 0 -12px 40px #0008; backdrop-filter: blur(6px); }
.bar-in { max-width: 1760px; margin: 0 auto; padding: 12px var(--pad); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bar-status { flex: 1 1 260px; min-width: 0; display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--paper-dim); }
.bar-status .dot { color: var(--mute); flex: none; } .bar-status.dirty .dot { color: var(--ochre); } .bar-status.pending .dot { color: var(--ok); } .bar-status.err .dot { color: var(--bad); }
.bar-status span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-group { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bar-sep { width: 1px; align-self: stretch; background: var(--line); margin: 0 6px; }

/* toast */
.toast { position: fixed; right: var(--pad); bottom: 84px; z-index: 30; max-width: min(520px, calc(100vw - 32px)); padding: .8em 1em; background: #121417f2; border: 1px solid var(--line); border-left: 3px solid var(--green); box-shadow: 0 12px 40px #000a; font-weight: 600; animation: rise .25s ease both; }
.toast.bad { border-left-color: var(--bad); }
.toast[hidden] { display: none; }

/* confirm dialog */
dialog { padding: 0; border: 1px solid #d2b58966; background: var(--slate); color: var(--paper); width: min(560px, calc(100vw - 32px)); box-shadow: 0 30px 90px #000c; }
dialog::backdrop { background: #0b0d0fcc; backdrop-filter: blur(3px); }
dialog[open] { animation: rise .25s ease both; }
.dlg { display: grid; gap: 16px; padding: 26px 26px 22px; border-left: 4px solid var(--ochre); }
.dlg.danger { border-left-color: var(--bad); }
.dlg h2 { margin: 0; font: 900 clamp(30px, 4vw, 42px)/.95 var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--khaki); }
.dlg p { margin: 0; color: var(--paper-dim); }
.dlg .impact { display: flex; gap: 14px; align-items: center; padding: .8em 1em; background: #ff6a3d12; border: 1px solid #ff6a3d40; font-weight: 700; color: #ffc4b2; }
.dlg .impact b { font: 800 2em/1 var(--display); color: var(--paper); }
.dlg .impact.calm { background: #b2e27a10; border-color: #b2e27a33; color: var(--paper-dim); }
.dlg ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font: .84em/1.45 var(--mono); max-height: 200px; overflow: auto; }
.dlg ul li { padding: 4px 8px; background: #0b0d0f80; }
.dlg ul s { color: var(--mute); } .dlg ul ins { text-decoration: none; color: var(--green); }
.dlg .warn-l { color: #ffb7a0; font-weight: 600; }
.dlg-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 4px; }

/* responsive */
@media (max-width: 1280px) {
  .hero { grid-template-columns: 1fr 1fr; }
  .hero > section:nth-child(3) { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 1100px) { .main { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  body { font-size: 14px; }
  .hero { grid-template-columns: 1fr; }
  .hero > section + section { border-left: 0; border-top: 1px solid var(--line); }
  .setting { grid-template-columns: 1fr; }
  .bar-sep { display: none; }
  .bar-in { gap: 6px; padding: 8px 12px; } .bar-group { flex: 1 1 100%; } .bar .btn { flex: 1 1 0; min-height: 36px; padding: .45em .5em; font-size: .72em; letter-spacing: .1em; }
  .bar .btn.cta { font-size: .95em; } .bar-status { flex-basis: 100%; font-size: .85em; } #b-defaults { display: none; }
  .shell { padding-bottom: 190px; }
  .metrics { grid-template-columns: repeat(2, 1fr); row-gap: 10px; } .metrics li:nth-child(n) { padding-left: .8em; border-left: 1px solid var(--line); } .metrics li:nth-child(2n+1) { padding-left: 0; border-left: 0; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
.big.mid { font-size: clamp(30px, 2.6vw, 44px); }
.gauge .needle, .gauge .p50 { left: 0; }
.gauge .scale .s0 { left: 0; } .gauge .scale .s8 { left: 32%; } .gauge .scale .s16 { left: 66.8%; } .gauge .scale .s25 { left: 100%; }
.dot.amber { color: var(--ok); }
.log li.empty { display: block; padding: 6px 14px; font-family: var(--body); }
.audit li.empty { display: block; }

/* sign-in (step 2): role chip in the header; the owner's Team section (operators, one-time password) */
.chip.role { margin-left: 8px; color: var(--khaki); border-color: var(--line); vertical-align: 1px; }
#team { padding: 14px 18px 18px; display: grid; gap: 14px; }
.team { list-style: none; margin: 0; padding: 0; }
.team li { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.team li b { overflow-wrap: anywhere; }
.team-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.team-add { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; align-items: end; }
.secret { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; padding: 14px; border: 1px solid var(--ochre); background: #e5671714; }
.secret .label { grid-column: 1 / -1; color: var(--ochre-hot); }
.secret code { font-size: 1.15em; letter-spacing: .06em; color: var(--paper); overflow-wrap: anywhere; user-select: all; }
.secret .s-note { grid-column: 1 / -1; margin: 0; }