.shell { min-height: 100vh; display: grid; grid-template-columns: 272px minmax(0,1fr); background: var(--bg); }
.rail { position: sticky; top: 0; z-index: var(--z-nav); height: 100vh; padding: 24px 18px; display: flex; flex-direction: column; gap: 18px; overflow-y: auto; background: var(--sidebar-bg); border-right: 1px solid var(--border); }
.rail__logo-wrapper { padding: 6px 8px 12px; }
.rail__copy { margin: 8px 0 0; padding-inline: 8px; color: var(--fg-secondary); font-size: 12px; line-height: 1.55; }
.rail__nav { display: flex; flex-direction: column; gap: 3px; }
.nav__link { min-height: 42px; padding: 9px 11px; display: flex; align-items: center; gap: 8px; border: 1px solid transparent; border-radius: 8px; color: var(--fg-secondary); background: transparent; font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; transition: color 160ms ease, background 160ms ease, border-color 160ms ease; }
.nav__link svg { flex: 0 0 auto; margin-right: 0 !important; }
.nav__link:hover { color: var(--fg); background: var(--surface); }
.nav__link.active { color: var(--accent); background: var(--accent-soft); border-color: color-mix(in oklch,var(--accent) 18%,transparent); }
.nav__link--help { color: var(--accent); }
.quota-widget { margin-top: auto; padding: 13px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.quota-widget__header { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--fg-secondary); font-size: 10px; }
.quota-widget__bar-bg { height: 4px; margin-top: 10px; overflow: hidden; background: var(--surface-alt); border-radius: 99px; }
.quota-widget__bar { width: 0; height: 100%; background: var(--accent); transition: width 180ms ease; }
.whatsapp-status-indicator { padding: 9px 11px; display: flex; align-items: center; gap: 8px; color: var(--fg-secondary); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 10px; font-weight: 650; }
.whatsapp-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fg-tertiary); }
.whatsapp-status-indicator[data-connected="true"] { color: var(--green); background: var(--green-soft); }
.whatsapp-status-indicator[data-connected="true"] .whatsapp-status-dot { background: var(--green); }

.mobile-app-header, .mobile-rail-close, .rail-overlay, .mobile-tab-bar { display: none; }
.board { width: 100%; max-width: 1660px; margin: auto; padding: 28px clamp(20px,3vw,44px) 80px; }

.workflow-rail { margin-bottom: 20px; padding: 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); }
.workflow-rail__heading { margin-bottom: 18px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.workflow-rail__heading p { margin: 0 0 3px; color: var(--fg-secondary); font-size: 11px; font-weight: 700; }
.workflow-rail__heading h1 { margin: 0; font-size: 22px; letter-spacing: -.03em; }
.workflow-rail ol { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5,1fr); list-style: none; border-top: 1px solid var(--border); }
.workflow-rail li { padding: 17px 14px 0 0; display: grid; grid-template-columns: 26px 1fr; column-gap: 8px; }
.workflow-rail li + li { padding-left: 14px; border-left: 1px solid var(--border); }
.workflow-rail li > span { grid-row: span 2; width: 26px; height: 26px; display: grid; place-items: center; color: var(--fg-secondary); background: var(--surface-alt); border-radius: 50%; font-size: 10px; font-weight: 800; }
.workflow-rail li strong { font-size: 12px; }
.workflow-rail li small { color: var(--fg-tertiary); font-size: 10px; }
.workflow-rail li.is-current > span, .workflow-rail li.is-complete > span { color: var(--surface); background: var(--accent); }

.search-collapsible-wrapper { margin-bottom: 20px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); }
.search-toggle-btn { width: 100%; min-height: 52px; padding: 12px 18px; display: flex; align-items: center; gap: 8px; color: var(--fg); background: transparent; border: 0; font-weight: 700; text-align: left; cursor: pointer; }
.search-toggle-btn:hover { background: var(--surface-alt); }
.search-collapsible-content { max-height: 560px; padding: 18px; opacity: 1; border-top: 1px solid var(--border); transition: max-height 180ms cubic-bezier(.16,1,.3,1), opacity 160ms ease, padding 180ms ease; }
.search-collapsible-content.collapsed { max-height: 0; padding-block: 0; opacity: 0; overflow: hidden; pointer-events: none; border-top-color: transparent; }
.search-panel { padding: 20px; display: flex; flex-direction: column; gap: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.search-panel--board { padding: 0; border: 0; }
.search-panel__grid { display: flex; gap: 16px; flex-wrap: wrap; }
.search-panel__side { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 12px; justify-content: space-between; }

.metrics { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.metric { min-height: 86px; padding: 17px 20px; background: transparent; }
.metric + .metric { border-left: 1px solid var(--border); }
.metric__label { display: block; color: var(--fg-secondary); font-size: 10px; font-weight: 750; }
.metric__value { display: block; margin-top: 4px; font-size: 24px; letter-spacing: -.03em; }

.bento-filters { margin: 8px 0 18px; padding: 5px; display: flex; gap: 5px; flex-wrap: wrap; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-md); }
.filter-pill { min-height: 36px; padding: 6px 12px; color: var(--fg-secondary); background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); font-size: 11px; font-weight: 700; cursor: pointer; }
.filter-pill:hover { color: var(--fg); }
.filter-pill.active { color: var(--accent); background: var(--surface); border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.batch-select-container { border-color: var(--border) !important; }
.select-all-label { min-height: 36px; }