/* NEXORA crisiswerkplek. Alleen systeemlettertypes en eigen tekeningen (geen externe bronnen). */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { font: 14px/1.45 "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; color: #1b1b1b; background: #0b2a6f; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid #4cc2ff; outline-offset: 1px; }
svg { display: block; width: 100%; height: 100%; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.small { font-size: 12px; color: #616161; }
.notice { position: fixed; left: 50%; bottom: 64px; transform: translateX(-50%); background: #2b2b2b; color: #fff; padding: 9px 16px; border-radius: 6px; z-index: 99999; font-size: 13px; box-shadow: 0 6px 20px rgba(0,0,0,.35); }

/* ---------- knoppen ---------- */
.wbtn { background: #fff; border: 1px solid #d1d1d1; border-bottom-color: #bdbdbd; border-radius: 4px; padding: 5px 14px; min-height: 30px; }
.wbtn:hover:not(:disabled) { background: #f6f6f6; }
.wbtn:disabled { opacity: .5; cursor: default; }
.wbtn.primary { background: #0f6cbd; border-color: #0f6cbd; color: #fff; }
.wbtn.primary:hover:not(:disabled) { background: #115ea3; }
.wbtn.danger { color: #c42b1c; }
.wbtn.big { padding: 9px 18px; font-weight: 600; margin-top: 10px; }
.linkbtn { background: none; border: 0; padding: 0; color: #0f6cbd; text-decoration: underline; font-size: 13px; margin-top: 14px; }
.linux .wbtn.primary { background: #e95420; border-color: #e95420; }
.linux .wbtn { border-radius: 6px; }

/* ---------- vergrendelscherm (startpagina) ---------- */
.lock { position: fixed; inset: 0; color: #fff; display: grid; grid-template-columns: 1fr minmax(300px, 380px); gap: 40px; padding: 48px 64px; align-items: center; overflow: auto;
  background: radial-gradient(ellipse 60% 70% at 72% 62%, #5b9cff 0%, #2459d6 28%, #0d2f86 58%, #051640 100%); }
.lock::before { content: ""; position: fixed; inset: 0; background: radial-gradient(ellipse 40% 30% at 20% 20%, rgba(120,170,255,.25), transparent 70%); pointer-events: none; }
.lclock { align-self: start; position: relative; }
.ltime { font-size: 96px; font-weight: 300; line-height: 1; letter-spacing: -2px; }
.ldate { font-size: 22px; font-weight: 400; margin-top: 6px; text-transform: lowercase; }
.lnote { grid-column: 1; align-self: end; max-width: 460px; background: rgba(20,24,40,.55); backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: 14px 18px; position: relative; }
.lnote p { margin: 6px 0; font-size: 13px; color: #e8ecf6; }
.lnote .small { color: #b8c2d8; }
.lnhead { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #b8c2d8; }
.lnhead span:first-child { width: 18px; height: 18px; }
.lnhead b { color: #fff; font-size: 13px; }
.lnhead span:last-child { margin-left: auto; }
.conf { font-weight: 700; color: #ffb4a8 !important; }
.lform { grid-column: 2; grid-row: 1 / span 2; background: rgba(28,32,48,.6); backdrop-filter: blur(24px); border: 1px solid rgba(255,255,255,.14); border-radius: 10px; padding: 28px; display: flex; flex-direction: column; gap: 10px; position: relative; }
.llogo { height: 34px; width: auto; align-self: center; background: #fff; padding: 6px 12px; border-radius: 6px; margin-bottom: 4px; }
.lform h1 { font-size: 18px; font-weight: 600; text-align: center; margin: 4px 0 8px; }
.lform input[type=text], .lform input:not([type]) { background: rgba(255,255,255,.92); color: #1b1b1b; border: 0; border-bottom: 2px solid #0f6cbd; border-radius: 4px; padding: 9px 11px; width: 100%; }
.lform .code { letter-spacing: .2em; text-transform: uppercase; }
.lcheck { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.lerr { color: #ffb4a8; font-size: 13px; margin: 0; }
.lbtn { border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.12); color: #fff; border-radius: 4px; padding: 9px; }
.lbtn:hover { background: rgba(255,255,255,.2); }
.lbtn.primary { background: #0f6cbd; border-color: #0f6cbd; font-weight: 600; }
.lform .small { color: #b8c2d8; text-align: center; margin: 4px 0 0; }
.lprivacy { position: fixed; right: 20px; bottom: 14px; color: #dbe4f6; font-size: 12px; }

/* ---------- desktop ---------- */
.desk { position: fixed; inset: 0; overflow: hidden; }
.desk.windows { background: radial-gradient(ellipse 60% 70% at 72% 62%, #5b9cff 0%, #2459d6 28%, #0d2f86 58%, #051640 100%); }
.desk.linux { background: radial-gradient(circle at 85% 95%, #f3742b 0%, #e95420 10%, #a8352f 24%, #77216f 46%, #3d0a35 70%, #2c001e 100%); font-family: Ubuntu, "Noto Sans", "Segoe UI", system-ui, sans-serif; }
.area { position: absolute; inset: 0 0 48px 0; }
.linux .area { inset: 32px 0 0 64px; }

/* taakbalk (Windows) */
.taskbar { position: absolute; left: 0; right: 0; bottom: 0; height: 48px; background: rgba(32,32,32,.84); backdrop-filter: blur(24px) saturate(1.4); border-top: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; z-index: 9000; }
.tbcenter { display: flex; gap: 2px; align-items: center; }
.pins { display: flex; gap: 2px; }
.start, .pin { position: relative; width: 44px; height: 40px; border: 0; background: transparent; border-radius: 6px; display: grid; place-items: center; padding: 9px; }
.start img { width: 24px; height: 24px; object-fit: contain; }
.start:hover, .pin:hover { background: rgba(255,255,255,.09); }
.pin.focused { background: rgba(255,255,255,.12); }
.pin.open::after { content: ""; position: absolute; bottom: 2px; left: 50%; width: 6px; height: 3px; margin-left: -3px; background: #9aa4b2; border-radius: 2px; }
.pin.focused::after { width: 16px; margin-left: -8px; background: #4cc2ff; }
.pin.flash { animation: flash 1s steps(2) infinite; }
@keyframes flash { 50% { background: rgba(255,170,0,.55); } }
.badge { position: absolute; top: 2px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #c42b1c; color: #fff; font-size: 10px; line-height: 16px; font-weight: 700; }
.tray { position: absolute; right: 8px; top: 0; bottom: 0; display: flex; align-items: center; gap: 4px; color: #fff; }
.traybtn { width: 32px; height: 32px; border: 0; background: transparent; color: #fff; border-radius: 4px; padding: 7px; }
.traybtn:hover { background: rgba(255,255,255,.09); }
.tclock { display: flex; flex-direction: column; align-items: flex-end; font-size: 12px; line-height: 1.25; padding: 0 8px; }

/* topbalk en dock (Ubuntu) */
.topbar { position: absolute; left: 0; right: 0; top: 0; height: 32px; background: #000; color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; z-index: 9000; font-size: 13px; font-weight: 500; }
.topbar .act { background: transparent; border: 0; color: #fff; padding: 3px 12px; border-radius: 14px; }
.topbar .act:hover { background: rgba(255,255,255,.15); }
.tcenter { position: absolute; left: 50%; transform: translateX(-50%); }
.topbar .tray { position: static; }
.dock { position: absolute; left: 0; top: 32px; bottom: 0; width: 64px; background: rgba(20,20,20,.72); backdrop-filter: blur(12px); z-index: 9000; padding: 8px 0; }
.dock .pins { flex-direction: column; align-items: center; gap: 6px; }
.dock .pin { width: 48px; height: 48px; padding: 8px; border-radius: 10px; }
.dock .pin.open::after { left: -2px; top: 50%; bottom: auto; width: 4px; height: 4px; margin: -2px 0 0; background: #e95420; border-radius: 50%; }
.dock .pin.focused::after { width: 4px; height: 12px; margin-top: -6px; background: #e95420; }

/* toasts */
.toasts { position: absolute; right: 12px; bottom: 60px; display: flex; flex-direction: column; gap: 8px; z-index: 9500; width: 340px; max-width: calc(100vw - 24px); }
.linux .toasts { left: 50%; right: auto; transform: translateX(-50%); top: 40px; bottom: auto; }
.toast { display: flex; gap: 10px; align-items: flex-start; text-align: left; background: #2b2b2b; color: #fff; border: 1px solid #3d3d3d; border-radius: 8px; padding: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.4); animation: tin .25s ease-out; }
.linux .toast { background: #303030; border-radius: 12px; }
@keyframes tin { from { transform: translateY(10px); opacity: 0; } }
.ticon { width: 22px; height: 22px; flex: none; }
.ttext { display: flex; flex-direction: column; min-width: 0; }
.ttext b { font-size: 13px; }
.ttext span { font-size: 12px; color: #cfcfcf; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 270px; }

/* vensters */
.win { position: absolute; display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(0,0,0,.28); border-radius: 8px; box-shadow: 0 14px 44px rgba(0,0,0,.38); overflow: hidden; min-width: 260px; min-height: 120px; }
.win.max { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; border-radius: 0; }
.wbar { flex: none; height: 34px; display: flex; align-items: center; gap: 8px; padding-left: 10px; background: #eeeeee; user-select: none; touch-action: none; }
.win.active .wbar { background: #f3f3f3; }
.win:not(.active) .wtitle { color: #8a8a8a; }
.wicon { width: 16px; height: 16px; flex: none; }
.wtitle { flex: 1; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wctl { display: flex; height: 100%; }
.wctl button { width: 46px; height: 100%; border: 0; background: transparent; font-size: 11px; color: #1b1b1b; }
.wctl button:hover { background: rgba(0,0,0,.07); }
.wmin::before { content: "\2014"; }
.wmax::before { content: "\25A2"; font-size: 13px; }
.wclose::before { content: "\2715"; font-size: 12px; }
.wctl .wclose:hover { background: #c42b1c; color: #fff; }
.wbody { flex: 1; overflow: auto; position: relative; container-type: inline-size; }
.linux .win { border-radius: 12px 12px 6px 6px; border-color: rgba(0,0,0,.5); }
.linux .wbar { background: #2c2c2c; color: #fff; height: 38px; justify-content: center; padding: 0 8px; }
.linux .win.active .wbar { background: #303030; }
.linux .wtitle { text-align: center; font-weight: 600; font-size: 13px; }
.linux .win:not(.active) .wtitle { color: #aaa; }
.linux .wicon { display: none; }
.linux .wctl { gap: 10px; align-items: center; }
.linux .wctl button { width: 22px; height: 22px; border-radius: 50%; background: #464646; color: #fff; font-size: 9px; }
.linux .wctl button:hover { background: #5a5a5a; }
.linux .wctl .wclose:hover { background: #e95420; }

/* dialoog en pop-up */
.dlg { display: flex; gap: 14px; padding: 18px 18px 8px; }
.dlgicon { width: 32px; height: 32px; flex: none; }
.dlg b { display: block; margin-bottom: 6px; }
.dlg p { margin: 4px 0; }
.dlg pre { white-space: pre-wrap; font: 13px/1.5 Consolas, "Ubuntu Mono", "Courier New", monospace; margin: 0; }
.dlgbtns { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; background: #f3f3f3; border-top: 1px solid #e5e5e5; }
.p-hacker .dlg { background: #fff; }
.p-hacker .dlg pre { color: #a4262c; font-weight: 600; }
.p-hacker { animation: shake .5s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.p-soc .dlg pre { color: #1b1b1b; }
.p-final .wbody, .p-dedsec .wbody { background: #0b1324; }
.p-final .dlgbtns, .p-dedsec .dlgbtns { background: #0b1324; border-top: 1px solid #1e2a44; }
.fin { padding: 22px 24px 16px; color: #e6edf7; font: 14px/1.5 "Segoe UI", system-ui, sans-serif; }
.finhead { display: flex; align-items: center; gap: 10px; font-size: 17px; margin-bottom: 14px; }
.findot { width: 10px; height: 10px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.18); }
.finrows { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 0 0 16px; padding: 12px 14px; background: #111c33; border: 1px solid #1e2a44; border-radius: 6px; font: 13px Consolas, "Ubuntu Mono", monospace; }
.finrows dt { color: #8aa0c2; } .finrows dd { margin: 0; color: #9fe8b0; font-weight: 600; } .finrows dd.warn { color: #fbbf24; }
.finquote { margin: 0; padding-left: 12px; border-left: 3px solid #ef4444; color: #cbd5e1; font-style: italic; }
.p-dedsec { animation: shake .5s; }
.dsec { display: flex; gap: 16px; padding: 16px; background: #000; color: #e5e5e5; }
.dsec img { width: 150px; height: 225px; object-fit: cover; flex: none; image-rendering: pixelated; }
.dsec b { display: block; color: #fff; font: 700 16px Consolas, monospace; margin-bottom: 8px; letter-spacing: .05em; text-transform: uppercase; }
.dsec pre { white-space: pre-wrap; margin: 0; font: 13px/1.5 Consolas, "Ubuntu Mono", monospace; color: #d4d4d4; }
.p-dedsec .wbody, .p-dedsec .dlgbtns { background: #000; border-color: #222; }
@media (max-width: 520px) { .dsec { flex-direction: column; align-items: center; } }
.mgif { display: block; width: 200px; max-width: 100%; margin: 12px 0; background: #000; border-radius: 4px; }
.mbody.dedsec { background: #000; color: #e5e5e5; }
.progwrap { display: flex; flex-direction: column; gap: 4px; }
.progtxt { font-size: 12px; color: #555; }
.tprog { color: #8ae234; white-space: pre; overflow: hidden; text-overflow: ellipsis; padding: 2px 0; }

/* ---------- webmail ---------- */
.mtop { height: 40px; background: #0f6cbd; color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; position: sticky; top: 0; }
.linux .mtop { background: #3a3a3a; }
.muser { font-size: 12px; opacity: .9; }
.mcols { display: grid; grid-template-columns: 150px minmax(200px, 300px) 1fr; height: calc(100% - 40px); }
.mfolders { background: #f5f5f5; border-right: 1px solid #e5e5e5; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.mfold { text-align: left; border: 0; background: transparent; padding: 7px 10px; border-radius: 4px; font-size: 13px; }
.mfold:hover { background: #ebebeb; }
.mfold.sel { background: #dbe8f7; font-weight: 600; }
.mlist { overflow-y: auto; border-right: 1px solid #e5e5e5; }
.mitem { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; width: 100%; text-align: left; border: 0; border-bottom: 1px solid #f0f0f0; background: #fff; padding: 9px 12px 9px 14px; position: relative; }
.mitem:hover { background: #f5f9fe; }
.mitem.sel { background: #dbe8f7; }
.mitem.unread::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #0f6cbd; }
.mitem.unread .mfrom, .mitem.unread .msubj { font-weight: 700; }
.mfrom { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mtime { font-size: 11px; color: #707070; }
.msubj { grid-column: 1 / -1; font-size: 12px; color: #424242; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mitem.hk .msubj, .mitem.al .msubj { color: #c42b1c; }
.mtag { grid-column: 1 / -1; justify-self: start; font-size: 10px; font-weight: 700; color: #8a5300; background: #fff4ce; padding: 0 6px; border-radius: 3px; margin-top: 3px; }
.mread { overflow-y: auto; padding: 18px 22px; }
.mread h2 { font-size: 18px; font-weight: 600; margin: 0 0 10px; }
.mread h2.red { color: #c42b1c; }
.mmeta { font-size: 12px; color: #616161; border-bottom: 1px solid #eee; padding-bottom: 10px; margin-bottom: 12px; }
.mmeta b { color: #1b1b1b; font-size: 13px; }
.mread .wbtn { margin-bottom: 12px; }
.mbody { white-space: pre-wrap; font-size: 14px; max-width: 72ch; }
.mbody.mono { font-family: Consolas, "Ubuntu Mono", monospace; background: #f7f7f7; padding: 12px; border-radius: 4px; }
.mempty { color: #8a8a8a; margin-top: 40px; text-align: center; }
@container (max-width: 680px) {
  .mcols { grid-template-columns: 1fr; grid-template-rows: auto 40% 1fr; }
  .mfolders { flex-direction: row; border-right: 0; border-bottom: 1px solid #e5e5e5; padding: 4px; }
  .mlist { border-right: 0; border-bottom: 1px solid #e5e5e5; }
}

/* ---------- crisis monitor ---------- */
.wbody:has(> .mhead) { background: #111827; color: #e5e7eb; padding: 12px 14px; }
.mhead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.mphase { font-weight: 600; font-size: 15px; }
.mclock { font-variant-numeric: tabular-nums; color: #9ca3af; font-size: 12px; }
.deadline { margin-top: 8px; background: #3f1d1d; color: #fecaca; border: 1px solid #7f1d1d; border-radius: 6px; padding: 6px 10px; font-weight: 600; font-variant-numeric: tabular-nums; }
.deadline.urgent { animation: flash2 1s steps(2) infinite; }
@keyframes flash2 { 50% { background: #7f1d1d; color: #fff; } }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.tile { background: #1f2937; border-radius: 6px; padding: 8px 12px; display: grid; grid-template-columns: 1fr auto; align-items: baseline; }
.tile span:first-child { grid-column: 1 / -1; font-size: 12px; color: #9ca3af; }
.tile b { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tile span:last-child { font-size: 12px; }
.t-threat b { color: #f87171; } .t-imago b { color: #fbbf24; }
.chart { background: #0b1220; border-radius: 6px; padding: 6px; }
.chart .gl { stroke: #1f2937; } .chart .ax { fill: #6b7280; font-size: 10px; }
.ln-threat { fill: none; stroke: #f87171; stroke-width: 2.2; } .ln-imago { fill: none; stroke: #fbbf24; stroke-width: 2.2; }
.legend { display: flex; gap: 16px; font-size: 12px; margin-top: 6px; color: #9ca3af; }
.legend span::before { content: ""; display: inline-block; width: 14px; height: 3px; vertical-align: middle; margin-right: 6px; }
.lg-threat::before { background: #f87171; } .lg-imago::before { background: #fbbf24; }
.facts { margin-top: 8px; font-size: 12px; color: #a7f3d0; }

/* ---------- MSM messenger ---------- */
.msmwin .wbody { display: flex; flex-direction: column; background: linear-gradient(#e3eefc, #c9dcf5); overflow: hidden; }
.msmhead { display: flex; gap: 10px; align-items: center; padding: 8px 10px; background: linear-gradient(#f5f9ff, #d6e5fa); border-bottom: 1px solid #a9c3e8; }
.msmlogo { width: 30px; height: 30px; flex: none; }
.msmhead b { color: #1f3d73; font-size: 13px; }
.msmto { font-size: 11px; color: #4a6491; }
.msmlog { flex: 1; overflow-y: auto; background: #fff; margin: 8px 8px 0; border: 1px solid #93b3df; padding: 8px 10px; font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-size: 13px; }
.msmmsg { margin-bottom: 6px; }
.msmwho { color: #555; font-size: 12px; }
.msmtext { padding-left: 12px; color: #1b1b1b; white-space: pre-wrap; word-break: break-word; }
.msminput { display: flex; gap: 6px; margin: 6px 8px 0; }
.msminput textarea { flex: 1; resize: none; border: 1px solid #93b3df; padding: 5px 7px; font-family: Tahoma, Verdana, "Segoe UI", sans-serif; font-size: 13px; }
.msmsend { border: 1px solid #6f8fbf; background: linear-gradient(#fdfdfd, #dfe9f7); border-radius: 3px; padding: 0 12px; font-family: Tahoma, Verdana, sans-serif; font-size: 12px; }
.msmsend:hover { background: linear-gradient(#fff, #cfe0f7); }
.msmnote { font-size: 10px; color: #4a6491; padding: 4px 9px 6px; }

/* rolkleuren */
.r-CEO { color: #9a7b00 !important; } .r-CISO { color: #c34113 !important; } .r-PO { color: #6b4fa0 !important; } .r-COM { color: #0b6a0b !important; }
.av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: #eceff3; flex: none; }
.av.r-CEO { background: #fff4c2; } .av.r-CISO { background: #fde0d4; } .av.r-PO { background: #ebe3f7; } .av.r-COM { background: #dff3df; }

/* ---------- team ---------- */
.mine { padding: 12px 14px; background: #f7f9fc; border-bottom: 1px solid #e5e5e5; font-size: 13px; }
.mine p { margin: 4px 0 8px; color: #424242; }
.teamlist { list-style: none; margin: 0; padding: 6px 10px; }
.teamlist li { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px solid #f0f0f0; }
.tm { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.tm span { font-size: 12px; color: #616161; }
.st { font-size: 11px; color: #616161; }
.st.on::before, .st.off::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; background: #6bb700; }
.st.off::before { background: #bdbdbd; }

/* ---------- opdrachten ---------- */
.tnote { margin: 0; padding: 10px 14px; background: #fff8e6; border-bottom: 1px solid #f1e3b8; font-size: 12px; color: #6b5200; }
.tasks { padding: 6px 10px; }
.task { padding: 10px 4px; border-bottom: 1px solid #f0f0f0; display: flex; flex-direction: column; gap: 6px; }
.ttitle { display: flex; flex-direction: column; }
.trole { font-size: 11px; color: #616161; }
.task.s-locked .ttitle b { color: #9e9e9e; }
.prog { height: 6px; background: #e5e5e5; border-radius: 3px; overflow: hidden; }
.prog i { display: block; height: 100%; width: 0; background: #0f6cbd; transition: width .25s linear; }
.okmark { font-size: 12px; color: #107c10; font-weight: 600; }
.tlock { font-size: 12px; color: #9e9e9e; }

/* ---------- terminal ---------- */
.termwin .wbody { background: #300a24; color: #f2f2f2; font: 13px/1.5 "Ubuntu Mono", "DejaVu Sans Mono", Consolas, monospace; display: flex; flex-direction: column; padding: 8px 10px; }
.tout { flex: 1; overflow-y: auto; white-space: pre-wrap; word-break: break-word; }
.tcmd { color: #fff; } .tok { color: #8ae234; } .terr { color: #ef2929; } .twarn { color: #fce94f; } .tdone { color: #729fcf; font-weight: 700; }
.tline { display: flex; gap: 8px; }
.tp { color: #8ae234; font-weight: 700; white-space: nowrap; }
.tin { flex: 1; background: transparent; border: 0; color: #fff; outline: none; font: inherit; caret-color: #fff; min-width: 0; }
.tquick { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px; border-top: 1px solid #5e2750; margin-top: 6px; }
.tq { background: #5e2750; color: #fff; border: 0; border-radius: 4px; padding: 3px 8px; font: 12px "Ubuntu Mono", Consolas, monospace; }
.tq:hover:not(:disabled) { background: #77216f; }
.tq:disabled { opacity: .45; cursor: default; }
.tq { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; padding: 5px 9px; cursor: pointer; }
.tq b { font: 600 12px Ubuntu, "Segoe UI", sans-serif; }
.tq small { font-size: 11px; opacity: .75; }
.tq.go { background: #3e8e41; } .tq.go:hover { background: #4caf50 !important; }

/* ---------- verkenner ---------- */
.fbar { padding: 8px 12px; border-bottom: 1px solid #e5e5e5; font-size: 12px; color: #424242; background: #fafafa; }
.fcols { display: grid; grid-template-columns: 150px 1fr; height: calc(100% - 34px); }
.fnav { display: flex; flex-direction: column; padding: 8px; gap: 2px; border-right: 1px solid #e5e5e5; font-size: 13px; }
.fnav span { padding: 5px 8px; border-radius: 4px; }
.fnav .sel { background: #e5f1fb; }
.fgrid { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; padding: 12px; }
.file { width: 96px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px; border: 1px solid transparent; background: transparent; border-radius: 4px; font-size: 12px; text-align: center; word-break: break-word; }
.file:hover { background: #e5f1fb; }
.file.sel { background: #cce4f7; border-color: #99c9ef; }
.ficon { width: 44px; height: 44px; }
.linux .fnav .sel, .linux .file.sel { background: #f6d6c8; border-color: #e95420; }

/* ---------- snake ---------- */
.snakehead { display: flex; justify-content: space-between; padding: 8px 12px; font-weight: 600; }
.snakecv { display: block; margin: 0 auto; image-rendering: pixelated; width: 300px; height: 300px; max-width: 100%; }
.spad { display: flex; justify-content: center; gap: 6px; padding: 10px; flex-wrap: wrap; }

/* ---------- crisisoverleg ---------- */
.votewin, .introwin, .popup { max-height: calc(100% - 24px); }
.votewin .wbody { padding: 18px 22px; }
.votewin .wbar { background: #c42b1c !important; color: #fff; }
.votewin .wtitle { color: #fff !important; font-weight: 600; }
.votewin .wctl button { color: #fff; }
.vhead { display: flex; justify-content: space-between; align-items: baseline; font-size: 16px; }
.vtimer { font-variant-numeric: tabular-nums; color: #c42b1c; font-weight: 600; }
.vq { font-size: 17px; font-weight: 600; margin: 10px 0; }
.bob { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0 0 12px; flex-wrap: wrap; }
.bob li { flex: 1; min-width: 150px; background: #f5f5f5; border-radius: 4px; padding: 6px 10px; font-size: 12px; color: #424242; }
.vopts { display: grid; gap: 8px; }
.vopt { display: flex; gap: 12px; text-align: left; border: 1px solid #d1d1d1; background: #fff; border-radius: 6px; padding: 12px 14px; }
.vopt:hover:not(:disabled) { border-color: #0f6cbd; background: #f5f9fe; }
.vopt b { color: #8a8a8a; }
.vopt.sel { border-color: #0f6cbd; background: #e5f1fb; box-shadow: inset 3px 0 0 #0f6cbd; }
.vopt.sel b { color: #0f6cbd; }
.vopt:disabled { cursor: default; }
.vvoters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.vvoters span { font-size: 12px; background: #f0f0f0; border-radius: 10px; padding: 2px 10px; color: #616161; }
.vvoters span.in { background: #dff6dd; color: #107c10; }
.vnote, .vclose { font-size: 12px; color: #616161; margin: 8px 0 0; }
.vclose { color: #107c10; font-weight: 600; }
.vwait { color: #8a8a8a; text-align: center; margin-top: 40px; }

/* ---------- introductie ---------- */
.introwin .wbody { padding: 24px 28px 16px; }
.icontent h2 { font-size: 22px; font-weight: 600; margin: 0 0 12px; }
.icontent p { margin: 0 0 10px; }
.ilist { list-style: none; padding: 0; margin: 0 0 10px; }
.ilist li { display: grid; grid-template-columns: 24px auto; column-gap: 10px; padding: 5px 0; }
.ilist li span { width: 22px; height: 22px; grid-row: span 2; }
.iwait { font-size: 12px; color: #0f6cbd; min-height: 18px; margin: 10px 0 0; }
.inav { display: flex; gap: 8px; justify-content: flex-end; align-items: center; margin-top: 14px; }
.dots { margin-right: auto; display: flex; gap: 6px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: #d1d1d1; }
.dots i.on { background: #0f6cbd; }

/* ---------- observatie ---------- */
.wbody:has(> .bobt) { padding: 12px; }
.bobt { width: 100%; border-collapse: collapse; font-size: 13px; }
.bobt th, .bobt td { padding: 6px; text-align: center; border-bottom: 1px solid #eee; }
.bobt td:first-child { text-align: left; }

/* ---------- wachtruimte ---------- */
.wbody:has(> .lcode) { padding: 18px 22px; }
.lcode { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; background: #f5f9fe; border: 1px solid #cfe0f5; border-radius: 6px; padding: 12px 16px; margin-bottom: 14px; }
.bigcode { font-size: 34px; font-weight: 600; letter-spacing: .2em; line-height: 1.1; }
.wbody h3 { font-size: 15px; font-weight: 600; margin: 14px 0 4px; }
.lroles { display: grid; gap: 6px; margin-top: 8px; }
.lrole { display: flex; gap: 12px; align-items: center; border: 1px solid #e5e5e5; border-radius: 6px; padding: 10px 12px; }
.lrole.mine { border-color: #0f6cbd; background: #f5f9fe; }
.lrt { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.lrt span { font-size: 12px; color: #616161; }
.lrs { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 90px; }
.lcols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.lhost select { width: 100%; padding: 6px 8px; border: 1px solid #d1d1d1; border-radius: 4px; margin-top: 4px; }

/* ---------- evaluatie ---------- */
.wbody:has(> div > .everdict) { padding: 18px 24px; }
.everdict { border-radius: 6px; padding: 14px 18px; margin-bottom: 8px; }
.everdict h2 { font-size: 26px; font-weight: 600; margin: 0 0 4px; }
.everdict p { margin: 0; }
.everdict.win { background: #dff6dd; color: #0b4f0b; }
.everdict.lose { background: #fde7e9; color: #8a1c13; }
.ecols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.echeck { list-style: none; padding: 0; margin: 0; font-size: 13px; }
.echeck li { padding: 4px 0 4px 24px; position: relative; }
.echeck li::before { position: absolute; left: 0; font-weight: 700; }
.echeck li.y::before { content: "\2713"; color: #107c10; }
.echeck li.n::before { content: "\2715"; color: #c42b1c; }
.echeck li.n { color: #616161; }
.erev { border-left: 4px solid #107c10; background: #fafafa; padding: 10px 14px; margin: 8px 0; border-radius: 0 4px 4px 0; display: flex; flex-direction: column; gap: 2px; }
.erev.no { border-left-color: #c42b1c; }
.erev p { margin: 2px 0; font-size: 13px; }
.eaar label { display: block; font-weight: 600; font-size: 13px; margin: 10px 0 4px; }
.eaar textarea { width: 100%; border: 1px solid #d1d1d1; border-radius: 4px; padding: 7px 9px; resize: vertical; }
.eaar .wbtn { margin-top: 10px; }
.ehost { display: flex; gap: 8px; margin-top: 16px; }

/* ---------- privacypagina ---------- */
.doc-page { overflow: auto !important; background: #f3f3f3; }
.doc { max-width: 760px; margin: 32px auto; padding: 24px 32px 40px; background: #fff; border: 1px solid #e5e5e5; border-radius: 8px; }
.doc h1 { font-size: 26px; font-weight: 600; } .doc h2 { font-size: 18px; font-weight: 600; margin-top: 24px; }
.doc table { border-collapse: collapse; width: 100%; font-size: 13px; }
.doc td, .doc th { border: 1px solid #e5e5e5; padding: 7px 9px; text-align: left; vertical-align: top; }
.fill { background: #fff4ce; padding: 0 4px; }

/* ---------- smal scherm ---------- */
@media (max-width: 899px) {
  .lock { grid-template-columns: 1fr; padding: 24px 18px 60px; gap: 18px; }
  .ltime { font-size: 64px; } .ldate { font-size: 18px; }
  .lform, .lnote { grid-column: 1; grid-row: auto; }
  .win { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; border-radius: 0; }
  .linux .area { inset: 32px 0 56px 0; }
  .dock { top: auto; bottom: 0; left: 0; right: 0; width: auto; height: 56px; padding: 0 6px; }
  .dock .pins { flex-direction: row; justify-content: center; height: 100%; }
  .dock .pin { width: 44px; height: 44px; }
  .tray .tclock .date { display: none; }
  .taskbar { justify-content: flex-start; padding-left: 4px; overflow-x: auto; }
  .tray { position: static; margin-left: auto; }
  .lcols, .ecols { grid-template-columns: 1fr; }
  .fcols { grid-template-columns: 1fr; } .fnav { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- bureaubladiconen ---------- */
.icons { position: absolute; top: 10px; left: 8px; bottom: 10px; display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-start; gap: 4px; z-index: 1; }
.dicon { width: 82px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: #fff; font-size: 12px; text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.dicon:hover { background: rgba(255,255,255,.12); }
.dicon.sel { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.35); }
.diconimg { width: 38px; height: 38px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.linux .dicon { border-radius: 8px; }

/* ---------- kladblok ---------- */
.nbar { display: flex; gap: 14px; padding: 4px 10px; font-size: 12px; border-bottom: 1px solid #e5e5e5; background: #fafafa; }
.notes { width: 100%; height: calc(100% - 26px); border: 0; resize: none; padding: 10px 12px; font: 13px/1.55 Consolas, "Ubuntu Mono", "Courier New", monospace; outline: none; }
.linux .nbar { display: none; }
.linux .notes { height: 100%; }

/* ---------- rolbriefing ---------- */
.bh { font-size: 16px; font-weight: 600; margin: 12px 0 2px; }
.icontent ul, .brief ul { margin: 4px 0 10px; padding-left: 20px; font-size: 13px; }
.icontent ul li, .brief ul li { margin-bottom: 3px; }
.btip { background: #eef6fc; border-left: 3px solid #0f6cbd; padding: 6px 10px; font-size: 13px; }
.linux .btip { background: #fbeee8; border-left-color: #e95420; }
.brief { margin-bottom: 6px; }
.introwin .wbody { max-height: calc(100vh - 140px); overflow-y: auto; }
@media (max-width: 899px) { .icons { display: none; } }

/* ---------- impact van opdrachten ---------- */
.timpact { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.chip { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 10px; background: #f0f0f0; color: #424242; }
.chip.good { background: #dff6dd; color: #0b6a0b; }
.chip.bad { background: #fde7e9; color: #a4262c; }
.chip.cost { background: #fff4ce; color: #8a5300; }
.tnote2 { font-size: 12px; color: #616161; font-style: italic; }
.timp { color: #c4a000; }
.tiles { grid-template-columns: 1fr 1fr 1fr; }
.t-cost b { color: #93c5fd; font-size: 20px; }
@container (max-width: 420px) { .tiles { grid-template-columns: 1fr 1fr; } }

/* ---------- verkenningstijd ---------- */
.explore { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); z-index: 8999; display: flex; gap: 12px; align-items: center; max-width: min(760px, calc(100% - 24px)); background: rgba(255,255,255,.96); border: 1px solid #cfe0f5; border-left: 4px solid #0f6cbd; border-radius: 8px; padding: 10px 14px; box-shadow: 0 8px 24px rgba(0,0,0,.25); font-size: 13px; }
.linux .explore { top: 44px; border-left-color: #e95420; }

/* ---------- winst: 8-bit animatie ---------- */
.winover { position: fixed; inset: 0; z-index: 99990; background: radial-gradient(circle at 50% 40%, #13203f, #050816 70%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 20px; }
.pix { width: min(768px, 94vw); aspect-ratio: 192 / 120; height: auto; image-rendering: pixelated; border: 4px solid #1e293b; border-radius: 6px; box-shadow: 0 0 0 4px #0b1020, 0 20px 60px rgba(0,0,0,.6); }
.wintitle { animation: pop .5s steps(4), blink 1.2s steps(2) .6s infinite !important; margin: 0; color: #facc15; font: 700 clamp(22px, 4vw, 40px)/1.1 "Courier New", Consolas, monospace; letter-spacing: .06em; text-transform: uppercase; text-shadow: 3px 3px 0 #b45309, 6px 6px 0 #000; text-align: center; animation: pop .5s steps(4); }
@keyframes pop { from { transform: scale(.4); } }

/* ---------- verlies: lockdown ---------- */
.lockdown { position: fixed; inset: 0; z-index: 99990; background: #120202 repeating-linear-gradient(0deg, rgba(255,0,0,.035) 0 2px, transparent 2px 4px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 16px; overflow: auto; }
.lkflash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; animation: lkf .7s ease-out forwards; }
.lkwall { position: fixed; inset: 0; pointer-events: none; display: flex; flex-direction: column; justify-content: flex-start; padding: 28px 32px; gap: 6px; color: rgba(255,255,255,.16); font-family: "Segoe UI", Tahoma, sans-serif; }
.lkwall b { font-size: clamp(22px, 3.4vw, 44px); }
.lkwall span { font-size: 15px; }
.lockdown .ransom, .lockdown .rnext { position: relative; }
/* lockdown-sequentie op het bureaublad */
.win.wclose, .wclose { transition: transform .2s ease-in, opacity .2s ease-in; transform: scale(.85); opacity: 0; }
.desk.glitch .area { animation: glt .35s steps(2) 3; }
@keyframes glt { 50% { filter: hue-rotate(160deg) contrast(1.6); transform: translateX(3px); } }
.desk.pwned { background: #120202 !important; }
.desk.pwned > * { transition: opacity .6s; opacity: 0; }
.desk.pwned::after { content: "Ooops, jullie bestanden zijn versleuteld!"; position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; color: #ff3b3b; font: 700 clamp(22px, 3.6vw, 46px) "Segoe UI", Tahoma, sans-serif; background: #120202 repeating-linear-gradient(0deg, rgba(255,0,0,.05) 0 2px, transparent 2px 4px); }
@keyframes lkf { 0% { opacity: .95; } 30% { opacity: 0; background: #f00; } 45% { opacity: .5; } 100% { opacity: 0; } }
.ransom { width: min(860px, 100%); background: #a10f0f; color: #fff; border: 1px solid #5a0000; box-shadow: 0 30px 80px rgba(0,0,0,.7); font-family: "Segoe UI", Tahoma, sans-serif; }
.ransom.shake { animation: shake .4s; }
.rbar { display: flex; justify-content: space-between; background: #f3f3f3; color: #1b1b1b; padding: 6px 10px; font-size: 12px; }
.rx { color: #999; }
.rbody { display: grid; grid-template-columns: 220px 1fr; gap: 14px; padding: 14px; }
.rlock { width: 120px; height: 120px; margin: 4px auto 14px; }
.rbox { border: 1px solid #ff8a8a; background: #7a0909; padding: 8px; margin-bottom: 10px; text-align: center; }
.rbox b { color: #ffd54a; font-size: 13px; }
.rtimer { font: 700 26px/1.2 Consolas, "Courier New", monospace; letter-spacing: 2px; margin-top: 4px; }
.rsig { font: 700 14px Consolas, monospace; color: #fff; opacity: .8; text-align: center; margin-top: 12px; }
.rright h2 { margin: 0 0 8px; font-size: 22px; text-align: center; }
.rtext { background: #fff; color: #1b1b1b; padding: 10px 14px; height: 230px; overflow-y: auto; font-size: 13px; border: 1px solid #5a0000; }
.rtext h3 { margin: 8px 0 4px; font-size: 15px; }
.rtext p { margin: 0 0 6px; }
.rmono { font-family: Consolas, monospace; color: #a10f0f; font-weight: 700; }
.rpay { margin-top: 10px; font-size: 13px; color: #ffd54a; font-weight: 600; }
.raddr { display: flex; gap: 6px; margin-top: 4px; }
.raddr code { flex: 1; background: #7a0909; border: 1px solid #ff8a8a; padding: 6px 8px; color: #fff; font-size: 13px; }
.raddr button, .rbtns button { background: #f3f3f3; border: 1px solid #999; color: #1b1b1b; padding: 6px 14px; }
.rbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.rbtns button { font-weight: 700; padding: 9px; }
.rdenied { color: #ffd54a; font-weight: 700; margin: 8px 0 0; }
.rnext { background: #fff; color: #a10f0f; border: 0; border-radius: 4px; padding: 10px 20px; font-weight: 700; animation: pop .4s; }
@media (max-width: 700px) { .rbody { grid-template-columns: 1fr; } .rlock { width: 70px; height: 70px; } }

/* ---------- evaluatie: leerpunten ---------- */
.emeters { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.emeters span { background: #f3f3f3; border-radius: 4px; padding: 4px 10px; font-size: 13px; font-weight: 600; }
.elessons { background: #fff8e6; border: 1px solid #f1e3b8; border-radius: 6px; padding: 10px 16px; margin: 10px 0; }
.elessons h3 { margin-top: 2px; }
.elessons ul { margin: 4px 0; padding-left: 20px; font-size: 13px; }
.elessons li { margin-bottom: 4px; }

@keyframes blink { 50% { color: #fde68a; text-shadow: 3px 3px 0 #92400e, 6px 6px 0 #000; } }
.budget { margin: 8px 0; font-size: 12px; color: #cbd5e1; background: #1f2937; border-radius: 6px; padding: 6px 10px; }
.budget b { color: #e5e7eb; }
.budget.low { background: #3f1d1d; color: #fecaca; }
.dls { margin-top: 8px; font-size: 12px; display: grid; gap: 4px; }
.dls > b { color: #e5e7eb; }
.dl { display: flex; justify-content: space-between; gap: 10px; background: #1f2937; border-radius: 4px; padding: 4px 8px; color: #cbd5e1; }
.dl span:last-child { text-align: right; white-space: nowrap; }
.dl.ok { color: #86efac; } .dl.late { color: #fca5a5; background: #3f1d1d; }
.vprep { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; margin: 0 0 10px; }
.vprep span { padding: 2px 8px; border-radius: 10px; }
.vprep .ok { background: #dff6dd; color: #0b6a0b; } .vprep .no { background: #f3f3f3; color: #8a8a8a; }
.p-final, .p-dedsec { background: #0b1324; }