:root { --ink:#1d2430; --muted:#5f6b7a; --line:#e3e7ec; --bg:#f6f7f9; --card:#fff; --ok:#1f8a4c; --warn:#b26a00; --bad:#b3261e; --accent:#1b5e9e; --mono:ui-monospace,SFMono-Regular,Menlo,monospace; }
* { box-sizing:border-box } body { margin:0; font:15px/1.45 -apple-system,"Segoe UI",Helvetica,Arial,sans-serif; color:var(--ink); background:var(--bg) }
a { color:var(--accent) } h1 { font-size:22px; margin:0 0 4px } h2 { font-size:16px; margin:24px 0 8px } .sub { color:var(--muted); margin:0 0 18px }
header.top { display:flex; align-items:center; gap:14px; padding:12px 24px; background:#fff; border-bottom:1px solid var(--line) }
header .brand { font-weight:700; color:var(--ink); text-decoration:none } header .host { color:var(--muted); font-size:13px } header .logout { margin-left:auto }
main { max-width:980px; margin:24px auto; padding:0 16px } main.wide { max-width:1240px } footer { color:var(--muted); font-size:12px; text-align:center; padding:24px }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:16px 18px; margin:0 0 14px }
.card.auto { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:10px 18px; align-items:start }
.card.auto .name { grid-column:1 / -1; display:flex; gap:10px; align-items:baseline; flex-wrap:wrap } .card.auto .name a { font-size:17px; font-weight:600; text-decoration:none }
.card.auto .name .client { color:var(--muted) } .k { font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin-bottom:2px } .v { word-break:break-word }
.dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:-1px; background:var(--muted) } .dot.ok { background:var(--ok) } .dot.warn { background:var(--warn) } .dot.bad { background:var(--bad) }
.issues { grid-column:1 / -1; margin:0; padding:8px 12px; background:#fff7e6; border:1px solid #f1d9a5; border-radius:6px; list-style:none; font-size:14px } .issues li::before { content:"⚠ "; color:var(--warn) }
.bad-note { color:var(--bad) } .muted { color:var(--muted) } code, pre, .mono { font-family:var(--mono); font-size:13px } pre { background:#0f1720; color:#e6edf3; padding:12px 14px; border-radius:8px; overflow:auto; max-height:60vh; white-space:pre-wrap }
pre.cmd { background:#eef2f6; color:var(--ink); max-height:none }
form.edit label { display:block; font-weight:600; margin:14px 0 4px } form.edit .help { font-weight:400; color:var(--muted); font-size:13px; margin-left:6px }
textarea, input[type=password], input[type=text] { width:100%; font:inherit; padding:8px 10px; border:1px solid #c9d1da; border-radius:6px; background:#fff } textarea { min-height:64px; font-family:var(--mono); font-size:13px }
button, .btn { font:inherit; padding:7px 14px; border-radius:6px; border:1px solid #c9d1da; background:#fff; color:var(--ink); cursor:pointer; text-decoration:none; display:inline-block }
button.primary { background:var(--accent); border-color:var(--accent); color:#fff } button.link { border:0; background:none; color:var(--accent); padding:0; text-decoration:underline } button.danger { color:var(--bad) }
.actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center } .actions form { display:inline }
.flash { padding:10px 14px; border-radius:6px; margin-bottom:14px; background:#e8f5ee; border:1px solid #bfe3cd } .flash.error { background:#fdecec; border-color:#f3c0bd }
.login { max-width:380px; margin:60px auto } .readonly dt { font-weight:600; margin-top:8px } .readonly dd { margin:0; color:var(--muted) }
table.rows { width:100%; border-collapse:collapse; font-size:14px } table.rows th { text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding:4px 10px 8px; border-bottom:1px solid var(--line) } table.rows td { padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top; word-break:break-word } table.rows tr:last-child td { border-bottom:0 } .nowrap { white-space:nowrap }
iframe.preview { width:100%; height:70vh; border:1px solid var(--line); border-radius:8px; background:#fff }
@media (max-width:760px) { .card.auto { grid-template-columns:1fr 1fr } }