/* UniCLOUD theme — colours sampled from the UniCLOUD tutorial video */
:root {
  --navy-950:#050b22; --navy-900:#060c25; --navy-800:#0a153d; --navy-700:#0e2260; --navy-600:#122b79; --navy-500:#15399b;
  --accent:#2a59ee; --accent-strong:#1f47c9; --accent-soft:#6f93ff; --accent-glow:rgba(42,89,238,.45);
  --fg:#ffffff; --fg-soft:#e8ecf9; --muted:#9fb0e6; --label:#7f9bf0;
  --panel:#ffffff; --panel-2:#f3f5fb; --panel-fg:#0b1740; --panel-muted:#5b6a94; --panel-line:#e3e8f6;
  --ok:#2fcf8a; --warn:#f5b942; --danger:#ff6b6b; --violet:#8f6bff;
  --radius:16px;
}
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; }
body {
  color:var(--fg); font:15px/1.5 "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background:#0a153d;
  background-image:
    radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.5px),
    linear-gradient(135deg, var(--navy-950) 0%, var(--navy-800) 45%, var(--navy-500) 100%);
  background-size:36px 36px, 100% 100%;
  background-attachment:fixed;
}
a { color:inherit; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 20px; }
.brand { display:inline-flex; align-items:center; gap:10px; background:#fff; color:var(--navy-600); padding:6px 14px 6px 6px; border-radius:12px; font-weight:800; font-size:15px; letter-spacing:.2px; text-decoration:none; box-shadow:0 6px 24px rgba(0,0,0,.25); }
.brand .u { width:30px; height:30px; border-radius:8px; background:linear-gradient(160deg,#4d7bff,var(--accent)); color:#fff; display:grid; place-items:center; font-weight:800; font-size:17px; }
.brand span b { color:var(--navy-600); }
.brand span i { font-style:normal; color:var(--accent); }
.topbar .meta { display:flex; align-items:center; gap:14px; font-size:13px; color:var(--muted); }
.topbar .meta a { color:var(--fg-soft); text-decoration:none; opacity:.85; }
.topbar .meta a:hover { opacity:1; text-decoration:underline; }
.eyebrow { color:var(--label); font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
h1 { margin:4px 0 6px; font-size:clamp(22px,4vw,34px); font-weight:800; letter-spacing:-.01em; }
.lead { margin:0; color:var(--fg-soft); opacity:.85; }
.dot { width:8px; height:8px; border-radius:50%; background:#6b7aa8; display:inline-block; margin-right:6px; vertical-align:middle; }
.dot.on { background:var(--ok); box-shadow:0 0 0 4px rgba(47,207,138,.2); }
.btn { display:inline-block; border:0; border-radius:10px; padding:12px 18px; background:var(--accent); color:#fff; font-weight:700; font-size:15px; cursor:pointer; box-shadow:0 8px 24px var(--accent-glow); }
.btn:hover { background:var(--accent-strong); }
.btn.ghost { background:transparent; color:var(--panel-fg); border:1px solid var(--panel-line); box-shadow:none; }
.btn.ghost.on { border-color:var(--accent); color:var(--accent); }
input, select { border:1px solid var(--panel-line); border-radius:10px; padding:10px 12px; font:inherit; font-size:14px; background:#fff; color:var(--panel-fg); }
input:focus, select:focus { outline:2px solid var(--accent); border-color:transparent; }
.card { background:var(--panel); color:var(--panel-fg); border-radius:var(--radius); box-shadow:0 20px 60px rgba(3,8,30,.45); }