:root { --bg:#0f1115; --card:#181b22; --ink:#eef0f4; --muted:#9aa3b2; --accent:#33d6c4; --line:#2a2f3a; --warn:#f2b84b; --bad:#ef6a6a; --good:#5ad17a; }
@media (prefers-color-scheme: light) { :root { --bg:#f5f6f8; --card:#fff; --ink:#15181e; --muted:#5b6474; --accent:#0a8f81; --line:#e1e4ea; } }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; }
main { max-width:860px; margin:0 auto; padding:16px; }
.top { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid var(--line); }
.brand { font-weight:700; color:var(--ink); text-decoration:none; letter-spacing:.2px; }
h1 { font-size:1.6rem; margin:.4em 0 .6em; } h2 { font-size:1.15rem; margin:0 0 .6em; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:18px; margin:0 0 16px; }
.hero { text-align:center; padding:36px 20px; } .hero p { max-width:560px; margin:0 auto 18px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; margin-bottom:20px; }
.tile { display:flex; flex-direction:column; gap:4px; color:var(--ink); text-decoration:none; }
.tile:hover { border-color:var(--accent); }
.button { display:inline-block; background:var(--accent); color:#04201d; border:0; border-radius:8px; padding:10px 16px; font:inherit; font-weight:600; cursor:pointer; text-decoration:none; }
.button.secondary { background:transparent; color:var(--ink); border:1px solid var(--line); }
.button.danger { background:var(--bad); color:#fff; }
.link { background:none; border:0; color:var(--muted); cursor:pointer; font:inherit; text-decoration:underline; padding:0; }
.link.danger { color:var(--bad); }
.inline { display:inline; } .row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:8px; }
label { display:block; margin:0 0 14px; font-weight:500; }
label.check { display:flex; gap:8px; align-items:flex-start; font-weight:400; }
input[type=text], input:not([type]), select { display:block; width:100%; margin-top:6px; padding:10px; border-radius:8px; border:1px solid var(--line); background:var(--bg); color:var(--ink); font:inherit; }
.copy { display:flex; gap:8px; margin-bottom:10px; } .copy input { margin:0; }
table { width:100%; border-collapse:collapse; font-size:.95rem; } th, td { text-align:left; padding:8px 6px; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--muted); font-weight:500; }
.muted { color:var(--muted); } .small { font-size:.85rem; }
.flash { background:color-mix(in srgb, var(--accent) 15%, transparent); border:1px solid var(--accent); padding:10px 14px; border-radius:8px; margin-bottom:16px; }
.flash.warn { background:color-mix(in srgb, var(--warn) 15%, transparent); border-color:var(--warn); }
.status { display:inline-block; font-size:.8rem; padding:2px 8px; border-radius:99px; border:1px solid var(--line); margin-left:4px; }
.s-ok { color:var(--good); border-color:var(--good); } .s-error { color:var(--bad); border-color:var(--bad); } .s-blocked { color:var(--warn); border-color:var(--warn); }
.pill { font-size:.75rem; color:var(--muted); border:1px solid var(--line); border-radius:99px; padding:1px 7px; }
footer { max-width:860px; margin:24px auto; padding:0 16px; font-size:.8rem; }
@media (max-width:600px) { table, thead, tbody, tr, th, td { font-size:.9rem; } .copy { flex-direction:column; } }
a { color:var(--accent); }
form + form { margin-top:12px; }