:root {
  --bg: #030716;
  --panel: rgba(8, 15, 34, 0.74);
  --panel-2: rgba(14, 22, 48, 0.88);
  --text: #eef7ff;
  --muted: #96a8c8;
  --cyan: #00e5ff;
  --blue: #1c8dff;
  --purple: #9b4dff;
  --pink: #ff3bd4;
  --green: #1dff92;
  --gold: #ffc233;
  --danger: #ff4d6d;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background:
    radial-gradient(circle at 18% 12%, rgba(0, 229, 255, .17), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(255, 59, 212, .16), transparent 30%),
    radial-gradient(circle at 55% 92%, rgba(29, 255, 146, .10), transparent 35%),
    linear-gradient(135deg, #030716 0%, #06112b 48%, #040816 100%);
  color: var(--text);
  height: 100vh;
  overflow: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,.25));
}

.app-shell { height: 100vh; display: grid; grid-template-columns: 270px minmax(520px, 1fr) 360px; gap: 18px; padding: 18px; }
.glass { background: var(--panel); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 18px 60px rgba(0,0,0,.45); backdrop-filter: blur(16px); }
.neon-blue { box-shadow: 0 0 0 1px rgba(0,229,255,.22), 0 0 35px rgba(0,128,255,.13), inset 0 0 24px rgba(0,128,255,.08); }
.neon-purple { box-shadow: 0 0 0 1px rgba(155,77,255,.55), 0 0 36px rgba(155,77,255,.22), inset 0 0 40px rgba(28,141,255,.07); }
.neon-cyan { box-shadow: 0 0 0 1px rgba(0,229,255,.75), 0 0 32px rgba(0,229,255,.26), inset 0 0 28px rgba(0,229,255,.08); }
.neon-pink { box-shadow: 0 0 0 1px rgba(255,59,212,.75), 0 0 32px rgba(255,59,212,.24), inset 0 0 28px rgba(255,59,212,.08); }
.neon-green { box-shadow: 0 0 0 1px rgba(29,255,146,.35), 0 0 28px rgba(29,255,146,.12), inset 0 0 26px rgba(29,255,146,.07); }
.neon-gold { box-shadow: 0 0 0 1px rgba(255,194,51,.75), 0 0 32px rgba(255,194,51,.22), inset 0 0 28px rgba(255,194,51,.08); }

.menu { border-radius: 18px; padding: 24px 18px; display:flex; flex-direction:column; min-width:0; }
.brand { display:flex; align-items:center; gap:14px; margin-bottom:30px; }
.brand-icon { width:58px; height:58px; border-radius:18px; display:grid; place-items:center; font-size:30px; background:radial-gradient(circle, rgba(255,194,51,.28), rgba(29,255,146,.12) 42%, rgba(0,229,255,.08)); filter: drop-shadow(0 0 18px rgba(255,194,51,.65)); overflow:hidden; }
.brand-icon img, .avatar-button img { width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.orbiora-logo { animation: orbioraGlow 3.8s ease-in-out infinite; }
@keyframes orbioraGlow { 0%,100%{ box-shadow:0 0 18px rgba(0,229,255,.35), inset 0 0 16px rgba(255,194,51,.18);} 50%{ box-shadow:0 0 30px rgba(255,194,51,.55), 0 0 45px rgba(29,255,146,.25), inset 0 0 22px rgba(255,194,51,.25);} }
.brand h1 { margin:0; color:#dff9ff; font-size:30px; letter-spacing:.5px; text-shadow: 0 0 14px rgba(0,229,255,.85); }
.brand span { color:#8eefff; font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.08em; }
.nav-list { display:flex; flex-direction:column; gap:10px; }
.nav-item, .tool-button, .quickbar button, .quick-actions button, button.send, #voice-toggle, .avatar-button {
  border:1px solid rgba(255,255,255,.14); color:var(--text); background:rgba(8,15,34,.72); border-radius:12px; cursor:pointer; transition:.22s ease; font-weight:700;
}
.nav-item { display:flex; align-items:center; gap:12px; padding:14px 16px; font-size:16px; text-align:left; position:relative; overflow:hidden; }
.nav-item::before { content:""; position:absolute; left:0; top:14%; bottom:14%; width:3px; background:var(--cyan); border-radius:2px; opacity:0; box-shadow:0 0 14px var(--cyan); }
.nav-item:hover, .nav-item.active { transform:translateX(3px); border-color:rgba(0,229,255,.55); background:linear-gradient(90deg, rgba(0,229,255,.14), rgba(155,77,255,.08)); box-shadow:0 0 22px rgba(0,229,255,.16); }
.nav-item:hover::before, .nav-item.active::before { opacity:1; }

.status-card { margin-top:auto; border-radius:16px; padding:16px; }
.status-title { display:flex; align-items:center; gap:8px; color:var(--green); font-weight:900; font-size:14px; margin-bottom:18px; }
.pulse { width:12px; height:12px; background:var(--green); border-radius:50%; display:inline-block; box-shadow:0 0 18px var(--green); animation:pulse 1.4s infinite; }
@keyframes pulse { 0%,100%{ transform:scale(1); opacity:1 } 50%{ transform:scale(1.28); opacity:.65 } }
.meter-row { display:flex; justify-content:space-between; color:#e9f6ff; font-size:13px; margin:10px 0 6px; }
.meter { height:8px; border-radius:999px; background:rgba(255,255,255,.12); overflow:hidden; }
.meter i { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg, var(--green), #69ffd0); box-shadow:0 0 14px var(--green); }
.meter.blue i { background:linear-gradient(90deg, var(--blue), var(--cyan)); box-shadow:0 0 14px var(--blue); }
.meter.purple i { background:linear-gradient(90deg, var(--purple), var(--pink)); box-shadow:0 0 14px var(--purple); }

.main-content { display:flex; flex-direction:column; min-width:0; gap:14px; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:14px; min-height:72px; }
.system-online { border-radius:16px; padding:14px 18px; display:flex; align-items:center; gap:12px; min-width:320px; }
.system-online strong { color:var(--green); display:block; }
.system-online small { color:#d4ffe9; display:block; margin-top:2px; }
.top-actions { display:flex; gap:12px; }
.tool-button { min-width:116px; padding:14px 12px; display:flex; flex-direction:column; gap:5px; align-items:center; justify-content:center; color:#f6e8ff; border-color:rgba(155,77,255,.4); box-shadow:0 0 18px rgba(155,77,255,.12); }
.tool-button:hover { transform:translateY(-2px); border-color:rgba(255,59,212,.8); box-shadow:0 0 28px rgba(255,59,212,.22); }
.avatar-button { width:72px; height:72px; border-radius:50%; padding:6px; overflow:hidden; border-color:rgba(255,194,51,.75); box-shadow:0 0 34px rgba(255,194,51,.34), 0 0 54px rgba(29,255,146,.18); background:radial-gradient(circle, rgba(255,194,51,.18), rgba(0,229,255,.06)); }

.dashboard { flex:1; border-radius:18px; padding:28px; overflow:hidden; position:relative; display:flex; flex-direction:column; min-height:0; }
.dashboard::after { content:""; position:absolute; inset:auto 30px 0 30px; height:1px; background:linear-gradient(90deg, transparent, rgba(0,229,255,.8), rgba(255,59,212,.7), transparent); filter:blur(.2px); }
.welcome-card { margin:auto 0 20px; max-width:780px; }
.welcome-card h2, #content-area h2 { font-size:28px; margin:0 0 12px; color:#eafaff; text-shadow:0 0 18px rgba(0,229,255,.35); }
.welcome-card p { color:var(--muted); line-height:1.6; }
.quick-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:20px; }
.quick-actions button { padding:12px 16px; border-color:rgba(0,229,255,.36); }
.quick-actions button:hover { border-color:var(--cyan); box-shadow:0 0 20px rgba(0,229,255,.18); }

.chat-box { flex:1; min-height:280px; overflow-y:auto; border-radius:16px; padding:18px; margin:14px 0; background:rgba(7,11,28,.68); border:1px solid rgba(255,255,255,.13); box-shadow: inset 0 0 26px rgba(0,0,0,.25); }
.chat-line { margin:8px 0; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); }
.chat-line strong { color:#ffffff; }
.chat-line.user { border-color:rgba(255,59,212,.24); }
.chat-line.bot { border-color:rgba(0,229,255,.24); }
.chat-input-row { display:flex; align-items:center; gap:10px; margin-top:auto; padding-top:12px; }
input, textarea { background:rgba(255,255,255,.08); color:white; border:1px solid rgba(255,255,255,.16); border-radius:12px; padding:13px 14px; outline:none; transition:.22s ease; }
input:focus, textarea:focus { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(0,229,255,.12), 0 0 18px rgba(0,229,255,.18); }
input[type="text"] { flex-grow:1; min-width:0; }
button.send { background:linear-gradient(135deg, var(--blue), #00b7ff); padding:13px 20px; box-shadow:0 0 18px rgba(28,141,255,.28); border-color:rgba(0,229,255,.52); }
button.send:hover { transform:translateY(-1px); box-shadow:0 0 28px rgba(0,229,255,.4); }
#voice-toggle { padding:8px 12px; margin-left:8px; border-color:rgba(155,77,255,.5); color:#f0dcff; }
pre { white-space:pre-wrap; background:rgba(0,0,0,.36); border:1px solid rgba(0,229,255,.18); border-radius:12px; padding:14px; overflow:auto; }
#generated-image img { max-width:100%; border-radius:18px; border:1px solid rgba(255,59,212,.34); box-shadow:0 0 30px rgba(255,59,212,.16); }

.quickbar { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:12px; }
.quickbar button { padding:13px 14px; color:#dff7ff; background:rgba(9,17,40,.72); border-color:rgba(0,229,255,.22); box-shadow:0 0 18px rgba(0,229,255,.08); }
.quickbar button:hover { transform:translateY(-2px); border-color:rgba(255,194,51,.75); box-shadow:0 0 24px rgba(255,194,51,.18); }
.footer { border-radius:14px; padding:12px; text-align:center; color:#8796b3; font-size:13px; }

.right-monitors { display:flex; flex-direction:column; gap:18px; min-width:0; }
.monitor { flex:1; min-height:0; border-radius:18px; padding:20px; overflow:hidden; position:relative; }
.monitor-head { display:flex; justify-content:space-between; align-items:center; gap:12px; font-weight:900; font-size:20px; color:var(--cyan); }
.neon-pink .monitor-head { color:#ff78e7; }
.neon-gold .monitor-head { color:var(--gold); }
.monitor small { color:#c9d4ea; display:block; margin:8px 0 16px; }
.monitor ul { list-style:none; padding:0; margin:12px 0 0; }
.monitor li { display:flex; justify-content:space-between; gap:12px; color:#dbe7ff; font-size:13px; margin:10px 0; }
.monitor b { color:var(--green); }
.neon-gold .monitor b { color:var(--gold); }
.ring { width:92px; height:92px; border-radius:50%; display:grid; place-items:center; text-align:center; font-size:24px; font-weight:900; color:#eafff7; background:conic-gradient(var(--green) 0 86%, rgba(255,255,255,.12) 86% 100%); box-shadow:0 0 22px rgba(29,255,146,.22); margin:8px 0; position:relative; }
.ring::after { content:""; position:absolute; inset:9px; border-radius:50%; background:#071121; z-index:0; }
.ring > * , .ring { z-index:1; }
.ring span { display:block; font-size:11px; color:var(--green); }
.ring.gold { background:conic-gradient(var(--gold) 0 54%, rgba(255,255,255,.12) 54% 100%); box-shadow:0 0 22px rgba(255,194,51,.22); }
.ring.gold span { color:var(--gold); }
.image-placeholder { height:88px; border-radius:14px; display:grid; place-items:center; font-size:40px; background:linear-gradient(135deg, rgba(255,59,212,.22), rgba(155,77,255,.18)); border:1px solid rgba(255,59,212,.25); }

@media (max-width: 1180px) { .app-shell { grid-template-columns: 230px 1fr; } .right-monitors { display:none; } }
@media (max-width: 760px) { body { overflow:auto; height:auto; } .app-shell { min-height:100vh; height:auto; grid-template-columns:1fr; } .topbar, .quickbar { display:none; } .menu { min-height:auto; } }

/* === Active Monitor Upgrade === */
.monitor-live {
  animation: monitorFlash .9s ease;
}
@keyframes monitorFlash {
  0% { transform: scale(1); filter: brightness(1); }
  35% { transform: scale(1.012); filter: brightness(1.35); }
  100% { transform: scale(1); filter: brightness(1); }
}
.mini-terminal {
  min-height: 76px;
  max-height: 120px;
  overflow: auto;
  border: 1px solid rgba(0,229,255,.22);
  border-radius: 12px;
  padding: 12px;
  background: rgba(3,7,22,.58);
  color: #dff9ff;
  line-height: 1.45;
  box-shadow: inset 0 0 18px rgba(0,229,255,.07);
}
.image-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}
button, .nav-item, .tool-button, .quickbar button {
  position: relative;
}
button:hover, .nav-item:hover, .tool-button:hover, .quickbar button:hover {
  filter: brightness(1.12);
}
button:active, .nav-item:active, .tool-button:active, .quickbar button:active {
  transform: translateY(1px) scale(.99);
}


/* === Orbiora Memory Upgrade === */
.memory-list { display:flex; flex-direction:column; gap:10px; margin-top:14px; max-height:360px; overflow:auto; }
.memory-item { border:1px solid rgba(255,194,51,.24); background:rgba(255,194,51,.055); border-radius:12px; padding:12px; box-shadow:inset 0 0 18px rgba(255,194,51,.04); }
.memory-item small { color:var(--muted); display:block; margin-bottom:6px; }
.orbiora-mark { color:var(--gold); text-shadow:0 0 12px rgba(255,194,51,.65); }

/* === Orbiora Level 2 · Voice + Smart Memory === */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.setting-panel {
  border: 1px solid rgba(0,229,255,.22);
  border-radius: 16px;
  padding: 18px;
  background: rgba(3,7,22,.34);
  box-shadow: inset 0 0 22px rgba(0,229,255,.05);
}
.setting-panel h3 { margin: 0 0 14px; color: #dff9ff; }
.setting-panel label { display:block; margin: 12px 0 7px; color: var(--muted); font-weight: 700; }
select {
  width: 100%;
  background: rgba(255,255,255,.08);
  color: white;
  border: 1px solid rgba(0,229,255,.24);
  border-radius: 12px;
  padding: 12px 14px;
  outline: none;
}
select:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0,229,255,.12), 0 0 18px rgba(0,229,255,.18); }
.voice-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
button.ghost { background: rgba(8,15,34,.72); }
button.danger { background: linear-gradient(135deg, rgba(255,77,109,.85), rgba(155,77,255,.7)); border-color: rgba(255,77,109,.75); }
#voice-test-mini { margin-left: 8px; padding: 8px 12px; border-color: rgba(0,229,255,.45); color: #dff9ff; }
.memory-control-grid { display:grid; grid-template-columns: 1fr 170px 150px 130px; gap:10px; align-items:center; }
.memory-insights { margin:14px 0; padding:12px; border-radius:12px; border:1px solid rgba(255,194,51,.24); background:rgba(255,194,51,.055); color:#f6f0d7; line-height:1.5; }
.mini-terminal.compact { min-height: 48px; max-height: 70px; font-size: 12px; }
@media (max-width: 900px) {
  .settings-grid, .memory-control-grid { grid-template-columns: 1fr; }
}

/* === Orbiora Level 3 · Chat Sessions === */
.chat-titlebar { display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; }
.chat-titlebar h2 { margin:0; }
.chat-title-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.chat-workspace { display:grid; grid-template-columns:0 1fr; gap:14px; min-height:430px; transition:.25s ease; }
.chat-workspace.history-open { grid-template-columns:280px 1fr; }
.chat-history-panel { overflow:hidden; opacity:0; pointer-events:none; border-radius:16px; padding:0; transition:.25s ease; }
.chat-workspace.history-open .chat-history-panel { opacity:1; pointer-events:auto; padding:14px; }
.history-head { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:12px; color:#eaffff; }
.history-head button { padding:8px 10px; border-color:rgba(0,229,255,.35); }
.history-list { display:flex; flex-direction:column; gap:10px; max-height:410px; overflow:auto; padding-right:4px; }
.history-item { border:1px solid rgba(0,229,255,.18); background:rgba(4,10,26,.62); border-radius:14px; padding:10px; box-shadow:inset 0 0 20px rgba(0,229,255,.04); }
.history-item.active { border-color:rgba(255,194,51,.7); box-shadow:0 0 22px rgba(255,194,51,.13), inset 0 0 18px rgba(255,194,51,.06); }
.history-title { width:100%; text-align:left; padding:0; border:0; background:transparent; color:#f7fbff; font-weight:900; line-height:1.3; }
.history-title:hover { color:var(--gold); box-shadow:none; transform:none; }
.history-meta { color:var(--muted); font-size:12px; margin:6px 0; }
.history-actions { display:flex; gap:6px; }
.history-actions button { padding:6px 8px; font-size:12px; border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.06); }
.history-empty { color:var(--muted); border:1px dashed rgba(255,255,255,.14); border-radius:12px; padding:12px; text-align:center; }
.chat-main-panel { min-width:0; display:flex; flex-direction:column; }
.active-chat-title { color:var(--gold); font-weight:900; letter-spacing:.02em; padding:10px 14px; border:1px solid rgba(255,194,51,.22); border-radius:14px; background:rgba(255,194,51,.055); box-shadow:0 0 18px rgba(255,194,51,.08); }
@media (max-width: 900px) {
  .chat-workspace, .chat-workspace.history-open { grid-template-columns:1fr; }
  .chat-history-panel { display:none; }
  .chat-workspace.history-open .chat-history-panel { display:block; }
}

/* === Orbiora Level 4 · Monitor 3 Chatverlauf + sichtbare Stimme === */
.full-chat-panel { min-height: 520px; }
.history-monitor-toolbar { display:flex; gap:8px; margin:10px 0 10px; }
.history-monitor-toolbar button {
  flex:1;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid rgba(255,194,51,.38);
  background:rgba(255,194,51,.08);
  color:#fff5d6;
  font-weight:800;
}
.history-search {
  width:100%;
  box-sizing:border-box;
  margin:0 0 10px;
  padding:10px 12px;
  font-size:13px;
  border-color:rgba(255,194,51,.32);
  background:rgba(3,7,22,.70);
}
.monitor-chat-list {
  max-height: 245px;
  overflow-y: auto;
  padding-right: 4px;
  display:flex;
  flex-direction:column;
  gap:8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,194,51,.75) rgba(255,255,255,.05);
}
.monitor-chat-list::-webkit-scrollbar { width:8px; }
.monitor-chat-list::-webkit-scrollbar-track { background:rgba(255,255,255,.05); border-radius:12px; }
.monitor-chat-list::-webkit-scrollbar-thumb { background:linear-gradient(var(--gold), #ff7a18); border-radius:12px; box-shadow:0 0 12px rgba(255,194,51,.6); }
.monitor-history-item {
  padding:9px;
  border-color:rgba(255,194,51,.28);
  background:linear-gradient(135deg, rgba(255,194,51,.075), rgba(6,11,30,.72));
}
.monitor-history-item:hover {
  border-color:rgba(255,194,51,.8);
  box-shadow:0 0 18px rgba(255,194,51,.18), inset 0 0 18px rgba(255,194,51,.07);
}
.monitor-history-item .history-title {
  font-size:13px;
  color:#fff7d6;
  text-shadow:0 0 8px rgba(255,194,51,.28);
}
.history-preview {
  color:#cdd8ec;
  font-size:11px;
  margin-top:5px;
  line-height:1.35;
  max-height:32px;
  overflow:hidden;
  opacity:.85;
}
.monitor-history-item .history-actions button {
  min-width:28px;
  padding:5px 7px;
  border-radius:8px;
}
.monitor3-footer {
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin-top:10px;
  padding-top:8px;
  border-top:1px solid rgba(255,194,51,.18);
  font-size:12px;
  color:#dbe7ff;
}
.monitor3-footer b { color:var(--gold); }

.voice-select-visible, #voice-profile, select option {
  background:#081226 !important;
  color:#f7fbff !important;
  font-weight:700;
}
select option:checked { background:#123654 !important; color:#ffffff !important; }
.voice-hint {
  margin:8px 0 4px;
  padding:9px 10px;
  border-radius:10px;
  border:1px solid rgba(0,229,255,.20);
  background:rgba(0,229,255,.055);
  color:#bfefff;
  font-size:12px;
  line-height:1.4;
}
.voice-profile-cards {
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:10px;
  margin-top:14px;
}
.voice-profile-cards button {
  text-align:left;
  padding:12px;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(255,59,212,.12), rgba(0,229,255,.06));
  border:1px solid rgba(255,59,212,.25);
  color:#fff;
  box-shadow:inset 0 0 18px rgba(255,59,212,.04);
}
.voice-profile-cards button:hover {
  border-color:rgba(255,59,212,.75);
  box-shadow:0 0 20px rgba(255,59,212,.22), inset 0 0 18px rgba(0,229,255,.04);
}
.voice-profile-cards small { color:#b9c7de; font-weight:700; }
@media (max-width: 900px) { .voice-profile-cards { grid-template-columns:1fr; } }

/* === Orbiora Level 5 · Fixed Viewport + Scroll Zones === */
html, body {
  width: 100%;
  height: 100%;
  overflow: hidden !important;
}
.app-shell {
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
}
.menu,
.main-content,
.right-monitors {
  height: calc(100vh - 36px);
  max-height: calc(100vh - 36px);
  overflow: hidden;
}
.main-content {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.topbar,
.quickbar,
.footer {
  flex: 0 0 auto;
}
.dashboard {
  flex: 1 1 auto;
  min-height: 0 !important;
  overflow: hidden !important;
}
.chat-titlebar {
  flex: 0 0 auto;
}
.full-chat-panel,
.chat-main-panel {
  flex: 1 1 auto;
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden;
}
.chat-box {
  flex: 1 1 auto;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}
.chat-input-row {
  flex: 0 0 auto;
}
.right-monitors {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.right-monitors .monitor {
  min-height: 0;
  overflow: hidden;
}
#monitor-1,
#monitor-2 {
  flex: 0 0 29%;
}
#monitor-3 {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
#monitor-3 .monitor-head,
#monitor-3 small,
#monitor-3 .history-monitor-toolbar,
#monitor-3 .history-search,
#monitor-3 .monitor3-footer {
  flex: 0 0 auto;
}
#monitor-chat-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}
.monitor-history-item {
  flex: 0 0 auto;
}
/* Voice dropdown readability */
.voice-select-visible,
#voice-select,
#voice-profile,
select {
  color: #f7fbff !important;
  background-color: #081226 !important;
  text-shadow: none !important;
}
select option {
  color: #f7fbff !important;
  background-color: #081226 !important;
  padding: 8px;
}
@media (max-height: 820px) {
  .app-shell { gap: 12px; padding: 12px; }
  .menu, .main-content, .right-monitors { height: calc(100vh - 24px); max-height: calc(100vh - 24px); }
  .dashboard { padding: 18px; }
  .topbar { min-height: 58px; }
  .system-online { min-width: 260px; padding: 10px 14px; }
  .tool-button { min-width: 96px; padding: 10px 10px; }
  .avatar-button { width: 58px; height: 58px; }
  .quickbar button { padding: 10px 12px; }
  .footer { padding: 8px; }
  .monitor { padding: 14px; }
  .monitor small { margin: 5px 0 10px; }
  .image-placeholder { height: 70px; }
}


/* === Orbiora Level 6 · Monitor 3 kompakt + Archiv-Fokus === */
#monitor-3 {
  padding: 14px !important;
}
#monitor-3 .monitor-head {
  font-size: 16px !important;
  margin-bottom: 2px;
}
#monitor-3 small {
  margin: 3px 0 8px !important;
  font-size: 11px;
}
#monitor-3 .history-monitor-toolbar {
  display: grid;
  grid-template-columns: 1fr 0.72fr;
  gap: 6px;
  margin: 6px 0 7px !important;
}
#monitor-3 .history-monitor-toolbar button {
  padding: 6px 7px !important;
  font-size: 11px !important;
  line-height: 1.15;
  min-height: 30px;
  border-radius: 9px;
}
#monitor-3 .history-search {
  padding: 7px 9px !important;
  font-size: 11px !important;
  margin: 0 0 7px !important;
  min-height: 30px;
}
#monitor-chat-list {
  gap: 6px !important;
  padding-right: 5px;
}
.monitor-history-item {
  padding: 7px !important;
  border-radius: 11px !important;
}
.monitor-history-item .history-title {
  font-size: 12px !important;
  line-height: 1.15 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.history-preview {
  font-size: 10.5px !important;
  line-height: 1.25 !important;
  max-height: 26px !important;
  margin-top: 3px !important;
}
.history-meta {
  font-size: 10.5px !important;
  margin: 4px 0 !important;
}
.history-actions {
  gap: 4px !important;
  justify-content: flex-end;
}
.monitor-history-item .history-actions button {
  min-width: 24px !important;
  padding: 4px 5px !important;
  font-size: 10px !important;
  border-radius: 7px !important;
}
.monitor3-footer {
  margin-top: 6px !important;
  padding-top: 6px !important;
  font-size: 10.5px !important;
}
#monitor-2 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
#monitor-2 .image-placeholder {
  height: clamp(54px, 8vh, 84px) !important;
  min-height: 54px !important;
  margin: 6px 0 8px !important;
  display: grid;
  place-items: center;
  font-size: 30px !important;
}
#monitor-2 ul,
#monitor-1 ul {
  margin-top: 6px !important;
}
#monitor-2 li,
#monitor-1 li,
#monitor-3 li {
  font-size: 11.5px !important;
}
#monitor-1 {
  flex: 0 0 27% !important;
}
#monitor-2 {
  flex: 0 0 27% !important;
}
#monitor-3 {
  flex: 1 1 46% !important;
}
@media (max-height: 820px) {
  #monitor-3 { padding: 12px !important; }
  #monitor-3 .monitor-head { font-size: 15px !important; }
  #monitor-2 .image-placeholder { height: 52px !important; min-height: 52px !important; }
  .monitor-history-item { padding: 6px !important; }
}


/* === Orbiora Level 8 · Bewusstsein + Voice Feedback === */
.conscious-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 8px 0;
}
.conscious-grid div {
  border: 1px solid rgba(0,229,255,.18);
  background: rgba(0,229,255,.055);
  border-radius: 10px;
  padding: 7px 8px;
  min-width: 0;
}
.conscious-grid span {
  display:block;
  color:#9fb3cf;
  font-size:10px;
  line-height:1.1;
}
.conscious-grid b {
  color:#1dff92;
  font-size:12px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  display:block;
}
.voice-live-indicator {
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:6px 9px;
  border:1px solid rgba(255,194,51,.34);
  border-radius:999px;
  color:#fff5d6;
  background:rgba(255,194,51,.07);
  font-size:12px;
  font-weight:900;
  box-shadow:0 0 14px rgba(255,194,51,.09);
}
body.orbiora-speaking .voice-live-indicator,
body.orbiora-speaking #monitor-1 {
  animation: orbioraSpeakPulse 1.25s ease-in-out infinite;
}
@keyframes orbioraSpeakPulse {
  0% { box-shadow:0 0 10px rgba(0,229,255,.10), inset 0 0 8px rgba(255,194,51,.02); }
  50% { box-shadow:0 0 28px rgba(255,194,51,.28), 0 0 18px rgba(0,229,255,.16), inset 0 0 14px rgba(255,194,51,.08); }
  100% { box-shadow:0 0 10px rgba(0,229,255,.10), inset 0 0 8px rgba(255,194,51,.02); }
}
@media (max-height: 820px) {
  .conscious-grid { gap:5px; margin:6px 0; }
  .conscious-grid div { padding:5px 6px; }
  .voice-live-indicator { font-size:11px; padding:5px 7px; }
}


/* === Orbiora Level 9 · Conscious Memory === */
.level9-grid div {
  border-color: rgba(29,255,146,.22) !important;
  background: linear-gradient(135deg, rgba(29,255,146,.07), rgba(0,229,255,.04));
}
.level9-terminal {
  border-color: rgba(29,255,146,.28) !important;
  box-shadow: inset 0 0 18px rgba(29,255,146,.06), 0 0 14px rgba(0,229,255,.08);
}
.history-item .history-preview {
  max-height: 52px;
  overflow: hidden;
  line-height: 1.35;
}
.history-item.active {
  box-shadow: 0 0 16px rgba(29,255,146,.22), inset 0 0 18px rgba(29,255,146,.06) !important;
}
.orbiora-speaking .dashboard,
.orbiora-speaking #monitor-1 {
  box-shadow: 0 0 22px rgba(255,59,212,.28), 0 0 46px rgba(0,229,255,.16);
}


/* === Level 11: Auth / User System === */
.auth-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: none; align-items: center; justify-content: center;
  background: radial-gradient(circle at center, rgba(0,229,255,.10), rgba(0,0,0,.78));
  backdrop-filter: blur(10px);
}
.auth-overlay.show { display: flex; }
.auth-card { width: min(460px, 92vw); padding: 24px; border-radius: 24px; box-shadow: 0 0 40px rgba(0,229,255,.18); }
.auth-brand { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.auth-brand img { width: 62px; height: 62px; border-radius: 18px; box-shadow: 0 0 24px rgba(255,194,51,.35); }
.auth-brand h2 { margin: 0; color: #eaffff; }
.auth-brand small, .auth-info { color: var(--muted); }
.auth-card input { width: 100%; margin: 8px 0; padding: 13px 14px; border-radius: 14px; border: 1px solid rgba(0,229,255,.35); background: rgba(5,10,26,.84); color: #eaffff; outline: none; }
.auth-card input:focus { box-shadow: 0 0 18px rgba(0,229,255,.35); }
.auth-actions { display: flex; gap: 10px; margin-top: 12px; }
.auth-message { color: #ff7bcb; min-height: 22px; margin-top: 10px; font-weight: 700; }
.user-button span { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-logout { float: right; margin-top: -48px; }


/* Business 1 */
.business-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:14px 0}
.metric-card{padding:14px;border:1px solid rgba(0,255,200,.25);border-radius:16px;box-shadow:0 0 18px rgba(0,255,200,.08)}
.metric-card b{display:block;font-size:12px;opacity:.75;margin-bottom:6px}
.metric-card span{font-size:28px;font-weight:800;color:#7cffd4;text-shadow:0 0 12px rgba(124,255,212,.55)}
.business-user-row{display:grid;grid-template-columns:1.2fr 1.6fr .7fr .7fr;gap:8px;align-items:center;padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.08);font-size:12px}
#business-usage-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid rgba(255,213,74,.35);border-radius:999px;background:rgba(255,213,74,.08);color:#ffeaa0;font-size:12px;margin-left:8px;box-shadow:0 0 14px rgba(255,213,74,.12)}
.muted{opacity:.72;font-size:12px}
@media(max-width:900px){.business-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.business-user-row{grid-template-columns:1fr}}


/* === Business UI Upgrade: Limit + Plans + Themes === */
body.theme-neon {
  --bg:#030716; --cyan:#00e5ff; --blue:#1c8dff; --purple:#9b4dff; --pink:#ff3bd4; --green:#1dff92; --gold:#ffc233;
}
body.theme-forest {
  --bg:#020b08; --cyan:#45ffd2; --blue:#14b8a6; --purple:#22c55e; --pink:#8bff7a; --green:#39ff88; --gold:#d6ff4a;
  background: radial-gradient(circle at 18% 12%, rgba(57,255,136,.16), transparent 28%), radial-gradient(circle at 82% 18%, rgba(69,255,210,.10), transparent 30%), linear-gradient(135deg,#020b08 0%,#062018 50%,#030d09 100%);
}
body.theme-sunset {
  --bg:#14070a; --cyan:#ffb86b; --blue:#ff6b35; --purple:#ff2e88; --pink:#ff477e; --green:#ffd166; --gold:#ffb703;
  background: radial-gradient(circle at 18% 12%, rgba(255,183,3,.18), transparent 28%), radial-gradient(circle at 82% 18%, rgba(255,46,136,.17), transparent 30%), linear-gradient(135deg,#14070a 0%,#2b1016 52%,#09030a 100%);
}
body.theme-royal {
  --bg:#070317; --cyan:#9bf6ff; --blue:#5b7cfa; --purple:#b517ff; --pink:#f72585; --green:#72efdd; --gold:#ffd6a5;
  background: radial-gradient(circle at 18% 12%, rgba(155,246,255,.14), transparent 28%), radial-gradient(circle at 82% 18%, rgba(181,23,255,.20), transparent 30%), linear-gradient(135deg,#070317 0%,#160b35 52%,#05020b 100%);
}
.limit-box {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:142px; padding:8px 12px; border-radius:999px;
  border:1px solid rgba(0,229,255,.38); background:rgba(0,229,255,.08);
  color:#dffcff; font-size:12px; font-weight:900; letter-spacing:.02em;
  box-shadow:0 0 16px rgba(0,229,255,.14), inset 0 0 16px rgba(0,229,255,.04);
}
.limit-box[data-plan="free"]{border-color:rgba(255,194,51,.44); color:#fff0b7; background:rgba(255,194,51,.08); box-shadow:0 0 16px rgba(255,194,51,.12)}
.limit-box[data-plan="pro"]{border-color:rgba(0,229,255,.55); color:#caffff; background:rgba(0,229,255,.10)}
.limit-box[data-plan="creator"]{border-color:rgba(255,59,212,.55); color:#ffe3fa; background:rgba(255,59,212,.10)}
#business-usage-badge.usage-ok{border-color:rgba(29,255,146,.45); color:#d9ffe9; background:rgba(29,255,146,.08)}
#business-usage-badge.usage-mid{border-color:rgba(255,194,51,.45); color:#fff2bf; background:rgba(255,194,51,.08)}
#business-usage-badge.usage-low{border-color:rgba(255,77,109,.60); color:#ffd5dc; background:rgba(255,77,109,.10); box-shadow:0 0 18px rgba(255,77,109,.20)}
.business-plan-area{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:14px 0 18px}
.plan-card{border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:16px;background:rgba(5,10,26,.62);box-shadow:inset 0 0 24px rgba(0,229,255,.04), 0 0 18px rgba(0,0,0,.20);transition:.22s ease;position:relative;overflow:hidden}
.plan-card::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,229,255,.10),transparent 45%,rgba(255,59,212,.08));opacity:.55;pointer-events:none}
.plan-card.active{border-color:rgba(255,194,51,.78);box-shadow:0 0 28px rgba(255,194,51,.18), inset 0 0 24px rgba(255,194,51,.06)}
.plan-card:hover{transform:translateY(-2px);border-color:var(--cyan);box-shadow:0 0 28px rgba(0,229,255,.18)}
.plan-top{display:flex;justify-content:space-between;align-items:center;gap:10px;position:relative;z-index:1}.plan-top b{font-size:18px;color:#f3fbff}.plan-top span{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--gold);border:1px solid rgba(255,194,51,.25);border-radius:999px;padding:4px 8px;background:rgba(255,194,51,.06)}
.plan-price{font-size:30px;font-weight:900;margin:12px 0;color:var(--green);text-shadow:0 0 18px rgba(29,255,146,.35);position:relative;z-index:1}.plan-price small{font-size:12px;color:var(--muted);margin-left:5px;font-weight:700}.plan-card ul{margin:10px 0 16px;padding:0;list-style:none;position:relative;z-index:1}.plan-card li{font-size:13px;margin:8px 0;color:#dceeff}.plan-card button{width:100%;position:relative;z-index:1}.business-upgrade-note{border-radius:16px;padding:14px 16px;color:#e8f7ff;border:1px solid rgba(0,229,255,.18);background:rgba(0,229,255,.055);font-size:13px}.compact-business-box{min-height:180px;max-height:280px;overflow:auto}
@media(max-width:900px){.business-plan-area{grid-template-columns:1fr}.limit-box{min-width:auto}}

/* === Business 1 Compact Topbar Fix === */
.topbar {
  min-height: 58px;
  gap: 10px;
}
.system-online {
  min-width: 250px;
  padding: 10px 14px;
  border-radius: 14px;
}
.system-online strong { font-size: 14px; }
.system-online small { font-size: 11px; }
.top-actions {
  gap: 8px;
  align-items: center;
  flex-wrap: nowrap;
}
.tool-button {
  min-width: 86px;
  height: 54px;
  padding: 8px 10px;
  gap: 3px;
  font-size: 12px;
  border-radius: 12px;
}
.tool-button span {
  line-height: 1.1;
  max-width: 82px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.avatar-button {
  width: 56px;
  height: 56px;
  padding: 5px;
}
#business-usage-badge {
  min-width: 74px;
  max-width: 120px;
  height: 44px;
  padding: 7px 9px;
  margin-left: 0;
  border-radius: 14px;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  justify-content: center;
  text-align: center;
  line-height: 1.15;
  white-space: normal;
}
.user-button {
  min-width: 78px;
  max-width: 92px;
}
.user-button span {
  max-width: 62px;
}
.quickbar button {
  padding: 10px 12px;
  font-size: 12px;
  border-radius: 12px;
}
.nav-item {
  padding: 11px 14px;
  font-size: 14px;
}
@media (max-width: 1400px) {
  .app-shell { grid-template-columns: 250px minmax(480px, 1fr) 330px; gap: 14px; padding: 14px; }
  .tool-button { min-width: 76px; font-size: 11px; }
  .tool-button span { max-width: 70px; }
  #business-usage-badge { max-width: 100px; font-size: 10.5px; }
  .avatar-button { width: 50px; height: 50px; }
}


/* === Business Login Gate · Kein Gastmodus === */
.hidden { display: none !important; }
.app-hidden { display: none !important; }
.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  position: relative;
  z-index: 5;
}
.login-hero {
  width: min(980px, 96vw);
  border-radius: 28px;
  padding: 30px;
  background: linear-gradient(135deg, rgba(4,10,28,.92), rgba(5,21,38,.86));
  border: 1px solid rgba(0,229,255,.28);
  box-shadow: 0 0 42px rgba(0,229,255,.14), inset 0 0 42px rgba(255,194,51,.04);
}
.login-logo-row { display:flex; align-items:center; gap:16px; margin-bottom:22px; }
.login-logo-row img { width:68px; height:68px; border-radius:18px; box-shadow:0 0 26px rgba(255,194,51,.35); }
.login-logo-row h1 { margin:0; font-size:36px; letter-spacing:.06em; color:#eaffff; text-shadow:0 0 18px rgba(0,229,255,.45); }
.login-logo-row p { margin:5px 0 0; color:var(--gold); font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.login-hero h2 { font-size:30px; margin:8px 0 8px; }
.login-copy { color:var(--muted); max-width:720px; line-height:1.55; }
.login-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:22px; }
.login-panel { border:1px solid rgba(0,229,255,.18); border-radius:22px; padding:18px; background:rgba(5,10,26,.58); box-shadow:inset 0 0 26px rgba(0,229,255,.045); }
.login-panel h3 { margin:0 0 14px; }
.login-panel input { width:100%; margin:8px 0; padding:13px 14px; border-radius:14px; border:1px solid rgba(0,229,255,.24); background:rgba(255,255,255,.07); color:white; outline:none; }
.login-panel input:focus { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(0,229,255,.12), 0 0 18px rgba(0,229,255,.16); }
.login-main-btn { width:100%; margin-top:10px; }
.login-message { min-height:22px; margin-top:16px; color:#ffd36a; }
.logout-button { border-color: rgba(255,77,109,.36) !important; color:#ffdce3 !important; background:rgba(255,77,109,.08) !important; }
@media(max-width:760px){ .login-grid{grid-template-columns:1fr}.login-hero{padding:22px}.login-logo-row h1{font-size:28px} }

.plan-buttons { display:flex; gap:8px; align-items:center; margin-top:10px; }
.plan-buttons .send { flex:1; min-height:32px; padding:7px 10px; font-size:12px; }

/* Level 17 Settings/Profile Center */
.link-button{margin-top:8px;border:0;background:transparent;color:var(--cyan);cursor:pointer;font-weight:800;text-decoration:underline}
.settings-window{height:100%;border-radius:18px;padding:18px;overflow:hidden;display:flex;flex-direction:column}
.settings-header{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:16px}
.settings-header h2{margin:0}.settings-header p{margin:4px 0 0;color:var(--muted)}
.settings-layout{min-height:0;flex:1;display:grid;grid-template-columns:210px 1fr;gap:16px}
.settings-tabs{border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:10px;background:rgba(0,0,0,.18);display:flex;flex-direction:column;gap:8px}
.settings-tabs button{ text-align:left;padding:11px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(8,15,34,.7);color:var(--text);cursor:pointer;font-weight:800}
.settings-tabs button.active,.settings-tabs button:hover{border-color:var(--cyan);box-shadow:0 0 18px rgba(0,229,255,.18)}
.settings-page{min-height:0;overflow-y:auto;border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:18px;background:rgba(0,0,0,.16)}
.setting-card{border:1px solid rgba(0,229,255,.22);border-radius:14px;padding:14px;margin-bottom:14px;background:rgba(8,15,34,.62)}
.setting-card label{display:block;margin:8px 0 6px;font-weight:800;color:#dff9ff}
.profile-form input,.setting-card input,.setting-card select{width:100%;padding:12px;border-radius:10px;border:1px solid rgba(0,229,255,.45);background:rgba(3,7,22,.72);color:var(--text);outline:none;margin-bottom:10px}
.theme-grid{display:grid;grid-template-columns:repeat(2,minmax(170px,1fr));gap:14px}
.theme-card{min-height:120px;border-radius:16px;border:1px solid rgba(255,255,255,.16);background:rgba(8,15,34,.7);color:var(--text);cursor:pointer;padding:14px;text-align:left;display:flex;flex-direction:column;gap:8px}
.theme-card.active,.theme-card:hover{border-color:var(--cyan);box-shadow:0 0 24px rgba(0,229,255,.18)}
.theme-preview{display:block;height:32px;border-radius:999px;border:1px solid rgba(255,255,255,.18)}
.theme-preview.theme-neon{background:linear-gradient(90deg,#00e5ff,#9b4dff,#ff3bd4)}
.theme-preview.theme-forest{background:linear-gradient(90deg,#0d3b2e,#1dff92,#ffc233)}
.theme-preview.theme-sunset{background:linear-gradient(90deg,#ff4d6d,#ff8800,#ffc233)}
.theme-preview.theme-royal{background:linear-gradient(90deg,#1c2bff,#9b4dff,#00e5ff)}
.muted-text{color:var(--muted)}
@media(max-width:1000px){.settings-layout{grid-template-columns:1fr}.settings-tabs{flex-direction:row;flex-wrap:wrap}}

/* Level 18 */
.business-upgrade-note .send{margin-left:10px;min-height:32px;padding:7px 12px}.metric-card span{word-break:break-word}

/* Level 20 Admin Dashboard */
.admin-table-wrap {
  margin-top: 16px;
  border-radius: 18px;
  padding: 14px;
  overflow: auto;
  max-height: 440px;
}
.admin-table-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}
.admin-table-head h3 { margin:0; }
.admin-user-table {
  width:100%;
  border-collapse: collapse;
  font-size: 13px;
}
.admin-user-table th,
.admin-user-table td {
  border-bottom: 1px solid rgba(255,255,255,.1);
  padding: 10px;
  text-align:left;
  vertical-align:top;
}
.admin-user-table th {
  color: var(--cyan);
  position: sticky;
  top: 0;
  background: rgba(8,15,34,.95);
  z-index: 2;
}
.admin-user-table select {
  background: rgba(3,7,22,.8);
  color: var(--text);
  border:1px solid rgba(0,229,255,.4);
  border-radius:8px;
  padding:6px;
}
.role-pill {
  display:inline-block;
  padding:5px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  font-weight:800;
  font-size:11px;
}
.role-pill.admin { color: var(--gold); border-color: rgba(255,194,51,.5); }
.role-pill.user { color: var(--green); border-color: rgba(29,255,146,.45); }

/* Level 21 */
.admin-only-nav{display:none}

/* === Orbiora Studio Fix · Bildgenerator/Galerie/Runway vorbereiten === */
.tool-panel { display:flex; flex-direction:column; gap:14px; min-height:0; }
.image-studio-panel { height:100%; }
.image-input-row { margin-top:0; padding-top:0; }
.image-result {
  min-height:220px;
  max-height:56vh;
  overflow:auto;
  border-radius:18px;
  padding:16px;
  background:rgba(7,11,28,.68);
  border:1px solid rgba(255,255,255,.12);
}
.empty-state { color:#b9c7df; padding:18px; border:1px dashed rgba(0,229,255,.22); border-radius:14px; background:rgba(255,255,255,.035); }
.empty-state.small { padding:12px; font-size:13px; }
.image-preview-card { display:flex; flex-direction:column; gap:12px; }
.image-preview-frame {
  width:100%;
  min-height:220px;
  max-height:520px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:18px;
  background:rgba(0,0,0,.28);
  border:1px solid rgba(0,229,255,.18);
}
.generated-preview,
#generated-image img.generated-preview {
  width:auto !important;
  max-width:100% !important;
  height:auto !important;
  max-height:520px !important;
  object-fit:contain !important;
  display:block;
  border-radius:16px;
  border:1px solid rgba(255,59,212,.34);
  box-shadow:0 0 30px rgba(255,59,212,.16);
}
.image-meta { display:flex; flex-direction:column; gap:4px; color:#eafaff; }
.image-meta span { color:#aebbd4; font-size:13px; }
.studio-actions { display:flex; flex-wrap:wrap; gap:10px; }
.studio-actions button { padding:10px 14px; border-color:rgba(0,229,255,.28); background:rgba(8,18,42,.86); color:#eafaff; }
.studio-actions.compact button { padding:8px 12px; font-size:13px; }
.section-title { margin:6px 0 0; color:#eafaff; }
.image-gallery {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:12px;
  max-height:260px;
  overflow:auto;
  padding-right:4px;
}
.gallery-card {
  border:1px solid rgba(0,229,255,.16);
  background:rgba(255,255,255,.045);
  border-radius:14px;
  overflow:hidden;
  box-shadow:inset 0 0 18px rgba(0,229,255,.035);
}
.gallery-card img { width:100%; height:110px; object-fit:cover; display:block; cursor:pointer; }
.gallery-info { padding:9px 10px; display:flex; flex-direction:column; gap:3px; }
.gallery-info strong { font-size:12px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gallery-info small { font-size:11px; color:#aebbd4; margin:0; }
.gallery-actions { display:flex; gap:6px; padding:0 10px 10px; }
.gallery-actions button { flex:1; padding:7px; font-size:12px; }
#monitor-2 .monitor-image-thumb img,
#monitor-2 .image-placeholder img { object-fit:cover !important; }
.hint-text { color:#aebbd4; font-size:13px; }
#song-idea { width:100%; resize:vertical; min-height:160px; }

/* === Level 26 · Bibliothek & feste Bildgrössen === */
.image-thumb-312 {
  width:312px;
  height:312px;
  max-width:100%;
  display:grid;
  place-items:center;
  margin:0 auto;
  border-radius:18px;
  overflow:hidden;
  background:rgba(0,0,0,.28);
  border:1px solid rgba(0,229,255,.22);
  box-shadow:0 0 28px rgba(0,229,255,.08);
  cursor:zoom-in;
}
.image-thumb-312 img,
.image-thumb-312 .generated-preview {
  width:100% !important;
  height:100% !important;
  max-width:312px !important;
  max-height:312px !important;
  object-fit:contain !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:14px;
}
.analysis-preview-slot { margin:14px 0; display:flex; justify-content:flex-start; }
.analysis-preview-slot .image-thumb-312 { margin:0; }
.analysis-result-card { display:flex; flex-direction:column; gap:8px; }
.analysis-result-card small { color:#53ffb7; }
.library-panel { gap:16px; }
.library-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px; border-radius:16px; }
.library-grid {
  max-height:360px;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
}
.library-viewer { min-height:170px; padding:14px; border-radius:18px; }
.library-detail { display:grid; grid-template-columns:312px 1fr; gap:18px; align-items:start; }
.library-detail .image-thumb-312 { margin:0; }
.library-detail-text h3 { margin:0 0 6px; color:#eafaff; }
.library-detail-text p { color:#aebbd4; margin:0 0 10px; }
.monitor-image-thumb { display:block; width:100%; height:120px; overflow:hidden; border-radius:12px; border:1px solid rgba(0,229,255,.18); margin:8px 0; }
.monitor-image-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.slideshow-overlay {
  position:fixed; inset:0; z-index:9999; background:rgba(2,5,16,.94);
  display:grid; place-items:center; padding:34px;
}
.slideshow-overlay img { max-width:88vw; max-height:82vh; object-fit:contain; border-radius:18px; box-shadow:0 0 50px rgba(0,229,255,.18); }
.slideshow-close, .slide-prev, .slide-next {
  position:fixed; border:1px solid rgba(0,229,255,.35); background:rgba(8,18,42,.9); color:#fff; border-radius:14px; cursor:pointer;
}
.slideshow-close { top:22px; right:24px; width:46px; height:46px; font-size:30px; }
.slide-prev, .slide-next { top:50%; transform:translateY(-50%); width:54px; height:74px; font-size:44px; }
.slide-prev { left:28px; }
.slide-next { right:28px; }
.slideshow-caption { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); color:#dffaff; background:rgba(8,18,42,.9); border:1px solid rgba(255,255,255,.14); border-radius:14px; padding:10px 16px; max-width:80vw; text-align:center; }
@media (max-width: 900px) {
  .library-detail { grid-template-columns:1fr; }
  .image-thumb-312 { width:260px; height:260px; }
  .image-thumb-312 img, .image-thumb-312 .generated-preview { max-width:260px !important; max-height:260px !important; }
}

/* Level 27: Bibliothek ohne neue Tabs, mit interner Lightbox */
.image-open-btn { background:transparent; border:0; padding:0; cursor:pointer; }
.image-preview-card.clean .studio-actions { display:none; }
.gallery-card { cursor:pointer; }
.gallery-actions.icon-actions { justify-content:flex-start; }
.gallery-actions.icon-actions button,
.detail-actions button,
.slideshow-caption button {
  flex:0 0 auto;
  min-width:36px;
  height:32px;
  padding:6px 9px;
  border-radius:8px;
}
.library-detail .image-open-btn { width:312px; height:312px; }
.slideshow-overlay { z-index:9999; }
.slideshow-overlay img { cursor:default; }
.slideshow-caption { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; }

/* === Level 28 · saubere Bibliothek, Tagesverlauf & Analyse-Scroll === */
.dashboard.page-scroll {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-bottom: 44px;
}
.dashboard.page-scroll .chat-box,
.dashboard.page-scroll .analysis-text-panel {
  flex: 0 0 auto !important;
  overflow: visible !important;
  max-height: none !important;
}
.analysis-text-panel {
  margin-top: 16px;
  padding: 18px;
  border-radius: 16px;
  min-height: 120px;
  line-height: 1.65;
}
.analysis-text {
  white-space: pre-wrap;
  color: #eafaff;
}
.analysis-preview-slot {
  margin: 14px 0 18px !important;
}
.image-titlebar {
  align-items: center;
}
.orbiora-select {
  background: rgba(8,15,34,.85);
  color: #eafaff;
  border: 1px solid rgba(0,229,255,.35);
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 700;
  box-shadow: 0 0 18px rgba(0,229,255,.08);
}
.single-image-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 14px;
}
.compact-meta {
  text-align: center;
}
.compact-meta strong {
  color: #eafaff;
  font-size: 15px;
  text-shadow: 0 0 12px rgba(0,229,255,.28);
}
.daily-image-history {
  margin-top: 18px;
}
.daily-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin: 6px 0 10px;
  color:#eafaff;
}
.daily-head span {
  color: var(--green);
  font-weight: 800;
}
.daily-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(126px, 1fr));
  gap:12px;
}
.daily-card {
  border:1px solid rgba(0,229,255,.18);
  background:rgba(255,255,255,.045);
  border-radius:14px;
  overflow:hidden;
  cursor:pointer;
  box-shadow:0 0 18px rgba(0,229,255,.06);
  transition:.2s ease;
}
.daily-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,59,212,.55);
  box-shadow: 0 0 24px rgba(255,59,212,.16);
}
.daily-card img {
  width:100%;
  height:112px;
  object-fit:cover;
  display:block;
}
.daily-card span {
  display:block;
  padding:8px 9px;
  color:#dffaff;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.library-viewer { display:none !important; }
.library-grid {
  max-height: none !important;
  overflow: visible !important;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
}
.gallery-card.clean-card {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  border-color: rgba(0,229,255,.20);
  box-shadow: 0 0 22px rgba(0,229,255,.07), inset 0 0 18px rgba(255,59,212,.025);
}
.gallery-card.clean-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,59,212,.55);
  box-shadow: 0 0 26px rgba(255,59,212,.18), inset 0 0 18px rgba(0,229,255,.035);
}
.gallery-card.clean-card img {
  height: 118px;
}
.gallery-info {
  padding: 9px 10px 6px !important;
}
.gallery-info strong {
  font-size: 12px !important;
  color: #eafaff !important;
  text-shadow: 0 0 10px rgba(0,229,255,.22);
}
.gallery-info small { display:none !important; }
.glow-actions {
  padding: 0 9px 10px !important;
  gap: 7px !important;
}
.glow-actions button,
.detail-actions button,
.slideshow-caption button {
  border: 1px solid rgba(0,229,255,.35) !important;
  background: rgba(7,15,36,.86) !important;
  color: #f3fbff !important;
  box-shadow: 0 0 14px rgba(0,229,255,.13);
  transition: .18s ease;
}
.glow-actions button:nth-child(1) { border-color: rgba(0,229,255,.55) !important; box-shadow:0 0 15px rgba(0,229,255,.18); }
.glow-actions button:nth-child(2) { border-color: rgba(29,255,146,.48) !important; box-shadow:0 0 15px rgba(29,255,146,.15); }
.glow-actions button:nth-child(3) { border-color: rgba(255,77,109,.52) !important; box-shadow:0 0 15px rgba(255,77,109,.15); }
.glow-actions button:hover,
.detail-actions button:hover,
.slideshow-caption button:hover {
  transform: translateY(-1px) scale(1.03);
  filter: brightness(1.18);
}
.monitor-image-button {
  padding:0;
  background:transparent;
  cursor:pointer;
}

/* === Level 29 · Bildgenerator als echte Studio-Webseite === */
.image-page {
  display:flex;
  flex-direction:column;
  gap:18px;
  padding:4px 0 20px;
}
.image-hero {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:18px;
  padding:22px 24px;
  border-radius:24px;
  background:
    radial-gradient(circle at 12% 20%, rgba(0,229,255,.18), transparent 32%),
    radial-gradient(circle at 88% 10%, rgba(255,59,212,.16), transparent 30%),
    linear-gradient(135deg, rgba(7,15,36,.90), rgba(11,8,31,.82));
  border:1px solid rgba(0,229,255,.18);
  box-shadow:0 0 36px rgba(0,229,255,.06), inset 0 0 30px rgba(255,255,255,.025);
}
.image-hero h2 { margin:4px 0 6px; font-size:30px; letter-spacing:-.02em; }
.image-hero p { margin:0; color:#aebbd4; max-width:620px; }
.eyebrow {
  display:inline-flex;
  color:#53ffb7;
  font-size:12px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-shadow:0 0 12px rgba(83,255,183,.25);
}
.image-hero-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.ghost-pill {
  border:1px solid rgba(0,229,255,.32);
  background:rgba(7,18,42,.72);
  color:#eafaff;
  border-radius:14px;
  padding:11px 14px;
  font-weight:800;
  box-shadow:0 0 18px rgba(0,229,255,.10);
  cursor:pointer;
}
.ghost-pill.subtle { border-color:rgba(255,59,212,.26); box-shadow:0 0 18px rgba(255,59,212,.08); }
.image-compose-card {
  padding:18px;
  border-radius:22px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.image-compose-card label { color:#eafaff; font-weight:900; }
.image-compose-row { display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; }
.image-compose-row input {
  width:100%;
  border-radius:16px;
  min-height:50px;
  padding:0 16px;
  background:rgba(255,255,255,.92);
  color:#0b1020;
  border:1px solid rgba(255,255,255,.18);
  font-weight:700;
}
.generate-main-btn { min-height:50px; padding-inline:24px; border-radius:16px; }
.image-result-clean {
  min-height:360px !important;
  max-height:none !important;
  overflow:visible !important;
  display:grid;
  place-items:center;
  padding:26px !important;
}
.image-result-clean .image-thumb-312,
.single-image-result .image-thumb-312 {
  width:312px !important;
  height:312px !important;
}
.clean-empty,
.history-empty,
.image-loading-state {
  width:100%;
  text-align:center;
  color:#aebbd4;
  border:1px dashed rgba(0,229,255,.20);
  border-radius:18px;
  padding:34px 18px;
  background:rgba(255,255,255,.025);
}
.image-loading-state.error { border-color:rgba(255,77,109,.34); color:#ffb8c3; }
.image-history-card {
  padding:18px;
  border-radius:22px;
}
.history-toolbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  margin-bottom:14px;
}
.history-toolbar h3 { margin:4px 0 0; font-size:18px; }
.image-history-card .daily-image-history { margin-top:0; }
.image-history-card .daily-head { margin-bottom:12px; }
.image-history-card .daily-grid {
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
}
.image-history-card .daily-card img { height:132px; }
.image-history-card .daily-card span { font-size:12px; }
@media (max-width: 860px) {
  .image-hero { align-items:flex-start; flex-direction:column; }
  .image-hero-actions { justify-content:flex-start; }
  .image-compose-row { grid-template-columns:1fr; }
  .generate-main-btn { width:100%; }
}

/* === Level 30 · Bildbereiche wie Chat-Verlauf === */
.media-chat-page {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.media-chat-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 2px 2px 8px;
  border-bottom: 1px solid rgba(0,229,255,.14);
}
.media-chat-header h2 {
  margin: 0 0 4px !important;
}
.media-chat-header small {
  color: #9fb0cc;
  line-height: 1.45;
}
.media-chat-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.media-chat-log {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 18px;
  padding: 18px;
  background: rgba(7,11,28,.68);
  border: 1px solid rgba(255,255,255,.13);
  box-shadow: inset 0 0 26px rgba(0,0,0,.25);
}
.media-bottom-input {
  flex: 0 0 auto;
  margin-top: 0 !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(0,229,255,.12);
}
.file-bottom-input input[type="file"] {
  flex: 1;
  min-height: 48px;
}
.media-date-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  color: #eafaff;
}
.media-date-row strong {
  color: #53ffb7;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
}
.media-date-row span {
  color: #53ffb7;
  font-weight: 900;
}
.media-image-row-list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 4px;
}
.media-image-card {
  width: 150px;
  border: 1px solid rgba(0,229,255,.22);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 0 22px rgba(0,229,255,.08);
  transition: .2s ease;
}
.media-image-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,59,212,.58);
  box-shadow: 0 0 28px rgba(255,59,212,.18);
}
.media-image-card img {
  width: 150px;
  height: 150px;
  display: block;
  object-fit: cover;
  background: rgba(0,0,0,.24);
}
.media-image-title {
  padding: 8px 9px 9px;
  color: #eafaff;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.media-loading-line,
.media-error-line {
  margin: 8px 0 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(0,229,255,.18);
  color: #dffaff;
}
.media-error-line {
  border-color: rgba(255,77,109,.38);
  color: #ffb8c3;
}
.analysis-entry {
  display: grid;
  grid-template-columns: 312px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  margin-bottom: 18px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(0,229,255,.16);
  background: rgba(255,255,255,.035);
}
.analysis-entry .image-thumb-312 {
  margin: 0;
}
.analysis-answer {
  color: #eafaff;
  line-height: 1.65;
  white-space: pre-wrap;
  padding: 4px 0;
}
.analysis-entry.pending {
  border-color: rgba(255,194,51,.30);
}
@media (max-width: 900px) {
  .media-chat-header { align-items: flex-start; flex-direction: column; }
  .media-chat-actions { justify-content: flex-start; }
  .analysis-entry { grid-template-columns: 1fr; }
  .analysis-entry .image-thumb-312 { width: 260px; height: 260px; }
}


/* LEVEL31: clean image-chat toolbar + full prompt title */
.image-toolbar {
  align-items: stretch;
}
.orbiora-action-pill {
  min-width: 168px;
  height: 46px;
  padding: 0 18px;
  border-radius: 15px;
  border: 1px solid rgba(0,229,255,.58);
  background: linear-gradient(135deg, rgba(0,229,255,.16), rgba(255,59,212,.12));
  color: #eafaff;
  font-weight: 900;
  letter-spacing: .01em;
  box-shadow: 0 0 18px rgba(0,229,255,.16), inset 0 0 16px rgba(255,255,255,.035);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.orbiora-action-pill:hover {
  transform: translateY(-1px);
  border-color: rgba(255,59,212,.70);
  box-shadow: 0 0 24px rgba(255,59,212,.20), 0 0 18px rgba(0,229,255,.12);
}
.day-pill {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(135deg, rgba(0,229,255,.16), rgba(255,59,212,.12));
  text-align: center;
}
.media-image-title {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  line-height: 1.25;
  min-height: 36px;
}
.media-image-card {
  width: 160px;
}
.media-image-card img {
  width: 160px;
  height: 160px;
}
@media (max-width: 900px) {
  .orbiora-action-pill { min-width: 150px; }
}


/* === Level 33 Restore: Image chat flow + compact balanced menu === */
.image-chat-page {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 0 !important;
}

.image-chat-page .media-chat-header {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  padding: 4px 2px 10px !important;
  border-bottom: 1px solid rgba(0,229,255,.14) !important;
}

.compact-image-menu,
.image-toolbar {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
}

.compact-pill,
.image-toolbar .orbiora-action-pill {
  width: 142px !important;
  min-width: 142px !important;
  max-width: 142px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 12px !important;
  border-radius: 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  line-height: 1 !important;
  border: 1px solid rgba(0,229,255,.52) !important;
  background: linear-gradient(135deg, rgba(0,229,255,.14), rgba(255,59,212,.12)) !important;
  box-shadow: 0 0 12px rgba(0,229,255,.14), inset 0 0 13px rgba(255,255,255,.035) !important;
  color: #eafaff !important;
}

.image-toolbar .day-pill {
  appearance: none !important;
  -webkit-appearance: none !important;
  text-align: center !important;
  text-align-last: center !important;
}

.image-chat-page .media-chat-log {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.image-chat-page .media-bottom-input {
  flex: 0 0 auto !important;
  margin-top: 0 !important;
  padding-top: 10px !important;
}

.media-image-title {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  line-height: 1.25 !important;
  max-height: none !important;
}

@media (max-width: 1100px) {
  .image-chat-page .media-chat-header {
    align-items: flex-start !important;
    flex-direction: column !important;
  }
  .compact-image-menu,
  .image-toolbar {
    justify-content: flex-start !important;
  }
}


/* === Level 34 Creative Monitor === */

.creative-monitor{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.creative-monitor-top{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}

.creative-stat{
  border:1px solid rgba(0,229,255,.18);
  border-radius:12px;
  padding:8px;
  background:rgba(255,255,255,.03);
  text-align:center;
}

.creative-stat span{
  display:block;
  font-size:10px;
  color:#9cc7dd;
  margin-bottom:4px;
}

.creative-stat strong{
  color:#53ffb7;
  font-size:16px;
}

.creative-preview-row{
  display:flex;
  gap:8px;
}

.creative-preview-card{
  flex:1;
  height:72px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(0,229,255,.18);
  background:rgba(255,255,255,.03);
}

.creative-preview-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.creative-flow-box{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(135deg, rgba(0,229,255,.06), rgba(255,59,212,.05));
}

.flow-node{
  padding:5px 8px;
  border-radius:8px;
  background:rgba(255,255,255,.05);
  color:#eafaff;
  font-size:11px;
  border:1px solid rgba(0,229,255,.14);
}

.flow-arrow{
  color:#53ffb7;
  font-weight:bold;
}


/* === Level 35 Analyse Verlauf === */
.analysis-toolbar .compact-pill {
  width: 142px !important;
  min-width: 142px !important;
  height: 38px !important;
}

.analysis-history-log {
  scroll-behavior: smooth;
}

.analysis-date-row {
  margin-top: 4px !important;
  margin-bottom: 10px !important;
}

.saved-analysis-entry .analysis-answer strong {
  display: block;
  color: #53ffb7;
  margin-bottom: 8px;
  font-size: 13px;
}

.saved-analysis-entry .analysis-answer p {
  margin: 0;
  line-height: 1.55;
}

.creative-preview-card {
  border: 1px solid rgba(0,229,255,.22);
  padding: 0;
  cursor: pointer;
}

.creative-empty {
  width: 100%;
  text-align: center;
  color: #91a5c9;
  font-size: 12px;
  border: 1px dashed rgba(0,229,255,.22);
  border-radius: 12px;
  padding: 16px 8px;
}


/* === Level 36 Monitor 2: cleaner creative board === */
#monitor-2 .creative-monitor {
  gap: 10px !important;
}

#monitor-2 .creative-monitor-top {
  display: flex !important;
  justify-content: space-between !important;
  gap: 6px !important;
  margin-top: 6px !important;
}

#monitor-2 .creative-stat {
  flex: 1 !important;
  min-width: 0 !important;
  padding: 5px 4px !important;
  border-radius: 9px !important;
  background: rgba(0,229,255,.045) !important;
  border: 1px solid rgba(0,229,255,.14) !important;
  box-shadow: inset 0 0 10px rgba(0,229,255,.035) !important;
}

#monitor-2 .creative-stat span {
  font-size: 8.5px !important;
  line-height: 1 !important;
  opacity: .78 !important;
  margin-bottom: 2px !important;
}

#monitor-2 .creative-stat strong {
  font-size: 13px !important;
  line-height: 1 !important;
  color: #53ffb7 !important;
}

#monitor-2 .creative-preview-row {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  margin-top: 2px !important;
}

#monitor-2 .creative-preview-card {
  height: 86px !important;
  border-radius: 13px !important;
  border: 1px solid rgba(0,229,255,.24) !important;
  background: rgba(255,255,255,.035) !important;
  box-shadow: 0 0 14px rgba(0,229,255,.08), 0 0 18px rgba(255,59,212,.05) !important;
  overflow: hidden !important;
  padding: 0 !important;
}

#monitor-2 .creative-preview-card:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(255,59,212,.45) !important;
  box-shadow: 0 0 18px rgba(255,59,212,.14), 0 0 16px rgba(0,229,255,.08) !important;
}

#monitor-2 .creative-preview-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

#monitor-2 .creative-flow-box {
  margin-top: 2px !important;
  padding: 7px !important;
  border-radius: 10px !important;
  gap: 4px !important;
  background: linear-gradient(135deg, rgba(0,229,255,.045), rgba(255,59,212,.045)) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
}

#monitor-2 .flow-node {
  padding: 4px 6px !important;
  font-size: 9.5px !important;
  border-radius: 7px !important;
  background: rgba(255,255,255,.045) !important;
}

#monitor-2 .flow-arrow {
  font-size: 10px !important;
  color: #53ffb7 !important;
}

#monitor-2 small {
  display: block !important;
  margin-bottom: 6px !important;
  color: #9eb2d4 !important;
}

#monitor-2 .creative-empty {
  grid-column: 1 / -1 !important;
  padding: 14px 8px !important;
  border-radius: 12px !important;
  font-size: 11px !important;
}


/* ===== LEVEL 37 Monitor 2 compact redesign ===== */

#monitor-2 .creative-monitor-top{
    gap:4px !important;
}

#monitor-2 .creative-stat{
    padding:2px 3px !important;
    border-radius:7px !important;
    min-height:34px !important;
}

#monitor-2 .creative-stat span{
    font-size:7px !important;
    margin-bottom:1px !important;
}

#monitor-2 .creative-stat strong{
    font-size:10px !important;
}

#monitor-2 .creative-preview-row{
    grid-template-columns:repeat(3,1fr)!important;
    gap:5px!important;
    margin-top:6px!important;
}

#monitor-2 .creative-preview-card{
    height:74px!important;
    border-radius:10px!important;
    position:relative!important;
    overflow:hidden!important;
}

#monitor-2 .creative-preview-card::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(to top, rgba(0,0,0,.45), transparent);
    pointer-events:none;
}

#monitor-2 .creative-flow-box{
    display:none!important;
}

#monitor-2 small{
    font-size:10px!important;
    margin-bottom:4px!important;
}



/* === Level 38 Orbiora Generate Loader === */
.orbiora-generate-loader {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 14px 16px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255, 160, 30, .36) !important;
  background:
    radial-gradient(circle at 12% 50%, rgba(255, 166, 0, .16), transparent 34%),
    linear-gradient(135deg, rgba(0,229,255,.06), rgba(255,120,0,.10), rgba(255,59,212,.06)) !important;
  box-shadow: 0 0 22px rgba(255, 145, 0, .12), inset 0 0 22px rgba(255,255,255,.035) !important;
}

.orbiora-loader-orbit {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  border-radius: 50%;
  position: relative;
  display: grid;
  place-items: center;
  background: rgba(255, 153, 0, .05);
  box-shadow: 0 0 22px rgba(255, 153, 0, .22);
}

.orbiora-loader-orbit::before,
.orbiora-loader-orbit::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid rgba(255, 166, 0, .52);
  border-left-color: transparent;
  border-bottom-color: rgba(0,229,255,.38);
  animation: orbioraSpin 1.25s linear infinite;
}

.orbiora-loader-orbit::after {
  inset: 4px;
  border-color: rgba(0,229,255,.36);
  border-right-color: transparent;
  animation-duration: 1.85s;
  animation-direction: reverse;
}

.orbiora-loader-orbit img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(255, 170, 0, .55));
  animation: orbioraPulse 1.6s ease-in-out infinite;
}

.orbiora-loader-content {
  flex: 1;
  min-width: 0;
}

.orbiora-loader-content strong {
  display: block;
  color: #fff4d8;
  font-size: 14px;
  letter-spacing: .03em;
  margin-bottom: 4px;
  text-shadow: 0 0 12px rgba(255, 174, 0, .42);
}

.orbiora-loader-content span {
  display: block;
  color: #aebbd7;
  font-size: 12px;
  line-height: 1.35;
  margin-bottom: 10px;
  word-break: break-word;
}

.orbiora-loader-bar {
  height: 7px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.08);
}

.orbiora-loader-bar i {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(0,229,255,.25), rgba(255,174,0,.95), rgba(255,59,212,.42));
  box-shadow: 0 0 18px rgba(255,174,0,.45);
  animation: orbioraBar 1.35s ease-in-out infinite;
}

@keyframes orbioraSpin {
  to { transform: rotate(360deg); }
}

@keyframes orbioraPulse {
  0%, 100% { transform: scale(.96); opacity: .86; }
  50% { transform: scale(1.04); opacity: 1; }
}

@keyframes orbioraBar {
  0% { transform: translateX(-110%); }
  55% { transform: translateX(80%); }
  100% { transform: translateX(235%); }
}


/* === Level 39 Compact Loader === */

.orbiora-generate-loader{
    gap:10px!important;
    padding:10px 12px!important;
    border-radius:14px!important;
}

.orbiora-loader-orbit{
    width:42px!important;
    height:42px!important;
    flex:0 0 42px!important;
}

.orbiora-loader-orbit img{
    width:32px!important;
    height:32px!important;
}

.orbiora-loader-content strong{
    font-size:12px!important;
    margin-bottom:2px!important;
}

.orbiora-loader-content span{
    font-size:10px!important;
    margin-bottom:6px!important;
}

.orbiora-loader-bar{
    height:5px!important;
}



/* === Analyse Loader Button === */

.orbiora-analyze-inline{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}

.orbiora-analyze-icon{
    width:18px;
    height:18px;
    position:relative;
    display:grid;
    place-items:center;
}

.orbiora-analyze-icon::before{
    content:'';
    position:absolute;
    inset:-3px;
    border-radius:50%;
    border:1px solid rgba(255,166,0,.6);
    border-left-color:transparent;
    animation:orbioraSpin 1s linear infinite;
}

.orbiora-analyze-icon img{
    width:14px;
    height:14px;
    object-fit:contain;
    filter:drop-shadow(0 0 6px rgba(255,166,0,.5));
}



/* === LEVEL 40 FULL IMAGE PLACEHOLDER LOADER === */

.orbiora-image-loading-card{
    width:140px;
    height:180px;
    border-radius:18px;
    border:1px solid rgba(0,229,255,.22);
    background:
      radial-gradient(circle at top, rgba(255,166,0,.15), transparent 45%),
      linear-gradient(180deg, rgba(9,18,35,.98), rgba(8,12,28,.98));
    display:flex;
    align-items:center;
    justify-content:center;
    padding:12px;
    box-shadow:
      0 0 22px rgba(255,166,0,.12),
      inset 0 0 16px rgba(255,255,255,.03);
}

.orbiora-image-loading-center{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:10px;
}

.orbiora-loader-orbit.large{
    width:72px!important;
    height:72px!important;
    flex:none!important;
}

.orbiora-loader-orbit.large img{
    width:56px!important;
    height:56px!important;
}

.orbiora-image-loading-center strong{
    color:#fff3d1;
    font-size:13px;
    text-shadow:0 0 12px rgba(255,166,0,.4);
}

.orbiora-image-loading-center span{
    color:#93a7c8;
    font-size:10px;
    line-height:1.3;
    max-width:110px;
    word-break:break-word;
}

/* analyse button clean */

.orbiora-analyze-inline span{
    font-size:12px;
    color:#fff4d8;
}



/* === LEVEL 41 Monitor 3 Analyseverlauf === */
.monitor3-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin: 9px 0;
}

.monitor3-actions button {
  height: 30px;
  border-radius: 10px;
  border: 1px solid rgba(255,194,51,.38);
  background: rgba(255,194,51,.055);
  color: #fff4d8;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.monitor3-analysis-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-height: 210px;
  overflow-y: auto;
  padding-right: 2px;
}

.monitor3-analysis-card {
  display: grid;
  grid-template-columns: 42px 1fr 22px;
  gap: 8px;
  align-items: center;
  padding: 7px;
  border-radius: 12px;
  border: 1px solid rgba(255,194,51,.24);
  background: rgba(255,194,51,.045);
  cursor: pointer;
}

.monitor3-analysis-card:hover {
  border-color: rgba(255,194,51,.55);
  box-shadow: 0 0 16px rgba(255,194,51,.12);
}

.monitor3-analysis-card img {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: 9px;
  background: rgba(255,255,255,.04);
}

.monitor3-analysis-card strong {
  display: block;
  color: #fff4d8;
  font-size: 11px;
  line-height: 1.2;
  margin-bottom: 3px;
}

.monitor3-analysis-card span {
  display: block;
  color: #aebbd7;
  font-size: 10px;
  line-height: 1.25;
}

.monitor3-analysis-card button {
  width: 22px;
  height: 22px;
  border-radius: 8px;
  border: 1px solid rgba(255,77,109,.34);
  background: rgba(255,77,109,.08);
  color: #ffb8c3;
  cursor: pointer;
}


/* === LEVEL 42 Monitor 3 Unified History === */

.monitor3-history-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:10px;
  max-height:300px;
  overflow-y:auto;
  padding-right:2px;
}

.monitor3-history-card{
  border:1px solid rgba(255,194,51,.18);
  background:rgba(255,194,51,.045);
  border-radius:12px;
  padding:8px;
}

.monitor3-history-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:7px;
}

.monitor3-type{
  font-size:10px;
  font-weight:800;
  color:#ffd66b;
}

.monitor3-date{
  font-size:9px;
  color:#9ab0d4;
}

.monitor3-history-body{
  display:flex;
  gap:8px;
  align-items:flex-start;
}

.monitor3-history-image{
  width:48px;
  height:48px;
  object-fit:cover;
  border-radius:10px;
  flex-shrink:0;
}

.monitor3-history-icon{
  width:48px;
  height:48px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,194,51,.08);
  color:#ffcf5c;
  font-size:18px;
}

.monitor3-history-content strong{
  display:block;
  color:#fff;
  font-size:11px;
  margin-bottom:4px;
}

.monitor3-history-content span{
  display:block;
  color:#b5c1da;
  font-size:10px;
  line-height:1.3;
}


/* === LEVEL 43 Monitor 3 Fokuskarte === */
.focus-card {
  margin-top: 10px;
  border: 1px solid rgba(255,194,51,.28);
  background:
    radial-gradient(circle at 10% 0%, rgba(255,194,51,.12), transparent 45%),
    rgba(255,194,51,.045);
  border-radius: 15px;
  padding: 12px;
  box-shadow: 0 0 18px rgba(255,194,51,.06);
}

.focus-kicker {
  color: #53ffb7;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 7px;
}

.focus-card strong {
  display: block;
  color: #fff4d8;
  font-size: 14px;
  line-height: 1.25;
  margin-bottom: 7px;
}

.focus-card p {
  margin: 0 0 9px;
  color: #b6c3df;
  font-size: 11px;
  line-height: 1.45;
}

.focus-meta {
  color: #7e91b7;
  font-size: 10px;
  margin-bottom: 10px;
}

.focus-action {
  width: 100%;
  height: 32px;
  border-radius: 10px;
  border: 1px solid rgba(255,194,51,.44);
  background: linear-gradient(135deg, rgba(255,194,51,.11), rgba(0,229,255,.06));
  color: #fff4d8;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.focus-action:hover {
  box-shadow: 0 0 16px rgba(255,194,51,.18);
}

.focus-mini-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 7px;
}

.focus-mini-grid div {
  border: 1px solid rgba(0,229,255,.15);
  border-radius: 10px;
  background: rgba(0,229,255,.035);
  padding: 7px 4px;
  text-align: center;
}

.focus-mini-grid span {
  display: block;
  color: #8ea4c9;
  font-size: 9px;
  margin-bottom: 3px;
}

.focus-mini-grid b {
  color: #53ffb7;
  font-size: 12px;
}


/* === LEVEL 44: Monitor 3 wirklich Fokus, nicht alter Chatverlauf === */
#monitor-3 .history-monitor-toolbar,
#monitor-3 .monitor-chat-list,
#monitor-3 .history-search,
#monitor-3 .monitor3-footer {
  display: none !important;
}



/* === LEVEL 46 Chatverlauf Seite === */
.history-page {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.history-page-toolbar {
  display: grid;
  grid-template-columns: 1fr 180px;
  gap: 10px;
}

.history-page-toolbar input,
.history-page-toolbar select {
  height: 42px;
  border-radius: 13px;
  border: 1px solid rgba(0,229,255,.28);
  background: rgba(255,255,255,.055);
  color: #eafaff;
  padding: 0 13px;
  outline: none;
}

.chat-history-page-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  align-content: start;
  gap: 12px;
  padding: 4px 2px 12px;
}

.chat-history-page-card {
  border: 1px solid rgba(0,229,255,.20);
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 0 18px rgba(0,229,255,.055);
}

.chat-history-page-card.active {
  border-color: rgba(83,255,183,.55);
  box-shadow: 0 0 18px rgba(83,255,183,.14);
}

.chat-history-open {
  width: 100%;
  min-height: 118px;
  text-align: left;
  padding: 14px;
  border: 0;
  background: transparent;
  color: #eafaff;
  cursor: pointer;
}

.chat-history-open strong {
  display: block;
  font-size: 15px;
  margin-bottom: 8px;
  color: #fff4d8;
}

.chat-history-open span {
  display: block;
  font-size: 12px;
  color: #b6c3df;
  line-height: 1.4;
  margin-bottom: 10px;
}

.chat-history-open small {
  color: #53ffb7;
  font-size: 11px;
}

.chat-history-page-actions {
  display: flex;
  gap: 7px;
  padding: 10px;
  border-top: 1px solid rgba(255,255,255,.07);
}

.chat-history-page-actions button {
  flex: 1;
  height: 32px;
  border-radius: 10px;
  border: 1px solid rgba(0,229,255,.20);
  background: rgba(0,229,255,.055);
  color: #eafaff;
  cursor: pointer;
}


/* === LEVEL 47 Einheitliche Verlauf-Struktur === */
.image-history-page-grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
  align-content: start;
  padding: 4px 2px 18px;
}

.image-history-page-grid .gallery-card img {
  height: 170px;
  object-fit: cover;
}

.gallery-info small {
  display: block;
  color: #8ea4c9;
  font-size: 10px;
  margin-top: 5px;
}

.analysis-history-page-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 2px 18px;
}

.history-analysis-card {
  margin-bottom: 0 !important;
}

.history-text-block {
  white-space: pre-wrap;
  margin: 0;
  color: #eafaff;
  font-family: inherit;
  line-height: 1.5;
}


/* === LEVEL 48 Projekte === */
.projects-page,
.project-workspace {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.projects-toolbar {
  display: grid;
  grid-template-columns: 1fr 180px;
  gap: 10px;
}

.projects-toolbar input,
.projects-toolbar select,
.project-create-card input,
.project-create-card select,
.project-create-card textarea,
.project-panel textarea,
.project-panel select {
  border: 1px solid rgba(0,229,255,.24);
  background: rgba(255,255,255,.055);
  color: #eafaff;
  border-radius: 13px;
  padding: 11px 13px;
  outline: none;
}

.projects-grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  align-content: start;
  padding: 4px 2px 18px;
}

.project-card {
  border: 1px solid rgba(0,229,255,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 0 22px rgba(0,229,255,.055);
}

.project-card-top {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 12px;
}

.project-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(0,229,255,.08);
  border: 1px solid rgba(0,229,255,.18);
  font-size: 22px;
}

.project-icon.big {
  width: 58px;
  height: 58px;
  font-size: 30px;
}

.project-card strong {
  display: block;
  color: #fff4d8;
  font-size: 15px;
}

.project-card span,
.project-meta span {
  color: #9fb0cc;
  font-size: 11px;
}

.project-card p {
  min-height: 44px;
  color: #b8c6df;
  font-size: 12px;
  line-height: 1.45;
}

.project-progress {
  height: 7px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.07);
  margin: 12px 0 9px;
}

.project-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan), var(--green), var(--gold));
  box-shadow: 0 0 14px rgba(83,255,183,.25);
}

.project-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.project-actions,
.project-create-actions,
.task-add-row {
  display: flex;
  gap: 8px;
}

.project-actions button,
.project-create-actions button,
.project-panel button,
.task-add-row button,
.project-workspace-hero button {
  flex: 1;
  min-height: 34px;
  border-radius: 11px;
  border: 1px solid rgba(0,229,255,.25);
  background: rgba(0,229,255,.07);
  color: #eafaff;
  cursor: pointer;
  font-weight: 800;
}

.project-create-panel.hidden { display: none; }

.project-create-card {
  border: 1px solid rgba(255,194,51,.25);
  background: rgba(255,194,51,.045);
  border-radius: 18px;
  padding: 14px;
  display: grid;
  grid-template-columns: 1.1fr 1fr 170px;
  gap: 10px;
  align-items: start;
}

.project-create-card textarea {
  grid-column: 1 / -1;
  min-height: 74px;
  resize: vertical;
}

.project-create-actions {
  grid-column: 1 / -1;
}

.project-workspace-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  border-radius: 20px;
  padding: 16px;
  border: 1px solid rgba(0,229,255,.20);
  background: radial-gradient(circle at 10% 0%, rgba(0,229,255,.12), transparent 44%), rgba(255,255,255,.04);
}

.project-workspace-hero h2 {
  margin: 0 0 4px;
}

.project-workspace-hero button {
  margin-left: auto;
  max-width: 130px;
}

.project-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.project-tabs button {
  min-height: 36px;
  border-radius: 11px;
  border: 1px solid rgba(0,229,255,.22);
  background: rgba(0,229,255,.055);
  color: #eafaff;
  padding: 0 14px;
  cursor: pointer;
  font-weight: 800;
}

.project-tab-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.project-overview-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 14px;
}

.project-panel {
  border: 1px solid rgba(0,229,255,.18);
  background: rgba(255,255,255,.035);
  border-radius: 18px;
  padding: 16px;
}

.project-panel textarea {
  width: 100%;
  min-height: 150px;
  resize: vertical;
  margin: 10px 0;
}

.project-panel select {
  width: 100%;
  margin-bottom: 12px;
}

.project-task-list,
.idea-list,
.project-history-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 12px;
}

.project-task,
.idea-card,
.project-history-list div {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 10px;
  background: rgba(255,255,255,.035);
}

.project-task {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.project-task button {
  max-width: 40px;
}

.project-history-list strong {
  display: block;
  color: #53ffb7;
  font-size: 11px;
  margin-bottom: 4px;
}

.project-history-list span {
  color: #dce8ff;
  font-size: 12px;
}

.project-pink { border-color: rgba(255,59,212,.24); }
.project-purple { border-color: rgba(155,77,255,.24); }
.project-cyan { border-color: rgba(0,229,255,.24); }
.project-gold { border-color: rgba(255,194,51,.28); }
.project-green { border-color: rgba(83,255,183,.24); }

@media (max-width: 900px) {
  .project-create-card,
  .project-overview-grid,
  .projects-toolbar {
    grid-template-columns: 1fr;
  }
}


/* === LEVEL 49 Mobile Responsive Layout === */
.mobile-nav-toggle {
  display: none;
}

@media (max-width: 760px) {
  body {
    height: auto !important;
    min-height: 100vh !important;
    overflow: auto !important;
  }

  .app-shell,
  .dashboard,
  .main-layout,
  .app-grid {
    display: block !important;
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
  }

  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 82vw !important;
    max-width: 320px !important;
    height: 100vh !important;
    z-index: 9998 !important;
    transform: translateX(-110%) !important;
    transition: transform .24s ease !important;
    overflow-y: auto !important;
    box-shadow: 20px 0 60px rgba(0,0,0,.45) !important;
  }

  body.mobile-nav-open .sidebar {
    transform: translateX(0) !important;
  }

  .mobile-nav-toggle {
    display: grid !important;
    place-items: center !important;
    position: fixed !important;
    left: 14px !important;
    bottom: 14px !important;
    z-index: 9999 !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 17px !important;
    border: 1px solid rgba(0,229,255,.45) !important;
    background: linear-gradient(135deg, rgba(0,229,255,.18), rgba(255,59,212,.14)) !important;
    color: #eafaff !important;
    font-size: 24px !important;
    box-shadow: 0 0 24px rgba(0,229,255,.22) !important;
  }

  .topbar,
  .header-bar,
  .system-topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
    overflow-x: auto !important;
    gap: 8px !important;
    padding-left: 10px !important;
  }

  .main-content,
  #content-area,
  .content-area {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: calc(100vh - 120px) !important;
    overflow: visible !important;
    padding: 12px !important;
  }

  .right-monitors,
  .monitor-column,
  .monitors {
    width: 100% !important;
    margin-top: 12px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  #monitor-1,
  #monitor-2,
  #monitor-3 {
    min-height: auto !important;
  }

  .media-chat-header,
  .chat-titlebar,
  .projects-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .media-chat-actions,
  .chat-title-actions,
  .compact-image-menu {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .compact-pill,
  .orbiora-action-pill,
  .chat-title-actions button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 38px !important;
  }

  .chat-input-row,
  .media-bottom-input,
  .runway-options,
  .history-page-toolbar,
  .projects-toolbar {
    grid-template-columns: 1fr !important;
    display: grid !important;
    gap: 8px !important;
  }

  .chat-input-row input,
  .media-bottom-input input,
  .chat-input-row button,
  .media-bottom-input button {
    width: 100% !important;
  }

  .media-chat-page,
  .image-chat-page,
  .analysis-chat-page,
  .code-chat-page,
  .runway-page {
    height: auto !important;
    min-height: calc(100vh - 130px) !important;
  }

  .media-chat-log,
  .chat-box {
    min-height: 360px !important;
    max-height: none !important;
  }

  .media-image-row-list,
  .image-history-page-grid,
  .projects-grid,
  .chat-history-page-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    display: grid !important;
    gap: 10px !important;
  }

  .media-image-card,
  .media-image-card img {
    width: 100% !important;
  }

  .media-image-card img {
    height: 150px !important;
  }

  .analysis-entry {
    grid-template-columns: 1fr !important;
  }

  .image-thumb-312,
  .image-thumb-312 img {
    width: 100% !important;
    max-width: 312px !important;
    margin: 0 auto !important;
  }

  .project-create-card,
  .project-overview-grid {
    grid-template-columns: 1fr !important;
  }

  .project-workspace-hero {
    align-items: flex-start !important;
    flex-wrap: wrap !important;
  }

  .project-workspace-hero button {
    margin-left: 0 !important;
    max-width: none !important;
    width: 100% !important;
  }
}

@media (max-width: 420px) {
  .media-image-row-list,
  .image-history-page-grid,
  .projects-grid,
  .chat-history-page-list {
    grid-template-columns: 1fr !important;
  }

  .media-chat-actions,
  .chat-title-actions,
  .compact-image-menu {
    grid-template-columns: 1fr !important;
  }
}

/* === LEVEL 49 Runway Studio === */
.runway-studio-panel {
  flex: 1;
  min-height: 0;
  border-radius: 18px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.runway-mode-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.runway-mode {
  height: 42px;
  border-radius: 13px;
  border: 1px solid rgba(0,229,255,.24);
  background: rgba(0,229,255,.055);
  color: #eafaff;
  font-weight: 900;
  cursor: pointer;
}

.runway-mode.active {
  border-color: rgba(83,255,183,.50);
  box-shadow: 0 0 18px rgba(83,255,183,.12);
}

#runway-prompt {
  flex: 1;
  min-height: 180px;
  resize: vertical;
  border-radius: 16px;
  border: 1px solid rgba(0,229,255,.24);
  background: rgba(255,255,255,.055);
  color: #eafaff;
  padding: 14px;
  outline: none;
}

.runway-options {
  display: grid;
  grid-template-columns: 160px 160px 1fr;
  gap: 10px;
}

.runway-options select {
  border-radius: 13px;
  border: 1px solid rgba(0,229,255,.24);
  background: rgba(255,255,255,.055);
  color: #eafaff;
  padding: 0 12px;
}

.runway-result {
  min-height: 86px;
}

.runway-task-card {
  border: 1px solid rgba(255,194,51,.25);
  background: rgba(255,194,51,.045);
  border-radius: 16px;
  padding: 14px;
}

.runway-task-card strong {
  display: block;
  color: #fff4d8;
  margin-bottom: 8px;
}

.runway-task-card p {
  color: #dce8ff;
  margin: 0 0 8px;
}

.runway-task-card small {
  color: #8ea4c9;
}


/* === LEVEL 50 Mobile Top Hamburger Menu === */
.mobile-topbar,
.mobile-nav-backdrop {
  display: none;
}

@media (max-width: 760px) {
  body {
    padding-top: 64px !important;
  }

  .mobile-topbar {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 58px !important;
    z-index: 10000 !important;
    padding: 8px 12px !important;
    background:
      radial-gradient(circle at 12% 50%, rgba(0,229,255,.18), transparent 30%),
      linear-gradient(135deg, rgba(3,7,22,.96), rgba(5,16,31,.94)) !important;
    border-bottom: 1px solid rgba(0,229,255,.24) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,.38), 0 0 22px rgba(0,229,255,.08) !important;
    backdrop-filter: blur(14px) !important;
  }

  .mobile-nav-toggle {
    display: grid !important;
    place-items: center !important;
    position: static !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(0,229,255,.45) !important;
    background: linear-gradient(135deg, rgba(0,229,255,.16), rgba(255,59,212,.12)) !important;
    color: #eafaff !important;
    font-size: 23px !important;
    box-shadow: 0 0 18px rgba(0,229,255,.16) !important;
  }

  .mobile-brand {
    display: flex !important;
    flex-direction: column !important;
    line-height: 1.05 !important;
    min-width: 0 !important;
  }

  .mobile-brand strong {
    color: #eafaff !important;
    font-size: 18px !important;
    letter-spacing: .02em !important;
    text-shadow: 0 0 12px rgba(0,229,255,.18) !important;
  }

  .mobile-brand span {
    color: #77e9ff !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .07em !important;
  }

  .mobile-status-dot {
    margin-left: auto !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: #1dff92 !important;
    box-shadow: 0 0 14px rgba(29,255,146,.75) !important;
  }

  .mobile-nav-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9997 !important;
    background: rgba(0,0,0,.46) !important;
    backdrop-filter: blur(3px) !important;
  }

  body.mobile-nav-open .mobile-nav-backdrop {
    display: block !important;
  }

  body.mobile-nav-open .mobile-topbar {
    box-shadow: 0 8px 28px rgba(0,0,0,.44), 0 0 26px rgba(255,59,212,.11) !important;
  }

  /* override old bottom hamburger */
  body > .mobile-nav-toggle:not(#mobile-nav-toggle) {
    display: none !important;
  }

  .main-content,
  #content-area,
  .content-area {
    padding-top: 12px !important;
  }
}

@media (min-width: 761px) {
  .mobile-topbar,
  .mobile-nav-backdrop {
    display: none !important;
  }
}


/* === LEVEL 51 Mobile menu real drawer + Orbiora banner === */
@media (max-width: 760px) {
  body {
    padding-top: 78px !important;
  }

  .mobile-topbar-banner {
    height: 72px !important;
    background:
      linear-gradient(90deg, rgba(3,7,22,.82), rgba(3,7,22,.42), rgba(3,7,22,.82)),
      url('/orbiora-mobile-banner.png') center / cover no-repeat !important;
    border-bottom: 1px solid rgba(0,229,255,.32) !important;
  }

  .mobile-topbar-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(circle at 12% 50%, rgba(0,229,255,.16), transparent 28%),
      radial-gradient(circle at 80% 50%, rgba(255,59,212,.12), transparent 32%);
  }

  .mobile-topbar > * {
    position: relative;
    z-index: 2;
  }

  /* actual app sidebar is .menu, not .sidebar */
  .app-shell .menu {
    position: fixed !important;
    top: 72px !important;
    left: 0 !important;
    width: 86vw !important;
    max-width: 340px !important;
    height: calc(100vh - 72px) !important;
    z-index: 9998 !important;
    transform: translateX(-112%) !important;
    transition: transform .24s ease !important;
    overflow-y: auto !important;
    box-shadow: 22px 0 70px rgba(0,0,0,.55) !important;
    border-radius: 0 22px 22px 0 !important;
    margin: 0 !important;
  }

  body.mobile-nav-open .app-shell .menu {
    transform: translateX(0) !important;
  }

  .app-shell .menu .brand {
    display: none !important;
  }

  .app-shell .menu .nav-list {
    padding-top: 14px !important;
  }

  .app-shell .menu .nav-item {
    min-height: 48px !important;
    font-size: 14px !important;
  }

  .mobile-nav-backdrop {
    top: 72px !important;
  }

  /* remove old .sidebar mobile rules effect if any */
  .sidebar {
    transform: none;
  }

  /* content starts below banner, full width */
  .app-shell {
    padding-top: 0 !important;
  }

  .main,
  .main-content,
  .workspace,
  #content-area {
    margin-left: 0 !important;
  }
}

@media (min-width: 761px) {
  .app-shell .menu {
    transform: none !important;
  }
}


/* === LEVEL 52 Perfect Mobile View + Clean Banner === */

/* sichtbare Brand-Schrift in Menü entfernen, Banner übernimmt Identität */
@media (max-width: 760px) {
  body {
    padding-top: 78px !important;
    background: #030716 !important;
  }

  .mobile-topbar {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 74px !important;
    z-index: 10000 !important;
    padding: 10px 10px !important;
    background:
      linear-gradient(90deg, rgba(3,7,22,.50), rgba(3,7,22,.18), rgba(3,7,22,.64)),
      url('/orbiora-mobile-banner-clean.png') center / cover no-repeat !important;
    border-bottom: 1px solid rgba(0,229,255,.30) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,.44), 0 0 24px rgba(0,229,255,.10) !important;
    backdrop-filter: blur(10px) !important;
  }

  .mobile-topbar::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    background:
      radial-gradient(circle at 12% 50%, rgba(0,229,255,.10), transparent 28%),
      radial-gradient(circle at 78% 45%, rgba(255,59,212,.09), transparent 30%),
      linear-gradient(180deg, rgba(255,255,255,.045), transparent 45%) !important;
  }

  .mobile-topbar > * {
    position: relative !important;
    z-index: 2 !important;
  }

  .mobile-nav-toggle {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(0,229,255,.55) !important;
    background: rgba(3,7,22,.62) !important;
    color: #eafaff !important;
    display: grid !important;
    place-items: center !important;
    font-size: 24px !important;
    box-shadow: 0 0 20px rgba(0,229,255,.18) !important;
  }

  .mobile-brand,
  .mobile-brand strong,
  .mobile-brand span {
    display: none !important;
  }

  .mobile-brand-spacer {
    flex: 1 1 auto !important;
  }

  .mobile-auth-actions {
    display: flex !important;
    gap: 7px !important;
    align-items: center !important;
  }

  .mobile-auth-actions button {
    height: 34px !important;
    padding: 0 10px !important;
    border-radius: 11px !important;
    border: 1px solid rgba(0,229,255,.32) !important;
    background: rgba(3,7,22,.58) !important;
    color: #eafaff !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
    box-shadow: inset 0 0 12px rgba(255,255,255,.035) !important;
  }

  .mobile-auth-actions button:nth-child(2) {
    border-color: rgba(255,59,212,.36) !important;
    background: rgba(65,18,72,.52) !important;
  }

  .mobile-status-dot {
    width: 11px !important;
    height: 11px !important;
    min-width: 11px !important;
    border-radius: 50% !important;
    background: #1dff92 !important;
    box-shadow: 0 0 14px rgba(29,255,146,.75) !important;
    margin-left: 2px !important;
  }

  /* Das echte Menü ist .menu */
  .app-shell .menu {
    position: fixed !important;
    top: 74px !important;
    left: 0 !important;
    width: 86vw !important;
    max-width: 340px !important;
    height: calc(100vh - 74px) !important;
    z-index: 9998 !important;
    transform: translateX(-112%) !important;
    transition: transform .24s ease !important;
    overflow-y: auto !important;
    border-radius: 0 22px 22px 0 !important;
    margin: 0 !important;
    padding-top: 14px !important;
    box-shadow: 22px 0 70px rgba(0,0,0,.55) !important;
  }

  body.mobile-nav-open .app-shell .menu {
    transform: translateX(0) !important;
  }

  body.mobile-nav-open .mobile-nav-backdrop {
    display: block !important;
  }

  .mobile-nav-backdrop {
    display: none !important;
    position: fixed !important;
    top: 74px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 9997 !important;
    background: rgba(0,0,0,.46) !important;
    backdrop-filter: blur(3px) !important;
  }

  .app-shell .menu .brand {
    display: none !important;
  }

  .app-shell .menu .nav-list {
    padding: 8px 14px 18px !important;
  }

  .app-shell .menu .nav-item {
    min-height: 48px !important;
    font-size: 14px !important;
    border-radius: 13px !important;
  }

  /* Schriftzüge im alten Brand sicher verstecken */
  .brand h1,
  .brand span,
  .login-logo-row h1,
  .login-logo-row p {
    display: none !important;
  }

  .app-shell {
    padding-top: 0 !important;
  }

  #content-area,
  .content-area,
  .main-content,
  .workspace {
    margin-left: 0 !important;
    padding: 12px !important;
    min-height: calc(100vh - 90px) !important;
  }
}

@media (max-width: 420px) {
  .mobile-auth-actions button {
    font-size: 10px !important;
    padding: 0 8px !important;
  }

  .mobile-status-dot {
    display: none !important;
  }
}

@media (min-width: 761px) {
  .mobile-topbar,
  .mobile-nav-backdrop {
    display: none !important;
  }
}


/* === LEVEL 53 Visible clean banner + start auth === */
.clean-cosmic-banner {
  width: 100%;
  height: 150px;
  border-radius: 20px;
  margin-bottom: 22px;
  background:
    linear-gradient(90deg, rgba(3,7,22,.25), rgba(3,7,22,.08), rgba(3,7,22,.32)),
    url('/orbiora-clean-cosmic-banner.png') center / cover no-repeat;
  border: 1px solid rgba(0,229,255,.24);
  box-shadow: 0 0 34px rgba(0,229,255,.10), inset 0 0 30px rgba(255,255,255,.025);
}

.welcome-auth-actions button:first-child {
  border-color: rgba(0,229,255,.42) !important;
}

.welcome-auth-actions button:nth-child(2) {
  border-color: rgba(255,59,212,.42) !important;
  background: rgba(85,25,90,.18) !important;
}

.mobile-user-pill {
  max-width: 220px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (max-width: 760px) {
  .mobile-topbar {
    height: 84px !important;
    background:
      linear-gradient(90deg, rgba(3,7,22,.52), rgba(3,7,22,.10), rgba(3,7,22,.64)),
      url('/orbiora-clean-cosmic-banner.png') center / cover no-repeat !important;
  }

  body {
    padding-top: 88px !important;
  }

  .app-shell .menu {
    top: 84px !important;
    height: calc(100vh - 84px) !important;
  }

  .mobile-nav-backdrop {
    top: 84px !important;
  }

  .clean-cosmic-banner {
    height: 130px;
    border-radius: 18px;
    margin-bottom: 18px;
  }

  .welcome-card {
    padding-top: 18px !important;
  }
}

@media (max-width: 420px) {
  .clean-cosmic-banner {
    height: 112px;
  }

  .mobile-auth-actions .mobile-user-pill {
    max-width: 150px !important;
  }
}


/* === LEVEL 54 CLEAN HEADER === */

.brand-panel {
  background:
    linear-gradient(90deg, rgba(4,8,22,.35), rgba(4,8,22,.10)),
    url('/orbiora-header-clean.png') center/cover no-repeat !important;
  min-height: 120px;
  position: relative;
  overflow: hidden;
}

.brand-panel h1,
.brand-panel .brand-title,
.brand-panel .logo-text,
.brand-panel .brand-subtitle {
  display:none !important;
}

.brand-panel::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,0,0,.08), rgba(0,0,0,.45));
}

.welcome-card{
  padding-top:40px !important;
}

.clean-cosmic-banner{
  display:none !important;
}

@media (max-width:760px){

  .mobile-topbar{
    background:
      linear-gradient(90deg, rgba(2,6,18,.30), rgba(2,6,18,.12)),
      url('/orbiora-header-clean.png') center/cover no-repeat !important;
  }

  .brand-panel{
    display:none !important;
  }

  .welcome-card{
    padding-top:10px !important;
  }
}


/* LEVEL 55 HEADER FIT */

.mobile-topbar{
  height:72px !important;
  background-size: cover !important;
  background-position:center center !important;
  border-bottom:1px solid rgba(0,255,255,.15);
}

.mobile-topbar::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,
    rgba(2,5,18,.82) 0%,
    rgba(2,5,18,.45) 35%,
    rgba(2,5,18,.25) 60%,
    rgba(2,5,18,.82) 100%);
  pointer-events:none;
}

.mobile-topbar .hamburger-btn{
  position:relative;
  z-index:5;
  margin-left:10px;
}

.mobile-topbar .auth-actions{
  position:relative;
  z-index:5;
  margin-right:12px;
}

.mobile-topbar img,
.mobile-topbar .banner-image{
  object-fit:cover !important;
  object-position:center !important;
  opacity:.82;
}

@media (max-width:760px){

  .mobile-topbar{
    overflow:hidden;
  }

  .mobile-topbar .brand-banner{
    transform:scale(.92);
    transform-origin:center;
  }
}


/* LEVEL 56 MOBILE HEADER FIX */

@media (max-width:760px){

  .mobile-topbar{
    height:64px !important;
    background-size: 180% auto !important;
    background-position:center center !important;
  }

  .mobile-topbar::before{
    background:linear-gradient(90deg,
      rgba(2,5,18,.88) 0%,
      rgba(2,5,18,.70) 35%,
      rgba(2,5,18,.55) 50%,
      rgba(2,5,18,.70) 70%,
      rgba(2,5,18,.88) 100%) !important;
  }

  .mobile-topbar .banner-image,
  .mobile-topbar img{
    opacity:.45 !important;
    transform:scale(.78);
  }

  .mobile-topbar .auth-actions{
    gap:6px !important;
  }

  .mobile-topbar .auth-actions button,
  .mobile-topbar .auth-actions a{
    padding:6px 10px !important;
    font-size:11px !important;
  }

  .mobile-topbar .hamburger-btn{
    width:42px !important;
    height:42px !important;
  }
}


/* LEVEL 57 REAL MOBILE HEADER FIX */

@media (max-width:760px){

  .mobile-topbar{
    height:70px !important;
    background-size: contain !important;
    background-repeat:no-repeat !important;
    background-position:center center !important;
    background-color:#060b18 !important;
  }

  .mobile-topbar::before{
    content:'';
    position:absolute;
    inset:0;
    background:rgba(3,8,20,.45) !important;
    backdrop-filter: blur(1px);
  }

  /* stop giant zoom */
  .mobile-topbar img,
  .mobile-topbar .banner-image,
  .mobile-topbar .brand-banner{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    object-position:center !important;
    transform:none !important;
    opacity:.92 !important;
  }

  .mobile-topbar .auth-actions{
    position:relative;
    z-index:5;
    display:flex;
    align-items:center;
    gap:4px;
    margin-right:8px;
  }

  .mobile-topbar .auth-actions button,
  .mobile-topbar .auth-actions a{
    font-size:10px !important;
    padding:5px 8px !important;
    border-radius:10px !important;
  }

  .mobile-topbar .hamburger-btn{
    position:relative;
    z-index:5;
    width:40px !important;
    height:40px !important;
    margin-left:8px !important;
  }
}


/* =========================================================
   LEVEL 58 — Alive Interface Design in echtem Orbiora System
   ========================================================= */

/* Alte Bannerbilder im Mobile Header komplett neutralisieren */
.mobile-topbar,
.mobile-topbar-banner,
.orbiora-alive-topbar {
  background: rgba(5,10,25,.58) !important;
  background-image:
    radial-gradient(circle at 18% 50%, rgba(0,220,255,.16), transparent 26%),
    radial-gradient(circle at 78% 50%, rgba(255,45,145,.13), transparent 28%),
    linear-gradient(90deg, rgba(255,0,120,.10), transparent 35%, rgba(0,180,255,.12)) !important;
}

/* Desktop: linkes Brand-Feld nicht mit riesigem Banner überladen */
.brand,
.menu .brand {
  background:
    radial-gradient(circle at 20% 50%, rgba(0,220,255,.12), transparent 38%),
    linear-gradient(135deg, rgba(5,10,25,.82), rgba(5,10,25,.38)) !important;
  border-radius: 18px !important;
  padding: 16px !important;
  border: 1px solid rgba(0,229,255,.12) !important;
}

.brand h1,
.brand span {
  display: none !important;
}

.brand::after {
  content: "ORBIORA CORE ONLINE";
  display: block;
  color: #c8f8ff;
  font-size: 11px;
  letter-spacing: 1.8px;
  font-weight: 900;
  margin-left: 10px;
  text-shadow: 0 0 12px rgba(0,229,255,.26);
}

/* Mobile Alive Header */
@media (max-width:760px) {
  body {
    padding-top: 72px !important;
  }

  .orbiora-alive-topbar {
    height: 68px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    z-index: 10000 !important;
    padding: 0 10px !important;
    border-bottom: 1px solid rgba(0,255,255,.16) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,.38), 0 0 24px rgba(0,229,255,.08) !important;
    backdrop-filter: blur(14px) !important;
    overflow: hidden !important;
  }

  .orbiora-alive-topbar::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255,0,120,.10), transparent 36%, rgba(0,180,255,.12));
    pointer-events: none;
  }

  .orbiora-alive-topbar > * {
    position: relative !important;
    z-index: 2 !important;
  }

  .alive-hamburger,
  .mobile-nav-toggle {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(0,255,255,.28) !important;
    background: rgba(0,0,0,.26) !important;
    color: #eafaff !important;
    font-size: 23px !important;
    display: grid !important;
    place-items: center !important;
    box-shadow: 0 0 18px rgba(0,229,255,.14) !important;
  }

  .alive-core-center {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    pointer-events: none !important;
  }

  .alive-core-center span {
    font-size: 9px !important;
    letter-spacing: 1.3px !important;
    color: #c8f8ff !important;
    font-weight: 900 !important;
    text-shadow: 0 0 12px rgba(0,229,255,.25) !important;
    white-space: nowrap !important;
  }

  .alive-auth,
  .mobile-auth-actions {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .alive-auth button,
  .mobile-auth-actions button {
    height: 32px !important;
    padding: 0 9px !important;
    border-radius: 11px !important;
    border: 1px solid rgba(0,255,255,.20) !important;
    background: rgba(0,0,0,.25) !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 900 !important;
  }

  .alive-auth button:nth-child(2),
  .mobile-auth-actions button:nth-child(2) {
    background: linear-gradient(90deg, rgba(109,30,255,.45), rgba(255,44,145,.34)) !important;
    border-color: rgba(255,59,212,.28) !important;
  }

  .alive-dot,
  .mobile-status-dot {
    width: 10px !important;
    height: 10px !important;
    min-width: 10px !important;
    border-radius: 50% !important;
    background: #00ff88 !important;
    box-shadow: 0 0 12px #00ff88 !important;
  }

  .app-shell .menu {
    top: 68px !important;
    height: calc(100vh - 68px) !important;
    transform: translateX(-112%) !important;
  }

  body.mobile-nav-open .app-shell .menu {
    transform: translateX(0) !important;
  }

  .mobile-nav-backdrop {
    top: 68px !important;
  }

  .clean-cosmic-banner,
  .welcome-banner {
    display: none !important;
  }
}

/* Core Animation */
.alive-orb-core {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #00d5ff;
  box-shadow: 0 0 10px #00d5ff, 0 0 25px #00d5ff;
  animation: orbioraAlivePulse 2s infinite;
}

.alive-orb-core.big {
  width: 28px;
  height: 28px;
}

.alive-pulse-ring {
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(0,220,255,.24);
  animation: orbioraAliveRing 3s linear infinite;
}

.alive-pulse-ring.big {
  width: 78px;
  height: 78px;
}

@keyframes orbioraAlivePulse {
  0%,100% { transform: scale(1); opacity: .92; }
  50% { transform: scale(1.35); opacity: 1; }
}

@keyframes orbioraAliveRing {
  from { transform: scale(.55); opacity: .9; }
  to { transform: scale(1.55); opacity: 0; }
}

/* Startseite mehr wie Alive Interface, aber innerhalb deines Systems */
.welcome-card {
  position: relative !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 15% 5%, rgba(0,220,255,.10), transparent 30%),
    radial-gradient(circle at 88% 20%, rgba(255,45,145,.08), transparent 34%),
    rgba(3,8,22,.55) !important;
  backdrop-filter: blur(18px) !important;
  box-shadow: 0 0 30px rgba(0,180,255,.08), 0 0 60px rgba(255,0,120,.05) !important;
}

.welcome-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.20) 1px, transparent 1px);
  background-size: 58px 58px;
  opacity: .08;
  pointer-events: none;
  animation: orbioraStarDrift 42s linear infinite;
}

@keyframes orbioraStarDrift {
  from { transform: translateY(0); }
  to { transform: translateY(-58px); }
}

.welcome-alive-core {
  position: relative;
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  margin-bottom: 22px;
}

.welcome-card h2 {
  background: linear-gradient(90deg, #fff, #6ee7ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.quick-actions button,
.welcome-user-actions button,
.welcome-auth-actions button {
  transition: transform .18s ease, box-shadow .18s ease;
}

.quick-actions button:hover,
.welcome-user-actions button:hover,
.welcome-auth-actions button:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 18px rgba(0,229,255,.14);
}

@media (max-width:420px) {
  .alive-core-center span {
    display: none !important;
  }

  .alive-auth button,
  .mobile-auth-actions button {
    padding: 0 7px !important;
    font-size: 9px !important;
  }
}


/* === LEVEL 59 Abo-System === */
.plans-page {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.plans-grid,
.credit-grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  align-content: start;
  padding: 4px 2px 12px;
}

.plan-card,
.credit-card,
.my-plan-card {
  border: 1px solid rgba(0,229,255,.18);
  background:
    radial-gradient(circle at 20% 0%, rgba(0,229,255,.10), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
  border-radius: 20px;
  padding: 18px;
  box-shadow: 0 0 22px rgba(0,229,255,.06);
}

.plan-card.featured {
  border-color: rgba(83,255,183,.52);
  box-shadow: 0 0 26px rgba(83,255,183,.12), inset 0 0 18px rgba(83,255,183,.035);
}

.plan-tag {
  display: inline-flex;
  height: 24px;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(0,229,255,.09);
  border: 1px solid rgba(0,229,255,.20);
  color: #53ffb7;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.plan-card h3,
.credit-card h3,
.my-plan-card h3 {
  margin: 0 0 8px;
  color: #fff4d8;
  font-size: 19px;
}

.plan-card strong,
.credit-card strong,
.my-plan-card strong {
  display: block;
  color: #eafaff;
  font-size: 28px;
  margin-bottom: 10px;
  text-shadow: 0 0 16px rgba(0,229,255,.14);
}

.plan-card p,
.credit-card p {
  color: #aebbd7;
  line-height: 1.45;
  min-height: 42px;
  margin: 0 0 14px;
  font-size: 12px;
}

.plan-card ul,
.my-plan-card ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.plan-card li,
.my-plan-card li {
  color: #dce8ff;
  font-size: 12px;
  line-height: 1.35;
  padding-left: 18px;
  position: relative;
}

.plan-card li::before,
.my-plan-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #53ffb7;
  font-weight: 900;
}

.plan-card button,
.credit-card button {
  width: 100%;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(0,229,255,.25);
  background: linear-gradient(135deg, rgba(0,229,255,.12), rgba(255,59,212,.10));
  color: #eafaff;
  font-weight: 900;
  cursor: pointer;
}

.pricing-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border-radius: 16px;
  padding: 14px;
  color: #b8c6df;
  border: 1px solid rgba(255,194,51,.18);
  background: rgba(255,194,51,.035);
}

.pricing-note strong {
  color: #fff4d8;
  white-space: nowrap;
}

@media (max-width:760px) {
  .plans-grid,
  .credit-grid {
    grid-template-columns: 1fr !important;
  }

  .plan-card strong,
  .credit-card strong,
  .my-plan-card strong {
    font-size: 24px;
  }

  .pricing-note {
    flex-direction: column;
  }
}

/* === LEVEL 60 Test Mode === */
.test-mode-badge{position:fixed;right:18px;bottom:18px;z-index:9999;min-width:210px;border-radius:16px;border:1px solid rgba(83,255,183,.34);background:rgba(3,8,22,.86);color:#eafaff;padding:10px 12px;text-align:left;box-shadow:0 0 24px rgba(83,255,183,.12);backdrop-filter:blur(12px);cursor:pointer}
.test-mode-badge span{display:block;color:#53ffb7;font-size:10px;font-weight:900;letter-spacing:.08em}.test-mode-badge b{display:block;font-size:13px;margin:2px 0}.test-mode-badge small{display:block;color:#aebbd7;font-size:10px;line-height:1.35}
.test-mode-page{height:100%;min-height:0;display:flex;flex-direction:column;gap:16px}.test-mode-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}.test-stat{border:1px solid rgba(83,255,183,.20);background:rgba(83,255,183,.045);border-radius:16px;padding:14px}.test-stat span{display:block;color:#aebbd7;font-size:11px;margin-bottom:8px}.test-stat strong{color:#53ffb7;font-size:22px}
.test-actions{display:flex;flex-wrap:wrap;gap:10px;border-radius:18px;padding:14px}.test-actions button{min-height:38px;border-radius:12px;border:1px solid rgba(0,229,255,.24);background:rgba(0,229,255,.06);color:#eafaff;font-weight:900;padding:0 14px;cursor:pointer}
.test-log{flex:1;min-height:0;overflow-y:auto;border-radius:18px;padding:14px}.test-log h3{margin:0 0 12px;color:#fff4d8}.test-log-row{display:grid;grid-template-columns:80px 1fr 160px;gap:10px;align-items:center;border-bottom:1px solid rgba(255,255,255,.06);padding:9px 0}.test-log-row span{color:#53ffb7;font-size:11px;font-weight:900;text-transform:uppercase}.test-log-row strong{color:#eafaff;font-size:12px}.test-log-row small{color:#8ea4c9;font-size:10px;text-align:right}
.runway-credit-preview{border-radius:14px;border:1px solid rgba(255,194,51,.18);background:rgba(255,194,51,.04);color:#fff4d8;padding:12px 14px;font-size:12px}.orbiora-video-loading{min-height:220px;border-radius:18px;border:1px solid rgba(0,229,255,.18);background:radial-gradient(circle at 50% 30%,rgba(0,229,255,.12),transparent 34%),rgba(3,8,22,.62);display:grid;place-items:center;text-align:center;gap:10px;position:relative;overflow:hidden}.orbiora-video-loading strong{color:#fff4d8}.orbiora-video-loading span{color:#aebbd7;max-width:70%;font-size:12px}.fake-video-thumb{width:100%;max-height:260px;object-fit:cover;border-radius:16px;margin-bottom:12px;border:1px solid rgba(0,229,255,.18)}
@media(max-width:760px){.test-mode-badge{left:12px;right:12px;bottom:12px;min-width:0}.test-log-row{grid-template-columns:1fr;gap:3px}.test-log-row small{text-align:left}}


/* === LEVEL 61 Wallet / Fake Billing === */
.wallet-mode-badge {
  position: fixed;
  right: 18px;
  bottom: 92px;
  z-index: 9999;
  min-width: 230px;
  border-radius: 16px;
  border: 1px solid rgba(255,194,51,.38);
  background:
    radial-gradient(circle at 10% 0%, rgba(255,194,51,.16), transparent 42%),
    rgba(3,8,22,.88);
  color: #eafaff;
  padding: 10px 12px;
  text-align: left;
  box-shadow: 0 0 24px rgba(255,194,51,.10);
  backdrop-filter: blur(12px);
  cursor: pointer;
}

.wallet-mode-badge span {
  display: block;
  color: #ffc233;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
}

.wallet-mode-badge b {
  display: block;
  font-size: 13px;
  margin: 2px 0;
}

.wallet-mode-badge small {
  display: block;
  color: #aebbd7;
  font-size: 10px;
  line-height: 1.35;
}

.wallet-page {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wallet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 12px;
}

.wallet-card,
.wallet-plan {
  border-radius: 18px;
  border: 1px solid rgba(0,229,255,.18);
  background:
    radial-gradient(circle at 15% 0%, rgba(0,229,255,.12), transparent 36%),
    rgba(255,255,255,.035);
  padding: 16px;
}

.wallet-card span {
  display: block;
  color: #aebbd7;
  font-size: 11px;
  margin-bottom: 8px;
}

.wallet-card strong {
  display: block;
  color: #53ffb7;
  font-size: 28px;
  text-shadow: 0 0 15px rgba(83,255,183,.14);
}

.wallet-card small {
  color: #8295b9;
  font-size: 10px;
}

.wallet-plan h3 {
  color: #eafaff;
  font-size: 30px;
  margin: 0 0 8px;
}

.wallet-plan p {
  color: #aebbd7;
  margin: 0;
}

.wallet-section {
  border-radius: 18px;
  padding: 16px;
  min-height: 0;
  overflow-y: auto;
}

.wallet-section h3 {
  margin: 0 0 14px;
  color: #fff4d8;
}

.wallet-row {
  display: grid;
  grid-template-columns: 130px 1fr 190px;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: 10px 0;
}

.wallet-row span {
  color: #53ffb7;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.wallet-row strong {
  color: #eafaff;
  font-size: 12px;
}

.wallet-row small {
  color: #8ea4c9;
  font-size: 10px;
  text-align: right;
}

.credit-grid.mini .credit-card strong {
  font-size: 22px;
}

@media (max-width:760px) {
  .wallet-mode-badge {
    left: 12px;
    right: 12px;
    bottom: 86px;
    min-width: 0;
  }

  .wallet-row {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .wallet-row small {
    text-align: left;
  }
}


/* === LEVEL 62 user isolation notice === */
.wallet-mode-badge span { color:#ffc233; }
.wallet-plan .plan-tag { margin-bottom:10px; }
@media (max-width:760px) {
  .wallet-mode-badge { bottom: 96px !important; }
  .test-mode-badge { bottom: 14px !important; }
}

/* === LEVEL 63 server-only wallet badge === */
.server-wallet-badge{position:fixed;right:18px;bottom:18px;z-index:9999;min-width:255px;border-radius:16px;border:1px solid rgba(255,194,51,.38);background:radial-gradient(circle at 10% 0%,rgba(255,194,51,.16),transparent 42%),rgba(3,8,22,.90);color:#eafaff;padding:10px 12px;text-align:left;box-shadow:0 0 24px rgba(255,194,51,.12);backdrop-filter:blur(12px);cursor:pointer}
.server-wallet-badge span{display:block;color:#ffc233;font-size:10px;font-weight:900;letter-spacing:.08em}.server-wallet-badge b{display:block;font-size:13px;margin:2px 0}.server-wallet-badge small{display:block;color:#aebbd7;font-size:10px;line-height:1.35}
.projects-page{height:100%;min-height:0;display:flex;flex-direction:column;gap:14px}.project-search{width:100%;height:42px;border-radius:14px;border:1px solid rgba(0,229,255,.16);background:rgba(255,255,255,.055);color:#eafaff;padding:0 14px}.projects-grid{flex:1;min-height:0;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,280px));gap:14px;align-content:start}
.project-card{border:1px solid rgba(0,229,255,.18);background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));border-radius:20px;padding:16px}.project-icon{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:rgba(0,229,255,.09);margin-bottom:10px}.project-card h3{margin:0 0 5px;color:#fff4d8;font-size:17px}.project-card small{color:#8ea4c9}.project-card p{color:#c2d0ea;font-size:12px;line-height:1.45;min-height:42px}.project-progress{height:7px;border-radius:999px;background:rgba(255,255,255,.09);overflow:hidden;margin:10px 0 14px}.project-progress span{display:block;height:100%;background:linear-gradient(90deg,#22d3ee,#53ffb7,#ffc233)}.project-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.project-actions button{height:34px;border-radius:10px;border:1px solid rgba(0,229,255,.18);background:rgba(0,229,255,.06);color:#eafaff;font-weight:800;cursor:pointer}
@media(max-width:760px){.server-wallet-badge{left:12px;right:12px;bottom:12px;min-width:0}.projects-grid{grid-template-columns:1fr}}

/* === LEVEL 65 single server wallet badge === */

.server-wallet-badge{position:fixed;right:18px;bottom:18px;z-index:9999;min-width:260px;border-radius:16px;border:1px solid rgba(255,194,51,.38);background:radial-gradient(circle at 10% 0%,rgba(255,194,51,.16),transparent 42%),rgba(3,8,22,.92);color:#eafaff;padding:10px 12px;text-align:left;box-shadow:0 0 24px rgba(255,194,51,.12);backdrop-filter:blur(12px);cursor:pointer}
.server-wallet-badge span{display:block;color:#ffc233;font-size:10px;font-weight:900;letter-spacing:.08em}.server-wallet-badge b{display:block;font-size:13px;margin:2px 0}.server-wallet-badge small{display:block;color:#aebbd7;font-size:10px;line-height:1.35}
@media(max-width:760px){.server-wallet-badge{left:12px;right:12px;bottom:12px;min-width:0}}

/* === LEVEL 66 hide legacy 250 flicker === */
button:has(small) small { pointer-events:none; }


/* === LEVEL 69: clean Abo button === */
button[data-abo-button="true"] {
  cursor: pointer;
}


/* === LEVEL 70 single plan system === */
.server-wallet-badge {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  min-width: 260px;
  border-radius: 16px;
  border: 1px solid rgba(255,194,51,.38);
  background: radial-gradient(circle at 10% 0%,rgba(255,194,51,.16),transparent 42%), rgba(3,8,22,.92);
  color: #eafaff;
  padding: 10px 12px;
  text-align: left;
  box-shadow: 0 0 24px rgba(255,194,51,.12);
  backdrop-filter: blur(12px);
  cursor: pointer;
}
.server-wallet-badge span { display:block;color:#ffc233;font-size:10px;font-weight:900;letter-spacing:.08em; }
.server-wallet-badge b { display:block;font-size:13px;margin:2px 0; }
.server-wallet-badge small { display:block;color:#aebbd7;font-size:10px;line-height:1.35; }
button[data-single-plan-button="true"] { cursor:pointer; }
@media(max-width:760px){.server-wallet-badge{left:12px;right:12px;bottom:12px;min-width:0}}

/* === LEVEL 72 Clean Abos === */
.plan-card.active-plan {
  border-color: rgba(83,255,183,.75) !important;
  box-shadow: 0 0 28px rgba(83,255,183,.12);
}
.plan-card.active-plan button[disabled] {
  opacity: .75;
  cursor: default;
}

/* === LEVEL 73 one wallet === */
button[data-wallet-master73="true"]{cursor:pointer}
.plan-card.active-plan{border-color:rgba(83,255,183,.75)!important;box-shadow:0 0 28px rgba(83,255,183,.12)}
.plan-card.active-plan button[disabled]{opacity:.75;cursor:default}


/* === LEVEL 76 Runway Lab Chat UI === */
.runway-page-76{height:100%;min-height:0;display:flex;flex-direction:column;gap:14px}
.runway-status-76{border:1px solid rgba(0,229,255,.18);background:rgba(0,229,255,.055);color:#cde9ff;border-radius:16px;padding:12px 14px;font-size:13px}
.runway-grid-76{flex:1;min-height:0;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;align-content:start;padding:4px 2px 10px}
.runway-empty-76{grid-column:1/-1;border:1px dashed rgba(0,229,255,.25);border-radius:20px;padding:34px;text-align:center;color:#94a8c9;background:rgba(255,255,255,.025)}
.runway-card-76{border:1px solid rgba(0,229,255,.18);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));border-radius:20px;padding:10px;cursor:pointer;transition:.18s ease}
.runway-card-76:hover{transform:translateY(-2px);border-color:rgba(0,229,255,.45);box-shadow:0 0 24px rgba(0,229,255,.08)}
.runway-thumb-76{aspect-ratio:16/9;border-radius:14px;overflow:hidden;position:relative;background:#050816;border:1px solid rgba(255,255,255,.08)}
.runway-thumb-76 img,.runway-thumb-76 video{width:100%;height:100%;object-fit:cover;display:block}
.runway-play-76{position:absolute;inset:0;margin:auto;width:46px;height:46px;border-radius:999px;display:grid;place-items:center;background:rgba(0,0,0,.42);color:#fff;border:1px solid rgba(255,255,255,.28);font-size:18px}
.runway-thumb-76 b{position:absolute;left:8px;top:8px;border-radius:999px;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.18);padding:4px 8px;color:#dff;font-size:10px}
.runway-meta-76{padding:9px 2px 0}
.runway-meta-76 strong{display:block;color:#eafaff;font-size:13px;line-height:1.3;max-height:38px;overflow:hidden}
.runway-meta-76 small{display:block;color:#91a7cb;margin-top:5px;font-size:11px}
.runway-card-actions-76{display:flex;gap:8px;margin-top:8px}
.runway-card-actions-76 button{flex:1;height:30px;border-radius:10px;border:1px solid rgba(0,229,255,.18);background:rgba(0,229,255,.07);color:#dff;font-weight:800;cursor:pointer}
.runway-composer-76{border:1px solid rgba(0,229,255,.20);background:rgba(255,255,255,.04);border-radius:20px;padding:12px}
.runway-composer-76 textarea{width:100%;min-height:78px;resize:vertical;border:1px solid rgba(0,229,255,.18);background:rgba(255,255,255,.08);color:#eafaff;border-radius:16px;padding:14px;outline:none}
.runway-options-76{display:grid;grid-template-columns:140px 90px 140px 170px 1fr 190px;gap:10px;align-items:center;margin-top:10px}
.runway-options-76 input,.runway-options-76 select,.runway-options-76 button{height:42px;border-radius:14px;border:1px solid rgba(0,229,255,.20);background:rgba(12,18,38,.88);color:#eafaff;padding:0 12px}
.runway-options-76 button{background:linear-gradient(135deg,#1e90ff,#00c8ff);color:white;font-weight:900;cursor:pointer}
.runway-estimate-76{color:#53ffb7;font-weight:900;font-size:13px}
.runway-overlay-76{position:fixed;inset:0;z-index:20000;display:none;place-items:center;background:rgba(0,0,0,.72);backdrop-filter:blur(10px);padding:24px}
.runway-overlay-76.is-open{display:grid}
.runway-modal-76{width:min(980px,96vw);border-radius:26px;border:1px solid rgba(0,229,255,.28);background:#050816;box-shadow:0 0 60px rgba(0,229,255,.14);overflow:hidden;position:relative}
.runway-close-76{position:absolute;right:14px;top:14px;z-index:2;width:38px;height:38px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.5);color:white;font-size:24px;cursor:pointer}
.runway-stage-76{aspect-ratio:16/9;background:#000;display:grid;place-items:center}
.runway-stage-76 video,.runway-stage-76 img{width:100%;height:100%;object-fit:contain}
.runway-player-info-76{padding:18px 20px 20px}
.runway-player-info-76 h3{margin:0 0 6px;color:#eafaff}
.runway-player-info-76 p{margin:0;color:#9fb3d8}
@media(max-width:980px){.runway-options-76{grid-template-columns:1fr 1fr}.runway-options-76 button{grid-column:1/-1}}


/* === LEVEL 77 Runway history/status/download polish === */
.runway-card-status-done{border-color:rgba(83,255,183,.45)!important}
.runway-card-status-work{border-color:rgba(255,194,51,.45)!important}
.runway-card-status-bad{border-color:rgba(255,92,122,.55)!important}
.runway-meta-76 em{display:block;margin-top:6px;color:#ff9aad;font-size:10px;font-style:normal;line-height:1.35}
.runway-player-actions-77{display:flex;gap:10px;margin-top:12px}
.runway-player-actions-77 button,.runway-wait-77 button{border:1px solid rgba(0,229,255,.25);background:rgba(0,229,255,.08);color:#eafaff;border-radius:12px;padding:10px 14px;font-weight:900;cursor:pointer}
.runway-wait-77{width:100%;height:100%;display:grid;place-items:center;text-align:center;color:#eafaff;padding:30px}
.runway-wait-77 img{max-width:240px;border-radius:18px;opacity:.75;margin-bottom:16px}
.runway-wait-77 h3{margin:0}
.runway-wait-77 p{color:#9fb3d8}

/* === LEVEL 78 Runway loader and cost guard === */
.runway-loading-card-78{border-color:rgba(0,229,255,.55)!important;box-shadow:0 0 28px rgba(0,229,255,.12)}
.runway-loading-thumb-78{display:grid;place-items:center;overflow:hidden}
.runway-loading-thumb-78 img{width:76px!important;height:76px!important;object-fit:contain!important;filter:drop-shadow(0 0 22px rgba(0,229,255,.55));z-index:2}
.runway-loader-ring-78{position:absolute;width:118px;height:118px;border-radius:50%;border:2px solid rgba(0,229,255,.14);border-top-color:rgba(0,229,255,.95);border-right-color:rgba(255,183,3,.7);animation:orbioraSpin78 1.2s linear infinite}
@keyframes orbioraSpin78{to{transform:rotate(360deg)}}
.runway-options-76 button:disabled{opacity:.55;cursor:not-allowed}


/* === LEVEL 79 persistent rendering loader === */
.runway-working-79{
  border-color:rgba(255,194,51,.65)!important;
  box-shadow:0 0 24px rgba(255,194,51,.08);
}
.runway-working-79 .runway-thumb-76 img{
  opacity:.72;
}
.runway-processing-note-79{
  color:#ffd36a!important;
}
.runway-refund-note-79{
  color:#53ffb7!important;
}
.runway-working-79 .runway-play-76{
  background:rgba(255,194,51,.18);
}


/* === LEVEL 80 Runway Studio UI Polish === */
.runway-page-76{
  gap:16px;
}

.runway-grid-76{
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr))!important;
  gap:18px!important;
  padding:8px 2px 18px!important;
}

.runway-card-80{
  border-radius:22px!important;
  padding:12px!important;
  max-width:330px;
  background:
    radial-gradient(circle at 20% 0%, rgba(0,229,255,.11), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025))!important;
}

.runway-card-80:hover{
  transform:translateY(-3px);
  box-shadow:0 0 32px rgba(0,229,255,.12);
}

.runway-thumb-80{
  min-height:148px;
  border-radius:16px!important;
}

.runway-thumb-80 video,
.runway-thumb-80 img{
  transform:scale(1.01);
}

.runway-running-stage-80{
  background:
    radial-gradient(circle at center, rgba(0,229,255,.14), rgba(5,8,22,.95) 62%),
    #050816!important;
}

.orbiora-render-loader-80{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  z-index:3;
  background:radial-gradient(circle at center, rgba(0,0,0,.18), rgba(0,0,0,.38));
}

.orbiora-render-loader-80 img{
  width:68px!important;
  height:68px!important;
  object-fit:contain!important;
  z-index:4;
  filter:drop-shadow(0 0 22px rgba(0,229,255,.8));
}

.orbiora-render-loader-80 small{
  position:absolute;
  bottom:18px;
  color:#eafaff;
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-shadow:0 0 12px rgba(0,229,255,.6);
}

.runway-loader-ring-80{
  width:124px!important;
  height:124px!important;
  z-index:3;
  border-width:3px!important;
}

.big-loader-80 img{
  width:96px!important;
  height:96px!important;
}

.big-loader-80 .runway-loader-ring-80{
  width:170px!important;
  height:170px!important;
}

.runway-play-80{
  width:54px!important;
  height:54px!important;
  font-size:20px!important;
  background:rgba(0,0,0,.48)!important;
  box-shadow:0 0 18px rgba(0,229,255,.18);
}

.runway-status-badge-80{
  left:10px!important;
  top:10px!important;
  font-size:10px!important;
  padding:5px 9px!important;
  letter-spacing:.04em;
}

.runway-meta-80{
  padding:11px 2px 0!important;
}

.runway-meta-80 strong{
  font-size:14px!important;
  line-height:1.25!important;
  min-height:36px;
}

.runway-meta-80 small{
  font-size:11px!important;
  color:#a8b8d7!important;
}

.runway-facts-80{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:9px;
}

.runway-facts-80 span{
  border:1px solid rgba(0,229,255,.16);
  background:rgba(0,229,255,.055);
  color:#dff;
  border-radius:999px;
  padding:4px 7px;
  font-size:10px;
  font-weight:800;
}

.runway-actions-80{
  display:flex!important;
  gap:6px!important;
  margin-top:10px!important;
}

.runway-actions-80 .mini-action-80{
  flex:1 1 0;
  min-width:0;
  height:32px!important;
  padding:0 8px!important;
  border-radius:10px!important;
  font-size:11px!important;
  line-height:1!important;
  white-space:nowrap;
}

.runway-actions-80 .primary-80{
  border-color:rgba(83,255,183,.28)!important;
  background:rgba(83,255,183,.10)!important;
  color:#cffff0!important;
}

.runway-actions-80 .danger-80{
  border-color:rgba(255,92,122,.28)!important;
  background:rgba(255,92,122,.08)!important;
  color:#ffd8df!important;
}

.runway-done-80{
  border-color:rgba(83,255,183,.45)!important;
}

.runway-working-80{
  border-color:rgba(255,194,51,.62)!important;
  box-shadow:0 0 28px rgba(255,194,51,.08);
}

.runway-failed-80{
  border-color:rgba(255,92,122,.62)!important;
}

.runway-empty-polished-80{
  display:grid!important;
  gap:8px;
  place-items:center;
  min-height:220px;
}

.runway-empty-polished-80 strong{
  color:#eafaff;
  font-size:18px;
}

.runway-empty-polished-80 span{
  color:#9fb3d8;
}

.runway-empty-orb-80{
  width:64px;
  height:64px;
  border-radius:50%;
  background:
    radial-gradient(circle at center, #00e5ff, transparent 38%),
    radial-gradient(circle at 60% 40%, #ffb703, transparent 22%),
    #07132a;
  box-shadow:0 0 28px rgba(0,229,255,.35);
}

.runway-modal-80{
  width:min(1040px,96vw)!important;
}

.runway-stage-80{
  min-height:520px;
}

.runway-player-info-80{
  background:linear-gradient(180deg, rgba(5,8,22,.92), rgba(5,8,22,1));
}

.runway-player-actions-80 button{
  min-width:130px;
}

@media(max-width:900px){
  .runway-grid-76{
    grid-template-columns:1fr!important;
  }
  .runway-card-80{
    max-width:none;
  }
  .runway-stage-80{
    min-height:300px;
  }
}


/* === LEVEL 83 Image to Video UI === */
.runway-mode-bar-83{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
  flex-wrap:wrap;
}
.runway-mode-bar-83 button{
  height:38px;
  border-radius:13px;
  border:1px solid rgba(0,229,255,.22);
  background:rgba(0,229,255,.07);
  color:#eafaff;
  font-weight:900;
  padding:0 14px;
  cursor:pointer;
}
.runway-mode-bar-83 button.active{
  background:linear-gradient(135deg,rgba(0,229,255,.22),rgba(255,183,3,.16));
  border-color:rgba(83,255,183,.45);
  box-shadow:0 0 18px rgba(0,229,255,.10);
}
.runway-mode-bar-83 span{
  color:#ffd36a;
  font-size:12px;
  font-weight:800;
}
.runway-image-panel-83{
  grid-template-columns:220px 1fr 230px;
  gap:12px;
  margin-bottom:12px;
  border:1px solid rgba(0,229,255,.16);
  background:rgba(255,255,255,.035);
  border-radius:18px;
  padding:12px;
}
.runway-upload-box-83 label{
  min-height:130px;
  border:1px dashed rgba(0,229,255,.34);
  background:rgba(0,229,255,.055);
  border-radius:16px;
  display:grid;
  place-items:center;
  text-align:center;
  cursor:pointer;
  padding:14px;
}
.runway-upload-box-83 input{
  display:none;
}
.runway-upload-box-83 strong{
  color:#eafaff;
  font-size:15px;
}
.runway-upload-box-83 span,
.runway-image-empty-83 span,
.runway-image-preview-card-83 span{
  color:#9fb3d8;
  font-size:12px;
}
.runway-image-preview-83{
  min-height:130px;
  display:grid;
}
.runway-image-empty-83{
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  display:grid;
  place-items:center;
  text-align:center;
  background:rgba(0,0,0,.12);
}
.runway-image-empty-83 strong{
  color:#eafaff;
}
.runway-image-preview-card-83{
  display:grid;
  grid-template-columns:160px 1fr auto;
  align-items:center;
  gap:12px;
  border:1px solid rgba(0,229,255,.16);
  border-radius:16px;
  padding:10px;
  background:rgba(0,0,0,.16);
}
.runway-image-preview-card-83 img{
  width:160px;
  height:100px;
  object-fit:cover;
  border-radius:12px;
}
.runway-image-preview-card-83 strong{
  display:block;
  color:#eafaff;
  margin-bottom:4px;
}
.runway-image-preview-card-83 button{
  border:1px solid rgba(255,92,122,.3);
  background:rgba(255,92,122,.08);
  color:#ffd8df;
  border-radius:11px;
  padding:9px 11px;
  font-weight:900;
  cursor:pointer;
}
.runway-image-library-wrap-83{
  border:1px solid rgba(255,255,255,.07);
  border-radius:16px;
  padding:10px;
  background:rgba(0,0,0,.12);
}
.runway-image-library-wrap-83 > strong{
  display:block;
  color:#eafaff;
  margin-bottom:8px;
  font-size:12px;
}
.runway-image-library-83{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:7px;
}
.runway-image-library-83 small{
  color:#9fb3d8;
}
.runway-image-mini-83{
  border:1px solid rgba(0,229,255,.18);
  background:rgba(0,229,255,.05);
  border-radius:10px;
  padding:3px;
  cursor:pointer;
}
.runway-image-mini-83 img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:8px;
}
@media(max-width:1000px){
  .runway-image-panel-83{
    grid-template-columns:1fr;
  }
  .runway-image-preview-card-83{
    grid-template-columns:1fr;
  }
  .runway-image-preview-card-83 img{
    width:100%;
    height:180px;
  }
}


/* === LEVEL 84 Compact Runway Image Bar === */
.runway-mode-bar-83,
#runway-image-panel-83{
  display:none!important;
}

.runway-compact-image-bar-84{
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap;
  margin-bottom:10px;
  padding:9px;
  border:1px solid rgba(0,229,255,.14);
  border-radius:16px;
  background:rgba(255,255,255,.028);
}

.runway-mode-pill-84{
  min-height:32px;
  display:flex;
  align-items:center;
  border:1px solid rgba(0,229,255,.22);
  background:rgba(0,229,255,.06);
  color:#dff;
  border-radius:999px;
  padding:0 12px;
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
}

.runway-mode-pill-84.image-active{
  border-color:rgba(83,255,183,.45);
  background:rgba(83,255,183,.10);
  color:#cffff0;
}

.runway-compact-upload-84{
  height:32px;
  display:flex;
  align-items:center;
  border:1px solid rgba(255,183,3,.22);
  background:rgba(255,183,3,.08);
  color:#fff1bd;
  border-radius:999px;
  padding:0 12px;
  font-size:12px;
  font-weight:900;
  cursor:pointer;
  white-space:nowrap;
}

.runway-compact-upload-84 input{
  display:none;
}

.runway-image-preview-84{
  min-height:32px!important;
  display:flex!important;
  align-items:center;
  flex:1 1 230px;
}

.runway-image-empty-84{
  display:flex;
  align-items:center;
  min-height:32px;
  color:#9fb3d8;
  font-size:12px;
}

.runway-image-preview-card-84{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
  height:42px;
  border:1px solid rgba(0,229,255,.16);
  background:rgba(0,0,0,.18);
  border-radius:13px;
  padding:4px 6px;
  max-width:360px;
}

.runway-image-preview-card-84 img{
  width:48px;
  height:34px;
  object-fit:cover;
  border-radius:9px;
}

.runway-image-preview-card-84 div{
  min-width:0;
}

.runway-image-preview-card-84 strong{
  display:block;
  color:#eafaff;
  font-size:12px;
  line-height:1.1;
}

.runway-image-preview-card-84 span{
  display:block;
  color:#9fb3d8;
  font-size:10px;
  max-width:220px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.runway-image-preview-card-84 button{
  width:28px;
  height:28px;
  border-radius:9px;
  border:1px solid rgba(255,92,122,.3);
  background:rgba(255,92,122,.10);
  color:#ffd8df;
  font-weight:900;
  cursor:pointer;
}

.runway-image-library-84{
  display:flex!important;
  gap:5px!important;
  max-width:210px;
  overflow:hidden;
}

.runway-image-mini-84{
  width:32px;
  height:32px;
  flex:0 0 32px;
  border-radius:9px;
  padding:2px;
  border:1px solid rgba(0,229,255,.18);
  background:rgba(0,229,255,.05);
  cursor:pointer;
}

.runway-image-mini-84.active{
  border-color:rgba(83,255,183,.75);
  box-shadow:0 0 12px rgba(83,255,183,.18);
}

.runway-image-mini-84 img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:7px;
}

.runway-render-hint-84{
  color:#ffd36a;
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
}

@media(max-width:900px){
  .runway-render-hint-84{
    white-space:normal;
  }
  .runway-image-library-84{
    max-width:100%;
  }
}


/* === LEVEL 85 Clean safe image option === */
#runway-compact-image-bar-84,
#runway-mode-bar-83,
#runway-image-panel-83{
  display:none!important;
}

.runway-image-slim-85{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:10px;
  padding:8px 10px;
  border:1px solid rgba(0,229,255,.12);
  background:rgba(255,255,255,.025);
  border-radius:14px;
}

.runway-add-image-85{
  height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(0,229,255,.24);
  background:rgba(0,229,255,.07);
  color:#eafaff;
  border-radius:999px;
  padding:0 12px;
  font-size:12px;
  font-weight:900;
  cursor:pointer;
}

.runway-add-image-85 input{
  display:none;
}

.runway-image-chip-85{
  height:30px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(0,0,0,.14);
  color:#9fb3d8;
  border-radius:999px;
  padding:0 10px;
  font-size:11px;
  font-weight:800;
}

.runway-image-chip-85.active{
  color:#cffff0;
  border-color:rgba(83,255,183,.32);
  background:rgba(83,255,183,.08);
}

.runway-image-chip-85 img{
  width:24px;
  height:24px;
  object-fit:cover;
  border-radius:50%;
}

.runway-clear-image-85{
  height:30px;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,92,122,.25);
  background:rgba(255,92,122,.08);
  color:#ffd8df;
  border-radius:999px;
  padding:0 10px;
  font-size:11px;
  font-weight:900;
  cursor:pointer;
}

.runway-safe-note-85{
  color:#ffd36a;
  font-size:11px;
  font-weight:800;
}

@media(max-width:900px){
  .runway-safe-note-85{
    width:100%;
  }
}


/* === LEVEL 86 image to video active note === */
.runway-safe-note-85{
  color:#ffd36a;
}
.runway-image-chip-85.active + .runway-clear-image-85 + .runway-safe-note-85{
  color:#53ffb7;
}


/* === LEVEL 87 Image-to-Video ratio fix note === */
.runway-safe-note-85::after{
  content:"";
}


/* === LEVEL 88 Runway upload URI note === */
.runway-safe-note-85{
  color:#53ffb7;
}


/* === LEVEL 94 Runway polish === */
.orbiora-mini-autopoll-note-94{
  margin-top:6px;
  font-size:11px;
  color:#4efcc0;
  opacity:.9;
}
.runway-video-card button,
.runway-card button{
  min-height:28px!important;
  padding:6px 10px!important;
  font-size:12px!important;
  border-radius:9px!important;
}
#runway-status-76{
  transition: all .25s ease;
}

/* === LEVEL 95 Modal Close + compact video controls === */
.runway-video-card button,.runway-card button{
  min-height:26px!important;
  padding:5px 9px!important;
  font-size:11px!important;
  line-height:1.1!important;
}
.runway-player-modal,.runway-modal,.video-modal,.orbiora-modal{
  overscroll-behavior:contain;
}


/* === LEVEL 97 modal close safety === */
body:not(.modal-open):not(.runway-modal-open):not(.video-modal-open){
  overflow:auto;
}
.runway-modal[aria-hidden="true"],
.runway-player-modal[aria-hidden="true"],
.video-modal[aria-hidden="true"],
.orbiora-modal[aria-hidden="true"],
[data-runway-modal][aria-hidden="true"],
[data-video-modal][aria-hidden="true"]{
  display:none!important;
  pointer-events:none!important;
}


/* === LEVEL 98 Runway Mode Dropdown === */
.runway-mode-wrap-98{
  display:inline-flex;
  min-width:130px;
}
#runway-mode-98{
  width:100%;
  border:1px solid rgba(0,220,255,.45);
  background:rgba(3,12,28,.88);
  color:#eafcff;
  border-radius:12px;
  padding:10px 12px;
  font-weight:800;
  outline:none;
  box-shadow:0 0 0 1px rgba(0,220,255,.12) inset;
}
#runway-mode-98:focus{
  border-color:#00e5ff;
}
@media(max-width:720px){
  .runway-mode-wrap-98{width:100%;min-width:100%;}
}

/* === LEVEL 99 Modern Runway Studio === */
.runway-modern-studio-99{border:1px solid rgba(0,210,255,.28)!important;border-radius:18px!important;padding:14px!important;background:linear-gradient(180deg,rgba(8,22,45,.78),rgba(6,12,28,.92))!important;box-shadow:0 20px 55px rgba(0,0,0,.22),inset 0 0 0 1px rgba(255,255,255,.03)!important}
.runway-compose-top-99{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.runway-image-strip-99{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:34px}
.runway-small-pill-99,.runway-image-strip-99 button{min-height:30px!important;padding:6px 10px!important;font-size:12px!important;border-radius:999px!important;width:auto!important}
.runway-image-status-99{display:inline-flex;align-items:center;gap:8px;min-height:30px;padding:5px 10px;border:1px solid rgba(90,255,200,.25);border-radius:999px;color:#6cffd0;background:rgba(5,35,35,.45);font-size:12px}
.runway-image-status-99 img{width:24px;height:24px;border-radius:50%;object-fit:cover;border:1px solid rgba(255,255,255,.18)}
.runway-hint-99{color:#ffd66d;font-size:12px;opacity:.9;white-space:nowrap}
.runway-toolbar-99{display:grid;grid-template-columns:minmax(130px,.8fr) minmax(120px,.8fr) minmax(100px,.7fr) minmax(120px,.8fr) minmax(190px,1.1fr) minmax(170px,.9fr);gap:8px;align-items:center;margin-top:10px}
.runway-control-cell-99{min-width:0}
.runway-control-99,#runway-mode-98{width:100%!important;height:42px!important;border:1px solid rgba(0,220,255,.38)!important;background:rgba(3,12,28,.88)!important;color:#eafcff!important;border-radius:12px!important;padding:0 12px!important;font-weight:800!important;outline:none!important;box-shadow:0 0 0 1px rgba(0,220,255,.08) inset!important}
.runway-generate-main-99{width:100%!important;height:42px!important;min-height:42px!important;border-radius:12px!important;font-size:14px!important;font-weight:900!important;padding:0 14px!important}
.runway-modern-studio-99 textarea{min-height:78px!important;border-radius:14px!important;margin:0!important}
@media(max-width:980px){.runway-toolbar-99{grid-template-columns:1fr 1fr}.runway-hint-99{white-space:normal}}
@media(max-width:620px){.runway-toolbar-99{grid-template-columns:1fr}.runway-compose-top-99{align-items:flex-start}}

/* === LEVEL 100 Runway Focus Layout === */
.runway-hidden-global-100{display:none!important}
.runway-focus-form-100{padding:12px!important;margin-top:10px!important}
.runway-focus-form-100 textarea{min-height:58px!important;max-height:86px!important;padding:12px 14px!important;font-size:13px!important}
.runway-focus-form-100 .runway-compose-top-99{margin-bottom:8px!important}
.runway-focus-form-100 .runway-toolbar-99{grid-template-columns:120px 105px 95px 115px minmax(150px,1fr) 145px!important;gap:8px!important;margin-top:8px!important}
.runway-focus-form-100 .runway-control-99,.runway-focus-form-100 #runway-mode-98{height:38px!important;min-height:38px!important;font-size:12px!important;border-radius:11px!important}
.runway-focus-form-100 .runway-generate-main-99{height:38px!important;min-height:38px!important;font-size:13px!important;padding:0 10px!important}
.runway-focus-form-100 .runway-hint-99{font-size:11px!important;opacity:.75!important}
.runway-focus-form-100 .runway-image-status-99,.runway-focus-form-100 .runway-small-pill-99,.runway-focus-form-100 .runway-image-strip-99 button{min-height:26px!important;height:28px!important;padding:4px 8px!important;font-size:11px!important}
.runway-actions-bottom-100{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:10px;margin:12px 0 0}
.runway-actions-bottom-100 button{border:1px solid rgba(0,210,255,.28);background:linear-gradient(180deg,rgba(4,30,55,.82),rgba(5,16,35,.92));color:#eaffff;border-radius:14px;min-height:40px;font-weight:800;cursor:pointer}
.runway-actions-bottom-100 button:hover{border-color:rgba(0,230,255,.7);transform:translateY(-1px)}
@media(max-width:980px){.runway-focus-form-100 .runway-toolbar-99{grid-template-columns:1fr 1fr!important}.runway-actions-bottom-100{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.runway-focus-form-100 .runway-toolbar-99{grid-template-columns:1fr!important}.runway-actions-bottom-100{grid-template-columns:1fr}}

/* === LEVEL 101 Runway Compact Polish === */
.runway-actions-bottom-100{display:none!important}
.runway-top-history-101{
  border:1px solid rgba(0,210,255,.35)!important;
  background:linear-gradient(180deg,rgba(5,34,62,.9),rgba(5,16,35,.94))!important;
  color:#eaffff!important;
  border-radius:13px!important;
  min-height:34px!important;
  padding:0 16px!important;
  font-weight:850!important;
  font-size:12px!important;
  margin-right:8px!important;
  cursor:pointer!important;
}
.runway-top-history-101:hover{border-color:rgba(0,230,255,.75)!important}
.runway-focus-form-100{
  padding:10px!important;
}
.runway-focus-form-100 textarea{
  min-height:52px!important;
  max-height:70px!important;
}
.runway-focus-form-100 .runway-toolbar-99{
  grid-template-columns:105px 92px 82px 105px minmax(140px,1fr) 125px!important;
  gap:7px!important;
}
.runway-compact-button-101,
.runway-focus-form-100 .runway-generate-main-99{
  min-height:32px!important;
  height:32px!important;
  padding:0 8px!important;
  font-size:11.5px!important;
  border-radius:10px!important;
}
.runway-compact-control-101,
.runway-focus-form-100 .runway-control-99,
.runway-focus-form-100 #runway-mode-98{
  min-height:34px!important;
  height:34px!important;
  padding:0 9px!important;
  font-size:11.5px!important;
  border-radius:10px!important;
}
.runway-focus-form-100 .runway-image-status-99,
.runway-focus-form-100 .runway-small-pill-99{
  height:24px!important;
  min-height:24px!important;
  font-size:10.5px!important;
}
@media(max-width:980px){
  .runway-focus-form-100 .runway-toolbar-99{grid-template-columns:1fr 1fr!important}
}
@media(max-width:620px){
  .runway-focus-form-100 .runway-toolbar-99{grid-template-columns:1fr!important}
}

/* === LEVEL 102 Runway Micro Polish === */
.runway-toolbar-tight-102{
  grid-template-columns:105px 86px 82px 100px 132px 108px!important;
  align-items:center!important;
  gap:7px!important;
}
.runway-quality-short-102{
  max-width:132px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.runway-generate-btn-102{
  width:108px!important;
  min-width:108px!important;
  max-width:108px!important;
  height:34px!important;
  min-height:34px!important;
  line-height:1.02!important;
  padding:3px 8px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  white-space:normal!important;
  font-size:11px!important;
  font-weight:900!important;
  border-radius:10px!important;
}
.runway-generate-btn-102 span{
  display:block!important;
  line-height:1.02!important;
}
.runway-hint-soft-102{
  font-size:10.5px!important;
  opacity:.72!important;
  color:#d7b85e!important;
}
#runway-image-status-99,
.runway-image-status-99{
  min-width:104px!important;
  justify-content:center!important;
  white-space:nowrap!important;
}
#runway-image-status-99 b,
.runway-image-status-99 b{
  font-size:10.5px!important;
}
.runway-focus-form-100 textarea{
  min-height:50px!important;
  max-height:64px!important;
}
@media(max-width:980px){
  .runway-toolbar-tight-102{
    grid-template-columns:1fr 1fr!important;
  }
  .runway-generate-btn-102{
    width:100%!important;
    max-width:none!important;
  }
}
@media(max-width:620px){
  .runway-toolbar-tight-102{
    grid-template-columns:1fr!important;
  }
}


/* === LEVEL 108 CLEAN MONITOR + RUNWAY STABLE === */
#monitor-1 .ring{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:74px;
  font-weight:900;
  color:#55ffd2;
}
#monitor-1 ul{
  margin-top:10px;
}
#monitor-1 li{
  display:flex;
  justify-content:space-between;
  gap:8px;
}
#monitor-1 b{
  color:#55ffd2;
}
.runway-toolbar-tight-102{
  grid-template-columns:105px 86px 82px 100px 132px 108px!important;
  align-items:center!important;
  gap:7px!important;
}
.runway-generate-btn-102{
  width:108px!important;
  min-width:108px!important;
  max-width:108px!important;
  height:34px!important;
  min-height:34px!important;
  line-height:1.05!important;
  padding:3px 8px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  white-space:normal!important;
  font-size:11px!important;
  font-weight:900!important;
  border-radius:10px!important;
}
.runway-quality-short-102{
  max-width:132px!important;
}

/* === LEVEL 109 Stable Credit Status Monitor === */
#monitor-1 .credit-status-static{
  display:grid;
  gap:7px;
  margin-top:12px;
}
#monitor-1 .credit-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:8px 9px;
  border:1px solid rgba(0,220,255,.22);
  background:rgba(2,18,38,.62);
  border-radius:10px;
}
#monitor-1 .credit-line span{
  color:#dffcff;
  font-size:12px;
  font-weight:800;
}
#monitor-1 .credit-line b{
  color:#55ffd2;
  font-size:12px;
  font-weight:900;
}
#monitor-1 .credit-note-static{
  margin-top:10px;
  padding-top:9px;
  border-top:1px solid rgba(255,255,255,.08);
  color:#9fb0cf;
  font-size:11px;
  font-weight:700;
}
#monitor-1 small{
  color:#a9b8d4!important;
}

/* === LEVEL 110 Structured Credit Monitor === */
#monitor-1 .credit-status-v110{
  display:grid;
  gap:7px;
  margin-top:12px;
}
#monitor-1 .credit-card-v110{
  border:1px solid rgba(0,220,255,.22);
  background:linear-gradient(135deg,rgba(2,18,38,.78),rgba(10,21,48,.62));
  border-radius:11px;
  padding:8px 9px;
}
#monitor-1 .credit-card-main-v110{
  border-color:rgba(0,255,210,.42);
  box-shadow:0 0 14px rgba(0,255,210,.08);
}
#monitor-1 .credit-top-v110{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
#monitor-1 .credit-top-v110 span{
  color:#eaffff;
  font-size:11.5px;
  font-weight:900;
}
#monitor-1 .credit-top-v110 b{
  color:#55ffd2;
  font-size:11.5px;
  font-weight:900;
  text-align:right;
  max-width:120px;
}
#monitor-1 .credit-top-v110 b.credit-unknown-v110{
  color:#8fa1bd;
  font-size:10px;
}
#monitor-1 .credit-card-v110 small{
  display:block;
  margin-top:3px;
  color:#8497b6!important;
  font-size:9.5px!important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#monitor-1 .credit-note-v110{
  margin-top:9px;
  padding-top:8px;
  border-top:1px solid rgba(255,255,255,.08);
  color:#9fb0cf;
  font-size:10.5px;
  font-weight:800;
}
#monitor-1 > small{
  color:#a9b8d4!important;
}

/* === LEVEL 111 Wallet Synced Credit Monitor === */
#monitor-1 .credit-status-v111{
  display:grid;
  gap:7px;
  margin-top:11px;
}
#monitor-1 .credit-card-v111{
  border:1px solid rgba(0,220,255,.2);
  background:rgba(2,18,38,.62);
  border-radius:10px;
  padding:7px 8px;
}
#monitor-1 .credit-card-main-v111{
  border-color:rgba(0,255,210,.4);
}
#monitor-1 .credit-top-v111{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
#monitor-1 .credit-top-v111 span{
  color:#eaffff;
  font-size:11px;
  font-weight:900;
}
#monitor-1 .credit-top-v111 b{
  color:#55ffd2;
  font-size:11px;
  font-weight:900;
}
#monitor-1 .credit-bar-v111{
  display:block;
  height:5px;
  margin-top:5px;
  background:rgba(255,255,255,.10);
  border-radius:999px;
  overflow:hidden;
}
#monitor-1 .credit-bar-v111 i{
  display:block;
  width:0%;
  height:100%;
  background:linear-gradient(90deg,#18f0aa,#00c8ff);
  border-radius:999px;
}
#monitor-1 .credit-card-v111 small{
  display:block;
  margin-top:3px;
  color:#8497b6!important;
  font-size:9px!important;
}

/* === LEVEL 112 Compact Credit Monitor === */
#monitor-1{
  overflow:hidden!important;
}
#monitor-1 .credit-head-v112{
  margin-bottom:4px!important;
}
#monitor-1 .credit-head-v112 span{
  font-size:18px!important;
}
#monitor-1 .credit-sub-v112{
  display:block;
  margin-bottom:8px!important;
  font-size:10.5px!important;
  color:#9fb0cf!important;
}
#monitor-1 .credit-status-v112{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  margin-top:5px;
}
#monitor-1 .credit-card-v112{
  border:1px solid rgba(0,220,255,.20);
  background:rgba(2,18,38,.62);
  border-radius:9px;
  padding:6px 7px;
  min-width:0;
}
#monitor-1 .credit-card-main-v112{
  border-color:rgba(0,255,210,.42);
}
#monitor-1 .credit-top-v112{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
}
#monitor-1 .credit-top-v112 span{
  color:#eaffff;
  font-size:10px;
  font-weight:900;
  white-space:nowrap;
}
#monitor-1 .credit-top-v112 b{
  color:#55ffd2;
  font-size:10px;
  font-weight:900;
  white-space:nowrap;
}
#monitor-1 .credit-bar-v112{
  height:4px;
  margin-top:4px;
  background:rgba(255,255,255,.10);
  border-radius:999px;
  overflow:hidden;
}
#monitor-1 .credit-bar-v112 i{
  display:block;
  width:0%;
  height:100%;
  background:linear-gradient(90deg,#18f0aa,#00c8ff);
  border-radius:999px;
}
#monitor-1 .credit-card-v112 small{
  display:block;
  margin-top:2px;
  color:#8497b6!important;
  font-size:8px!important;
  line-height:1.1!important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
@media(max-width:1200px){
  #monitor-1 .credit-status-v112{grid-template-columns:1fr;}
}

/* === LEVEL 117 Single Credit Source Monitor === */
#monitor-1 .credit-status-v117{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  margin-top:8px;
}
#monitor-1 .credit-card-v117{
  border:1px solid rgba(0,220,255,.22);
  background:rgba(2,18,38,.64);
  border-radius:9px;
  padding:6px 7px;
  min-height:42px;
}
#monitor-1 .credit-top-v117{
  display:flex;
  justify-content:space-between;
  gap:6px;
  align-items:center;
}
#monitor-1 .credit-top-v117 span{
  font-size:10px;
  color:#eaffff;
  font-weight:900;
  white-space:nowrap;
}
#monitor-1 .credit-top-v117 b{
  font-size:10px;
  color:#55ffd2;
  font-weight:900;
  white-space:nowrap;
}
#monitor-1 .credit-bar-v117{
  height:4px;
  margin-top:4px;
  background:rgba(255,255,255,.10);
  border-radius:999px;
  overflow:hidden;
}
#monitor-1 .credit-bar-v117 i{
  display:block;
  height:100%;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg,#18f0aa,#00c8ff);
}
#monitor-1 .credit-card-v117 small{
  display:block;
  margin-top:2px;
  font-size:8px!important;
  color:#93a6c4!important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#monitor-1 .credit-sub-v117{
  color:#9fb0cf!important;
  font-size:10px!important;
}

/* === LEVEL 121 Safe Layout === */

/* Wallet darf nicht von Credit-Sync zerstört werden */
.wallet-view,
.wallet-page,
#wallet,
[data-page="wallet"]{
  display:block;
}

/* Rechte Monitore sauber stapeln */
.right-monitors{
  display:flex!important;
  flex-direction:column!important;
  gap:14px!important;
  overflow:visible!important;
}

#monitor-1{
  min-height:245px!important;
  overflow:hidden!important;
}

#monitor-2{
  margin-top:8px!important;
  min-height:205px!important;
}

#monitor-3{
  margin-top:0!important;
}

/* Credit Monitor kompakt */
#monitor-1 .credit-status-v117{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:6px!important;
}

#monitor-1 .credit-card-v117{
  min-height:38px!important;
  padding:5px 7px!important;
}

#monitor-1 .credit-top-v117 span,
#monitor-1 .credit-top-v117 b{
  font-size:9.5px!important;
  line-height:1!important;
}

#monitor-1 .credit-card-v117 small{
  font-size:7.5px!important;
  line-height:1!important;
}

/* Overlay bleibt klickbar/schliessbar */
.video-modal,
.player-modal,
.runway-player-modal,
.video-overlay,
.lightbox,
.modal,
.overlay{
  z-index:9999;
}
.video-modal button,
.player-modal button,
.runway-player-modal button,
.video-overlay button,
.lightbox button,
.modal button,
.overlay button{
  pointer-events:auto!important;
}

/* === LEVEL 127 Stable Runway Rollback === */

/* Keine DOM-Tricks mehr: Dropdowns bleiben normal sichtbar */
.runway-controls,
.runway-options,
.video-options-row,
.runway-form-row{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  flex-wrap:wrap!important;
}

.runway-controls select,
.runway-options select,
.video-options-row select,
.runway-form-row select{
  min-width:86px!important;
  width:auto!important;
  height:38px!important;
  min-height:38px!important;
  padding:0 12px!important;
  border-radius:12px!important;
  font-size:12px!important;
  line-height:38px!important;
  color:#eaf8ff!important;
  background:rgba(3,18,38,.88)!important;
  border:1px solid rgba(0,210,255,.48)!important;
}

/* Model Dropdown darf breiter bleiben */
.runway-controls select:nth-of-type(2),
.runway-options select:nth-of-type(2),
.video-options-row select:nth-of-type(2),
.runway-form-row select:nth-of-type(2){
  min-width:110px!important;
}

/* Video generieren wieder sauber Orbiora, aber ohne Layout-Zwang */
.runway-controls button,
.runway-options button,
.video-options-row button,
.runway-form-row button{
  min-height:38px!important;
  height:38px!important;
  border-radius:13px!important;
  padding:0 16px!important;
  font-size:12px!important;
  line-height:1!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}

.runway-controls button:last-child,
.runway-options button:last-child,
.video-options-row button:last-child,
.runway-form-row button:last-child{
  background:linear-gradient(135deg, #00c8ff, #54ffd4)!important;
  color:#06111c!important;
  border:1px solid rgba(180,255,248,.75)!important;
  box-shadow:0 0 18px rgba(0,196,255,.28), inset 0 1px 0 rgba(255,255,255,.35)!important;
  font-weight:950!important;
}

/* Credit-Hinweis unten bleibt sichtbar, aber klein und zerstört nichts */
.runway-credit-line,
.video-credit-line,
.credit-line,
.runway-cost-hint{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  min-width:95px!important;
  height:30px!important;
  min-height:30px!important;
  padding:0 10px!important;
  margin:6px 0 0 0!important;
  border-radius:11px!important;
  border:1px solid rgba(84,255,212,.35)!important;
  background:rgba(0,255,210,.08)!important;
  color:#54ffd4!important;
  font-size:11px!important;
  font-weight:900!important;
  white-space:nowrap!important;
  position:static!important;
  transform:none!important;
}

/* Stop aggressive old clone classes from affecting current UI */
.orbiora-runway-credit-clone-124,
.orbiora-runway-credit-clone-126,
.orbiora-runway-credit-pill-123{
  display:none!important;
}

.orbiora-runway-control-row-124,
.orbiora-runway-control-row-126,
.orbiora-runway-control-row-123{
  display:flex!important;
  flex-wrap:wrap!important;
}

/* Weniger Flackern */
.runway-controls *,
.runway-options *,
.video-options-row *,
.runway-form-row *{
  animation:none!important;
}

/* === LEVEL 128 CSS ONLY — Runway Credit Position === */
/* Kein JS, keine DOM-Manipulation. Nur Layout-Polish. */

.runway-input-panel,
.video-generator-panel,
.runway-generator,
.runway-form{
  position:relative!important;
}

/* Credit-Hinweis optisch in die Controls-Zone ziehen, ohne Selects zu zerstören */
.runway-credit-line,
.video-credit-line,
.credit-line,
.runway-cost-hint{
  position:absolute!important;
  left:160px!important;
  bottom:18px!important;
  margin:0!important;
  height:34px!important;
  min-height:34px!important;
  min-width:112px!important;
  padding:0 12px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:13px!important;
  border:1px solid rgba(84,255,212,.45)!important;
  background:rgba(0,255,210,.10)!important;
  color:#54ffd4!important;
  font-size:11px!important;
  font-weight:950!important;
  white-space:nowrap!important;
  z-index:4!important;
}

/* Damit unten Platz nicht doppelt wirkt */
.runway-controls,
.runway-options,
.video-options-row,
.runway-form-row{
  padding-bottom:0!important;
  margin-bottom:0!important;
}

/* Button bleibt rechts sauber */
.runway-controls button:last-child,
.runway-options button:last-child,
.video-options-row button:last-child,
.runway-form-row button:last-child{
  background:linear-gradient(135deg, #00c8ff, #54ffd4)!important;
  color:#06111c!important;
  border:1px solid rgba(180,255,248,.75)!important;
  box-shadow:0 0 18px rgba(0,196,255,.28), inset 0 1px 0 rgba(255,255,255,.35)!important;
  font-weight:950!important;
}

/* Kleinere Screens: Credit wieder normal unter Controls */
@media(max-width:1100px){
  .runway-credit-line,
  .video-credit-line,
  .credit-line,
  .runway-cost-hint{
    position:static!important;
    margin-top:6px!important;
  }
}