:root, [data-theme="nebula-dark"] {
  --bg: #0a0e17;
  --bg2: #121826;
  --panel: #1a2234;
  --text: #e8ecf4;
  --muted: #8b95a8;
  --accent: #22d3ee;
  --accent2: #6366f1;
  --border: #2a3548;
  --win: #1e293b;
}
[data-theme="nebula-light"] {
  --bg: #eef2ff; --bg2: #fff; --panel: #f8fafc; --text: #0f172a; --muted: #64748b;
  --win: #fff; --border: #cbd5e1;
}
[data-theme="aurora"] {
  --bg: #0b1020; --accent: #a78bfa; --accent2: #34d399;
}
[data-theme="midnight"] { --bg: #050508; --accent: #fbbf24; }
[data-accent="violet"] { --accent: #a78bfa; }
[data-accent="lime"] { --accent: #84cc16; }
[data-accent="amber"] { --accent: #fbbf24; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font: 13px/1.4 'Segoe UI', system-ui, sans-serif; color: var(--text); background: var(--bg); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: default; }

.nb-stage { min-height: 100vh; display: grid; place-items: center; background: radial-gradient(ellipse at 30% 20%, #1e3a5f44, var(--bg)); }
.boot-core { text-align: center; }
.boot-orbit {
  width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%;
  border: 2px solid var(--accent); box-shadow: 0 0 24px var(--accent);
  animation: spin 2s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.login-card {
  width: min(360px, 92vw); padding: 24px; background: var(--panel);
  border: 1px solid var(--border); border-radius: 12px;
  display: flex; flex-direction: column; gap: 10px;
}
.login-card label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.login-card input { padding: 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg2); }
.err { color: #f87171; }
.hint { font-size: 11px; color: var(--muted); }
.hint a { color: var(--accent); }

.nb-desktop { position: relative; height: 100vh; overflow: hidden; }
#wallpaper {
  position: absolute; inset: 0 0 56px 72px;
  background:
    radial-gradient(circle at 70% 30%, color-mix(in srgb, var(--accent) 25%, transparent), transparent 50%),
    radial-gradient(circle at 20% 80%, color-mix(in srgb, var(--accent2) 20%, transparent), transparent 45%),
    var(--bg);
}
#windows { position: absolute; inset: 0 0 56px 72px; pointer-events: none; }
#windows > * { pointer-events: auto; }

#dock {
  position: absolute; left: 0; top: 0; bottom: 56px; width: 72px;
  display: flex; flex-direction: column; gap: 8px; padding: 12px 8px;
  background: color-mix(in srgb, var(--panel) 85%, transparent);
  border-right: 1px solid var(--border); backdrop-filter: blur(12px);
}
#dock button {
  width: 56px; height: 56px; border: 0; border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 15%, var(--bg2));
  font-size: 22px;
}
#dock button:hover { background: color-mix(in srgb, var(--accent) 35%, var(--bg2)); }

#taskbar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 56px;
  display: flex; align-items: center; gap: 8px; padding: 0 12px 0 8px;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  border-top: 1px solid var(--border); backdrop-filter: blur(16px);
}
#btn-launcher {
  width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border);
  background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; font-weight: 700;
}
#task-buttons { flex: 1; display: flex; gap: 4px; overflow: hidden; }
.task-btn {
  display: flex; align-items: center; gap: 6px; max-width: 160px;
  padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg2); overflow: hidden;
}
.task-btn.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.task-btn span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#status { display: flex; gap: 10px; align-items: center; font-size: 11px; color: var(--muted); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; }
.status-dot.sync { background: var(--accent); animation: pulse 0.8s ease; }
@keyframes pulse { 50% { opacity: 0.4; } }

.nb-window {
  position: absolute; display: flex; flex-direction: column;
  background: var(--win); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 12px 40px #0008; overflow: hidden; min-width: 280px; min-height: 160px;
}
.nb-window.minimized { display: none; }
.nb-window.maximized { inset: 8px 8px 64px 80px !important; width: auto !important; height: auto !important; left: 0 !important; top: 0 !important; }
.nb-titlebar {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  background: color-mix(in srgb, var(--accent) 12%, var(--panel)); border-bottom: 1px solid var(--border);
  user-select: none;
}
.nb-win-title { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-win-btns { display: flex; gap: 4px; }
.nb-win-btns button { width: 24px; height: 22px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg2); }
.nb-client { flex: 1; min-height: 0; overflow: auto; background: var(--bg2); }

.nb-btn { padding: 6px 14px; border-radius: 6px; border: 1px solid var(--border); background: var(--panel); }
.nb-btn.primary { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; border: 0; }

.launcher-panel {
  position: absolute; left: 80px; bottom: 64px; width: 360px; max-height: 420px;
  padding: 16px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 16px 48px #0009; overflow: auto;
}
#launcher-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.launch-tile {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg2);
}
.launch-ico { font-size: 24px; }

.nb-files, .nb-ide, .nb-term, .nb-settings, .nb-dialog { padding: 8px; height: 100%; }
.nb-pathbar { display: flex; gap: 6px; margin-bottom: 8px; }
.nb-pathbar input { flex: 1; padding: 4px 8px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg); }
.nb-filelist { display: flex; flex-direction: column; gap: 2px; }
.nb-file {
  display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: center;
  width: 100%; text-align: left; border: 0; padding: 6px 8px; border-radius: 6px; background: none;
}
.nb-file:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.nb-empty, .nb-hint { color: var(--muted); padding: 8px; }

.nb-ide { display: flex; flex-direction: column; }
.nb-ide-tb { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.nb-ide-path { flex: 1; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.nb-ide-editor {
  flex: 1; width: 100%; resize: none; border: 0; outline: none; padding: 8px;
  background: #0d1117; color: #c9d1d9; font: 12px/1.45 Consolas, monospace;
}

.nb-term { display: flex; flex-direction: column; background: #0d1117; color: #c9d1d9; }
.nb-term-out { flex: 1; margin: 0; padding: 8px; overflow: auto; white-space: pre-wrap; }
.nb-term-line { display: flex; gap: 6px; padding: 4px 8px; border-top: 1px solid #30363d; }
.nb-term-line input { flex: 1; background: transparent; border: 0; outline: none; color: inherit; font: inherit; }

.nb-browser { display: flex; flex-direction: column; height: 100%; }
.nb-browser-bar { display: flex; gap: 6px; padding: 6px; background: var(--panel); }
.nb-browser-bar input { flex: 1; padding: 4px 8px; border: 1px solid var(--border); border-radius: 4px; }
.nb-browser iframe { flex: 1; border: 0; width: 100%; background: #fff; }

.nb-settings label { display: block; margin-bottom: 10px; }
.nb-settings select { display: block; width: 100%; margin-top: 4px; padding: 6px; }