/* ISA-101 high-performance HMI look: muted greys, colour only for abnormal states.
   AutoLoop is an overlay and uses one distinct accent (cyan) everywhere. */
:root {
  --bg: #c9cccf;
  --panel: #dfe1e3;
  --panel-2: #e9eaec;
  --line: #a9adb2;
  --line-2: #8f949a;
  --text: #1d2125;
  --muted: #5d636a;
  --faint: #7b8187;
  --equip: #9aa0a6;
  --equip-dark: #6c7278;
  --pipe: #7d838a;
  --white: #f7f8f8;
  --p1: #d0312d;
  --p2: #e8a317;
  --p3: #b8a800;
  --ok: #3f8f4f;
  --al: #0aa5c2;
  --al-dark: #077d93;
  --al-soft: rgba(10, 165, 194, 0.12);
  --human: #6b5ca5;
  --top: #3b4045;
  --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #2b2f33; overflow: hidden; font-family: var(--sans); color: var(--text); }
button { font-family: inherit; }
#stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; background: var(--bg); display: flex; flex-direction: column; }

/* top bar */
.topbar { height: 46px; background: var(--top); color: #e8eaec; display: flex; align-items: center; gap: 18px; padding: 0 14px; font-size: 14px; flex: none; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 17px; letter-spacing: 0.2px; }
.brand .dot { width: 12px; height: 12px; border-radius: 3px; background: var(--al); box-shadow: 0 0 0 3px rgba(10,165,194,.25); }
.brand small { font-weight: 500; color: #9fb6bd; font-size: 12px; border: 1px solid #56707a; padding: 1px 6px; border-radius: 3px; }
.topbar .site { color: #c3c8cd; }
.topbar .uns { font-family: var(--mono); font-size: 12px; color: #9ba3ab; }
.topbar .sp { flex: 1; }
.topbar .clock { font-family: var(--mono); font-size: 18px; color: #fff; }
.chip { font-family: var(--mono); font-size: 13px; padding: 3px 8px; border-radius: 3px; background: #4b5157; color: #e6e8ea; }
.chip.warn { background: var(--p2); color: #1d1d1d; }
.chip.bad { background: var(--p1); color: #fff; }
.tb-btns { display: flex; gap: 4px; }
.tb-btn { background: #4b5157; color: #e6e8ea; border: 1px solid #5d646b; border-radius: 3px; padding: 4px 9px; font-size: 13px; cursor: pointer; }
.tb-btn:hover { background: #59606a; }
.tb-btn.on { background: #e6e8ea; color: #22262a; }
.tb-btn.story { background: var(--al-dark); border-color: var(--al); color: #fff; font-weight: 600; }
.tb-btn:disabled { opacity: .45; cursor: default; }
.user { color: #c3c8cd; font-size: 13px; }
.user b { color: #fff; }
.user a { color: #9fd6e2; margin-left: 8px; }

/* alarm banner */
.alarmbar { height: 36px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 12px; background: #d6d8da; border-bottom: 1px solid var(--line); font-size: 14px; }
.alarmbar .msg { flex: 1; display: flex; gap: 10px; align-items: center; font-family: var(--mono); font-size: 13px; white-space: nowrap; overflow: hidden; }
.prio { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 20px; font-weight: 700; font-size: 12px; border-radius: 2px; font-family: var(--mono); }
.prio.p1 { background: var(--p1); color: #fff; }
.prio.p2 { background: var(--p2); color: #1d1d1d; }
.prio.p3 { background: var(--p3); color: #1d1d1d; }
.prio.p0 { background: var(--equip); color: #fff; }
.alarmbar.active { background: #e7d9b8; }
.alarmbar.active.p1 { background: #ecc9c6; }
.alarmbar .counts { display: flex; gap: 6px; font-family: var(--mono); font-size: 12px; }
.btn { background: var(--panel-2); border: 1px solid var(--line-2); color: var(--text); border-radius: 3px; padding: 4px 10px; font-size: 13px; cursor: pointer; }
.btn:hover { background: #fff; }
.btn.al { border-color: var(--al); color: var(--al-dark); font-weight: 600; }
.btn.al.solid { background: var(--al); color: #fff; }
.btn.danger { border-color: var(--p1); color: var(--p1); }
.btn:disabled { opacity: .45; cursor: default; }

/* main grid */
.main { flex: 1; display: grid; grid-template-columns: 408px 1fr 480px; gap: 10px; padding: 10px; min-height: 0; }
.col { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 3px; display: flex; flex-direction: column; min-height: 0; }
.panel > h3 { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); padding: 8px 10px 6px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); }
.panel > h3 .r { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 500; }
.panel .body { padding: 8px 10px; }

/* comparison table */
table.cmp { width: 100%; border-collapse: collapse; font-size: 14px; }
table.cmp th { font-size: 12px; color: var(--muted); font-weight: 600; text-align: right; padding: 2px 4px 6px; }
table.cmp th:first-child { text-align: left; }
table.cmp td { padding: 4px 4px; border-top: 1px solid #cdd0d3; text-align: right; font-family: var(--mono); font-size: 14px; }
table.cmp td:first-child { font-family: var(--sans); text-align: left; color: var(--muted); font-size: 13px; }
table.cmp .h-a { color: var(--human); }
table.cmp .h-b { color: var(--al-dark); }
.delta { font-size: 12px; padding: 1px 5px; border-radius: 2px; }
.delta.good { background: #d3e6d6; color: #24592f; }
.delta.bad { background: #f0d6d4; color: #8b211d; }

.savings { margin: 8px 10px 10px; border: 2px solid var(--al); border-radius: 4px; background: var(--white); padding: 10px 12px; }
.savings .lbl { font-size: 12px; color: var(--al-dark); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.savings .big { font-family: var(--mono); font-size: 34px; font-weight: 700; color: var(--text); line-height: 1.15; }
.savings .row { display: flex; gap: 14px; font-family: var(--mono); font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.savings .row b { color: var(--text); }
.savings .month { margin-top: 4px; font-size: 13px; color: var(--muted); }

.conn { display: grid; grid-template-columns: 14px 1fr auto; gap: 4px 8px; align-items: center; font-size: 13px; }
.conn .light { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 2px rgba(63,143,79,.2); }
.conn .light.idle { background: var(--equip); box-shadow: none; }
.conn .nm { font-weight: 600; }
.conn .sub { grid-column: 2 / 4; font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-top: -3px; margin-bottom: 4px; }
.conn .cnt { font-family: var(--mono); font-size: 12px; color: var(--muted); }

.scen { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.scen button { text-align: left; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 3px; padding: 6px 8px; cursor: pointer; font-size: 13px; }
.scen button small { display: block; color: var(--muted); font-size: 11.5px; }
.scen button.on { background: #f3e2b9; border-color: var(--p2); }
.scen button:disabled { cursor: default; }
.adminrow { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }

/* center */
.viewpanel { flex: 1 1 auto; position: relative; overflow: hidden; }
.viewtabs { display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.tab { border: 1px solid var(--line-2); background: var(--panel-2); padding: 3px 12px; border-radius: 3px; cursor: pointer; font-size: 13px; }
.tab.on { background: var(--top); color: #fff; border-color: var(--top); }
.viewtabs .lbl { margin-left: 12px; font-size: 12px; color: var(--muted); }
.viewtabs .sp { flex: 1; }
.plantsel .tab.on.b { background: var(--al-dark); border-color: var(--al-dark); }
.plantsel .tab.on.a { background: var(--human); border-color: var(--human); }
.view { position: absolute; left: 0; right: 0; top: 37px; bottom: 0; }
.view svg { width: 100%; height: 100%; display: block; }
#hall { position: absolute; inset: 0; }
#hall canvas { display: block; }
.labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.lbl3d { position: relative; background: rgba(240,241,242,.94); border: 1px solid var(--line-2); border-radius: 3px; padding: 3px 7px; font-size: 12px; white-space: nowrap; pointer-events: auto; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.lbl3d b { font-size: 12.5px; }
.lbl3d .v { font-family: var(--mono); font-size: 12px; color: var(--text); }
.lbl3d.warn { background: #f6e2b0; border-color: var(--p2); }
.lbl3d.bad { background: #f2c9c6; border-color: var(--p1); }
.lbl3d.pulse { animation: pulse 1.6s ease-out; }
.lbl3d .alc { color: var(--al-dark); font-weight: 700; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(10,165,194,.9); border-color: var(--al); } 100% { box-shadow: 0 0 0 16px rgba(10,165,194,0); } }
.caption { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); width: 88%; background: rgba(33,37,41,.92); color: #fff; font-size: 19px; line-height: 1.35; padding: 12px 18px; border-radius: 4px; border-left: 5px solid var(--al); display: none; z-index: 5; }
.caption.on { display: block; }
.caption .bar { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--al); }
.trends { flex: none; height: 372px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; }
.trend { background: var(--panel); border: 1px solid var(--line); border-radius: 3px; position: relative; }
.trend canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* AutoLoop overlay panel */
.alpanel { border: 2px solid var(--al); background: #e3eef0; flex: 1; }
.alpanel > h3 { color: var(--al-dark); border-bottom-color: #9fd0da; }
.badge-ro { font-size: 11px; font-weight: 600; text-transform: none; letter-spacing: 0; color: #1d2125; background: #fff; border: 1px solid var(--line-2); border-radius: 10px; padding: 1px 8px; }
.modes { display: grid; grid-template-columns: 88px 1fr; gap: 5px 8px; align-items: center; font-size: 13px; padding: 8px 10px 6px; }
.seg { display: flex; border: 1px solid var(--line-2); border-radius: 3px; overflow: hidden; }
.seg button { flex: 1; border: 0; border-right: 1px solid var(--line-2); background: var(--panel-2); padding: 3px 0; font-size: 12px; cursor: pointer; font-weight: 600; color: var(--muted); }
.seg button:last-child { border-right: 0; }
.seg button.on { background: var(--al); color: #fff; }
.seg button.on.off { background: var(--equip-dark); }
.seg button:disabled { cursor: default; }
.pipe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px 10px 8px; }
.pipe div { border: 1px solid #9fd0da; background: #f1f7f8; border-radius: 3px; font-size: 11.5px; padding: 4px 5px; text-align: center; color: var(--muted); line-height: 1.2; }
.pipe div b { display: block; font-size: 12px; color: var(--text); }
.pipe div.lit { background: var(--al); color: #fff; border-color: var(--al); }
.pipe div.lit b { color: #fff; }
.pending { padding: 0 10px; display: flex; flex-direction: column; gap: 6px; }
.pcard { border: 1px solid var(--al); background: #fff; border-radius: 3px; padding: 6px 8px; font-size: 13px; }
.pcard .moves { font-family: var(--mono); font-size: 13px; margin: 3px 0; }
.pcard .acts { display: flex; gap: 6px; margin-top: 4px; }
.log { flex: 1; overflow-y: auto; padding: 0 10px 6px; min-height: 0; }
.dec { border-bottom: 1px solid #c4d3d6; padding: 6px 0; font-size: 13px; line-height: 1.35; cursor: pointer; }
.dec .hd { display: flex; gap: 6px; align-items: center; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.kind { font-size: 10.5px; font-weight: 700; padding: 1px 5px; border-radius: 2px; font-family: var(--mono); border: 1px solid var(--line-2); color: var(--muted); background: #fff; }
.kind.APPLIED, .kind.APPROVED { background: var(--al); border-color: var(--al); color: #fff; }
.kind.PENDING { background: #fff; border-color: var(--al); color: var(--al-dark); }
.kind.SHADOW { background: #fff; border-color: var(--al); color: var(--al-dark); border-style: dashed; }
.kind.ALERT { background: var(--p2); border-color: var(--p2); color: #1d1d1d; }
.kind.BLOCKED, .kind.ROLLBACK { background: var(--p1); border-color: var(--p1); color: #fff; }
.kind.EVENT { background: var(--equip-dark); border-color: var(--equip-dark); color: #fff; }
.dec .tx { margin-top: 2px; }
.dec .llm { margin-top: 3px; color: #234a52; font-style: italic; }
.dec .llm::before { content: 'Plain language · '; font-style: normal; font-weight: 600; font-size: 11px; color: var(--al-dark); }
.why { display: none; margin-top: 5px; background: #fff; border: 1px solid #c4d3d6; border-radius: 3px; padding: 6px 8px; font-size: 12px; }
.dec.open .why { display: block; }
.why table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 11.5px; }
.why td { padding: 1px 4px; border-top: 1px solid #e3e6e8; vertical-align: top; }
.why td:first-child { color: var(--muted); white-space: nowrap; }
.chat { border-top: 1px solid #9fd0da; padding: 8px 10px; }
.chat form { display: flex; gap: 6px; }
.chat input { flex: 1; border: 1px solid var(--line-2); border-radius: 3px; padding: 6px 8px; font-size: 13px; background: #fff; }
.chat .ans { font-size: 13px; line-height: 1.4; margin-top: 6px; max-height: 120px; overflow-y: auto; color: #1f3a40; }
.chat .q { color: var(--muted); font-size: 12px; }

/* modal (cell detail) */
.modal { position: absolute; inset: 0; background: rgba(40,44,48,.55); display: none; z-index: 20; }
.modal.on { display: block; }
.sheet { position: absolute; left: 40px; right: 40px; top: 30px; bottom: 30px; background: var(--bg); border: 1px solid var(--line-2); border-radius: 4px; display: flex; flex-direction: column; box-shadow: 0 10px 40px rgba(0,0,0,.35); }
.sheet-hd { display: flex; align-items: center; gap: 14px; padding: 10px 14px; background: var(--top); color: #fff; border-radius: 4px 4px 0 0; }
.sheet-hd h2 { margin: 0; font-size: 19px; }
.sheet-hd .meta { color: #b9c0c6; font-size: 13px; }
.sheet-hd .uns { font-family: var(--mono); font-size: 12px; color: #9ba3ab; }
.sheet-hd .sp { flex: 1; }
.sheet-body { flex: 1; display: grid; grid-template-columns: 1fr 640px; gap: 10px; padding: 10px; min-height: 0; }
.machine { position: relative; }
.machine svg { width: 100%; height: 100%; }
.phasebar { display: flex; height: 26px; margin: 0 10px 8px; border: 1px solid var(--line-2); border-radius: 3px; overflow: hidden; position: relative; font-size: 11.5px; }
.phasebar div { display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--line); color: var(--muted); background: var(--panel-2); }
.phasebar div.on { background: var(--top); color: #fff; }
.readouts { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; padding: 0 10px 10px; }
.ro { background: var(--white); border: 1px solid var(--line); border-radius: 3px; padding: 4px 8px; }
.ro .k { font-size: 11px; color: var(--muted); }
.ro .v { font-family: var(--mono); font-size: 17px; }
.ro.warn { background: #f6e2b0; border-color: var(--p2); }
.ro.bad { background: #f2c9c6; border-color: var(--p1); }
table.sptab { width: 100%; border-collapse: collapse; font-size: 13px; }
table.sptab th { text-align: left; font-size: 11.5px; color: var(--muted); font-weight: 600; padding: 3px 4px; border-bottom: 1px solid var(--line); }
table.sptab td { padding: 5px 4px; border-bottom: 1px solid #cdd0d3; font-family: var(--mono); }
table.sptab td.tag { font-family: var(--sans); }
table.sptab td.tag small { display: block; font-family: var(--mono); font-size: 10.5px; color: var(--faint); }
table.sptab .rec { color: var(--al-dark); font-weight: 700; }
table.sptab input { width: 70px; font-family: var(--mono); font-size: 13px; padding: 2px 4px; border: 1px solid var(--al); border-radius: 2px; }
.minitrends { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.minitrends .trend { height: 150px; }
.tagtab { overflow-y: auto; font-family: var(--mono); font-size: 11.5px; }
.tagtab table { width: 100%; border-collapse: collapse; }
.tagtab td { padding: 2px 4px; border-bottom: 1px solid #d3d6d9; white-space: nowrap; }
.tagtab td.n { color: var(--muted); max-width: 300px; overflow: hidden; text-overflow: ellipsis; }
.tagtab tr.rw td { color: var(--text); }
.tagtab tr.al td { background: var(--al-soft); }
.shots { display: flex; gap: 2px; flex-wrap: wrap; padding: 4px 10px; }
.shots i { width: 11px; height: 16px; background: var(--equip); border-radius: 1px; }
.shots i.bad { background: var(--p1); }

/* login */
.login { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--bg); }
.login form { width: 420px; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 26px 28px; display: flex; flex-direction: column; gap: 12px; }
.login h1 { margin: 0; font-size: 26px; display: flex; gap: 10px; align-items: center; }
.login p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.login input { border: 1px solid var(--line-2); border-radius: 3px; padding: 9px 10px; font-size: 15px; background: #fff; }
.login button { background: var(--top); color: #fff; border: 0; border-radius: 3px; padding: 10px; font-size: 15px; cursor: pointer; }
.login .err { color: var(--p1); font-size: 13px; min-height: 16px; }

/* headline: energy cost per good part */
.headline { margin: 8px 10px 10px; border: 2px solid var(--al); border-radius: 4px; background: var(--white); padding: 9px 12px; }
.headline .lbl { font-size: 12px; color: var(--al-dark); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.headline .big { font-family: var(--mono); font-size: 27px; font-weight: 700; line-height: 1.25; display: flex; align-items: baseline; gap: 10px; }
.headline .big .a { color: var(--human); font-size: 22px; }
.headline .big .b { color: var(--al-dark); }
.headline .row { font-family: var(--mono); font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.headline .year { margin-top: 6px; font-size: 15px; color: var(--text); cursor: help; }
.headline .year b { font-family: var(--mono); font-size: 18px; }
.headline .year .i { color: var(--al-dark); font-weight: 700; }
table.cmp td { padding: 3px 4px; }
.lbl3dwrap { pointer-events: none; }
.lbl3d { position: relative; transition: transform .25s ease-out, opacity .25s; }

/* ---------------------------------------------------------------- presentation mode */
body:not(.eng) .eng-only { display: none !important; }
body.eng .pres-only { display: none !important; }
.present { position: relative; flex: 1; display: flex; flex-direction: column; min-height: 0; background: #e3e5e7; }
.chapbar { flex: none; display: flex; align-items: stretch; gap: 10px; padding: 14px 22px 0; }
.chap { flex: 1; position: relative; background: #fff; border: 1px solid #c9ccd0; border-radius: 6px; padding: 10px 16px 12px; cursor: pointer; overflow: hidden; }
.chap .n { font-family: var(--mono); font-size: 15px; color: var(--faint); }
.chap .t { font-size: 21px; font-weight: 700; color: var(--text); }
.chap .s { font-size: 14px; color: var(--muted); }
.chap.on { border-color: var(--al); box-shadow: 0 0 0 2px var(--al) inset; }
.chap.on .n { color: var(--al-dark); }
.chap.done { opacity: .6; }
.chap .prog { position: absolute; left: 0; bottom: 0; height: 4px; background: var(--al); }
.chapctl { display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.chapctl button { background: #fff; border: 1px solid #c9ccd0; border-radius: 6px; font-size: 18px; padding: 6px 14px; cursor: pointer; }
.chapctl button.on { background: var(--al); color: #fff; border-color: var(--al); }
.pmain { flex: 1; display: grid; grid-template-columns: 1fr 560px; gap: 18px; padding: 14px 22px 22px; min-height: 0; }
.pstage { position: relative; border-radius: 8px; overflow: hidden; background: #b4b9be; }
.pstage > .view { position: absolute; inset: 0; top: 0 !important; }
.pcaption { position: absolute; left: 24px; right: 24px; bottom: 22px; background: rgba(29,33,37,.9); color: #fff; font-size: 27px; line-height: 1.38; padding: 18px 24px; border-radius: 8px; border-left: 6px solid var(--al); display: none; z-index: 6; }
.pcaption.on { display: block; }
.pside { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.kpi { background: #fff; border-radius: 8px; padding: 14px 20px 16px; border: 1px solid #d3d6d9; }
.kpi .l { font-size: 17px; color: var(--muted); font-weight: 600; }
.kpi .v { display: flex; align-items: baseline; gap: 14px; margin-top: 2px; font-family: var(--mono); }
.kpi .a { font-size: 30px; color: #7b8187; }
.kpi .arrow { font-size: 24px; color: #a9adb2; }
.kpi .b { font-size: 50px; font-weight: 700; color: var(--al-dark); }
.kpi .d { font-family: var(--sans); font-size: 20px; font-weight: 700; color: #24592f; background: #dcebdf; border-radius: 4px; padding: 2px 8px; margin-left: auto; }
.kpi .d.bad { color: #8b211d; background: #f2d8d6; }
.kpi .big { font-family: var(--mono); font-size: 50px; font-weight: 700; color: var(--al-dark); }
.kpi .sub { font-size: 14.5px; color: var(--muted); cursor: help; }
.kpi .legend { font-size: 14px; color: var(--faint); margin-top: 2px; }
.pal { flex: 1; background: #fff; border-radius: 8px; border: 2px solid var(--al); padding: 14px 20px; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.pal .hd { display: flex; align-items: center; gap: 12px; }
.pal .hd .nm { font-size: 17px; font-weight: 700; color: var(--al-dark); letter-spacing: .3px; }
.pseg { display: flex; margin-left: auto; border: 1px solid #c9ccd0; border-radius: 6px; overflow: hidden; }
.pseg button { border: 0; background: #fff; font-size: 15px; font-weight: 600; padding: 7px 14px; color: var(--muted); cursor: pointer; border-right: 1px solid #c9ccd0; }
.pseg button:last-child { border-right: 0; }
.pseg button.on { background: var(--al); color: #fff; }
.pseg button:disabled { cursor: default; }
.card { flex: 1; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.card .meta { display: flex; gap: 10px; align-items: center; font-family: var(--mono); font-size: 15px; color: var(--muted); }
.card .meta .kind { font-size: 13px; padding: 2px 8px; }
.card .what { font-family: var(--mono); font-size: 19px; line-height: 1.45; color: var(--text); }
.card .what b { color: var(--al-dark); }
.card .pwhy { font-size: 19px; line-height: 1.42; color: #2d3338; }
.card .eff { font-size: 22px; font-weight: 700; color: #24592f; }
.card .eff.warn { color: #8a5a00; }
.card .acts { display: flex; gap: 10px; margin-top: auto; }
.card .acts button { font-size: 18px; padding: 10px 22px; border-radius: 6px; cursor: pointer; border: 1px solid #c9ccd0; background: #fff; }
.card .acts .ok { background: var(--al); border-color: var(--al); color: #fff; font-weight: 700; }
.punsafe { background: #fff; border: 2px solid var(--p1); color: var(--p1); font-size: 17px; font-weight: 700; border-radius: 6px; padding: 10px; cursor: pointer; }
.toast { position: absolute; left: 50%; top: 170px; transform: translateX(-50%); width: 900px; background: #b3261e; color: #fff; border-radius: 10px; padding: 22px 30px; box-shadow: 0 16px 50px rgba(0,0,0,.35); display: none; z-index: 30; }
.toast.on { display: block; animation: toastin .25s ease-out; }
.toast h2 { margin: 0 0 8px; font-size: 34px; }
.toast div { font-size: 20px; line-height: 1.45; font-family: var(--mono); }
@keyframes toastin { from { transform: translate(-50%, -12px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
body:not(.eng) .topbar { height: 56px; background: #2f3439; }
body:not(.eng) .topbar .site { font-size: 16px; }
.psrc { position: absolute; right: 12px; top: 10px; font-size: 13px; color: #41474d; background: rgba(255,255,255,.75); padding: 3px 8px; border-radius: 4px; z-index: 5; }
body.eng .topbar .site, body.eng .topbar .uns { display: none; }
.topbar .tb-btn { white-space: nowrap; }
.zonesel { background: #4b5157; color: #fff; border: 1px solid #5d646b; border-radius: 3px; font-family: var(--mono); font-size: 13px; padding: 3px 4px; }
.peurope { position: absolute; left: 16px; top: 16px; width: 640px; background: rgba(255,255,255,.94); border-radius: 8px; padding: 10px 14px; z-index: 5; box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.peurope .eh { font-size: 14px; font-weight: 700; color: #41474d; margin-bottom: 6px; }
.peurope .er { display: grid; grid-template-columns: 74px 1fr 70px 210px; gap: 8px; align-items: center; font-size: 14px; padding: 2px 0; }
.peurope .er .z { font-family: var(--mono); font-weight: 700; }
.peurope .er.on .z { color: var(--al-dark); }
.peurope .er .bar { height: 10px; background: #e9eaec; border-radius: 3px; overflow: hidden; }
.peurope .er .bar i { display: block; height: 100%; background: #9fb3bb; }
.peurope .er.on .bar i { background: var(--al); }
.peurope .er .c { font-family: var(--mono); font-weight: 700; text-align: right; }
.peurope .er .n { font-size: 12.5px; color: var(--muted); }
.peurope .src { font-size: 11.5px; color: var(--faint); margin-top: 4px; }
.stepper { display: flex; align-items: center; gap: 6px; font-size: 15px; color: var(--faint); }
.stepper span.on { color: #fff; background: var(--al); border-radius: 4px; padding: 1px 8px; font-weight: 700; }
.stepper span.done { color: var(--al-dark); font-weight: 600; }
.stepper .sep { color: #c3c7cb; }
.gres { font-family: var(--mono); font-size: 16px; color: var(--muted); }
.gres.ok { color: #24592f; }
.gres.bad { color: #8b211d; }
.card .acts button:disabled { opacity: .45; cursor: default; }
.kind.PROMOTED { background: #3f8f4f; border-color: #3f8f4f; color: #fff; }

/* phones: keep the 1920x1080 stage inside the real viewport */
html, body { width: 100%; height: 100%; overflow: hidden; }
#rotateHint { display: none; }
body.portrait-phone #rotateHint { display: block; position: fixed; left: 12px; right: 12px; top: 12px; z-index: 50; padding: 10px 14px; border-radius: 8px; background: #1d2125; color: #fff; font: 600 14px/1.4 Inter, system-ui, sans-serif; text-align: center; }