:root {
  --bg: #07090b;
  --bg2: #101419;
  --panel: rgba(10, 14, 18, .94);
  --panel2: rgba(20, 26, 32, .97);
  --line: rgba(255,255,255,.15);
  --line-strong: rgba(255,255,255,.28);
  --text: #edf1f4;
  --muted: #aab3bc;
  --orange: #ff6a00;
  --amber: #ffb000;
  --red: #ff3f2f;
  --green: #51e293;
  --blue: #52b8ff;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: Segoe UI, Arial, sans-serif; }
button, input, select { font: inherit; }
button { border: 1px solid var(--line); background: linear-gradient(#202932,#161d24); color: var(--text); padding: .82rem 1rem; border-radius: 8px; cursor: pointer; font-weight: 800; letter-spacing: .025em; box-shadow: inset 0 1px rgba(255,255,255,.04); }
button:hover { filter: brightness(1.17); border-color: var(--line-strong); }
button.primary { background: linear-gradient(135deg, #ff7a00, #d64b00); border-color: #ff943d; color: white; box-shadow: 0 0 28px rgba(255,96,0,.26); }
button.accent { border-color: rgba(255,123,36,.62); background: rgba(255,106,0,.13); }
.hidden { display: none !important; }
.screen { position: fixed; inset: 0; display: grid; place-items: center; z-index: 50; padding: 24px; overflow: auto; background: radial-gradient(circle at 50% 24%, #2d343b 0, #13171c 33%, #07090b 78%); }
.screen::before { content: ''; position: fixed; inset: 0; pointer-events: none; opacity: .22; background: repeating-linear-gradient(120deg, transparent 0 32px, rgba(255,255,255,.018) 33px 34px); }
.splash-screen { text-align: center; }
.producer-logo { width: min(760px, 88vw); max-height: 170px; object-fit: contain; filter: drop-shadow(0 0 28px rgba(255,106,0,.24)); }
.splash-rule { width: min(760px, 75vw); height: 1px; margin: 20px auto 0; background: linear-gradient(90deg, transparent, rgba(255,106,0,.8), transparent); }
.splash-screen h1 { margin: 2rem 0 .35rem; letter-spacing: .13em; font-size: clamp(1.6rem, 4vw, 3.4rem); }
.splash-screen p { color: var(--orange); font-weight: 900; letter-spacing: .11em; }
.splash-screen small { position: fixed; bottom: 20px; color: var(--muted); }
.splash-screen button { margin-top: 1.5rem; min-width: 220px; }
.menu-card, .setup-card, .briefing-card { position: relative; width: min(980px, 95vw); max-height: 94vh; overflow: auto; padding: clamp(24px,4vw,52px); border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(145deg, rgba(26,32,38,.99), rgba(8,11,14,.99)); box-shadow: 0 34px 110px #000; }
.hero-card { text-align: center; overflow: hidden; }
.hero-card::after { content: ''; position: absolute; width: 540px; height: 540px; right: -250px; bottom: -320px; border-radius: 50%; background: radial-gradient(circle, rgba(255,106,0,.18), transparent 68%); }
.menu-logo { width: min(570px, 86%); max-height: 110px; object-fit: contain; }
h1, h2, h3 { margin-top: 0; }
.menu-card h1 { font-size: clamp(2rem, 5vw, 4.7rem); line-height: .95; text-transform: uppercase; letter-spacing: .03em; margin: 28px 0 20px; }
.lead { max-width: 760px; margin: 0 auto 28px; color: #cbd2d9; font-size: 1.08rem; line-height: 1.65; }
.eyebrow { color: var(--orange); font-weight: 900; letter-spacing: .16em; text-transform: uppercase; font-size: .78rem; }
.menu-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 24px; }
.version-note, .info-box, .safety-strip, .goal-box { margin-top: 22px; border-left: 4px solid var(--orange); padding: 14px 16px; background: rgba(255,106,0,.075); color: #d7dde3; text-align: left; line-height: 1.55; }
.briefing-head { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: start; }
.briefing-head h2 { font-size: clamp(1.8rem,4vw,3rem); margin-bottom: 14px; }
.briefing-head p { color: #c7cfd6; line-height: 1.65; max-width: 760px; }
.alpha-badge { border: 1px solid rgba(255,122,26,.4); padding: 13px 16px; min-width: 145px; text-align: center; color: var(--muted); background: rgba(255,106,0,.08); border-radius: 10px; }
.alpha-badge strong { color: white; font-size: 1.55rem; }
.info-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-top: 26px; }
.info-grid article { position: relative; min-height: 190px; padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(0,0,0,.18)); }
.info-grid h3 { margin: 12px 0 8px; }
.info-grid p { color: var(--muted); line-height: 1.55; margin: 0; }
.info-number { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,106,0,.11); border: 1px solid rgba(255,106,0,.35); color: #ff9b54; font-weight: 900; }
.safety-strip { border-color: var(--amber); background: rgba(255,176,0,.07); }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-top: 24px; }
label { display: grid; gap: 8px; font-weight: 800; color: #dfe5ea; }
label span, label strong { justify-self: end; }
select, input[type=range] { width: 100%; }
select { background: #10151a; color: white; border: 1px solid var(--line); border-radius: 8px; padding: 12px; }
input[type=range] { accent-color: var(--orange); }
.goal-box { display: grid; grid-template-columns: 180px 1fr; gap: 12px; border-color: var(--green); background: rgba(81,226,147,.07); }
#game { position: fixed; inset: 0; background: #06080a; }
#glCanvas { width: 100%; height: 100%; display: block; touch-action: none; }
#puddleCanvas { position: absolute; z-index: 4; left: 50%; bottom: 98px; transform: translateX(-50%); width: min(520px, calc(100vw - 620px)); aspect-ratio: 16/9; border-radius: 14px; border: 1px solid rgba(255,155,62,.38); box-shadow: 0 16px 50px rgba(0,0,0,.7), 0 0 40px rgba(255,91,0,.12); background: #090807; pointer-events: none; }
.visor-vignette { position: absolute; z-index: 3; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 55%, transparent 0 28%, rgba(0,0,0,.16) 52%, rgba(0,0,0,.72) 100%); opacity: .82; transition: opacity .2s; }
.topbar { position: absolute; z-index: 7; left: 12px; right: 12px; top: 12px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; padding: 10px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; backdrop-filter: blur(12px); box-shadow: 0 12px 35px rgba(0,0,0,.35); }
.title-block strong { display: block; letter-spacing: .08em; }
.title-block #modeLabel { color: var(--orange); font-size: .75rem; font-weight: 900; }
.top-actions { display: flex; gap: 7px; justify-content: center; }
.toolbar-button { padding: 8px 11px; font-size: .72rem; white-space: nowrap; }
.status-pills { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.status-pills span { padding: 6px 9px; border: 1px solid var(--line); border-radius: 999px; background: #0f1419; font-size: .72rem; font-weight: 800; }
.hud { position: absolute; z-index: 7; top: 84px; width: 250px; padding: 15px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; backdrop-filter: blur(12px); box-shadow: 0 16px 42px rgba(0,0,0,.38); }
.left-hud { left: 12px; }
.right-hud { right: 12px; }
.hud h3, .hud-heading { font-size: .75rem; color: var(--orange); letter-spacing: .14em; border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 12px; font-weight: 900; }
.hud-heading { display: flex; justify-content: space-between; align-items: center; }
.hud-heading button { padding: 5px 8px; font-size: .65rem; }
.machine-name { font-size: 1.06rem; font-weight: 900; margin-bottom: 13px; }
.meter-row, .metric { display: flex; justify-content: space-between; gap: 10px; margin: 8px 0; color: var(--muted); }
.meter-row strong, .metric strong { color: white; }
.mini-bar, .objective-progress { height: 8px; overflow: hidden; background: #050708; border: 1px solid var(--line); border-radius: 99px; margin: 12px 0; }
.mini-bar i { display: block; width: 0; height: 100%; background: linear-gradient(90deg,#39b8ff,#ffc02d,#ff3b20); transition: width .15s; }
.objective-progress i { display: block; width: 0; height: 100%; background: linear-gradient(90deg,#36d879,#ffb000,#ff6a00); transition: width .2s; }
.controls-compact { font-size: .72rem; line-height: 1.55; color: var(--muted); border-top: 1px solid var(--line); padding-top: 10px; }
.completion-state { margin: 12px 0 8px; padding: 9px 10px; border-radius: 7px; border: 1px solid rgba(255,176,0,.28); background: rgba(255,176,0,.08); color: #ffd98d; font-size: .78rem; font-weight: 800; }
.completion-state.complete { color: #c8ffdb; border-color: rgba(81,226,147,.46); background: rgba(81,226,147,.12); }
.fault-list { margin: 10px 0; min-height: 66px; padding: 10px; background: rgba(0,0,0,.25); border: 1px solid var(--line); border-radius: 7px; color: var(--muted); font-size: .76rem; line-height: 1.4; }
.fault-list b { color: #ffb07a; display: block; }
.right-hud button { width: 100%; margin-top: 7px; padding: 9px; font-size: .76rem; }
.guidance-strip { position: absolute; z-index: 7; top: 76px; left: 50%; transform: translateX(-50%); padding: 8px 15px; border: 1px solid rgba(82,235,143,.35); border-radius: 999px; background: rgba(7,15,13,.9); color: #c4ffd8; font-weight: 800; font-size: .78rem; box-shadow: 0 8px 30px rgba(0,0,0,.34); }
.puddle-panel { position: absolute; z-index: 7; left: 50%; bottom: 68px; transform: translateX(-50%); width: min(520px, calc(100vw - 620px)); pointer-events: none; }
.puddle-title, .puddle-readouts { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.puddle-title { margin-bottom: 370px; padding: 7px 10px; font-size: .68rem; letter-spacing: .12em; color: #ffc48f; font-weight: 900; }
.puddle-title button { pointer-events: auto; padding: 4px 7px; font-size: .62rem; }
.puddle-readouts { padding: 6px 10px; border-radius: 8px; background: rgba(8,10,12,.82); border: 1px solid var(--line); color: var(--muted); font-size: .69rem; }
.smith-panel { position: absolute; z-index: 8; left: 50%; transform: translateX(-50%); bottom: 12px; width: min(660px, calc(100vw - 560px)); min-height: 54px; display: flex; gap: 11px; align-items: center; padding: 9px 13px; border: 1px solid rgba(255,123,42,.46); border-radius: 10px; background: rgba(10,13,16,.95); box-shadow: 0 0 32px rgba(255,106,0,.13); }
.smith-avatar { flex: 0 0 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(145deg,#ff8c2b,#8f2b00); font-size: 1.15rem; font-weight: 900; }
.smith-panel strong { color: var(--orange); font-size: .68rem; letter-spacing: .15em; }
.smith-panel p { margin: 3px 0 0; line-height: 1.3; font-size: .84rem; }
.bottom-actions { position: absolute; z-index: 8; bottom: 12px; left: 12px; display: flex; gap: 6px; width: 250px; flex-wrap: wrap; }
.bottom-actions button { flex: 1 1 110px; font-size: .68rem; padding: 8px 9px; }
.inspection-overlay { position: absolute; z-index: 10; left: 24px; top: 100px; width: min(380px, 34vw); padding: 20px; border: 1px solid rgba(255,122,26,.5); border-radius: 13px; background: rgba(8,11,14,.95); box-shadow: 0 22px 70px rgba(0,0,0,.65); }
.inspection-overlay h2 { margin-bottom: 8px; }
.inspection-overlay p { color: var(--muted); line-height: 1.55; }
.inspection-values { display: grid; gap: 8px; margin: 16px 0; }
.inspection-values span { display: flex; justify-content: space-between; padding: 9px 10px; background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 7px; }
.modal { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.8); backdrop-filter: blur(11px); }
.modal-card { width: min(640px,95vw); max-height: 92vh; overflow: auto; background: #10151a; border: 1px solid var(--line); border-radius: 14px; padding: 28px; box-shadow: 0 30px 100px #000; }
.modal-card.wide { width: min(880px,96vw); }
.machine-card { width: min(720px,96vw); }
.machine-console { display: grid; gap: 18px; padding: 20px; margin-top: 18px; background: linear-gradient(145deg,#141b21,#090c0f); border: 1px solid var(--line); border-radius: 12px; }
.machine-console label { grid-template-columns: 1fr auto; align-items: center; }
.machine-console label input, .machine-console label select { grid-column: 1/-1; }
.relation-panel { margin-top: 16px; padding: 14px 16px; background: rgba(82,184,255,.07); border-left: 4px solid var(--blue); line-height: 1.55; }
.score-ring { float: right; margin-top: -70px; width: 110px; height: 110px; display: grid; place-items: center; border-radius: 50%; border: 8px solid var(--orange); background: #080b0e; font-weight: 900; }
.score-ring span { font-size: 2.4rem; line-height: 1; }
.score-ring small { margin-top: -26px; color: var(--muted); }
.result-grid { clear: both; padding-top: 26px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.result-grid article { background: #090d10; border: 1px solid var(--line); border-radius: 8px; padding: 13px; }
.result-grid small { display: block; color: var(--muted); }
.result-grid strong { display: block; margin-top: 5px; font-size: 1.25rem; }
.advice-box { margin-top: 18px; padding: 16px; border-left: 4px solid var(--orange); background: rgba(255,106,0,.08); line-height: 1.55; }
.history-list { display: grid; gap: 10px; margin-top: 20px; }
.history-item { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 13px; border: 1px solid var(--line); border-radius: 8px; background: #090d10; }
.history-item small { color: var(--muted); }
.controls-card { width: min(760px,96vw); }
.control-list { display: grid; gap: 8px; margin: 20px 0; }
.control-list > div { display: grid; grid-template-columns: minmax(165px,auto) 1fr; align-items: center; gap: 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: #090d10; }
kbd { display: inline-block; min-width: 34px; margin-right: 5px; padding: 7px 9px; border: 1px solid #626b75; border-bottom-width: 3px; border-radius: 6px; background: #222a33; color: white; text-align: center; font-weight: 900; box-shadow: inset 0 1px rgba(255,255,255,.08); }
.control-tip { padding: 15px; border-left: 4px solid var(--green); background: rgba(78,227,138,.08); line-height: 1.5; }
.fatal { position: fixed; inset: 0; z-index: 999; padding: 10vw; background: #160606; color: white; }
@media (max-width: 1080px) {
  .info-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #puddleCanvas, .puddle-panel { width: min(430px, calc(100vw - 520px)); }
  .puddle-title { margin-bottom: 305px; }
  .smith-panel { width: calc(100vw - 540px); }
}
@media (max-width: 820px) {
  .form-grid, .info-grid { grid-template-columns: 1fr; }
  .briefing-head { grid-template-columns: 1fr; }
  .goal-box { grid-template-columns: 1fr; }
  .topbar { grid-template-columns: 1fr auto; }
  .status-pills { display: none; }
  .top-actions { justify-content: flex-end; }
  .hud { top: auto; bottom: 150px; width: calc(50vw - 17px); max-height: 230px; overflow: auto; }
  .left-hud { left: 10px; }
  .right-hud { right: 10px; }
  #puddleCanvas, .puddle-panel { display: none; }
  .smith-panel { bottom: 62px; width: calc(100vw - 20px); }
  .bottom-actions { bottom: 8px; width: calc(100vw - 20px); left: 10px; overflow-x: auto; flex-wrap: nowrap; }
  .bottom-actions button { flex: 0 0 auto; }
  .result-grid { grid-template-columns: 1fr 1fr; }
  .inspection-overlay { width: calc(100vw - 32px); left: 16px; top: 90px; }
  .guidance-strip { top: 77px; width: calc(100vw - 24px); text-align: center; }
  .control-list > div { grid-template-columns: 1fr; gap: 8px; }
}
.puddle-panel.compact { width: auto; }
.puddle-panel.compact .puddle-title { margin-bottom: 0; }
.puddle-panel.compact .puddle-readouts { display: none; }

/* 0.4.0-alpha.1 visual overrides */
#menu, #overview, #briefing, #setup {
  background:
    linear-gradient(rgba(5,8,11,.78), rgba(5,8,11,.92)),
    url('../assets/workshop-menu-background-clean.png') center/cover no-repeat fixed;
}
#menu::before, #overview::before, #briefing::before, #setup::before {
  opacity: .10;
}
.hero-card {
  background:
    linear-gradient(180deg, rgba(7,10,13,.58), rgba(7,10,13,.95)),
    url('../assets/workshop-menu-background-clean.png') center top/cover no-repeat;
  border-color: rgba(255,255,255,.18);
}
.hero-card::before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.48), rgba(0,0,0,.18));
  pointer-events:none;
}
.hero-card > * { position: relative; z-index: 1; }
.overview-card, .briefing-card, .setup-card {
  background: linear-gradient(145deg, rgba(12,16,20,.92), rgba(8,11,14,.96));
  backdrop-filter: blur(9px);
}
.version-note, .info-box, .safety-strip, .goal-box, .relation-panel, .advice-box {
  backdrop-filter: blur(6px);
}
#game {
  background:
    radial-gradient(circle at 50% 20%, rgba(255,124,40,.08), transparent 35%),
    linear-gradient(180deg, #05070a 0%, #06090b 100%);
}
.topbar, .hud, .smith-panel, .inspection-overlay {
  background: rgba(7,10,14,.86);
  border-color: rgba(255,255,255,.14);
}
.hud, .smith-panel, .inspection-overlay, .modal-card {
  box-shadow: 0 22px 70px rgba(0,0,0,.45);
}
.quickstart-ribbon {
  position:absolute;
  z-index:7;
  left:50%;
  transform:translateX(-50%);
  top:112px;
  padding:10px 16px;
  border-radius:10px;
  background:rgba(8,12,16,.90);
  border:1px solid rgba(255,166,92,.35);
  color:#f6d9c0;
  font-size:.82rem;
  box-shadow:0 10px 35px rgba(0,0,0,.35);
}
.reference-panel {
  position:absolute;
  z-index:6;
  right:18px;
  bottom:175px;
  width:280px;
}
.reference-card {
  padding:16px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(180deg, rgba(7,10,14,.26), rgba(7,10,14,.90)),
    url('../assets/welding-training-background.png') center/cover no-repeat;
  box-shadow:0 18px 46px rgba(0,0,0,.44);
}
.reference-card h3 { margin: 8px 0 10px; }
.reference-card p { margin:0; color:#dce5eb; line-height:1.5; font-size:.84rem; }
.puddle-title {
  text-shadow:0 0 12px rgba(255,146,54,.35);
}
.modal-card {
  background:
    linear-gradient(180deg, rgba(13,18,23,.96), rgba(10,14,17,.98)),
    radial-gradient(circle at top right, rgba(255,110,0,.08), transparent 40%);
}
.menu-actions button { min-width: 180px; }
.info-grid article, .result-grid article, .history-item, .control-list > div {
  background: linear-gradient(145deg, rgba(255,255,255,.05), rgba(0,0,0,.22));
}
.score-ring {
  box-shadow: 0 0 40px rgba(255,106,0,.22), inset 0 0 28px rgba(255,106,0,.07);
}
@media (max-width: 1080px) {
  .reference-panel { display:none; }
  .quickstart-ribbon { width: calc(100vw - 560px); text-align:center; }
}
@media (max-width: 820px) {
  .quickstart-ribbon { top: 112px; width: calc(100vw - 24px); font-size:.73rem; }
}

.boot-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  padding: .72rem .9rem;
  border: 1px solid rgba(255,176,0,.38);
  border-radius: 8px;
  background: rgba(255,176,0,.08);
  color: #ffd98d;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.boot-status.ready {
  border-color: rgba(81,226,147,.46);
  background: rgba(81,226,147,.10);
  color: #c8ffdb;
}
.boot-status.failed {
  border-color: rgba(255,63,47,.52);
  background: rgba(255,63,47,.10);
  color: #ffbeb8;
}

/* 0.4.0-alpha.4 – hybrid realism and progression */
#realismCanvas {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:2;
  display:block;
  background:#07090b;
  touch-action:none;
}
#glCanvas { position:absolute; inset:0; z-index:1; opacity:0; pointer-events:none; transition:opacity .2s; }
#game.analysis-mode #glCanvas { opacity:0; pointer-events:none; }
#game.analysis-mode #realismCanvas { opacity:1; pointer-events:none; }
#game:not(.analysis-mode) .visor-vignette { z-index:3; }
.completion-overlay {
  position:absolute;
  z-index:30;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(520px,calc(100vw - 44px));
  padding:28px;
  border-radius:16px;
  border:1px solid rgba(81,226,147,.52);
  background:linear-gradient(145deg,rgba(7,15,12,.97),rgba(8,11,14,.98));
  box-shadow:0 30px 110px rgba(0,0,0,.72),0 0 48px rgba(81,226,147,.14);
  text-align:center;
}
.completion-overlay h2 { margin:8px 0 10px; }
.completion-overlay p { color:var(--muted); line-height:1.55; }
.completion-overlay button { margin-top:12px; min-width:250px; }
.exercise-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-top:24px;
}
.exercise-card {
  padding:22px;
  border:1px solid var(--line);
  border-radius:14px;
  background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(0,0,0,.24));
  min-height:260px;
  display:flex;
  flex-direction:column;
}
.exercise-card > span { color:var(--orange); font-weight:900; letter-spacing:.13em; font-size:.74rem; }
.exercise-card h3 { margin:14px 0 10px; font-size:1.35rem; }
.exercise-card p { color:var(--muted); line-height:1.55; flex:1; }
.exercise-card button { width:100%; }
.exercise-card.locked { opacity:.52; filter:grayscale(.6); }
.exercise-card.unlocked { border-color:rgba(255,106,0,.44); }
.result-actions button { min-width:155px; }
.realism-badge {
  position:absolute;
  z-index:8;
  left:50%;
  bottom:84px;
  transform:translateX(-50%);
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(7,10,14,.72);
  color:#d7dee4;
  font-size:.68rem;
  pointer-events:none;
}
@media (max-width:900px){
  .exercise-grid{grid-template-columns:1fr;}
  .exercise-card{min-height:0;}
}

/* ==================================================================
   0.5.0-alpha.1 – KARRIERE- OG OVERBLIKSCENTER
   ================================================================== */
.career-screen {
  padding: 16px;
  background:
    linear-gradient(135deg, rgba(3,6,9,.88), rgba(4,7,10,.70) 46%, rgba(3,6,9,.94)),
    url('../assets/workshop-menu-background-clean.png') center/cover no-repeat fixed;
}
.career-shell {
  width: min(1540px, 98vw);
  max-height: 96vh;
  overflow: auto;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(9,13,17,.96), rgba(5,8,11,.96));
  box-shadow: 0 34px 120px rgba(0,0,0,.78), inset 0 1px rgba(255,255,255,.04);
  backdrop-filter: blur(13px);
}
.career-select-shell { padding: clamp(22px, 3vw, 44px); }
.career-select-head,
.career-dashboard-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.career-select-head h1,
.career-dashboard-head h1 {
  margin: 4px 0 10px;
  font-size: clamp(2rem, 4vw, 4.1rem);
  line-height: .96;
  text-transform: uppercase;
  letter-spacing: .015em;
}
.career-select-head p,
.career-dashboard-head p { color: var(--muted); max-width: 800px; line-height: 1.55; }
.career-logo { width: min(390px, 32vw); max-height: 105px; object-fit: contain; }
.career-slot-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
  margin: 24px 0;
}
.career-slot-card {
  display: flex;
  flex-direction: column;
  min-height: 440px;
  padding: 24px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(155deg, rgba(255,255,255,.055), rgba(0,0,0,.24));
  box-shadow: 0 18px 50px rgba(0,0,0,.30);
}
.career-slot-card.existing { border-color: rgba(255,129,43,.36); }
.career-slot-card h2 { font-size: 1.65rem; margin: 14px 0 4px; }
.career-slot-card h3 { color: #ffb478; margin: 0 0 12px; }
.career-slot-card p { color: var(--muted); line-height: 1.55; }
.career-slot-card > button { margin-top: auto; }
.career-slot-icon { font-size: 2.4rem; }
.career-slot-state { color: var(--orange); font-weight: 900; letter-spacing: .12em; font-size: .7rem; }
.career-slot-metrics,
.career-start-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: auto 0 16px;
}
.career-slot-metrics span,
.career-start-preview {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.26);
  font-size: .78rem;
}
.career-slot-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.career-slot-buttons button { flex: 1; min-width: 90px; }
button.danger { border-color: rgba(255,75,56,.45); color: #ff988e; }
.career-select-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.alpha-data-note {
  margin-top: 18px;
  padding: 13px 15px;
  border-left: 4px solid #ffb000;
  background: rgba(255,176,0,.07);
  color: #e7d8b6;
  line-height: 1.5;
}
.career-create-card label { margin-top: 16px; }
.career-create-card input[type=text] {
  width: 100%; padding: 12px; border-radius: 8px; border: 1px solid var(--line);
  background: #0a0e12; color: white;
}

.career-dashboard-shell { padding: 18px; }
.career-dashboard-head { align-items: center; padding: 8px 8px 18px; }
.career-title-area h1 { font-size: clamp(1.8rem, 3vw, 3.2rem); }
.career-head-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.career-head-actions button { font-size: .72rem; padding: 9px 11px; }
.career-kpi-row {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr 1fr 1fr;
  gap: 10px;
  margin: 14px 0;
}
.career-kpi-row article,
.economy-summary article {
  padding: 14px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(0,0,0,.22));
}
.career-kpi-row span,
.economy-summary span { display:block; color: var(--muted); font-size:.73rem; text-transform:uppercase; letter-spacing:.08em; }
.career-kpi-row strong,
.economy-summary strong { display:block; margin-top:5px; font-size:1.22rem; }
.career-kpi-row small { display:block; margin-top:4px; color:#8f9aa4; }
.career-mini-progress,
.skill-bar,
.condition-bar {
  height: 7px; margin-top: 9px; overflow: hidden; border-radius: 99px;
  background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.10);
}
.career-mini-progress i,
.skill-bar i,
.condition-bar i { display:block; height:100%; background:linear-gradient(90deg,#ff6a00,#ffc15a); }
#careerEnergyBar { background: linear-gradient(90deg,#e24728,#ffc14f,#55db91); }
#careerReputationBar { background: linear-gradient(90deg,#6a6f78,#ff9a43); }
.career-tabs {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 10px 2px;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.career-tabs button {
  flex: 0 0 auto; padding: 9px 12px; font-size: .69rem; background: rgba(255,255,255,.035);
}
.career-tabs button.active { border-color: #ff8138; background: rgba(255,106,0,.15); color:#ffd4b3; }
.career-content { min-height: 500px; padding: 18px 2px; }
.career-overview-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 13px;
}
.career-panel {
  padding: 18px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(0,0,0,.22));
}
.career-panel h2 { font-size: 1.75rem; }
.career-panel h3 { margin-bottom: 12px; }
.career-panel p { color: var(--muted); line-height: 1.5; }
.career-primary-objective {
  grid-column: span 2;
  background:
    linear-gradient(120deg, rgba(6,10,14,.82), rgba(15,8,3,.84)),
    url('../assets/welding-training-background.png') center/cover no-repeat;
  border-color: rgba(255,120,33,.35);
}
.career-primary-objective h2 { max-width: 680px; font-size: clamp(1.8rem,3vw,3rem); }
.career-smith-brief { border-color: rgba(255,117,34,.28); }
.career-action-row { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.career-list { display:grid; gap:8px; }
.career-list > div { display:flex; justify-content:space-between; gap:14px; padding:9px 10px; border-radius:7px; background:rgba(0,0,0,.20); }
.career-list span { color:var(--muted); }
.career-list b { text-align:right; }
.timeline-mini { display:grid; gap:8px; margin-bottom:12px; }
.timeline-mini div { display:grid; grid-template-columns:120px 1fr; gap:10px; padding:8px; border-left:3px solid var(--orange); background:rgba(0,0,0,.20); }
.timeline-mini span { color:var(--muted); }
.career-stock-summary { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; }
.career-stock-summary span { padding:10px; border-radius:8px; background:rgba(0,0,0,.22); color:var(--muted); }
.career-stock-summary b { color:white; font-size:1.2rem; }
.career-section-head { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:16px; }
.career-section-head h2 { font-size:clamp(1.7rem,3vw,2.8rem); margin-bottom:6px; }
.career-section-head p { color:var(--muted); }
.task-board { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.task-card { display:flex; flex-direction:column; min-height:280px; padding:17px; border-radius:12px; border:1px solid rgba(255,255,255,.11); background:rgba(255,255,255,.035); }
.task-card > div { display:flex; justify-content:space-between; gap:10px; color:var(--orange); font-size:.7rem; font-weight:900; }
.task-card p { color:var(--muted); line-height:1.5; }
.task-card small { margin-top:auto; color:#aab2b9; }
.task-card button { margin-top:13px; }
.task-card.locked { opacity:.55; }
.task-card.completed { border-color:rgba(81,226,147,.30); }
.week-grid { display:grid; grid-template-columns:repeat(7,minmax(130px,1fr)); gap:8px; overflow-x:auto; }
.day-column { min-height:330px; padding:12px; border:1px solid rgba(255,255,255,.10); border-radius:10px; background:rgba(255,255,255,.025); }
.day-column.today { border-color:rgba(255,116,32,.55); box-shadow:inset 0 0 0 1px rgba(255,116,32,.15); }
.day-column h3 { font-size:.95rem; }
.calendar-event { display:grid; gap:3px; margin:8px 0; padding:9px; border-radius:8px; border-left:3px solid #77818b; background:rgba(0,0,0,.25); }
.calendar-event.training { border-color:#ff7a28; }
.calendar-event.fixed { border-color:#4f8db5; }
.calendar-event.planning { border-color:#d7aa46; }
.calendar-event b { font-size:.72rem; }
.calendar-event span { font-size:.78rem; color:#d5dce1; }
.economy-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:13px; }
.transaction-list { display:grid; max-height:390px; overflow:auto; }
.transaction-list > div { display:grid; grid-template-columns:75px 1fr 120px 120px; gap:10px; align-items:center; padding:10px 6px; border-bottom:1px solid rgba(255,255,255,.08); }
.transaction-list time,.transaction-list small { color:var(--muted); }
.transaction-list b { text-align:right; }
.transaction-list .positive { color:#67e79b; }
.transaction-list .negative { color:#ff8f84; }
.equipment-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.equipment-card { padding:18px; border:1px solid rgba(255,255,255,.11); border-radius:12px; background:rgba(255,255,255,.035); }
.equipment-head { display:flex; justify-content:space-between; gap:12px; }
.equipment-head span { color:var(--orange); font-size:.7rem; font-weight:900; }
.equipment-head b { font-size:.75rem; color:#c6d0d7; }
.materials-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.materials-grid article { display:grid; gap:12px; padding:18px; border-radius:12px; border:1px solid rgba(255,255,255,.11); background:rgba(255,255,255,.035); }
.materials-grid span { color:var(--muted); min-height:42px; }
.materials-grid strong { font-size:1.65rem; }
.skill-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.skill-grid article { padding:14px; border:1px solid rgba(255,255,255,.10); border-radius:10px; background:rgba(255,255,255,.03); }
.skill-grid article > div:first-child { display:flex; justify-content:space-between; gap:10px; }
.smith-center-grid { display:grid; grid-template-columns:.8fr 1.4fr 1fr; gap:13px; }
.smith-portrait-panel { text-align:center; }
.smith-large-avatar { width:110px; height:110px; margin:0 auto 15px; display:grid; place-items:center; border-radius:50%; background:linear-gradient(145deg,#ff8735,#692300); font-size:3rem; font-weight:900; box-shadow:0 0 45px rgba(255,106,0,.22); }
.smith-center-grid label { margin-top:14px; }
.career-footer { display:flex; justify-content:space-between; gap:18px; align-items:center; padding-top:14px; border-top:1px solid rgba(255,255,255,.10); }
.career-footer-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.career-autosave { color:var(--muted); font-size:.8rem; }
.career-autosave.saved { color:#69e69c; }
.career-toast { position:fixed; z-index:150; right:28px; bottom:28px; max-width:430px; padding:15px 18px; border-radius:10px; border:1px solid rgba(255,255,255,.18); background:#111820; box-shadow:0 18px 60px rgba(0,0,0,.55); }
.career-toast.success { border-color:rgba(81,226,147,.55); }
.career-toast.warning { border-color:rgba(255,176,0,.55); }
.career-toast.error { border-color:rgba(255,73,59,.55); }
.career-game-bar {
  position:absolute; z-index:7; left:50%; top:150px; transform:translateX(-50%);
  display:flex; align-items:center; gap:6px; max-width:calc(100vw - 560px); padding:6px;
  border-radius:10px; border:1px solid rgba(255,255,255,.13); background:rgba(6,9,12,.88); backdrop-filter:blur(10px);
}
.career-game-bar span { display:grid; min-width:90px; padding:5px 8px; border-right:1px solid rgba(255,255,255,.09); }
.career-game-bar span:nth-child(4) { min-width:180px; }
.career-game-bar small { color:var(--muted); font-size:.58rem; text-transform:uppercase; letter-spacing:.08em; }
.career-game-bar strong { font-size:.72rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.career-game-bar button { padding:7px 9px; font-size:.65rem; }

@media (max-width: 1180px) {
  .career-slot-grid { grid-template-columns:1fr; }
  .career-slot-card { min-height:0; }
  .career-kpi-row { grid-template-columns:repeat(3,1fr); }
  .career-overview-grid { grid-template-columns:1fr 1fr; }
  .career-primary-objective { grid-column:span 2; }
  .task-board { grid-template-columns:1fr 1fr; }
  .equipment-grid { grid-template-columns:1fr 1fr; }
  .materials-grid { grid-template-columns:1fr 1fr; }
  .smith-center-grid { grid-template-columns:1fr 1fr; }
  .smith-center-grid > :last-child { grid-column:span 2; }
  .career-game-bar { display:none; }
}
@media (max-width: 760px) {
  .career-screen { padding:6px; }
  .career-shell { max-height:99vh; border-radius:10px; }
  .career-select-head,.career-dashboard-head,.career-footer,.career-section-head { flex-direction:column; }
  .career-logo { width:80%; }
  .career-kpi-row,.career-overview-grid,.task-board,.equipment-grid,.materials-grid,.skill-grid,.smith-center-grid,.economy-summary { grid-template-columns:1fr; }
  .career-primary-objective,.smith-center-grid > :last-child { grid-column:auto; }
  .transaction-list > div { grid-template-columns:60px 1fr 95px; }
  .transaction-list small { display:none; }
  .career-footer-actions,.career-head-actions { justify-content:flex-start; }
}

/* ==================================================================
   0.6.0-alpha.1 – KARRIERE, KUNDER, PROJEKTER OG DRIFTSOVERBLIK
   ================================================================== */
.career-kpi-row { grid-template-columns: 1.22fr 1fr 1fr 1fr 1fr 1.05fr; }
.career-tabs { scrollbar-width: thin; scrollbar-color: #8a3b0b rgba(0,0,0,.2); }
.career-tabs button { min-height: 38px; }
.upgraded-overview { grid-template-columns: 1.35fr 1fr 1fr; }
.operations-card,
.customer-opportunity,
.active-order-card { min-height: 250px; }
.active-order-card { border-color: rgba(79,214,146,.34); background: linear-gradient(150deg,rgba(26,76,55,.20),rgba(0,0,0,.27)); }
.customer-opportunity { border-color: rgba(255,136,47,.35); background: linear-gradient(150deg,rgba(111,49,10,.23),rgba(0,0,0,.27)); }
.panel-heading-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.panel-heading-row button { padding:7px 9px; font-size:.64rem; }
.notification-list { display:grid; gap:8px; }
.notification { display:grid; gap:3px; padding:10px 12px; border-radius:9px; border-left:4px solid #6d7780; background:rgba(0,0,0,.23); }
.notification span { color:var(--muted); font-size:.82rem; line-height:1.4; }
.notification.warning { border-color:#f1ad38; }
.notification.success { border-color:#55d794; }
.notification.error { border-color:#ff6559; }
.path-summary,.customer-kpi,.project-kpi,.workshop-score { display:grid; min-width:130px; text-align:center; padding:12px 16px; border:1px solid rgba(255,255,255,.11); border-radius:12px; background:rgba(255,255,255,.035); }
.path-summary strong,.customer-kpi strong,.project-kpi strong,.workshop-score strong { font-size:2rem; color:#ffb378; }
.path-summary span,.customer-kpi span,.project-kpi span,.workshop-score span { color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; }
.path-progress,.project-progress-line,.mini-project-progress { height:11px; overflow:hidden; border-radius:99px; border:1px solid rgba(255,255,255,.12); background:rgba(0,0,0,.45); }
.path-progress { margin-bottom:18px; }
.path-progress i,.project-progress-line i,.mini-project-progress i { display:block; height:100%; background:linear-gradient(90deg,#ff6a00,#ffc55f,#5bd58f); }
.milestone-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.milestone-card { min-height:230px; display:flex; flex-direction:column; padding:18px; border-radius:13px; border:1px solid rgba(255,255,255,.11); background:linear-gradient(145deg,rgba(255,255,255,.04),rgba(0,0,0,.25)); }
.milestone-card > span { color:var(--orange); font-size:.7rem; letter-spacing:.12em; font-weight:900; }
.milestone-card h3 { margin:18px 0 8px; font-size:1.35rem; }
.milestone-card p { color:var(--muted); line-height:1.5; }
.milestone-card > b { margin-top:auto; font-size:.72rem; color:#aeb8bf; }
.milestone-card.completed { border-color:rgba(76,221,145,.42); box-shadow:inset 0 0 40px rgba(56,190,120,.07); }
.milestone-card.completed > b { color:#67e69d; }
.milestone-card.locked { opacity:.52; }
.roadmap-panel { margin-top:14px; }
.roadmap-columns { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.roadmap-columns div { display:grid; gap:6px; padding:14px; border-radius:10px; background:rgba(0,0,0,.23); }
.roadmap-columns span { color:var(--muted); line-height:1.45; }
.expanded-task-board { grid-template-columns:repeat(3,minmax(0,1fr)); }
.customer-layout { display:grid; grid-template-columns:.72fr 1.1fr 1.4fr; gap:13px; align-items:start; }
.customer-head,.supplier-head { display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.customer-avatar { width:68px; height:68px; display:grid; place-items:center; border-radius:50%; background:linear-gradient(145deg,#ff8734,#692300); font-weight:900; font-size:1.4rem; box-shadow:0 0 30px rgba(255,105,0,.18); }
.customer-head span,.supplier-head span { color:var(--orange); font-size:.68rem; font-weight:900; letter-spacing:.09em; }
.customer-head h3,.supplier-head h3 { margin:2px 0 3px; }
.spec-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:15px; }
.spec-grid span { display:grid; gap:4px; padding:11px; border-radius:8px; background:rgba(0,0,0,.25); }
.spec-grid small { color:var(--muted); }
.quote-builder { grid-column:span 1; border-color:rgba(255,126,40,.32); }
.quote-form { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.quote-form label { position:relative; display:grid; gap:6px; color:#c8d0d6; font-size:.78rem; }
.quote-form input { width:100%; padding:12px 48px 12px 11px; border:1px solid rgba(255,255,255,.15); border-radius:8px; background:#080c10; color:white; font-size:1rem; }
.quote-form label > span { position:absolute; right:11px; bottom:12px; color:var(--muted); }
.quote-preview { display:grid; gap:3px; margin:14px 0 4px; padding:15px; border-radius:10px; border:1px solid rgba(255,133,43,.34); background:linear-gradient(145deg,rgba(255,110,0,.11),rgba(0,0,0,.25)); }
.quote-preview span { color:var(--muted); font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; }
.quote-preview strong { font-size:2.05rem; }
.quote-preview small { color:#aab4bb; }
.quote-result { min-height:300px; }
.quote-result.accepted { border-color:rgba(74,220,142,.39); }
.quote-result.counter { border-color:rgba(255,176,50,.42); }
.project-stack { display:grid; gap:14px; }
.production-project { border-color:rgba(255,126,40,.30); }
.project-title-row { display:flex; justify-content:space-between; gap:18px; align-items:flex-start; }
.project-title-row > div:first-child > span { color:var(--orange); font-size:.7rem; font-weight:900; letter-spacing:.09em; }
.project-title-row h2 { margin:4px 0 6px; }
.project-score { display:grid; min-width:90px; text-align:center; }
.project-score strong { font-size:2rem; color:#ffb274; }
.project-score span { color:var(--muted); font-size:.72rem; }
.production-steps { display:grid; gap:8px; margin-top:14px; }
.production-step { display:grid; grid-template-columns:42px 1fr auto; gap:12px; align-items:center; padding:13px; border-radius:10px; border:1px solid rgba(255,255,255,.09); background:rgba(0,0,0,.22); }
.production-step.completed { border-color:rgba(72,218,141,.26); background:rgba(45,132,92,.10); }
.production-step.locked { opacity:.53; }
.production-step.available { border-color:rgba(255,130,41,.35); }
.production-step h3 { margin:3px 0 4px; }
.production-step p { margin:0; }
.production-step span { color:var(--orange); font-size:.64rem; letter-spacing:.08em; font-weight:900; }
.production-step small { display:block; margin-top:5px; color:#9ba6ae; }
.step-number { width:38px; height:38px; display:grid; place-items:center; border-radius:50%; background:#151b21; border:1px solid rgba(255,255,255,.13); font-weight:900; }
.production-step button { min-width:150px; }
.project-footer-info { display:flex; gap:20px; justify-content:flex-end; flex-wrap:wrap; padding-top:12px; color:var(--muted); }
.project-footer-info b { color:white; }
.subsection-title { margin:22px 0 12px; }
.project-library { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.library-project { min-height:230px; display:flex; flex-direction:column; padding:17px; border-radius:12px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.03); }
.library-project > span { color:var(--orange); font-size:.68rem; letter-spacing:.1em; font-weight:900; }
.library-project p { color:var(--muted); line-height:1.5; }
.library-project button { margin-top:auto; }
.library-project.locked,.library-project.library { opacity:.56; }
.planning-steps { display:grid; gap:10px; margin-top:16px; }
.planning-step { display:grid; grid-template-columns:48px 1fr auto; align-items:center; gap:14px; padding:14px; border-radius:11px; border:1px solid rgba(255,255,255,.10); background:rgba(0,0,0,.22); }
.planning-step > span { width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background:#172027; font-weight:900; }
.planning-step p { margin:4px 0 0; }
.planning-step.locked { opacity:.52; }
.plan-result { margin-top:16px; padding:18px; border-radius:12px; border:1px solid rgba(76,219,144,.35); background:rgba(49,144,96,.09); }
.calendar-event.deadline { border-color:#ff554e; }
.calendar-event.customer { border-color:#59d69a; }
.calendar-event.supplier { border-color:#a879e7; }
.economy-summary.expanded { grid-template-columns:repeat(5,1fr); }
.economy-layout { display:grid; grid-template-columns:1.7fr .8fr; gap:13px; }
.workshop-map { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.workshop-zone { min-height:300px; display:flex; flex-direction:column; padding:17px; border-radius:13px; border:1px solid rgba(255,255,255,.11); background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(0,0,0,.28)); }
.workshop-zone.level-2 { border-color:rgba(255,133,45,.32); }
.workshop-zone.level-3 { border-color:rgba(79,219,143,.38); }
.zone-icon { font-size:2.1rem; }
.workshop-zone > span { margin-top:10px; color:var(--orange); font-size:.68rem; font-weight:900; letter-spacing:.1em; }
.workshop-zone p { color:var(--muted); line-height:1.45; }
.zone-benefit { margin:auto 0 12px; padding:10px; border-radius:8px; background:rgba(0,0,0,.26); color:#dce3e8; font-size:.78rem; }
.workshop-health { margin-top:13px; }
.expanded-materials { grid-template-columns:repeat(4,minmax(0,1fr)); margin-bottom:13px; }
.expanded-materials article { position:relative; }
.expanded-materials article small { color:#67df9a; }
.expanded-materials article.low-stock { border-color:rgba(255,165,42,.39); }
.expanded-materials article.low-stock small { color:#ffb141; }
.supplier-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.supplier-logo-text { min-width:78px; height:58px; display:grid; place-items:center; padding:0 10px; border-radius:9px; background:linear-gradient(145deg,#ec772f,#592100); font-weight:1000; font-size:1.2rem; letter-spacing:.03em; }
.supplier-catalog { display:grid; gap:8px; margin-top:14px; }
.supplier-catalog article { display:grid; grid-template-columns:1fr auto auto; gap:10px; align-items:center; padding:11px; border-radius:9px; background:rgba(0,0,0,.24); }
.supplier-catalog article > div { display:grid; gap:3px; }
.supplier-catalog article span { color:var(--muted); font-size:.72rem; }
.supplier-catalog button { padding:8px 10px; }
.skill-layout { display:grid; grid-template-columns:1.5fr .8fr; gap:13px; }
.training-recommendation { display:grid; gap:5px; padding:12px; margin-bottom:8px; border-radius:9px; background:rgba(0,0,0,.23); }
.training-recommendation span { color:var(--muted); font-size:.78rem; }
.training-recommendation button { margin-top:5px; }
.upgraded-smith { grid-template-columns:.8fr 1.5fr 1fr; }

.upgraded-game-bar { max-width:calc(100vw - 520px); top:146px; }
.upgraded-game-bar span:nth-child(4),
.upgraded-game-bar span:nth-child(5) { min-width:145px; }
.mission-drawer {
  position:absolute; z-index:7; top:205px; left:50%; transform:translateX(-50%);
  width:min(760px,calc(100vw - 620px)); padding:10px 12px; border-radius:12px;
  border:1px solid rgba(255,132,43,.38); background:rgba(7,10,13,.90); backdrop-filter:blur(12px);
  box-shadow:0 18px 55px rgba(0,0,0,.44); transition:.18s ease;
}
.mission-drawer header { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.mission-drawer header > div { display:grid; gap:2px; }
.mission-drawer header small { color:var(--orange); letter-spacing:.1em; font-weight:900; }
.mission-drawer header strong { font-size:1rem; }
.mission-drawer header button { padding:6px 8px; font-size:.62rem; }
.mission-drawer-grid { display:grid; grid-template-columns:1fr 1fr 1.35fr; gap:8px; margin-top:9px; }
.mission-drawer-grid article { display:grid; gap:4px; padding:9px; border-radius:8px; background:rgba(255,255,255,.035); }
.mission-drawer-grid span { color:var(--muted); font-size:.63rem; text-transform:uppercase; letter-spacing:.06em; }
.mission-drawer-grid b { font-size:.75rem; line-height:1.25; }
.mission-actions { display:flex; gap:7px; justify-content:flex-end; margin-top:8px; }
.mission-actions button { padding:7px 9px; font-size:.64rem; }
.mission-drawer.collapsed { width:280px; padding:7px 9px; }
.mission-drawer.collapsed .mission-drawer-grid,
.mission-drawer.collapsed .mission-actions { display:none; }
.mission-drawer.collapsed header button::before { content:'VIS '; }

@media (max-width: 1360px) {
  .career-kpi-row { grid-template-columns:repeat(3,1fr); }
  .customer-layout { grid-template-columns:1fr 1fr; }
  .quote-builder,.quote-result { grid-column:span 2; }
  .workshop-map { grid-template-columns:repeat(3,1fr); }
  .mission-drawer { width:min(640px,calc(100vw - 560px)); }
}
@media (max-width: 1180px) {
  .milestone-grid,.project-library { grid-template-columns:1fr 1fr; }
  .customer-layout,.supplier-grid,.skill-layout,.economy-layout { grid-template-columns:1fr; }
  .quote-builder,.quote-result { grid-column:auto; }
  .workshop-map { grid-template-columns:1fr 1fr; }
  .economy-summary.expanded { grid-template-columns:1fr 1fr; }
  .mission-drawer { top:170px; width:calc(100vw - 24px); }
}
@media (max-width: 760px) {
  .milestone-grid,.project-library,.workshop-map,.roadmap-columns,.expanded-task-board,.expanded-materials { grid-template-columns:1fr; }
  .production-step,.planning-step { grid-template-columns:42px 1fr; }
  .production-step button,.planning-step button { grid-column:span 2; width:100%; }
  .project-title-row { flex-direction:column; }
  .quote-form,.spec-grid { grid-template-columns:1fr; }
  .supplier-catalog article { grid-template-columns:1fr auto; }
  .supplier-catalog button { grid-column:span 2; }
  .economy-summary.expanded { grid-template-columns:1fr; }
  .mission-drawer { top:160px; width:calc(100vw - 20px); }
  .mission-drawer-grid { grid-template-columns:1fr; }
}


/* 0.7.0-alpha.1 – præcision, akut hjælp, lyd og realisme */
.toolbar-button.emergency,.bottom-actions .emergency { border-color:rgba(255,83,49,.78); background:linear-gradient(180deg,#7b2418,#37100c); color:#fff; box-shadow:0 0 0 1px rgba(255,105,62,.18),0 0 22px rgba(255,64,24,.13); }
.precision-control { display:grid; grid-template-columns:auto minmax(130px,1fr) 92px auto; gap:8px; align-items:center; margin-top:7px; }
.precision-control button { padding:9px 10px; min-width:55px; font-size:.72rem; }
.precision-number { width:92px; padding:10px; border:1px solid rgba(255,146,67,.42); border-radius:8px; background:#080b0e; color:#fff; font-weight:900; text-align:center; }
.precision-number:focus { outline:2px solid rgba(255,126,40,.55); outline-offset:1px; }
.live-precision { grid-template-columns:auto minmax(160px,1fr) 90px auto; }
.target-window { margin-top:13px; padding:12px 14px; border:1px solid rgba(73,215,144,.35); border-radius:9px; background:rgba(44,135,91,.10); color:#eaf8ef; line-height:1.5; }
.target-window small { color:#a9b9b0; }
#soundPill.muted { border-color:rgba(255,98,70,.42); color:#ffb0a0; }
.acute-help-card { max-width:1050px; }
.help-header-row { display:grid; grid-template-columns:1fr auto; gap:20px; align-items:start; }
.context-badge { padding:9px 12px; border-radius:999px; border:1px solid rgba(255,132,42,.44); color:#ffb275; background:rgba(255,103,0,.10); font-size:.72rem; font-weight:900; letter-spacing:.08em; }
.challenge-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:9px; margin:18px 0; }
.challenge-grid button { min-height:104px; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:6px; padding:12px; text-align:left; border-color:rgba(255,255,255,.12); }
.challenge-grid button strong { color:#fff; line-height:1.25; }
.challenge-grid button span { color:#9facb4; font-size:.72rem; line-height:1.35; }
.challenge-grid button.selected { border-color:rgba(255,133,42,.72); background:linear-gradient(150deg,rgba(255,105,0,.20),rgba(38,15,5,.75)); }
.help-question-label { display:grid; gap:7px; color:#cbd3d8; font-weight:800; }
.help-question-label textarea { resize:vertical; min-height:94px; padding:13px; border:1px solid rgba(255,255,255,.16); border-radius:10px; background:#080c0f; color:white; font:inherit; line-height:1.45; }
.help-context-summary { margin-top:12px; padding:10px 12px; border-radius:8px; background:rgba(255,255,255,.04); color:#aeb9c0; font-size:.78rem; }
.help-answer { min-height:100px; margin-top:10px; padding:16px; border-radius:11px; border-left:4px solid var(--orange); background:linear-gradient(130deg,rgba(255,111,0,.11),rgba(7,10,13,.86)); color:#eef3f6; line-height:1.6; white-space:pre-line; }
.audio-settings-card { max-width:760px; }
.audio-setting-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:17px 0; }
.audio-setting-grid label { display:grid; gap:7px; padding:13px; border-radius:9px; background:rgba(255,255,255,.04); color:#cad2d7; }
.audio-setting-grid label span { justify-self:end; margin-top:-25px; color:#ffb273; font-weight:900; }
.audio-setting-grid select { padding:11px; border:1px solid rgba(255,255,255,.16); border-radius:8px; background:#090d10; color:white; }
.audio-setting-grid .toggle-label { grid-template-columns:auto 1fr; align-items:center; }
.audio-setting-grid .toggle-label input { width:20px; height:20px; }
.audio-status-panel { padding:13px; border-radius:9px; border:1px solid rgba(73,215,144,.28); background:rgba(46,134,91,.10); color:#cceedd; }
body[data-graphics="performance"] #realismCanvas { filter:contrast(1.02) saturate(.92); }
body[data-graphics="balanced"] #realismCanvas { filter:contrast(1.06) saturate(1.05); }
body[data-graphics="high"] #realismCanvas { filter:contrast(1.10) saturate(1.10) brightness(1.02); }
@media(max-width:1200px){.challenge-grid{grid-template-columns:repeat(3,1fr)}.precision-control,.live-precision{grid-template-columns:auto 1fr 82px auto}}
@media(max-width:760px){.challenge-grid{grid-template-columns:1fr 1fr}.audio-setting-grid{grid-template-columns:1fr}.help-header-row{grid-template-columns:1fr}.precision-control,.live-precision{grid-template-columns:auto 1fr auto}.precision-number{grid-column:1/-1;width:100%}}

/* 0.8.0-alpha.1 – rigtige udfordringer */
.real-challenge-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:18px 0}
.real-challenge-card{display:flex;flex-direction:column;gap:10px;min-height:265px;padding:18px;border:1px solid rgba(255,255,255,.11);border-radius:14px;background:linear-gradient(150deg,rgba(18,23,27,.96),rgba(6,8,10,.98));box-shadow:0 18px 45px rgba(0,0,0,.22)}
.real-challenge-card.completed{border-color:rgba(56,222,131,.5);box-shadow:inset 0 0 0 1px rgba(56,222,131,.08),0 18px 45px rgba(0,0,0,.22)}
.real-challenge-card>span{color:#ff8b2a;font-size:.72rem;font-weight:900;letter-spacing:.12em}.real-challenge-card h3{margin:0;color:#fff}.real-challenge-card p{flex:1;color:#aeb8bf;line-height:1.45}.real-challenge-card button{width:100%}
.challenge-result-line{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-top:1px solid rgba(255,255,255,.08)}.challenge-result-line b{color:#fff}.challenge-result-line small{color:#8d99a2}
.work-challenge-card{max-width:980px}.work-challenge-head{display:grid;grid-template-columns:1fr auto;gap:22px;align-items:start}.challenge-attempt-badge{padding:12px 14px;border:1px solid rgba(255,133,42,.45);border-radius:10px;background:rgba(71,31,7,.55);font-size:.72rem;line-height:1.3;color:#ffb06a;text-align:center}.challenge-attempt-badge strong{color:#fff}
.challenge-progress-row{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;margin:18px 0}.challenge-progress-row>span{font-weight:900;color:#dce4e8}.challenge-progress-row>div{height:9px;border-radius:999px;background:#14191c;overflow:hidden;border:1px solid rgba(255,255,255,.08)}.challenge-progress-row i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ff6b00,#ffc24d);transition:width .25s}
.challenge-question-panel{padding:20px;border:1px solid rgba(255,255,255,.11);border-radius:14px;background:linear-gradient(145deg,rgba(7,10,12,.98),rgba(17,21,24,.98))}.challenge-question-panel h3{font-size:1.2rem;line-height:1.4;margin:0 0 16px;color:#fff}
.challenge-options{display:grid;gap:9px}.challenge-options label{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;padding:12px 14px;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:rgba(255,255,255,.025);cursor:pointer}.challenge-options label:hover{border-color:rgba(255,133,42,.48);background:rgba(255,107,0,.06)}.challenge-options input{width:20px;height:20px;accent-color:#ff7900}.challenge-options span{color:#e7ecef;line-height:1.35}
.challenge-number-input{display:block;color:#c6d0d5;font-weight:800}.challenge-number-input>div{display:flex;align-items:center;gap:10px;margin-top:10px}.challenge-number-input input{width:min(340px,100%);font-size:1.4rem;font-weight:900;padding:13px 15px;border-radius:9px;border:1px solid rgba(255,255,255,.18);background:#090c0e;color:#fff}.challenge-number-input span{font-weight:900;color:#ff9b47}
.challenge-order{display:grid;gap:10px}.challenge-order>p{color:#aeb8bf}.challenge-order label{display:grid;grid-template-columns:38px 1fr;gap:10px;align-items:center}.challenge-order label b{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#1e2529;color:#ff9b47}.challenge-order select{width:100%;padding:11px;border-radius:8px;background:#0a0d0f;color:#fff;border:1px solid rgba(255,255,255,.14)}
.challenge-feedback{margin:14px 0;padding:14px 16px;border-radius:10px;line-height:1.5}.challenge-feedback.success{border:1px solid rgba(56,222,131,.45);background:rgba(18,91,55,.24);color:#d9ffea}.challenge-feedback.warning{border:1px solid rgba(255,185,66,.45);background:rgba(108,69,8,.24);color:#ffe7b9}.challenge-feedback.error{border:1px solid rgba(255,82,62,.45);background:rgba(102,18,16,.28);color:#ffd0ca}.challenge-feedback.info{border:1px solid rgba(100,170,255,.35);background:rgba(17,52,94,.25);color:#dbeaff}
.challenge-final{display:grid;place-items:center;text-align:center;gap:8px;padding:25px}.challenge-final strong{font-size:3.6rem;line-height:1;color:#fff}.challenge-final span{font-weight:900}.challenge-final.passed strong{color:#45e58b}.challenge-final.failed strong{color:#ff6a55}.challenge-final p{color:#b8c1c6}
.challenge-rules{margin-top:16px}
@media(max-width:1000px){.real-challenge-grid{grid-template-columns:1fr 1fr}}@media(max-width:680px){.real-challenge-grid{grid-template-columns:1fr}.work-challenge-head{grid-template-columns:1fr}.challenge-attempt-badge{text-align:left}.challenge-progress-row{grid-template-columns:1fr}}