/* Minimal professional panel UI with blue accents (light theme) */ :root { --bg:#f4f7ff; --card:#ffffff; --muted:#5b6b82; --accent:#2a66f5; --accent2:#1e4cc7; --text:#1e2a44; --border:#e6ecf5; } /* Dark theme palette toggled by */ :root.dark { --bg:#0b1220; --card:#0f172a; --muted:#94a3b8; --accent:#3b82f6; --accent2:#1d4ed8; --text:#e5e7eb; --border:#233044; } *{box-sizing:border-box} body { margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji','Segoe UI Emoji'; background:linear-gradient(180deg,#f6f9ff,#f1f5ff 40%,#f6f9ff); color:var(--text); } .dark body { background:linear-gradient(180deg,#0b1220,#0b1220 40%,#0b1220); } .panel { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:40px 16px; } .card { width:100%; max-width:440px; background:var(--card); border:1px solid var(--border); border-radius:16px; box-shadow:0 10px 30px rgba(28,36,56,0.10); } .dark .card { box-shadow:0 10px 30px rgba(0,0,0,0.35); } .card .hd { padding:28px 28px 8px; } .card .hd h1 { margin:0 0 6px; font-size:22px; } .card .hd p { margin:0; color:var(--muted); font-size:13px; } .card .bd { padding:8px 28px 28px; } label { display:block; font-size:13px; margin:16px 0 6px; color:var(--muted); } input, select, textarea { width:100%; padding:12px 14px; background:#fff; color:var(--text); border:1px solid var(--border); border-radius:10px; outline:none; transition:.2s; } .dark input, .dark select, .dark textarea { background:#0b1220; border-color:#334155; color:var(--text); } input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow:0 0 0 3px rgba(42,102,245,0.15); } .dark input:focus, .dark select:focus, .dark textarea:focus { box-shadow:0 0 0 3px rgba(59,130,246,0.25); } .actions { margin-top:18px; display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; } .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 16px; border-radius:10px; border:1px solid transparent; cursor:pointer; font-weight:600; text-decoration:none; color:var(--text); } .btn-primary { background:linear-gradient(180deg,var(--accent),var(--accent2)); color:#fff; } .btn-outline { background:#fff; border-color: var(--border); color:var(--text); } .dark .btn-outline { background:#0b1220; border-color:#334155; color:#e5e7eb; } .btn-outline:hover { border-color:#c9d5ec; box-shadow:0 1px 0 rgba(0,0,0,0.02); } .dark .btn-outline:hover { border-color:#475569; } .note { font-size:12px; color:var(--muted); margin-top:12px; } .err { color:#d12f2f; font-size:13px; margin:8px 0; } .ok { color:#1a9f6e; font-size:13px; margin:8px 0; } .dark .err { color:#f87171; } .dark .ok { color:#4ade80; } /* Ensure text with weight utilities remains visible in dark theme */ .dark .font-semibold, .dark .font-bold, .dark .font-medium { color: var(--text) !important; } /* Tables and generic borders in dark */ .dark table { color: var(--text); } .dark th, .dark td { border-color:#334155; } .dark hr { border-color:#334155; } /* Aside navigation readability in dark */ .dark aside nav a { color:#e5e7eb; } .dark aside nav a:hover { color:#ffffff; }