/* TomBat Studio: shared finish for everyday use and the workshop. */
:root {
  --ink:#111411; --ink-soft:#636a61; --ink-faint:#737a70;
  --paper:#f4f5f0; --surface:#fff;
  --stone-100:#f0f2ec; --stone-150:#e9ece4; --stone-200:#e1e5dc;
  --stone-300:#cbd2c5; --stone-400:#a1ab9a;
  --accent:#8ccd7e; --accent-ink:#31662b; --accent-soft:#edf5e8;
  --accent-glow:rgba(140,205,126,.22); --muted:var(--ink-soft);
  --radius:18px; --radius-sm:11px; --radius-lg:24px;
  --shadow-sm:0 2px 3px #14201103; --shadow:0 12px 36px #1420110d;
  --sidebar:248px;
}
.tombat-studio {font-size:14px;line-height:1.55}
.tombat-studio h1,.tombat-studio h2 {letter-spacing:-.035em}
.tombat-studio h1 {font-size:27px;line-height:1.2}
.tombat-studio .sidebar {background:#121711;padding:26px 16px 18px}
.tombat-studio .brand {padding:4px 12px 26px;gap:12px;border-bottom:1px solid #ffffff12;margin-bottom:10px}
.tombat-studio .brand-lockup {min-width:0}
.tombat-studio .brand-wordmark {display:block;width:160px;height:auto;max-width:100%}
.tombat-studio .brand-lockup small {display:block;font-size:10px;letter-spacing:.06em;color:#a8b2a2;margin:3px 0 0 5px;font-weight:500}
.tombat-studio .nav {gap:4px}
.tombat-studio .nav-section {color:#98a390;letter-spacing:.13em;font-size:9px;padding-top:23px;padding-bottom:8px}
.tombat-studio .nav button {min-height:44px;border-radius:10px;color:#c7cebf;font-size:13px;font-weight:500}
.tombat-studio .nav button:hover {background:#ffffff09;color:#fff}
.tombat-studio .nav button.active {background:var(--accent);color:#122010;font-weight:700}
.tombat-studio .sidebar .foot {border-top:1px solid #ffffff12;padding:16px 12px 0;color:#a0ab99;font-size:10px;margin-top:18px}
.tombat-studio .topbar {min-height:91px;padding:20px 32px;gap:14px;background:#f4f5f0f2;backdrop-filter:blur(16px)}
.tombat-studio .topbar .title {min-width:160px}
.tombat-studio .topbar .title p {font-size:12px;margin-top:5px;max-width:58ch}
.tombat-studio .view {max-width:1320px;padding:28px 32px 64px;margin-inline:auto}
.tombat-studio .card {box-shadow:var(--shadow-sm);border-color:var(--stone-200);padding:22px}
.tombat-studio .card.collapsible,.tombat-studio .ble-workbench>.ble-fold {padding:0}
.tombat-studio .grid {gap:16px}
.tombat-studio .btn {min-height:40px;border-radius:10px;font-weight:600;font-size:12px;gap:8px;justify-content:center}
.tombat-studio .btn.sm {min-height:34px;padding:7px 11px}
.tombat-studio .btn.primary {background:var(--ink);border-color:var(--ink)}
.tombat-studio .btn.primary:hover:not(:disabled) {background:#253920;border-color:#253920;box-shadow:none}
.tombat-studio .btn.accent {background:var(--accent);color:#152111;border-color:var(--accent)}
.tombat-studio .btn:disabled {box-shadow:none;opacity:.48}
.tombat-studio :is(input,select,textarea) {border-radius:10px}
.tombat-studio :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select) {min-height:42px}
.tombat-studio :is(input[type=checkbox],input[type=radio],input[type=range]) {accent-color:var(--accent-ink)}
.tombat-studio label.field {font-size:11px;font-weight:600;margin-bottom:8px}
.tombat-studio .pill {font-size:10px;font-weight:600;letter-spacing:.01em;padding:4px 10px}
.tombat-studio .sec-h {margin:0 0 18px;gap:11px}
.tombat-studio .sec-h h2 {font-size:16px}
.tombat-studio .sec-h .k {width:30px;height:30px;border-radius:9px}
.tombat-studio .panel-head {padding:18px 22px}
.tombat-studio .panel-body {padding:0 22px 22px}
.tombat-studio .subtabs {gap:5px;padding:5px;background:#e9ede4;border:0;border-radius:13px;margin:0 0 24px}
.tombat-studio .subtab {border:1px solid transparent;background:transparent;font-size:12px;font-weight:600;min-height:40px;padding:9px 14px;border-radius:9px}
.tombat-studio .subtab.active {background:#fff;color:var(--ink);border-color:#d8dfd1;box-shadow:0 2px 3px #14201106}
.tombat-studio .subtab:hover:not(.active) {background:#ffffff70;color:var(--ink)}
.tombat-studio .connbar {gap:10px;border-radius:11px;background:#fff;padding:3px 4px 3px 13px;min-width:0}
.tombat-studio .connbar.auth {border-color:#c2dab7;background:#f5faf1}
.tombat-studio .connbar .ctxt {font-size:11px;max-width:21ch}
.tombat-studio .connbar .cact {border-radius:8px;font-size:11px;min-height:34px}
.tombat-studio .omni-trigger {border-color:var(--stone-200);min-width:42px;min-height:42px;padding:10px;border-radius:11px}
.tombat-studio .omni-trigger .lbl {display:none}
.tombat-studio .omni-trigger kbd {display:none}
.tombat-studio .tb-studio-hero {background:#182016;color:#fff;min-height:210px;position:relative;overflow:hidden;padding:34px;border:0;align-items:center;align-content:center}
.tombat-studio .tb-studio-hero h2 {font-size:clamp(28px,3vw,40px);max-width:18ch;line-height:1.1;margin:20px 0 12px}
.tombat-studio .tb-studio-hero p {color:#b5c1ad;font-size:12px}
.tombat-studio .tb-studio-hero .pill {background:#8ccd7e;color:#172312;padding:7px 13px}
.tb-eyebrow {display:block;font-size:9px;letter-spacing:.17em;text-transform:uppercase;font-weight:600;color:#acd09b}
.tb-section-heading {display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:8px}
.tb-section-heading h2 {font-size:18px}.tb-section-heading p {font-size:12px;color:var(--ink-soft);margin:0}
.tombat-studio .studio-overview {gap:20px}
.tombat-studio .studio-shortcuts {gap:14px}
.tombat-studio .studio-shortcut {padding:25px;gap:18px;border-radius:16px;min-height:114px;transition:background .18s,border-color .18s}
.tombat-studio .studio-shortcut>svg:first-child {box-sizing:content-box;background:var(--accent-soft);padding:12px;border-radius:12px;width:22px;height:22px}
.tombat-studio .studio-shortcut strong {font-size:16px;letter-spacing:-.02em}
.tombat-studio .studio-shortcut small {font-size:12px}
.tombat-studio .studio-extra {margin-top:0}
.tombat-studio .live-more {margin-top:24px;background:transparent;box-shadow:none;border-style:dashed}
.tombat-studio .ble-workbench {max-width:none;gap:20px}
.tombat-studio .ble-connection {border-top:3px solid var(--accent)}
.tombat-studio .ble-card-heading h2 {font-size:22px}
.tombat-studio .ble-shortcut {min-height:100px;padding:20px;border-radius:15px}
.tombat-studio .ble-shortcut strong {font-size:14px}
.tombat-studio .ble-shortcut small {font-size:12px}
.tombat-studio .ble-fold>summary {padding:18px 22px}
.tombat-studio .ble-fold-body .spread {flex-wrap:wrap}
.tombat-studio .ble-fold-body .spread>.row {flex-wrap:wrap;min-width:0}
.tombat-studio .rider {max-width:none;gap:22px}
.tombat-studio .rider-picker {padding:23px 26px;border-radius:18px;border-left:4px solid var(--accent)}
.tombat-studio .rider-picker h2 {font-size:26px}
.tombat-studio .rider {min-width:0;grid-template-columns:minmax(0,1fr)}
.tombat-studio .rider-picker>*,.tombat-studio .rider-overview>* {min-width:0}
.tombat-studio .rider-picker h2 {overflow-wrap:anywhere}
.tombat-studio .rider-tools {grid-template-columns:minmax(0,1fr)}
.tombat-studio .rider-tools>.rm-uit {grid-column:1/-1}
.tombat-studio .panel-head h3 {min-width:0;overflow-wrap:anywhere}
.tombat-studio .storage-path {font-size:12px;overflow-wrap:anywhere;margin:8px 0 16px}
.tombat-studio .settings-locations {table-layout:fixed;width:100%}
.tombat-studio .settings-locations td {overflow-wrap:anywhere;white-space:normal}
.tombat-studio .rider-genstrip {color:var(--ink-soft)}
.tombat-studio .rider-picker label {font-size:11px}
.tombat-studio .rider-overview {gap:24px;grid-template-columns:300px minmax(0,1fr)}
.tombat-studio .rider-controlcard {border-radius:18px;padding:26px 20px}
.tombat-studio .rider-orb {background:#182016;box-shadow:none;width:190px;height:190px}
.tombat-studio .rider-orb.unlocked {background:var(--accent);color:#152611;box-shadow:none}
.tombat-studio .rider-orb .lbl {font-size:17px;letter-spacing:-.025em}
.tombat-studio .rider-stat {border-radius:14px;padding:22px 10px;text-align:left}
.tombat-studio .rider-stat .k {font-size:9px;letter-spacing:.09em}
.tombat-studio .rider-stat .v {font-variant-numeric:tabular-nums;font-size:34px;font-weight:700;margin:12px 0 5px}
.tombat-studio .rider-stat .u {font-size:11px;font-weight:500}
.tombat-studio .rider-btn {min-height:84px;border-radius:12px;font-weight:500;gap:9px}
.tombat-studio .rider-btn:hover:not(:disabled) {background:var(--accent-soft);border-color:var(--accent)}
.tombat-studio .rider-btn .st:empty {display:none}
.tombat-studio .rider-data h3 {font-size:14px;letter-spacing:-.015em}
.tombat-studio .rider-freshness {font-size:11px}
.tombat-studio .bike-list>.card {padding:24px;border-radius:17px}
.tombat-studio .bike-list {grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));align-items:stretch}
.tombat-studio .bike-list .grid.two {grid-template-columns:minmax(0,1fr)}
.tombat-studio .studio-filter input {background:#fff}
.tombat-studio .sa5-view>.card {margin-bottom:18px}
.tombat-studio .sa-item {padding:12px 0}
.tombat-studio .sa-item .n small {color:var(--ink-soft)}
.tombat-studio .bd-metric {border-radius:14px}
.tombat-studio .bd-metric strong {font-variant-numeric:tabular-nums;font-weight:700}
.tombat-studio .mxl {max-width:900px;gap:20px}
.tombat-studio .mxl .card {padding:24px}
.tombat-studio .rsheet-x {width:44px;height:44px}
.tombat-studio pre {border-radius:11px}
.tombat-studio th {font-size:10px;color:var(--ink-soft)}
.tombat-studio td {padding-block:12px}
.tombat-studio #toast {border-radius:13px;max-width:min(540px,calc(100vw - 32px));font-size:13px}
@media (min-width:821px) and (max-width:1140px) {
  :root {--sidebar:220px}
  .tombat-studio .topbar {padding:18px 22px;flex-wrap:wrap}
  .tombat-studio .topbar .title {flex:1 1 220px}
  .tombat-studio .view {padding:24px 22px 56px}
  .tombat-studio .rider-overview {grid-template-columns:230px minmax(0,1fr);gap:18px}
  .tombat-studio .rider-orb {width:170px;height:170px}
  .tombat-studio .rider-stat .v {font-size:28px}
}
@media (max-width:820px) {
  .tombat-studio .sidebar {left:10px;top:max(10px,env(safe-area-inset-top));bottom:auto;width:min(296px,calc(100vw - 32px));max-height:calc(100dvh - max(10px,env(safe-area-inset-top)) - max(10px,env(safe-area-inset-bottom)));padding:12px;border:1px solid #ffffff14;border-radius:20px;gap:0;overflow:hidden;transform:translateX(calc(-100% - 12px))}
  .tombat-studio .app.nav-open .sidebar {transform:translateX(0);box-shadow:0 16px 48px #0005}
  .tombat-studio .brand {display:flex;align-items:center;justify-content:space-between;flex-shrink:0;gap:8px;padding:0 0 12px 3px;margin:0 0 6px}
  .tombat-studio .brand-wordmark {width:144px}
  .tombat-studio .brand-lockup small {font-size:9px;margin-top:0}
  .tombat-studio .nav-close {align-self:center;background:#ffffff0b;border:1px solid #ffffff14;color:#dce5d6;border-radius:12px;min-width:44px;min-height:44px;width:44px;height:44px;padding:0;flex-shrink:0}
  .tombat-studio .nav {margin:0;gap:2px;overscroll-behavior:contain}
  .tombat-studio .nav-section {padding:10px 10px 3px;font-size:9px;letter-spacing:.1em}
  .tombat-studio .nav-section:first-child {padding-top:3px}
  .tombat-studio .nav button {min-height:44px;padding:9px 10px;font-size:13px;line-height:20px;flex-shrink:0;gap:10px}
  .tombat-studio .sidebar .foot {flex-shrink:0;margin-top:8px;padding:9px 10px 0;font-size:10px}
  .tombat-studio .nav-backdrop {background:#11141166;backdrop-filter:blur(3px)}
  .tombat-studio .topbar {display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:10px 12px;padding:12px 16px;padding-top:max(12px,env(safe-area-inset-top));min-height:0;position:relative}
  .tombat-studio .hamburger {grid-column:1;grid-row:1;margin:0;width:44px;height:44px;background:transparent;border-color:transparent}
  .tombat-studio .topbrand {display:flex;position:static;transform:none;grid-column:2;grid-row:1;justify-content:center;gap:8px;min-width:0}
  .tombat-studio .topbrand img {display:block;width:132px;height:auto;max-width:100%;border-radius:0}
  .tombat-studio .omni-trigger {grid-column:3;grid-row:1;min-width:44px;width:44px;height:44px;justify-content:center;border-color:transparent;background:transparent}
  .tombat-studio .connbar {grid-column:1/-1;grid-row:2;display:flex;width:100%;padding:1px 3px 1px 12px;gap:10px;min-height:46px}
  .tombat-studio .connbar .ctxt {display:block;flex:1;max-width:none;min-width:0;font-size:12px}
  .tombat-studio .connbar .clbl {display:inline}
  .tombat-studio .connbar .cact {min-height:44px;font-size:11px;padding:8px 10px}
  .tombat-studio .topbar #topActions {grid-column:1/-1;grid-row:3;max-width:none;justify-content:flex-end}
  .tombat-studio .topbar #topActions:not(:has(button,a,input,select)) {display:none}
  .tombat-studio .view {padding:22px 16px calc(48px + env(safe-area-inset-bottom))}
  .tombat-studio .mobile-page-title {font-size:24px;margin-bottom:20px}
  .tombat-studio .card {padding:18px;border-radius:16px}
  .tombat-studio .btn,.tombat-studio .btn.sm,.tombat-studio .subtab {min-height:44px}
  .tombat-studio .rm-btn,.tombat-studio .rm-keuze input.rm-num {min-height:44px}
  .tombat-studio .subtabs {margin-bottom:20px;padding:4px;gap:4px}
  .tombat-studio .subtab {font-size:11px;padding:8px;gap:6px}
  .tombat-studio .subtab svg {width:15px;height:15px;flex-shrink:0}
  .tombat-studio .panel-head {padding:18px}.tombat-studio .panel-body {padding:0 18px 18px}
  .tombat-studio .tb-studio-hero {padding:25px;min-height:225px}
  .tombat-studio .tb-studio-hero h2 {font-size:33px}
  .tb-section-heading {display:block}.tb-section-heading p {margin-top:4px}
  .tombat-studio .studio-shortcut {min-height:98px;padding:20px;gap:15px}
  .tombat-studio .studio-shortcut strong {font-size:15px}
  .tombat-studio .studio-shortcut>svg:first-child {padding:10px;width:20px;height:20px}
  .tombat-studio .rider-picker {padding:19px;border-radius:16px}
  .tombat-studio .rider-picker h2 {font-size:23px}
  .tombat-studio .rider-overview {grid-template-columns:1fr;gap:22px}
  .tombat-studio .rider-controlcard {display:grid;grid-template-columns:160px minmax(0,1fr);gap:18px;align-items:center;padding:22px}
  .tombat-studio .rider-orb {width:160px;height:160px;gap:10px;padding:14px}
  .tombat-studio .rider-statusrow {padding:0;gap:12px}
  .tombat-studio .rider-stat {padding:18px 12px}
  .tombat-studio .rider-stat .v {font-size:30px}
  .tombat-studio .bike-list>.card {padding:20px}
  .tombat-studio .live-more {padding:18px}
}
@media (max-width:480px) {
  .tombat-studio .settings-locations,.tombat-studio .settings-locations tbody {display:block}
  .tombat-studio .settings-locations tr {display:grid;grid-template-columns:minmax(0,1fr);padding:8px 0;border-bottom:1px solid var(--stone-200)}
  .tombat-studio .settings-locations td {display:block;padding:3px 0;border:0}
  .tombat-studio .rider-controlcard {grid-template-columns:132px minmax(0,1fr);gap:12px;padding:18px 14px}
  .tombat-studio .rider-orb {width:132px;height:132px;gap:8px;padding:12px}
  .tombat-studio .rider-orb svg {width:31px;height:31px}
  .tombat-studio .rider-orb .lbl {font-size:14px;line-height:1.2}
  .tombat-studio .rider-orb .sub {font-size:10px;line-height:1.3}
  .tombat-studio .rider-status {font-size:11px}
  .tombat-studio .rider-btn {font-size:11px;padding:12px 7px;min-height:80px}
  .tombat-studio .rider-stats {gap:8px}
  .tombat-studio .rider-stat {padding:16px 10px}.tombat-studio .rider-stat .v {font-size:25px}
  .tombat-studio .mxl .card {padding:18px}
  .tombat-studio .sa5-view select {width:100%}
  .tombat-studio .sa5-view .card>.row>.btn.primary {flex:1}
}
@media (prefers-reduced-motion:reduce) {
  .tombat-studio *, .tombat-studio *::before, .tombat-studio *::after {animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}