:root {
    color-scheme: dark;
    --bg: #0b1118;
    --panel: #111a24;
    --panel-soft: #162230;
    --text: #f6f8fb;
    --muted: #9aa8b7;
    --accent: #38bdf8;
    --accent-strong: #0ea5e9;
    --border: rgba(255,255,255,.09);
    --danger: #fb7185;
    --shadow: 0 24px 70px rgba(0,0,0,.28);
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
    margin: 0;
    min-height: 100vh;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at top right, rgba(14,165,233,.13), transparent 34rem),
        var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.app-shell { width: min(100% - 32px, 820px); margin: 0 auto; padding: 28px 0 40px; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:24px; }
.eyebrow { color:var(--accent); font-size:11px; font-weight:800; letter-spacing:.18em; }
h1 { margin:3px 0 0; font-size:clamp(30px, 6vw, 44px); letter-spacing:-.04em; }
.status-pill { display:flex; align-items:center; gap:8px; padding:9px 12px; border:1px solid var(--border); border-radius:999px; color:#cbd5e1; background:rgba(17,26,36,.82); font-size:13px; }
.status-dot { width:8px; height:8px; border-radius:50%; background:#4ade80; box-shadow:0 0 0 4px rgba(74,222,128,.12); }
.hero-card, .management-card { border:1px solid var(--border); background:rgba(17,26,36,.92); border-radius:22px; box-shadow:var(--shadow); }
.hero-card { padding:clamp(20px, 5vw, 34px); }
.hero-copy { display:flex; align-items:flex-start; gap:16px; margin-bottom:26px; }
.hero-icon, .quick-icon { display:grid; place-items:center; flex:0 0 auto; width:48px; height:48px; border-radius:14px; background:rgba(56,189,248,.12); font-size:24px; }
h2 { margin:0 0 6px; font-size:clamp(22px, 4vw, 29px); letter-spacing:-.025em; }
p { margin:0; color:var(--muted); line-height:1.55; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field-group { min-width:0; }
label { display:block; margin-bottom:8px; color:#dbe4ee; font-size:14px; font-weight:700; }
input, select { width:100%; height:52px; padding:0 14px; color:var(--text); background:#0c141d; border:1px solid var(--border); border-radius:12px; outline:none; transition:.18s ease; }
input:focus, select:focus { border-color:var(--accent); box-shadow:0 0 0 4px rgba(56,189,248,.12); }
input::placeholder { color:#667789; }
.toggle-row { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:18px 0 0; padding:15px 16px; border-radius:14px; background:var(--panel-soft); cursor:pointer; }
.toggle-row strong, .toggle-row small { display:block; }
.toggle-row small { color:var(--muted); font-weight:400; margin-top:3px; line-height:1.35; }
.switch { position:relative; flex:0 0 auto; width:48px; height:28px; }
.switch input { position:absolute; opacity:0; width:1px; height:1px; }
.slider { position:absolute; inset:0; border-radius:999px; background:#334155; transition:.2s; }
.slider::before { content:""; position:absolute; width:20px; height:20px; left:4px; top:4px; border-radius:50%; background:white; transition:.2s; }
.switch input:checked + .slider { background:var(--accent-strong); }
.switch input:checked + .slider::before { transform:translateX(20px); }
.primary-btn, .secondary-btn { border:0; border-radius:13px; font-weight:800; cursor:pointer; transition:.18s ease; }
.primary-btn { width:100%; min-height:56px; margin-top:20px; padding:0 18px; display:flex; align-items:center; justify-content:space-between; background:linear-gradient(135deg, var(--accent), var(--accent-strong)); color:#04131d; font-size:17px; }
.primary-btn:hover { transform:translateY(-1px); filter:brightness(1.05); }
.primary-btn:active, .secondary-btn:active, .quick-card:active { transform:scale(.985); }
.quick-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:14px 0; }
.quick-card { appearance:none; width:100%; min-height:92px; display:flex; align-items:center; gap:13px; padding:16px; border:1px solid var(--border); border-radius:18px; background:rgba(17,26,36,.78); color:var(--text); text-align:left; text-decoration:none; cursor:pointer; }
.quick-card strong, .quick-card small { display:block; }
.quick-card small { margin-top:4px; color:var(--muted); line-height:1.35; }
.quick-card .arrow { margin-left:auto; color:var(--muted); font-size:28px; }
.management-card { overflow:hidden; }
.management-card summary { list-style:none; display:flex; justify-content:space-between; align-items:center; padding:19px 20px; cursor:pointer; }
.management-card summary::-webkit-details-marker { display:none; }
.management-card summary strong, .management-card summary small { display:block; }
.management-card summary small { color:var(--muted); margin-top:3px; }
.chevron { font-size:22px; transition:.2s; }
.management-card[open] .chevron { transform:rotate(180deg); }
.management-content { padding:0 20px 20px; border-top:1px solid var(--border); }
.manage-row { display:grid; grid-template-columns:1fr auto; gap:12px; align-items:end; margin-top:18px; }
.secondary-btn { height:52px; padding:0 18px; background:#243447; color:#eaf4ff; border:1px solid var(--border); }
.secondary-btn:hover { background:#2e4359; }
footer { padding:22px 6px 0; text-align:center; color:#6f8092; font-size:13px; }
.toast { position:fixed; left:50%; bottom:24px; z-index:50; transform:translate(-50%, 20px); min-width:min(90vw, 340px); padding:13px 16px; border-radius:12px; background:#f8fafc; color:#111827; box-shadow:0 18px 50px rgba(0,0,0,.35); text-align:center; font-weight:700; opacity:0; pointer-events:none; transition:.22s ease; }
.toast.show { opacity:1; transform:translate(-50%, 0); }
.toast.error { background:#fff1f2; color:#9f1239; }
.is-disabled { opacity:.48; }
@media (max-width: 650px) {
    .app-shell { width:min(100% - 22px, 820px); padding-top:max(18px, env(safe-area-inset-top)); }
    .topbar { align-items:flex-end; }
    .form-grid, .quick-grid { grid-template-columns:1fr; }
    .hero-copy { align-items:center; }
    .manage-row { grid-template-columns:1fr; }
    .secondary-btn { width:100%; }
}