/* Shared spacing rhythm; no changes to route behaviour or information flow. */
:root {--space-xs:8px;--space-sm:12px;--space-md:16px;--space-lg:24px}
@media(min-width:901px) {
 .sidebar {width:240px}
 .content {margin-left:240px;width:calc(100% - 240px)}
}
.main {padding:var(--space-lg)}
.topbar {padding:var(--space-md) var(--space-lg);gap:var(--space-sm)}
.layout,.page-layout {grid-template-columns:minmax(0,1fr) minmax(340px,400px);gap:var(--space-lg);align-items:start}
.cards {gap:var(--space-md);grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.card {padding:var(--space-md) var(--space-md) 40px}
.card .route {margin-top:var(--space-sm)}
.chips {gap:var(--space-xs);margin-top:var(--space-sm)}
.toolbar {gap:var(--space-md);margin-bottom:var(--space-md);flex-wrap:wrap}
.tabs {gap:var(--space-xs);flex-wrap:wrap}
.home-config {gap:var(--space-sm)}
.refpanel {padding:var(--space-sm);position:static;max-height:none}
.home-panel-head {padding:var(--space-md);gap:var(--space-sm)}
.home-panel-head .grow {min-width:0}
.home-panel-head .panel-icon {flex-shrink:0}
.home-panel-head small,.config-note,.page-note {font-size:12px;line-height:1.5}
.home-panel-body {padding:var(--space-md)}
.refpanel .home-panel-body .panelblock {padding:0}
.page-right {padding:var(--space-lg);min-height:0}
.config-title {font-size:14px}
.config-note {margin:var(--space-xs) 0 var(--space-md)}
.config-actions,.editor-actions {gap:var(--space-xs);margin-top:var(--space-md);flex-wrap:wrap}
.pipeline-setting,.route-choice,.inline-switch {padding:var(--space-sm);gap:var(--space-sm)}
.pipeline-setting small {font-size:11px;line-height:1.5}
.cleaner-grid {gap:var(--space-xs)}
.cleaner-grid label {padding:var(--space-sm);font-size:12px;display:flex;align-items:center;gap:var(--space-xs)}
.cleaner-grid input {flex-shrink:0;margin:0}
.rule-card {padding:var(--space-md);margin-top:var(--space-sm)}
.rule-head,.rule-top {gap:var(--space-sm);flex-wrap:wrap}
.config-tabs {gap:var(--space-sm);flex-wrap:wrap}
.formline {margin-top:var(--space-md)}
.formline label {font-size:11px}
.formline input,.formline select,.formline textarea {padding:var(--space-sm)}
.modalbox {padding:var(--space-lg)}
.modalhead {gap:var(--space-md);margin-bottom:var(--space-md)}
.chat-toolbar {gap:var(--space-xs);flex-wrap:wrap}
.smallbtn,.mini-delete {min-height:36px}
.nav button {gap:var(--space-xs);min-height:40px}
.nav .icon {flex-shrink:0}
.nav .billing-nav-link {display:flex;align-items:center;gap:8px;min-height:40px;padding:8px 10px;margin:2px 0;border-radius:10px;color:#31415c;text-decoration:none;font:inherit}
.nav .billing-nav-link:hover {background:#e9f0ff;color:var(--blue)}
.account-footer-actions {display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.modalbox:has(.account-footer-actions) {max-height:calc(100dvh - 32px);overflow-y:auto}
.account-footer-actions > *, .pro-dialog-actions > * {display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:10px 14px;font-size:13px;font-weight:600;line-height:1.4;border-radius:10px;text-decoration:none}
.account-footer-actions .smallbtn {color:var(--ink)}
.pro-dialog-actions a.primary {color:#fff}
.account-row a[href^="/billing"], .panel a[href="/billing"] {display:inline-flex;align-items:center;min-height:40px;padding:8px 12px;border:1px solid #d9e5f2;border-radius:10px;color:#1754a7;background:#fff;font-size:13px;font-weight:600;text-decoration:none}
.account-footer-actions .smallbtn:hover, .account-row a[href^="/billing"]:hover, .panel a[href="/billing"]:hover {background:#f0f5ff;border-color:#aac7ee}
.account-footer-actions > :focus-visible, a[href^="/billing"]:focus-visible {outline:2px solid var(--blue);outline-offset:3px}
@media(max-width:900px) {
 .nav .billing-nav-link {justify-content:center;padding:8px 0}
 .nav .billing-nav-link > span:not(.icon) {display:none}
}
@media(max-width:600px) {
 .account-footer-actions > *, .pro-dialog-actions > * {flex:1 1 100%;min-height:44px}
}
@media(max-width:1100px) {
 .layout,.page-layout {grid-template-columns:1fr}
 .refpanel,.page-right {position:static;max-height:none}
}
@media(max-width:900px) {
 .nav button.pro-locked {position:relative}
 .nav button > .pro-lock-badge {display:inline-flex;position:absolute;right:0;top:0;padding:2px;margin:0;border:0;background:#f1f3f5}
 .nav .pro-lock-badge span {display:none}
}
@media(max-width:600px) {
 .main {padding:var(--space-sm)}
 .topbar {padding:var(--space-sm);gap:var(--space-xs);position:static}
 .topbar .title {flex:1 1 100%}
 .topbar .title h1 {font-size:18px}
 .topbar #accountsBtn {white-space:normal;text-align:left}
 .layout,.page-layout {gap:var(--space-md)}
 .refpanel {padding:var(--space-xs)}
 .page-right,.modalbox {padding:var(--space-md)}
 .home-panel-head,.home-panel-body {padding:var(--space-sm)}
 .home-panel-head {flex-wrap:wrap}
 .home-panel-head .grow {flex:1 1 110px}
 .cleaner-grid,.rule-card .twocol,.formgrid,.weekgrid {grid-template-columns:1fr}
 .tabs {gap:4px}
 .tabs span {padding:8px}
 .config-actions>* {max-width:100%}
}