:root { --bg:#fafaf9; --fg:#1c1917; --muted:#78716c; --line:#e7e5e4; --accent:#0f766e; --danger:#b91c1c; --warn:#fef3c7; }
* { box-sizing: border-box; }
body { margin:0; font:14px/1.45 system-ui,sans-serif; background:var(--bg); color:var(--fg); }
header { display:flex; gap:.6rem; align-items:center; padding:.6rem 1rem; border-bottom:1px solid var(--line); background:#fff; }
.spacer { flex:1; }
main { padding:1rem; max-width:1200px; margin:0 auto; }
button, input, select, textarea { font:inherit; padding:.3rem .55rem; border:1px solid var(--line); border-radius:6px; background:#fff; color:inherit; }
button { cursor:pointer; } button:hover { border-color:var(--accent); }
button.primary { background:var(--accent); color:#fff; border-color:var(--accent); }
button.danger { color:var(--danger); }
table { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); }
th, td { text-align:left; padding:.45rem .6rem; border-bottom:1px solid var(--line); vertical-align:middle; }
th { font-size:12px; text-transform:uppercase; color:var(--muted); }
td.key { font-family:ui-monospace,monospace; }
td small { display:block; color:var(--muted); }
.env-prod { background:var(--warn); }
h2 { margin:1.4rem 0 .5rem; font-size:15px; }
.card { background:#fff; border:1px solid var(--line); border-radius:8px; padding:1rem; max-width:360px; margin:4rem auto; display:grid; gap:.6rem; }
.row { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin:.6rem 0; }
.toggle { width:38px; height:22px; border-radius:11px; padding:0; position:relative; background:#d6d3d1; border:0; }
.toggle::after { content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; transition:left .12s; }
.toggle[aria-checked="true"] { background:var(--accent); } .toggle[aria-checked="true"]::after { left:19px; }
#toast { position:fixed; bottom:1rem; right:1rem; background:var(--fg); color:#fff; padding:.5rem .8rem; border-radius:6px; opacity:0; transition:opacity .2s; pointer-events:none; }
#toast.show { opacity:1; } #toast.error { background:var(--danger); }
dialog { border:1px solid var(--line); border-radius:8px; max-width:560px; width:92%; }
pre { background:#f5f5f4; padding:.5rem; overflow:auto; border-radius:6px; }
.muted { color:var(--muted); }
.mask { letter-spacing:2px; color:var(--muted); }
code.secret { background:#f5f5f4; padding:.15rem .35rem; border-radius:4px; word-break:break-all; }
.scroll { overflow-x:auto; }
td.key { white-space:nowrap; }