:root { --bg:#101417; --panel:#171e22; --panel2:#202a2f; --text:#f5f1e9; --muted:#acb7b8; --line:#344248; --accent:#ef7866; --accent2:#ffaf8c; --green:#8fdaa7; --danger:#ff9a8b; --white:#fffaf3; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.55 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:inherit; }
.topbar { min-height:76px; padding:15px 4vw; display:flex; gap:24px; align-items:center; border-bottom:1px solid var(--line); background:#11171a; }
.brand { text-decoration:none; font-weight:800; font-size:22px; letter-spacing:-.04em; white-space:nowrap; }
.brand span { color:var(--accent); }
.project { display:flex; gap:12px; align-items:center; color:var(--muted); font-size:14px; }
.project a { color:var(--accent2); }
.project-switch { display:flex; gap:7px; align-items:end; }
.project-switch label { font-size:11px; color:var(--muted); }
.project-switch select { display:block; width:220px; margin-top:2px; padding:5px 28px 5px 8px; border-radius:7px; font-size:13px; }
.small-button { padding:5px 8px; border:1px solid var(--line); background:var(--panel2); color:var(--text); border-radius:6px; }
.logout { margin-left:auto; color:var(--muted); font-size:14px; }
.shell { display:grid; grid-template-columns:245px minmax(0,1fr); min-height:calc(100vh - 76px); }
.sidebar { padding:30px 17px; border-right:1px solid var(--line); background:#12191d; }
.sidebar>a { display:block; padding:11px 14px; border-radius:10px; text-decoration:none; color:var(--muted); margin-bottom:4px; }
.sidebar>a:hover,.sidebar>a.active { background:var(--panel2); color:var(--text); }
.sidebar-note { font-size:12px; color:#758287; border-top:1px solid var(--line); margin:26px 10px 0; padding-top:18px; }
.content { max-width:1230px; width:100%; padding:44px 4vw 70px; margin:0 auto; }
h1 { font-size:clamp(30px,4vw,48px); line-height:1.05; letter-spacing:-.045em; margin:0 0 26px; }
h2 { font-size:21px; margin:0 0 14px; letter-spacing:-.025em; }
h3 { font-size:17px; margin:7px 0 3px; }
.eyebrow { text-transform:uppercase; letter-spacing:.15em; font-size:12px; color:var(--accent2); font-weight:800; margin:0 0 9px; }
.lead { max-width:820px; color:var(--muted); margin:-8px 0 25px; }
.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px; }
.metrics section,.card,.row { border:1px solid var(--line); background:linear-gradient(145deg,var(--panel),#151b1e); border-radius:16px; }
.metrics section { padding:20px; }
.metrics small { display:block; color:var(--muted); font-size:13px; }
.metrics strong { display:block; font-size:38px; line-height:1.1; margin-top:8px; color:var(--accent2); }
.grid-two { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.card { padding:24px; margin-bottom:22px; }
.card p,.card li { color:var(--muted); }
.card ul { padding-left:18px; margin-bottom:0; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.wide { grid-column:1/-1; }
label { font-size:13px; font-weight:700; color:var(--text); }
input,select,textarea { display:block; width:100%; margin-top:7px; border:1px solid #3a484d; border-radius:10px; background:#101619; color:var(--white); padding:11px 12px; font:inherit; font-size:15px; }
textarea { resize:vertical; }
.actions { display:flex; gap:10px; align-items:center; }
.actions form { margin:0; }
.action-wrap { flex-wrap:wrap; margin:0 0 26px; }
.button { display:inline-block; border:1px solid #59686e; border-radius:999px; padding:11px 18px; background:transparent; color:var(--text); text-decoration:none; font-weight:800; cursor:pointer; font:inherit; }
.button.primary { border-color:var(--accent); background:var(--accent); color:#261311; }
.button:hover { transform:translateY(-1px); }
.section-title { margin:34px 0 14px; }
.list { display:grid; gap:10px; }
.row { padding:17px 18px; display:flex; justify-content:space-between; gap:14px; align-items:flex-start; }
.row p { color:var(--muted); font-size:14px; margin:4px 0 0; }
.tag { font-size:11px; line-height:1; display:inline-block; border-radius:999px; padding:5px 8px; background:#2c393e; color:var(--green); font-weight:800; }
.tag-error { background:#552925; color:#ffb1a5; }
.row-actions { display:flex; gap:13px; align-items:center; font-size:14px; white-space:nowrap; }
.row-actions a { color:var(--accent2); }
.row-actions form { margin:0; }
.link-danger { font:inherit; font-size:14px; padding:0; border:0; background:none; color:var(--danger); cursor:pointer; }
.empty { color:var(--muted); padding:10px 0; }
.notice { padding:12px 15px; border-radius:10px; margin:0 0 20px; }
.notice.success { border:1px solid #487b5a; background:#173725; color:#b8f0c8; }
.notice.error { border:1px solid #8b4c43; background:#421e1d; color:#ffd1c9; }
.template p { max-width:780px; background:#11171a; border:1px dashed #405057; border-radius:12px; padding:17px; }
.callout { border-color:#526a73; }
.callout ol { margin:0; padding-left:21px; color:var(--muted); }
.callout li { margin:7px 0; }
.checkbox-label { display:flex; gap:10px; align-items:center; padding:12px; border:1px solid #3a484d; border-radius:10px; background:#101619; }
.checkbox-label input { width:auto; margin:0; accent-color:var(--accent); }
.url-title { overflow-wrap:anywhere; }
.cron-url { padding:12px 14px; background:#101619!important; border:1px dashed #526168; border-radius:10px; color:var(--accent2)!important; overflow-wrap:anywhere; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:13px; }
.install-body { display:grid; min-height:100vh; place-items:center; padding:22px; background:radial-gradient(circle at 15% 12%,#263a3d,transparent 36%),var(--bg); }
.install-card { width:min(100%,520px); padding:34px; border:1px solid var(--line); border-radius:22px; background:#151c20; box-shadow:0 24px 70px #0008; }
.install-card h1 { margin-bottom:12px; }
.install-card>p { color:var(--muted); }
.stack { display:grid; gap:16px; margin-top:24px; }
.stack .button { width:100%; margin-top:3px; }
.small { font-size:13px; }
.small code,code { color:var(--accent2); }
@media(max-width:800px) { .topbar { padding:13px 18px; gap:12px; flex-wrap:wrap; } .project { order:3; width:100%; justify-content:space-between; } .project-switch select { width:min(62vw,230px); } .shell { display:block; } .sidebar { display:flex; overflow-x:auto; padding:10px 12px; border-right:0; border-bottom:1px solid var(--line); gap:2px; } .sidebar>a { white-space:nowrap; margin:0; } .sidebar-note { display:none; } .content { padding:32px 18px 55px; } .metrics { grid-template-columns:repeat(2,1fr); } .grid-two,.form-grid { grid-template-columns:1fr; } .wide { grid-column:auto; } .row { display:block; } .row-actions { margin-top:13px; white-space:normal; flex-wrap:wrap; } .metrics strong { font-size:31px; } }
@media(max-width:400px) { .metrics { grid-template-columns:1fr; } .brand { font-size:20px; } .project { font-size:12px; } }