:root { --paper:#f1eee6; --sheet:#fffdf8; --ink:#15263a; --muted:#66727c; --line:#d6d0c4; --accent:#a25d12; --green:#276d50; --red:#9e3d35; --sans:Tahoma,"Noto Sans Thai",Arial,sans-serif; --serif:Georgia,"Th Sarabun New",serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font:14px/1.55 var(--sans); }
button,input,select { font:inherit; }
.site-header,main { width:min(1240px,calc(100% - 48px)); margin-inline:auto; }
.site-header { display:flex; justify-content:space-between; gap:30px; align-items:end; padding:34px 0 22px; border-bottom:1px solid var(--ink); }
.site-header p,.setting-section header p { margin:0 0 4px; color:var(--accent); font-size:11px; font-weight:700; letter-spacing:.1em; }
h1,h2,p { margin-top:0; }
h1 { margin-bottom:3px; font:700 clamp(30px,4vw,44px)/1 var(--serif); }
.site-header span { color:var(--muted); }
nav { display:flex; flex-wrap:wrap; justify-content:end; gap:6px 18px; }
nav a { color:var(--muted); text-decoration:none; font-weight:700; }
nav a.current,nav a:hover { color:var(--accent); }
main { padding:22px 0 55px; }
.security-note { display:flex; justify-content:space-between; gap:25px; padding:14px 18px; color:#fff; background:var(--ink); }
.security-note span { opacity:.75; text-align:right; }
.settings-layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:26px; margin-top:24px; align-items:start; }
aside { position:sticky; top:16px; border-top:2px solid var(--ink); }
aside a { display:block; min-height:46px; padding:12px 8px; color:var(--ink); border-bottom:1px solid var(--line); text-decoration:none; font-weight:700; }
aside a:hover { color:var(--accent); background:#f9f5ec; }
.settings-content { display:grid; gap:24px; }
.setting-section { scroll-margin-top:20px; padding:25px; border:1px solid var(--line); background:var(--sheet); }
.setting-section header { display:flex; justify-content:space-between; gap:20px; align-items:end; padding-bottom:14px; border-bottom:1px solid var(--ink); }
.setting-section header h2 { margin:0; font:700 26px/1.1 var(--serif); }
.setting-section header > span { color:var(--muted); font-size:11px; }
.status { padding:4px 8px; border:1px solid var(--line); }
.status.connected { color:var(--green); border-color:var(--green); }
.provider-actions { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 10px; }
.provider-actions a,.provider-actions button,#add-mcp,.save { min-height:42px; padding:9px 13px; border:1px solid var(--ink); color:var(--ink); background:transparent; text-decoration:none; font-weight:700; cursor:pointer; }
.provider-actions .connect,.save { color:#fff; border-color:var(--accent); background:var(--accent); }
.provider-actions .danger { color:var(--red); border-color:var(--red); }
.help { color:var(--muted); font-size:12px; }
code { color:var(--ink); background:#eee8dd; }
.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; margin-top:20px; }
.field-grid label { color:var(--muted); font-size:11px; font-weight:700; }
.field-grid input,.field-grid select { width:100%; min-height:43px; margin-top:4px; padding:8px 10px; color:var(--ink); border:1px solid var(--line); background:#fff; }
.wide { grid-column:1/-1; }
.result { max-height:280px; margin:15px 0 0; padding:14px; overflow:auto; color:#e8f1ed; background:#172538; white-space:pre-wrap; }
.registry { border-top:1px solid var(--line); }
.registry-row { display:grid; grid-template-columns:minmax(180px,1fr) 2fr 90px; gap:18px; align-items:start; padding:15px 4px; border-bottom:1px solid var(--line); }
.registry-row h3 { margin:0 0 3px; font:700 17px/1.25 var(--serif); }
.registry-row p { margin:0; color:var(--muted); font-size:12px; }
.registry-row code { display:inline-block; margin-top:4px; padding:2px 5px; font-size:10px; }
.switch { display:flex; gap:7px; align-items:center; justify-content:end; color:var(--muted); font-size:11px; }
.mcp-row { grid-template-columns:1fr 1fr 1.5fr 70px; }
.mcp-row input,.mcp-row select { width:100%; min-height:40px; padding:7px 8px; border:1px solid var(--line); }
#add-mcp { margin-top:14px; color:var(--accent); border-color:var(--accent); }
.governance { border-top:5px solid var(--accent); }
.governance ol { margin:18px 0 0; padding-left:24px; }
.governance li { padding:6px 0 9px 6px; border-bottom:1px solid var(--line); }
.toast { position:fixed; right:20px; bottom:20px; max-width:420px; padding:12px 16px; color:#fff; background:var(--ink); opacity:0; transform:translateY(10px); transition:.2s; pointer-events:none; }
.toast.show { opacity:1; transform:none; }
@media(max-width:800px){.site-header{display:block}nav{justify-content:start;margin-top:17px}.settings-layout{grid-template-columns:1fr}aside{position:static;display:flex;overflow:auto}aside a{white-space:nowrap}.registry-row{grid-template-columns:1fr}.switch{justify-content:start}.mcp-row{grid-template-columns:1fr 1fr}.security-note{display:block}.security-note span{display:block;margin-top:4px;text-align:left}}
@media(max-width:540px){.site-header,main{width:min(100% - 24px,1240px)}.setting-section{padding:18px}.field-grid{grid-template-columns:1fr}.wide{grid-column:auto}.mcp-row{grid-template-columns:1fr}}