/* Soft relief: shared surfaces, restrained depth and readable controls. */
:root {
  --bg:#f3f6fc; --panel:#f3f6fc; --text:#182842; --muted:#60718c;
  --line:#d5dfef; --primary:#2563eb; --primary-weak:#e5edff;
  --ok:#237048; --warn:#945909; --err:#b63540;
  --radius:18px; --shadow:6px 6px 16px #dce3ef,-6px -6px 16px #fff;
  --inset:inset 3px 3px 7px #dce4f1,inset -3px -3px 7px #fff;
}
body { color:var(--text); letter-spacing:.1px; }
.sidebar { background:var(--bg);color:var(--text);border-right:1px solid #dfe6f2;padding:24px 16px;width:224px;flex-basis:224px; }
.brand { color:var(--text);padding:0 12px 28px;font-size:19px; }
.brand small,.side-foot { color:var(--muted); }
.brand-logo { box-shadow:4px 4px 10px #d5dfef,-4px -4px 10px #fff;border:2px solid #f9fbfc;border-radius:16px; }
.nav { gap:8px; }
.nav button { color:var(--muted);min-height:44px;padding:10px 14px;border:1px solid transparent;border-radius:12px; }
.nav button:hover { background:#eaf0fb;color:var(--text); }
.nav button.active { color:var(--primary);background:var(--bg);box-shadow:var(--inset);border-color:#cbdaf7;font-weight:650; }
.nav .dot { width:6px;height:6px;opacity:.65; }
.side-foot { border-color:var(--line);line-height:1.8; }
.main { min-width:0; }
.topbar { padding:20px 32px;background:rgba(243,246,252,.94);border:0;gap:16px; }
.topbar h1 { font-size:23px;letter-spacing:-.5px;white-space:nowrap; }
.topbar .sub { font-size:12px; }
.content { padding:16px 32px 88px; }
.panel,.card,.stat { border:1px solid #f9fcfc;box-shadow:var(--shadow);background:var(--panel); }
.panel + .panel { margin-top:24px; }
.panel-head { padding:18px 20px;border-bottom:1px solid #e0e7f2;flex-wrap:wrap; }
.panel-head h3 { font-size:16px;font-weight:650; }
.panel-body { padding:20px; }
.card { padding:20px; }
.card h4 { font-size:16px; }
.card .desc { color:#465b78; }
.stat { padding:20px; }
.stat .n { font-size:30px;font-variant-numeric:tabular-nums;letter-spacing:-1px; }
.stats { gap:20px;margin-bottom:24px; }
.btn { background:var(--panel);border:1px solid #f8fbfc;border-radius:10px;box-shadow:3px 3px 7px #dbe3f0,-3px -3px 7px #fff;min-height:38px;padding:7px 14px;transition:box-shadow .15s,background .15s,color .15s;justify-content:center; }
.btn:hover { background:#f8faff; }
.btn:active { box-shadow:var(--inset); }
.btn.primary,.btn.ok { background:var(--primary);border-color:#2563eb;color:#fff;box-shadow:3px 3px 8px #c8d7f2,inset 0 1px 0 #ffffff25; }
.btn.primary:hover,.btn.ok:hover { background:#1d4ed8; }
.btn.danger { color:var(--err);border-color:#dfc5c9; }
.btn.sm { min-height:30px; }
.btn:disabled { opacity:.6;box-shadow:none; }
input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea { background:var(--bg);border:1px solid #d7e1f1;border-radius:10px;box-shadow:var(--inset);padding:10px 12px;min-height:42px;max-width:100%; }
input::placeholder,textarea::placeholder { color:#74849e; }
input[type=checkbox],input[type=radio] { accent-color:var(--primary);width:16px;height:16px; }
input[type=file] { width:100%;background:transparent;border-style:dashed; }
input[type=file]::file-selector-button { border:0;border-radius:7px;padding:8px 12px;background:#e4edff;color:#2459bb;margin-right:12px;cursor:pointer; }
label.f { color:var(--muted);font-weight:550;margin-bottom:6px; }
.field { margin-bottom:18px; }
:focus-visible { outline:3px solid #2563eb!important;outline-offset:3px!important; }
.grid,.grid-2 { gap:20px; }
.chip,.tag { background:#eaf0f9;border-color:#d6e0f1;color:#526888;box-shadow:none; }
.chip.primary { background:#e5edff;color:#2354b3;border-color:#c7d8fa; }
.chip.ok { color:#236444; }.chip.warn { color:#86510c; }.chip.err { color:#a72935; }
.ptabs { background:var(--bg);box-shadow:var(--inset);padding:6px;gap:6px;border:1px solid #d4e0f5;border-radius:14px; }
.ptabs button { min-height:38px;border-radius:9px; }
.ptabs button.on { background:#f8faff;color:var(--primary);box-shadow:3px 3px 7px #d4e0f0,-2px -2px 5px #fff; }
.pcheck { background:#f6f8fd;border-color:#d6e1f2;padding:9px 10px; }
.pcheck:hover { background:#f9fbff;border-color:#91b2f4; }.pcheck:has(input:checked){background:#e8efff;border-color:#82a9f4;}
.ch-rows { gap:14px; }
.acc-row { background:#f3f6fc;border:1px solid #fcfefe;box-shadow:3px 3px 8px #dce4f1,-3px -3px 8px #fff;border-radius:13px;padding:12px; }
.acc-row:hover { box-shadow:4px 4px 10px #d5dfef,-4px -4px 10px #fff;border-color:#c3d5f8; }
.acc-row.sel { background:#e6eeff;border-color:#83a8ef; }.acc-row.off { opacity:1; }.acc-row.off .ti { color:#687b97; }.acc-row.off .pf-logo { filter:grayscale(.75);opacity:.7; }
.acc-row .acts .btn { min-height:30px; }
.acc-row .ti .l1 { gap:8px; }.ch-sec-title { margin-top:24px;gap:8px; }.ch-sec-title .n { background:#e7eefb; }
.overlay { background:rgba(24,40,70,.3);backdrop-filter:blur(6px);z-index:60; }
.modal { background:var(--bg);border:1px solid #f9fcfc;border-radius:22px;box-shadow:14px 14px 45px #20373d40; }
.modal-head { padding:20px 24px;gap:12px;flex-wrap:wrap; }.modal-head h3 { font-size:18px; }
.modal-body { padding:20px 24px; }.modal-foot { padding:16px 24px;flex-wrap:wrap; }
.samples-box,.channel-api-config,.provider-fields { background:#ebf0fa;border-color:#cfdef3;border-radius:12px; }
.samples-box { border-style:solid; }
.alert { border-radius:11px;padding:12px 14px;line-height:1.7; }
.alert.info { background:#e6eeff;color:#244e9c;border-color:#bfd2f6; }
.article-body { background:#fcfdfc;padding:24px;border:1px solid #d6e0f1;border-radius:12px;overflow-wrap:anywhere; }
.article-body pre { white-space:pre-wrap;overflow:auto; }
.article-body img { max-width:100%;height:auto; }
table.t th { background:#e9eff9;color:#4b6387; }table.t th,table.t td { border-color:#d7e2f2;padding:12px; }
.panel-body:has(table) { overflow-x:auto; }
#taskToggle { background:#f4f7ff;border-color:#c9d9f6;color:var(--primary);bottom:24px;right:24px;z-index:45; }
#taskPanel { bottom:76px;right:24px;border-radius:18px;border-color:#fff;box-shadow:var(--shadow); }
.task-row p { overflow-wrap:anywhere; }
.toast-wrap { bottom:80px;z-index:80;max-width:calc(100vw - 32px); }.toast { background:#214685;border:1px solid #ffffff38;border-radius:12px; }
.empty { padding:40px 20px; }.empty .big { font-size:22px;font-weight:600;color:#425b80;margin-bottom:10px; }
@media(max-width:1100px){.topbar .sub{display:none}.content{padding:16px 20px 88px}.topbar{padding:18px 20px}}
@media(max-width:760px){
  .layout{flex-direction:column;height:100dvh}.sidebar{width:100%;flex:0 0 auto;padding:12px 14px;border-right:0;border-bottom:1px solid var(--line)}
  .brand{display:flex;align-items:center;gap:10px;font-size:17px;padding:0 2px 12px}.brand-logo{width:32px;height:32px;margin:0;border-radius:10px}.brand small,.side-foot{display:none}
  .nav{flex-direction:row;gap:6px;overflow-x:auto;padding:4px 2px 6px;flex:none}.nav button{width:auto;flex:0 0 auto;padding:8px 12px;min-height:38px;font-size:12px}.nav .dot{display:none}
  .topbar{padding:14px 16px;gap:8px}.topbar h1{font-size:20px}.topbar .right{min-width:0}.topbar #llmChip{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .content{padding:8px 16px 92px}.grid,.grid-2{grid-template-columns:minmax(0,1fr)!important;gap:16px}.stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.stat{padding:14px}.stat .n{font-size:25px}
  .panel-body,.panel-head{padding:16px}.pcheck-grid{grid-template-columns:minmax(0,1fr)}.ptabs button{padding:7px 4px;font-size:12px}.ptabs button .n{margin-left:3px}
  .overlay{padding:12px}.modal{max-height:92dvh;border-radius:18px}.modal-body,.modal-head{padding:16px}.modal-foot{padding:12px 16px}.kv{grid-template-columns:66px minmax(0,1fr)}
  #taskToggle{right:16px;bottom:16px}#taskPanel{right:16px;bottom:66px;width:calc(100vw - 32px)}.article-body{padding:16px}.truncate{max-width:150px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]) { width:100%; }
@media(max-width:760px){.nav{scrollbar-width:none}.nav::-webkit-scrollbar{display:none}}

/* Console rhythm: 4 / 8 / 12 / 16 / 24 / 32 px. */
.brand{padding:0 8px 24px;letter-spacing:0}
.brand-lockup{display:flex;align-items:center;gap:12px}
.brand .brand-logo{width:40px;height:40px;flex:none;display:block;margin:0;border:0;border-radius:0;box-shadow:none;object-fit:contain}
.brand-wordmark{font-size:18px;font-weight:700;line-height:24px;white-space:nowrap}
.brand-wordmark span{display:block;font-size:9px;line-height:16px;font-weight:600;letter-spacing:2px;color:var(--muted)}
.brand small{margin:12px 0 0;font-size:11px;line-height:16px;white-space:nowrap}
.sidebar{padding:24px 16px 16px}.nav{gap:4px}.nav button{min-height:40px;padding:8px 12px;line-height:24px}
.topbar{min-height:72px;padding:16px 32px;gap:12px}.topbar h1{font-size:22px;line-height:32px}.topbar .sub{line-height:20px}
.content{padding-top:8px}.panel+.panel{margin-top:24px}
.panel-head{padding:16px 20px;column-gap:12px;row-gap:4px;align-items:center}
.panel-head h3{font-size:16px;line-height:24px}.panel-head .hint{font-size:12px;line-height:20px;max-width:72ch;text-wrap:pretty}
.panel-head:has(>.hint):not(:has(>.btn)):not(:has(>.spacer)){display:grid;grid-template-columns:minmax(0,1fr)}
.panel-body{padding:20px}.field{margin-bottom:16px}.field label.f{font-size:12px;line-height:20px;margin-bottom:8px}
.field:last-child{margin-bottom:0}.field .small{line-height:20px}.field .small:not(:empty){margin-top:8px}
.grid-2{gap:16px}.grid-2>.field{min-width:0}
.topbar .right{flex-shrink:0}.topbar #llmChip{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:1100px){.topbar{padding:16px 20px}}
@media(max-width:760px){
 .sidebar{padding:12px 14px 8px}.brand{display:block;padding:0 2px 8px}.brand-lockup{gap:8px}.brand .brand-logo{width:32px;height:32px}.brand-wordmark{font-size:16px;line-height:20px}.brand-wordmark span{font-size:8px;line-height:12px}.brand small{display:none}
 .nav button{min-height:36px;line-height:20px}.topbar{min-height:64px;padding:12px 16px}.topbar h1{font-size:20px;line-height:28px}.topbar #llmChip{display:none!important}
 .panel-head,.panel-body{padding:16px}.panel+.panel{margin-top:16px}.panel-head .hint{max-width:100%}.content{padding-top:8px}
}
.grid-2:has(>.field){margin-bottom:16px}.grid-2>.field{margin-bottom:0}
/* Two-field form rows fill the available panel width. */
.publish-account{display:flex;align-items:center;gap:8px;min-width:0;padding:4px 0}
.publish-account .pcheck{flex:1;min-width:0;background:transparent;border:0;padding:8px 0;gap:8px;box-shadow:none}
.publish-account .acc-h{font-weight:500;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:140px}
.account-link{background:none;border:0;color:var(--primary);font-size:12px;cursor:pointer;padding:8px 4px;white-space:nowrap}
.account-empty{font-size:12px}.publish-account:has(input:checked){background:var(--primary-weak);border-radius:8px}
@media(min-width:761px){.grid-2:has(>.field){grid-template-columns:repeat(2,minmax(0,1fr))}}
.nav button.active{background:#e9f0ff;border-color:#c8d9fa;color:#1d4ed8}
.brand .brand-logo{width:44px;height:44px;border-radius:10px}
@media(max-width:760px){.brand .brand-logo{width:32px;height:32px;border-radius:8px}}