/* Accents derived from the operational Sysimple dashboard; surfaces and density stay theme-aware. */
:root { color-scheme:dark; --bg:#101317; --surface:#1c2128; --secondary:#232933; --line:#38424d; --text:#f5f7fa; --muted:#adb8c4; --accent:#5cb8ff; --success:#65cf9d; --warning:#ffc36b; --danger:#ff9485; }
body[data-theme="dark"] { --bg:#17191d; --surface:#202328; --secondary:#272b31; --line:#3b4048; }
body[data-theme="light"] { color-scheme:light; --bg:#f3f5f7; --surface:#fff; --secondary:#f9fafb; --line:#d5dade; --text:#263238; --muted:#63717a; --accent:#2877a4; --success:#087c48; --warning:#895600; --danger:#b53727; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:13px/1.5 'Segoe UI',Arial,sans-serif; }
button,input,select,textarea { font:inherit; }
button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; }
button,.button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:34px; padding:6px 11px; border:1px solid var(--line); border-radius:2px; background:var(--secondary); color:var(--text); cursor:pointer; text-decoration:none; }
button:hover,.button:hover { border-color:var(--accent); }
button:disabled { cursor:wait; opacity:.6; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
input,select,textarea { min-height:34px; padding:7px 9px; border:1px solid var(--line); border-radius:2px; background:var(--surface); color:var(--text); min-width:0; }
a { color:var(--accent); }
[hidden] { display:none!important; }
.primary { color:var(--surface); background:var(--accent); border-color:var(--accent); font-weight:600; }
.primary:hover { background:color-mix(in srgb,var(--accent) 88%,var(--text)); }
.muted,small { color:var(--muted); }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:22px; font-weight:600; margin-bottom:5px; }
h2 { font-size:18px; font-weight:600; margin-bottom:6px; }
h3 { font-size:14px; font-weight:600; margin-bottom:6px; }
code { font:12px/1.5 Consolas,monospace; overflow-wrap:anywhere; }
.portal { height:100dvh; display:flex; flex-direction:column; padding:14px 18px; gap:14px; }
.commandbar { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 12px; background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--accent); flex-shrink:0; }
.brand { display:flex; align-items:center; gap:12px; }
.brand img { width:38px; height:38px; object-fit:contain; }
.brand strong { font-size:17px; font-weight:600; display:block; }
.brand small { display:block; font-size:12px; }
.actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.workspace { display:grid; grid-template-columns:226px minmax(0,1fr); min-height:0; flex:1; gap:14px; }
.sidebar,.panel { border:1px solid var(--line); background:var(--surface); }
.sidebar { display:flex; flex-direction:column; min-height:0; overflow:auto; }
.nav-label { padding:14px 12px 8px; color:var(--muted); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.navigation { display:grid; gap:5px; padding:0 8px; }
.navigation button { --nav-accent:var(--accent); justify-content:flex-start; text-align:left; padding:10px; border-color:transparent; background:transparent; }
.navigation button[data-view="reference"] { --nav-accent:var(--warning); }
.navigation button[data-view="tool"] { --nav-accent:var(--success); }
.navigation button:hover { background:color-mix(in srgb,var(--nav-accent) 7%,var(--surface)); }
.navigation button[aria-current="page"] { border-color:color-mix(in srgb,var(--nav-accent) 40%,var(--line)); box-shadow:inset 3px 0 var(--nav-accent); background:color-mix(in srgb,var(--nav-accent) 12%,var(--surface)); }
.nav-icon { width:28px; height:28px; display:grid; place-items:center; color:var(--nav-accent); background:color-mix(in srgb,var(--nav-accent) 14%,var(--surface)); font:16px Consolas,monospace; }
.navigation strong,.navigation small { display:block; }
.navigation strong { font-size:13px; font-weight:600; }
.navigation small { font-size:11px; }
.session { margin:18px 12px 12px; padding:12px 0; border-top:1px solid var(--line); overflow-wrap:anywhere; }
.session strong { display:block; margin-bottom:4px; }
.session .badge { margin-bottom:10px; }
.sidebar-footer { margin-top:auto; padding:12px; border-top:1px solid var(--line); font-size:11px; color:var(--muted); }
.badge { display:inline-flex; gap:6px; align-items:center; padding:3px 7px; border:1px solid var(--line); background:var(--secondary); font-size:11px; }
.success { color:var(--success); }
.badge.success { border-color:color-mix(in srgb,var(--success) 35%,var(--line)); background:color-mix(in srgb,var(--success) 10%,var(--surface)); }
.stage { min-width:0; min-height:0; display:flex; flex-direction:column; }
.view { min-height:0; flex:1; overflow:auto; }
.page-head { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:16px 18px; border-bottom:1px solid var(--line); border-left:3px solid var(--accent); background:linear-gradient(110deg,color-mix(in srgb,var(--accent) 15%,var(--surface)),color-mix(in srgb,var(--accent) 3%,var(--surface))); }
.page-head p { margin:0; color:var(--muted); font-size:12px; }
.eyebrow { font-size:10px; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:.06em; margin-bottom:5px; }
.home-body { padding:18px; display:grid; gap:18px; }
.steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.step { --step-accent:var(--accent); padding:14px; border:1px solid color-mix(in srgb,var(--step-accent) 25%,var(--line)); border-top:3px solid var(--step-accent); background:color-mix(in srgb,var(--step-accent) 6%,var(--surface)); }
.step:nth-child(2) { --step-accent:var(--warning); }
.step:nth-child(3) { --step-accent:var(--success); }
.step-number { display:inline-grid; place-items:center; width:24px; height:24px; background:var(--step-accent); color:var(--surface); margin-bottom:8px; font-weight:700; }
.step p { color:var(--muted); font-size:12px; margin-bottom:0; }
.section-heading { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px; }
.section-heading h2 { margin:0; }
#catalog-count { color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,var(--surface)); border-color:color-mix(in srgb,var(--accent) 35%,var(--line)); font-weight:600; }
.catalog-filters { display:grid; grid-template-columns:minmax(160px,1fr) 190px 115px; gap:8px; margin-bottom:10px; }
.catalog-filters input { width:100%; }
.endpoint-list { display:grid; border:1px solid var(--line); }
.endpoint { --endpoint-accent:var(--accent); display:grid; grid-template-columns:65px minmax(0,1fr) auto; align-items:center; gap:12px; padding:10px 12px; border-bottom:1px solid var(--line); border-left:3px solid var(--endpoint-accent); background:color-mix(in srgb,var(--endpoint-accent) 3%,var(--surface)); }
.endpoint:has(.method-GET) { --endpoint-accent:var(--success); }
.endpoint:has(.method-PUT),.endpoint:has(.method-PATCH) { --endpoint-accent:var(--warning); }
.endpoint:has(.method-DELETE) { --endpoint-accent:var(--danger); }
.endpoint:last-child { border-bottom:0; }
.endpoint:hover { background:color-mix(in srgb,var(--endpoint-accent) 8%,var(--surface)); }
.endpoint .primary { color:var(--endpoint-accent); background:color-mix(in srgb,var(--endpoint-accent) 10%,var(--surface)); border-color:color-mix(in srgb,var(--endpoint-accent) 45%,var(--line)); }
.endpoint .primary:hover { background:color-mix(in srgb,var(--endpoint-accent) 18%,var(--surface)); }
.endpoint code { display:block; }
.endpoint small { display:block; }
.method { padding:4px 5px; font-size:10px; font-weight:700; text-align:center; background:var(--endpoint-accent,var(--accent)); color:var(--surface); }
.empty { padding:24px; text-align:center; color:var(--muted); }
.notice { padding:10px 12px; border:1px solid var(--line); background:var(--secondary); color:var(--muted); }
.notice.error { color:var(--danger); border-color:var(--danger); }
.pagination { display:flex; align-items:center; justify-content:space-between; margin-top:10px; }
.details-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.help-box { padding:14px; border:1px solid var(--line); }
.help-box p { color:var(--muted); font-size:12px; margin-bottom:8px; }
.help-box p:last-child { margin:0; }
.full-view { display:flex; flex-direction:column; }
.full-view .page-head { flex-shrink:0; }
rapi-doc { display:block; flex:1; min-height:0; overflow:auto; }
iframe { width:100%; flex:1; min-height:0; border:0; background:var(--bg); }
.skip { position:fixed; left:10px; top:-80px; z-index:5; }.skip:focus { top:10px; }
.login-page { min-height:100dvh; padding:14px 18px; display:flex; flex-direction:column; gap:14px; }
.login-layout { flex:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(340px,450px); gap:36px; width:min(1020px,100%); align-items:center; margin:30px auto; }
.login-intro h1 { font-size:30px; max-width:500px; }
.login-intro>p { max-width:450px; color:var(--muted); font-size:14px; }
.login-steps { display:grid; gap:14px; margin-top:28px; }
.login-steps div { border-left:2px solid var(--accent); padding:0 14px; }
.login-steps strong,.login-steps small { display:block; }
.login-card { padding:24px; border:1px solid var(--line); background:var(--surface); }
.field-group { margin-top:16px; }.field-group label { display:flex; justify-content:space-between; gap:8px; margin-bottom:6px; font-weight:600; }
.field-note { color:var(--muted); font-size:11px; font-weight:400; }
.field-group input { width:100%; }
#btnLogin { width:100%; margin-top:22px; }
.result { display:none; margin-top:14px; padding:10px; border:1px solid var(--line); white-space:pre-wrap; overflow-wrap:anywhere; }
.result-error { display:block; color:var(--danger); border-color:var(--danger); }.result-success { display:block; color:var(--success); }
.login-footer { text-align:center; color:var(--muted); font-size:11px; padding:10px; }
.steps .step { border-right:1px solid color-mix(in srgb,var(--step-accent) 25%,var(--line)); border-bottom:1px solid color-mix(in srgb,var(--step-accent) 25%,var(--line)); }
@media(max-width:1050px) { .workspace { grid-template-columns:190px minmax(0,1fr); }.endpoint { grid-template-columns:60px minmax(0,1fr); }.endpoint .actions { grid-column:2; }.catalog-filters { grid-template-columns:minmax(100px,1fr) 145px 90px; } }
@media(max-width:760px) { .portal { padding:8px; gap:8px; height:auto; min-height:100dvh; }.commandbar { flex-wrap:wrap; }.workspace { display:flex; flex-direction:column; gap:8px; }.sidebar { overflow:visible; }.navigation { display:flex; padding:8px; gap:5px; }.navigation button { flex:1; padding:6px; justify-content:center; }.navigation small,.nav-icon,.nav-label,.sidebar-footer { display:none; }.session { margin:0; padding:8px 12px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }.session .badge,.session strong { margin:0; }.session small { display:none; }.stage { min-height:600px; }.view { overflow:visible; }.steps,.details-grid { grid-template-columns:1fr; }.step { border-right:0; border-bottom:1px solid var(--line); }.page-head { align-items:flex-start; padding:14px; flex-wrap:wrap; }.home-body { padding:12px; }.catalog-filters { grid-template-columns:1fr 100px; }.catalog-filters input { grid-column:1/-1; }.full-view { height:calc(100dvh - 80px); min-height:650px; }.full-view iframe { min-height:600px; }.login-page { padding:8px; }.login-layout { display:flex; flex-direction:column; gap:20px; margin:20px auto; align-items:stretch; }.login-intro h1 { font-size:25px; }.login-steps { display:none; }.login-card { padding:18px; } }

/* Shared developer portal: one navigation level, full-width working area. */
.workspace.wide-workspace { grid-template-columns:minmax(0,1fr); }
.commandbar .navigation { display:flex; gap:4px; padding:0; }
.commandbar .navigation button { padding:6px 10px; min-height:36px; }
.commandbar .navigation small { display:none; }
.commandbar .navigation .nav-icon { width:22px; height:22px; }
.session-menu { position:relative; }
.session-menu summary { cursor:pointer; padding:8px; border:1px solid var(--line); }
.session-menu[open] .session { position:absolute; right:0; top:100%; width:360px; max-width:calc(100vw - 32px); display:block; z-index:20; margin:6px 0; padding:14px; border:1px solid var(--line); background:var(--surface); box-shadow:0 8px 24px #0003; }
.session-api-key { margin:14px 0; padding-top:12px; border-top:1px solid var(--line); }
.session-api-key label { display:block; margin-bottom:6px; font-weight:600; }
.session-key-actions { display:flex; align-items:stretch; gap:6px; }
.session-key-actions input { flex:1; width:0; min-width:0; font:12px Consolas,monospace; }
.session-key-actions button { flex-shrink:0; color:var(--accent); border-color:var(--accent); }
.session-api-key p { font-size:12px; margin:6px 0 0; }
.session-api-key p:empty { display:none; }
@media(max-width:760px) { .session-menu[open] .session { left:0; right:auto; } }
#view-tool .page-head { padding:8px 14px; }
#view-tool .page-head h1 { font-size:18px; margin:0; }
#view-tool .page-head p { display:none; }
@media(max-width:1100px) { .commandbar { flex-wrap:wrap; gap:8px; }.commandbar .navigation { order:3; flex-basis:100%; }.commandbar .navigation button { flex:1; } }

.commandbar .navigation .nav-icon { white-space:nowrap; flex-shrink:0; width:28px; }