/* Full-width studio workspace: shared rhythm across every operational view. */
.app-shell { align-items:stretch; }
.app-body { flex:1 1 0; min-width:0; margin:0; }
.app-main { width:100%; max-width:none; min-width:0; margin:0; padding:28px 32px 48px; align-self:stretch; }
.app-main > .view { width:100%; min-width:0; max-width:none; }
.workspace-heading, .dashboard-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; margin:0 0 26px; padding:0; }
.workspace-heading h2, .dashboard-heading h2 { margin:9px 0!important; font-size:28px!important; font-weight:700!important; line-height:1.25!important; letter-spacing:-.8px!important; color:#162a49; }
.workspace-heading p, .dashboard-heading p { margin:0; max-width:680px; font-size:13px; color:#687b91; line-height:1.8; }
.workspace-kicker, .dashboard-heading .command-kicker { display:block; margin:0; font-size:10px; font-weight:700; letter-spacing:1.2px; color:#687b91; }
.workspace-card, .app-main .panel, .app-main .settings-form-card { min-width:0; padding:23px; border:1px solid #dce5ef; border-radius:12px; background:#fff; box-shadow:none; }
.workspace-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:22px; }
.workspace-card-head h3 { margin:7px 0 0; color:#162a49; font-size:17px; font-weight:500; letter-spacing:-.3px; }
.workspace-card-head p { margin:8px 0 0; color:#8696a8; font-size:12px; line-height:1.7; }
.app-main .panel-head { margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid #e7edf5; }
.app-main .panel-head h2 { font-size:17px; color:#162a49; }
.app-main .panel-head small { max-width:650px; color:#687b91; font-size:12px; line-height:1.7; }
.app-main .toolbar { margin-bottom:18px; padding:12px; border-radius:10px; }
.app-main .settings-form .panel + .panel, .app-main .panel + .panel { margin-top:18px; }
.app-main .view-note { margin-bottom:20px; color:#687b91; font-size:13px; }
.app-main .settings-command-head { background:transparent; border:0; box-shadow:none; border-radius:0; padding:0; display:flex; }
.app-main .settings-command-head h2 { color:#162a49; }
.app-main .settings-command-head p { color:#687b91; }
.app-main .settings-readiness { width:200px; flex-shrink:0; padding:15px 18px; border:1px solid #dce5ef; border-radius:10px; background:#fff; color:#162a49; }
.app-main .settings-readiness span { color:#687b91; }
.app-main .settings-readiness strong { color:#245bd6; font-size:22px; }
.app-main .settings-step-intro h3 { font-size:28px; line-height:1.2; letter-spacing:-.7px; }
.app-main .settings-step-intro > p { font-size:13px; line-height:1.8; }
.app-main .settings-stage { padding:24px; min-height:0; }
.app-main .settings-wizard-nav { grid-template-columns:repeat(5,minmax(0,1fr)); border-radius:12px; box-shadow:none; }
.app-main .settings-wizard-nav button { border-radius:8px; padding:8px; }
.app-main .settings-wizard-nav button.active { background:#193b64; box-shadow:none; }
.app-main .settings-wizard-nav button.active > span { background:#eaf1ff; border-color:#eaf1ff; color:#245bd6; }
.app-main .settings-coverage-step { grid-template-columns:minmax(0,1fr); }
.app-main #coverageForm { margin-bottom:0; }
.app-main #coverageRegionPicker { width:100%; max-width:none; }
.app-main .settings-form-card > header h4 { font-size:17px; }
.app-main .settings-form-card > header span { font-size:10px; }
.app-main .settings-form-card > footer > span { font-size:11px; line-height:1.7; }
.app-main .settings-field-grid .field small { font-size:11px; }
.app-main .catalog-row, .app-main .station-item, .app-main .staff-row { border-radius:9px; }
.app-main .form-actions { padding:17px 0; }
.app-main .order-table-wrap { overflow-x:auto; border-radius:12px; }
.app-main .order-table td { vertical-align:middle; }
.nav-label, .nav-brand-text { white-space:nowrap; }
.sidebar-toggle, .mobile-nav-toggle { display:grid; place-items:center; width:36px; height:36px; flex-shrink:0; padding:7px; border:1px solid #dce5ef; border-radius:8px; background:#fff; color:#526781; cursor:pointer; }
.sidebar-toggle:hover, .mobile-nav-toggle:hover { background:#edf3ff; color:#245bd6; }
.sidebar-toggle svg, .mobile-nav-toggle svg, .logout-icon, .collapsed-sound svg, .nav-ico svg { width:22px; height:22px; flex-shrink:0; }
.sidebar-toggle.is-collapsed svg { transform:rotate(180deg); }
.mobile-nav-toggle { display:none; }
.app-nav { z-index:60; transition:width .18s ease; }
.app-nav-links { gap:4px; }
.app-nav .nav-link { position:relative; gap:12px; }
.app-nav .nav-ico { width:26px; height:26px; flex-shrink:0; }
.app-nav-brand > .nav-brand-text { flex:1; font-size:18px; }
.app-nav .nav-link[aria-current="page"] { color:#fff; }
.app-nav-footer #logoutBtn { display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:8px; text-decoration:none; }
.app-nav-footer #logoutBtn:hover { background:#264c71; color:#fff; }
.collapsed-sound { display:none; border:0; background:transparent; color:#b2cae2; cursor:pointer; }
.sidebar-backdrop { display:none; }
@media(min-width:981px) {
  .sidebar-collapsed .app-nav { width:78px; padding:24px 12px; }
  .sidebar-collapsed .nav-label, .sidebar-collapsed .nav-brand-text, .sidebar-collapsed .sound-toggle { display:none; }
  .sidebar-collapsed .app-nav-brand { padding:5px 7px 27px; justify-content:center; }
  .sidebar-collapsed .nav-link { justify-content:center; padding:11px 8px; gap:0; }
  .sidebar-collapsed .nav-link:hover::after, .sidebar-collapsed .nav-link:focus-visible::after { content:attr(data-nav-title); position:absolute; left:calc(100% + 12px); top:50%; transform:translateY(-50%); padding:9px 13px; color:#162a49; background:#fff; border:1px solid #dce5ef; border-radius:7px; box-shadow:0 7px 22px #162a4920; font-size:12px; white-space:nowrap; z-index:100; pointer-events:none; }
  .sidebar-collapsed .nav-badge { position:absolute; top:3px; right:0; padding:1px 4px; font-size:9px; }
  .sidebar-collapsed .collapsed-sound { display:grid; place-items:center; width:44px; height:40px; border-radius:8px; margin:auto; }
  .sidebar-collapsed .collapsed-sound[aria-pressed="false"] { opacity:.5; }
  .sidebar-collapsed .collapsed-sound:hover { background:#264c71; }
  .sidebar-collapsed #logoutBtn { justify-content:center; padding:10px 0; }
}
/* Wallet balances and diagnostics use the same surfaces as production views. */
.wallet-header-actions { display:flex; gap:10px; align-items:center; flex-shrink:0; }
.wallet-header-actions .select { min-height:40px; border-radius:8px; }
.wallet-message { margin:0 0 20px; padding:13px 16px; background:#eaf1ff; border:1px solid #d1dffe; border-radius:9px; font-size:13px; color:#245bd6; line-height:1.7; }
.wallet-message.error { background:#fff2f3; color:#ad3d54; border-color:#f1d0d8; }
.wallet-overview { display:grid; grid-template-columns:1.05fr 1.65fr; gap:18px; margin-bottom:18px; }
.wallet-balance-card { padding:26px; border:1px solid #183b67; border-radius:13px; background:#193b64; color:#fff; min-width:0; display:flex; flex-direction:column; }
.wallet-card-label { display:flex; align-items:center; justify-content:space-between; gap:15px; font-size:10px; letter-spacing:1.2px; color:#a8c8e9; }
.wallet-card-label i { display:inline-block; width:8px; height:8px; border-radius:50%; background:#73dbc7; }
#walletBalance { display:block; margin:22px 0 10px; font-size:clamp(27px,3vw,41px); line-height:1.2; font-weight:500; letter-spacing:-1px; overflow-wrap:anywhere; }
#walletBalance.negative { color:#ffb2c4; }
.wallet-balance-card p { max-width:420px; margin:0 0 24px; font-size:12px; line-height:1.8; color:#b1cbe4; }
.wallet-balance-foot { display:flex; gap:16px; justify-content:space-between; margin-top:auto; padding-top:16px; border-top:1px solid #ffffff22; font:10px 'Ubuntu',sans-serif; color:#a8c8e9; }
.wallet-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.wallet-metric { display:flex; flex-direction:column; justify-content:center; gap:14px; min-width:0; padding:22px; background:#fff; border:1px solid #dce5ef; border-top:3px solid #245bd6; border-radius:12px; }
.wallet-metric.out { border-top-color:#cd397d; }
.wallet-metric.pending { border-top-color:#dca437; }
.wallet-metric > span { color:#687b91; font-size:12px; }
.wallet-metric strong { color:#162a49; font-size:clamp(19px,1.8vw,28px); font-weight:500; line-height:1.4; letter-spacing:-.6px; overflow-wrap:anywhere; }
.wallet-metric small { color:#8696a8; font-size:10px; line-height:1.7; }
.wallet-insights { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-bottom:24px; }
.wallet-insight { display:flex; align-items:flex-start; gap:10px; padding:14px 16px; border:1px solid #dce5ef; border-radius:9px; background:#f9fbfe; min-width:0; }
.wallet-insight i { width:6px; height:6px; border-radius:50%; background:#17a3b4; margin-top:5px; flex-shrink:0; }
.wallet-insight.watch i { background:#dca437; }
.wallet-insight strong { font-size:11px; font-weight:500; color:#435d79; }
.wallet-insight p { margin:5px 0 0; font-size:11px; color:#687b91; line-height:1.7; }
.wallet-analytics { display:grid; grid-template-columns:minmax(0,1.85fr) minmax(275px,1fr); gap:20px; margin-bottom:22px; }
.wallet-chart-panel { display:flex; flex-direction:column; }
.wallet-chart-modes { display:flex; gap:4px; border:1px solid #dce5ef; background:#f3f6fb; padding:4px; border-radius:8px; flex-shrink:0; }
.wallet-chart-modes button { font:11px 'Ubuntu',sans-serif; border:0; border-radius:5px; color:#687b91; background:transparent; padding:7px 10px; cursor:pointer; }
.wallet-chart-modes button.active { background:#fff; color:#245bd6; box-shadow:0 1px 4px #162a4910; }
.wallet-chart { min-height:260px; position:relative; padding-top:15px; margin-top:0; flex:1; display:grid; align-items:center; }
.wallet-chart svg { display:block; width:100%; height:auto; min-height:190px; overflow:visible; }
.wallet-grid-line { stroke:#e7edf5; stroke-width:1; stroke-dasharray:3 4; }
.wallet-zero-line { stroke:#d5dfed; stroke-width:1; }
.wallet-axis { fill:#8696a8; font:11px 'Ubuntu',sans-serif; }
.collection-bar { fill:#245bd6; }
.payout-bar { fill:#cd397d; }
.wallet-day-hit { fill:transparent; }
.wallet-day { cursor:pointer; }
.wallet-day:focus { outline:none; }
.wallet-day:hover .wallet-day-hit, .wallet-day:focus .wallet-day-hit, .wallet-day.selected .wallet-day-hit { fill:#245bd60d; stroke:#a8c2f5; stroke-width:1; }
.wallet-chart-empty { position:absolute; top:45%; left:70px; right:15px; text-align:center; margin:0; padding:12px; background:#ffffffea; font-size:12px; color:#8696a8; line-height:1.7; pointer-events:none; }
.wallet-chart-detail { min-height:42px; margin-top:16px; padding:11px 13px; background:#f6f8fc; border-radius:7px; color:#526781; font-size:11px; line-height:1.8; }
.wallet-legend { display:flex; gap:22px; margin-top:15px; flex-wrap:wrap; }
.wallet-legend span { font-size:10px; color:#687b91; display:flex; align-items:center; gap:6px; }
.wallet-legend i { display:block; width:7px; height:7px; border-radius:2px; background:#245bd6; }
.wallet-legend span:last-child i { background:#cd397d; }
.wallet-health { position:relative; width:140px; height:140px; margin:4px auto 18px; }
.wallet-health svg { display:block; width:140px; height:140px; transform:rotate(-90deg); }
.wallet-health circle { fill:none; stroke-width:7; }
.health-track { stroke:#edf2f8; }
.health-progress { stroke:#17a3b4; stroke-linecap:round; }
.wallet-health > div { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; }
.wallet-health strong { color:#162a49; font-size:25px; font-weight:500; }
.wallet-health small { color:#8696a8; font-size:9px; }
.wallet-health-counts { display:flex; justify-content:space-around; gap:14px; margin-bottom:22px; color:#8696a8; font-size:10px; }
.wallet-health-counts b { display:block; text-align:center; color:#435d79; font-size:16px; font-weight:500; margin-bottom:5px; }
#walletBreakdown { border-top:1px solid #e7edf5; padding-top:14px; }
#walletBreakdown > div { display:flex; justify-content:space-between; gap:20px; padding:8px 0; font-size:11px; }
#walletBreakdown span { color:#687b91; }
#walletBreakdown strong { font-weight:500; color:#435d79; white-space:nowrap; }
.wallet-note { color:#8696a8; font-size:11px; line-height:1.8; margin:16px 0 0; }
.wallet-ledger { margin-bottom:22px; }
.wallet-ledger-filters { display:flex; gap:9px; flex-shrink:0; }
.wallet-ledger-filters .select { min-height:38px; }
.wallet-table-wrap { width:100%; overflow-x:auto; }
.wallet-table { width:100%; min-width:760px; border-collapse:collapse; }
.wallet-table th { padding:13px 12px; border-bottom:1px solid #dce5ef; background:#f8fafd; color:#687b91; text-align:left; font-size:10px; font-weight:500; }
.wallet-table td { padding:16px 12px; border-bottom:1px solid #edf2f8; font-size:11px; color:#526781; vertical-align:middle; }
.wallet-table td strong { display:block; color:#435d79; font-size:12px; font-weight:500; }
.wallet-table td small { display:block; margin-top:5px; font-size:10px; color:#8696a8; }
.wallet-table td.wallet-amount { font-size:12px; font-weight:500; color:#162a49; white-space:nowrap; }
.wallet-reference { font-family:ui-monospace,monospace; font-size:9px!important; overflow-wrap:anywhere; max-width:200px; }
.wallet-flow { display:inline-flex; align-items:center; gap:5px; font-weight:500; color:#245bd6; }
.wallet-flow.payout { color:#b33270; }
.wallet-status { display:inline-block; padding:5px 8px; border-radius:5px; color:#687b91; background:#f3f6fb; text-transform:capitalize; font-size:10px; }
.wallet-status.completed { background:#eaf6f1; color:#268471; }
.wallet-status.pending { background:#fff6e5; color:#a47922; }
.wallet-status.failed { background:#fff0f3; color:#ad3d54; }
.wallet-empty { text-align:center!important; padding:38px!important; }
.wallet-empty strong { color:#526781; margin-bottom:8px; }
.wallet-empty span { color:#8696a8; font-size:12px; }
.wallet-muted { color:#9aacbf; font-size:10px; }
.wallet-pagination { display:flex; align-items:center; justify-content:space-between; gap:15px; padding-top:18px; font-size:11px; color:#8696a8; }
.wallet-pagination > div { display:flex; gap:7px; }
.wallet-pagination button, .wallet-day-filter { padding:8px 12px; background:#fff; border:1px solid #dce5ef; border-radius:6px; color:#526781; font:11px 'Ubuntu',sans-serif; cursor:pointer; }
.wallet-day-filter { display:block; margin:0 0 15px; color:#245bd6; background:#eaf1ff; border-color:#d1dffe; }
.wallet-day-filter[hidden] { display:none; }
.wallet-bottom-grid { display:grid; grid-template-columns:1.3fr 1fr; gap:20px; }
.wallet-order-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.wallet-order-summary span, .wallet-order-summary small { display:block; font-size:11px; color:#687b91; }
.wallet-order-summary strong { display:block; font-size:22px; letter-spacing:-.5px; font-weight:500; color:#162a49; margin:12px 0 8px; }
.wallet-plan { display:flex; justify-content:space-between; align-items:center; gap:20px; font-size:16px; color:#162a49; }
.wallet-plan strong { border-radius:6px; padding:6px 9px; background:#eaf6f1; color:#268471; font-size:10px; font-weight:500; }
@media(min-width:1700px) { .app-main { padding:32px 40px 50px; } .wallet-chart svg { min-height:230px; } }
@media(max-width:1200px) { .wallet-overview { grid-template-columns:1fr; } .wallet-balance-card { padding:24px; } #walletBalance { margin:15px 0 10px; font-size:34px; } .wallet-balance-card p { max-width:none; margin-bottom:15px; } .wallet-metric { padding:20px; } .wallet-analytics { grid-template-columns:minmax(0,1.55fr) minmax(260px,1fr); } .wallet-chart-panel .workspace-card-head { flex-direction:column; gap:14px; } .wallet-ledger .workspace-card-head { flex-wrap:wrap; } }
@media(max-width:980px) {
  .app-main { padding:24px; }
  .app-topbar { padding:15px 24px; gap:12px; }
  .sidebar-toggle { display:none; }
  .mobile-nav-toggle { display:grid; }
  .app-nav { width:238px; z-index:800; left:-250px; }
  .app-nav.open { left:0; }
  .sidebar-backdrop { display:block; position:fixed; inset:0; border:0; background:#162a4966; z-index:790; }
  .wallet-analytics { grid-template-columns:minmax(0,1.6fr) minmax(250px,1fr); }
}
@media(max-width:760px) {
  .workspace-heading, .dashboard-heading { flex-direction:column; align-items:flex-start; gap:20px; margin-bottom:22px; }
  .workspace-heading h2, .dashboard-heading h2 { font-size:25px!important; }
  .app-main .settings-command-head { flex-direction:column; }
  .app-main .settings-readiness { width:100%; }
  .app-main .settings-stage { padding:16px; }
  .wallet-header-actions { width:100%; }
  .wallet-header-actions .select { flex:1; }
  .wallet-insights { grid-template-columns:1fr; gap:9px; }
  .wallet-analytics, .wallet-bottom-grid { grid-template-columns:minmax(0,1fr); }
  .wallet-chart svg { min-height:170px; }
  .wallet-breakdown { display:block; }
  .wallet-metric { padding:17px; gap:10px; }
  .wallet-metric strong { font-size:21px; }
  .wallet-ledger-filters { width:100%; }
  .wallet-ledger-filters .select { flex:1; min-width:0; }
  .workspace-card-head { gap:14px; }
  .wallet-chart-empty { left:45px; font-size:11px; }
}
@media(max-width:540px) {
  .app-main { padding:18px 16px 36px; }
  .app-topbar { padding:14px 16px; }
  .workspace-heading h2, .dashboard-heading h2 { font-size:23px!important; }
  .workspace-heading p, .dashboard-heading p { font-size:12px; }
  .workspace-card, .app-main .panel, .app-main .settings-form-card { padding:18px; }
  .wallet-metrics { grid-template-columns:minmax(0,1fr); gap:10px; }
  .wallet-metric { display:grid; grid-template-columns:1fr auto; gap:5px 15px; padding:16px; border-top-width:1px; border-left:3px solid #245bd6; border-radius:9px; }
  .wallet-metric.out { border-top-color:#dce5ef; border-left-color:#cd397d; }
  .wallet-metric.pending { border-top-color:#dce5ef; border-left-color:#dca437; }
  .wallet-metric strong { grid-column:2; grid-row:1/3; align-self:center; font-size:20px; }
  .wallet-metric small { grid-column:1; font-size:9px; }
  .wallet-metric > span { font-size:11px; }
  .wallet-balance-card { padding:22px; }
  .wallet-balance-card p { font-size:11px; }
  .wallet-card-label { font-size:9px; }
  .wallet-pagination { align-items:flex-start; flex-wrap:wrap; gap:12px; }
  .wallet-bottom-grid .workspace-card-head { flex-wrap:wrap; }
  .wallet-order-summary strong { font-size:20px; }
  .wallet-chart-detail { font-size:10px; }
}
@media(prefers-reduced-motion:reduce) { .app-nav { transition:none; } }