/* 13.3.1: Master-Aktionen – Kontrollraum. Eigene Gestaltung, bewusst ohne .panel/.btn der übrigen App. */
.mx { --mx-bg: #07060A; --mx-ink: #E9E1D2; --mx-dim: #8C8172; --mx-gold: #E9B45A; --mx-red: #B3122E; --mx-line: rgba(233, 180, 90, .18);
  position: relative; margin: -8px; min-height: calc(100vh - 80px); padding: 22px 24px 40px; background:
    radial-gradient(1200px 500px at 85% -10%, rgba(179, 18, 46, .22), transparent 60%), radial-gradient(900px 400px at -10% 110%, rgba(233, 180, 90, .10), transparent 60%), var(--mx-bg);
  color: var(--mx-ink); font-family: var(--mono, 'Cascadia Mono', Consolas, monospace); overflow: hidden; border-radius: 6px; }
.mx-scan { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px); mix-blend-mode: overlay; }
.mx-head { position: relative; display: grid; grid-template-columns: 92px 1fr auto; gap: 18px; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--mx-line); }
.mx-head::after { content: ''; position: absolute; left: 0; bottom: -1px; height: 1px; width: 38%; background: linear-gradient(90deg, var(--mx-red), transparent); animation: mxSweep 4s ease-in-out infinite; }
@keyframes mxSweep { 50% { width: 72%; } }
.mx-seal svg { width: 92px; height: 92px; filter: drop-shadow(0 0 14px rgba(233, 180, 90, .35)); }
.mx-k { font-size: 11px; letter-spacing: .32em; color: var(--mx-gold); text-transform: uppercase; }
.mx-title h1 { margin: 2px 0 4px; font: 800 34px/1 var(--font-cond, 'Bahnschrift', sans-serif); letter-spacing: .04em; text-transform: uppercase; background: linear-gradient(180deg, #FFF3D6, var(--mx-gold) 60%, #8A5D1C); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mx-sub { font-size: 12px; color: var(--mx-dim); display: flex; align-items: center; gap: 8px; }
.mx-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mx-red); box-shadow: 0 0 10px var(--mx-red); animation: mxPulse 1.6s ease-in-out infinite; }
@keyframes mxPulse { 50% { opacity: .25; } }
.mx-clock { color: var(--mx-ink); }
.mx-stat { display: grid; grid-template-columns: auto auto; gap: 2px 10px; align-items: baseline; text-align: right; }
.mx-stat b { font-size: 26px; color: var(--mx-gold); } .mx-stat span { font-size: 11px; letter-spacing: .2em; color: var(--mx-dim); text-transform: uppercase; }
.mx-body { display: grid; grid-template-columns: 300px 1fr; gap: 22px; margin-top: 20px; }
.mx-side { border-right: 1px dashed var(--mx-line); padding-right: 16px; }
.mx-prompt { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--mx-line); background: rgba(0, 0, 0, .35); }
.mx-prompt span { color: var(--mx-red); font-weight: 800; }
.mx-prompt-in { flex: 1; background: transparent; border: 0; outline: 0; color: var(--mx-ink); font: inherit; caret-color: var(--mx-gold); }
.mx-list { margin-top: 10px; display: flex; flex-direction: column; max-height: 66vh; overflow: auto; }
.mx-acc { display: grid; text-align: left; gap: 1px; padding: 9px 10px; border: 0; border-left: 2px solid transparent; background: transparent; color: var(--mx-ink); font: inherit; cursor: pointer; }
.mx-acc:hover { background: rgba(233, 180, 90, .06); border-left-color: var(--mx-line); }
.mx-acc.on { background: linear-gradient(90deg, rgba(179, 18, 46, .28), transparent); border-left-color: var(--mx-red); }
.mx-acc-n { font-weight: 700; } .mx-acc-m { font-size: 11px; color: var(--mx-gold); } .mx-acc-r { font-size: 10px; letter-spacing: .14em; color: var(--mx-dim); text-transform: uppercase; }
.mx-main { position: relative; min-width: 0; }
.mx-who { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: flex-end; }
.mx-who h2 { margin: 2px 0; font: 800 28px var(--font-cond, sans-serif); letter-spacing: .02em; }
.mx-mono { font-size: 11px; color: var(--mx-dim); }
.mx-kv { display: grid; grid-template-columns: repeat(3, minmax(90px, auto)); gap: 6px 18px; }
.mx-kv span { display: block; font-size: 10px; letter-spacing: .22em; color: var(--mx-dim); } .mx-kv b { font-size: 18px; color: var(--mx-ink); }
.mx-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 18px 0 14px; }
.mx-tab { background: transparent; border: 0; color: var(--mx-dim); font: 700 13px var(--mono, monospace); letter-spacing: .08em; padding: 6px 8px; cursor: pointer; }
.mx-tab:hover { color: var(--mx-ink); } .mx-tab.on { color: var(--mx-gold); text-shadow: 0 0 10px rgba(233, 180, 90, .5); }
.mx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mx-block { position: relative; padding: 14px 14px 12px; border: 1px solid var(--mx-line); background: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); }
.mx-block .mx-k { margin-bottom: 10px; } .mx-wide { grid-column: 1 / -1; }
.mx-cmd { display: grid; grid-template-columns: 110px auto 1fr auto; gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px dotted rgba(233, 180, 90, .12); }
.mx-cmd-l { color: var(--mx-ink); } .mx-op { color: var(--mx-red); font-weight: 800; }
.mx-in { width: 100%; background: rgba(0, 0, 0, .45); border: 1px solid transparent; border-bottom-color: var(--mx-line); color: var(--mx-gold); font: inherit; padding: 5px 8px; outline: 0; }
.mx-in:focus { border-color: var(--mx-gold); box-shadow: 0 0 0 1px rgba(233, 180, 90, .25); }
.mx-exec { background: transparent; border: 1px solid var(--mx-gold); color: var(--mx-gold); font: 800 13px var(--mono, monospace); padding: 5px 10px; cursor: pointer; letter-spacing: .1em; }
.mx-exec:hover { background: var(--mx-gold); color: #120C04; } .mx-exec.red { border-color: var(--mx-red); color: #FF6A80; } .mx-exec.red:hover { background: var(--mx-red); color: #fff; }
.mx-exec.wide { padding: 7px 16px; }
.mx-hint { grid-column: 1 / -1; font-size: 11px; color: var(--mx-dim); } .mx-hint.ok { color: #6FE3A0; } .mx-hint.bad { color: #FF6A80; }
.mx-trigs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.mx-trig { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 12px; background: rgba(179, 18, 46, .08); border: 1px solid rgba(179, 18, 46, .45); color: var(--mx-ink); font: inherit; cursor: pointer; transition: background .15s, transform .15s; }
.mx-trig b { letter-spacing: .12em; font-size: 12px; } .mx-trig span { font-size: 11px; color: var(--mx-dim); }
.mx-trig:hover { background: rgba(179, 18, 46, .28); transform: translateY(-1px); } .mx-trig:active { transform: translateY(1px); }
.mx-crew { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px; }
.mx-crew-r { display: grid; padding: 6px 8px; border-left: 2px solid var(--mx-line); font-size: 12px; } .mx-crew-r span { color: var(--mx-dim); font-size: 11px; }
.mx-json { width: 100%; min-height: 52vh; resize: vertical; background: #050407; color: #E9E1D2; border: 1px solid var(--mx-line); font: 12.5px/1.45 var(--mono, monospace); padding: 12px; tab-size: 2; outline: 0; }
.mx-json:focus { border-color: var(--mx-gold); }
.mx-row { display: flex; gap: 10px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.mx-wait { color: var(--mx-dim); padding: 20px 0; }
.mx-flash { position: absolute; right: 0; top: 0; padding: 6px 12px; background: var(--mx-gold); color: #120C04; font-weight: 800; letter-spacing: .1em; animation: mxFlash 1.4s ease forwards; }
@keyframes mxFlash { 0% { opacity: 0; transform: translateY(-6px); } 15%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@media (max-width: 900px) { .mx-body { grid-template-columns: 1fr; } .mx-side { border-right: 0; padding-right: 0; } .mx-list { max-height: 30vh; } .mx-grid { grid-template-columns: 1fr; } .mx-head { grid-template-columns: 64px 1fr; } .mx-seal svg { width: 64px; height: 64px; } .mx-stat { display: none; } .mx-title h1 { font-size: 24px; } .mx-cmd { grid-template-columns: 90px auto 1fr auto; } }
/* 13.4.3: Bereiche (Konten, Daten, Welt, Massen, Server, Einsatz, Protokoll) */
.mx-modes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 16px; border-bottom: 1px solid var(--mx-line); }
.mx-mode { border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--mx-dim); font: 700 12px/1 var(--mono, monospace); letter-spacing: .2em; padding: 10px 12px; cursor: pointer; }
.mx-mode:hover { color: var(--mx-ink); } .mx-mode.on { color: var(--mx-gold); border-bottom-color: var(--mx-red); }
.mx-mode:focus-visible { outline: 1px solid var(--mx-gold); }
.mx-wide-body { margin-top: 20px; }
.mx-picks { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; max-height: 40vh; overflow: auto; }
.mx-pick { font-size: 12px; color: var(--mx-ink); display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.mx-log { max-height: 46vh; overflow: auto; margin: 0; padding: 10px; background: rgba(0, 0, 0, .45); border: 1px solid var(--mx-line); font-size: 11px; line-height: 1.5; color: var(--mx-dim); white-space: pre-wrap; word-break: break-word; }
.mx-trig.red { border-color: var(--mx-red); } .mx-trig.red b { color: #FF8094; }
.mx-wide-body select.mx-in, .mx-block select.mx-in { background: rgba(0, 0, 0, .35); color: var(--mx-ink); }
@media (max-width: 760px) { .mx-mode { padding: 8px 8px; letter-spacing: .1em; } }