:root { color-scheme: light dark; --bg:#f6f5f8; --panel:#fff; --ink:#17131e; --soft:#50495c; --line:#ddd6e6; --accent:#6d2fd8; --accent-ink:#fff; --warn:#9b3600; --warn-bg:#fff0e7; --danger:#9e2545; --danger-bg:#ffe9ef; --ok:#166534; --radius:10px; }
[hidden] { display:none !important; }
@media (prefers-color-scheme: dark) { :root { --bg:#17131e; --panel:#241f2b; --ink:#f6f3fa; --soft:#c7bed2; --line:#484051; --accent:#c4a6ff; --accent-ink:#25133e; --warn:#ffd0b2; --warn-bg:#432413; --danger:#ffb5c9; --danger-bg:#471827; --ok:#9ce7b1; } }
* { box-sizing:border-box; } body { margin:0; background:var(--bg); color:var(--ink); font:17px/1.7 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP",sans-serif; } .app { max-width:1060px; margin:auto; padding:36px 28px 72px; display:grid; gap:24px; } h1 { margin:0 0 10px; font-size:36px; line-height:1.25; } h2 { margin:0; font-size:21px; } p { margin:0; } .app__lede,.field-note { color:var(--soft); } .panel { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:24px; display:grid; gap:17px; } .panel ul { margin:0; padding-left:1.25em; } a { color:var(--accent); } .button { appearance:none; border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--ink); padding:11px 17px; font:inherit; font-weight:650; cursor:pointer; } .button:disabled { opacity:.55; cursor:not-allowed; } .button--primary { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); } .button--danger { color:var(--danger); border-color:var(--danger); } .actions { display:flex; flex-wrap:wrap; gap:11px; } .connection-row { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; } .status { min-height:1.7em; color:var(--soft); } .status[data-kind="error"] { color:var(--danger); font-weight:650; } .status[data-kind="ok"] { color:var(--ok); font-weight:650; } .notice { margin:0; padding:13px 15px; border:1px solid currentColor; border-radius:8px; } .notice--warning { color:var(--warn); background:var(--warn-bg); } .notice--danger { color:var(--danger); background:var(--danger-bg); } .config-form { display:grid; grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); gap:17px; } fieldset { min-width:0; margin:0; border:1px solid var(--line); border-radius:8px; padding:17px; display:grid; gap:12px; } legend { padding:0 6px; font-size:18px; font-weight:700; } label { display:grid; gap:5px; font-weight:600; } input { min-width:0; border:1px solid var(--line); border-radius:6px; padding:10px; color:var(--ink); background:var(--bg); font:inherit; } label.clear,label.check { display:flex; align-items:center; gap:9px; color:var(--soft); font-size:15px; font-weight:500; } label.clear input,label.check input { min-width:auto; } .config-form > .actions { grid-column:1/-1; } .activity { min-height:13.2em; margin:0; padding:12px 14px 12px 2em !important; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--soft); } .activity li[data-kind="error"] { color:var(--danger); } footer { color:var(--soft); }
@media (max-width:600px) { body { font-size:16px; } .app { padding:24px 14px 48px; } h1 { font-size:30px; } .panel { padding:18px; } .config-form { grid-template-columns:1fr; } }