/* TBS Glass — local, responsive, no external fonts or tracking assets. */
:root {
  --ink: #20313f;
  --muted: #657581;
  --paper: #eff4f6;
  --line: rgba(81, 112, 130, .12);
  --accent: #247b6d;
  --glass: rgba(255, 255, 255, .72);
  --shadow: 0 8px 30px rgba(44, 75, 94, .045), 0 1px 3px rgba(44, 75, 94, .025);
}
html { background: var(--paper); }
body {
  background: radial-gradient(ellipse at 10% 4%, #dceff0 0, transparent 43%),
    radial-gradient(ellipse at 88% 18%, #e6e7fa 0, transparent 39%),
    radial-gradient(ellipse at 72% 85%, #e9f1e3 0, transparent 42%), #f1f5f7;
  background-attachment: fixed;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font-family: inherit; }
.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.app-shell { grid-template-columns: 260px minmax(0, 1fr); }
.sidebar {
  height: calc(100vh - 32px); top: 16px; margin: 16px 0 16px 16px;
  padding: 22px 14px 15px; border-radius: 28px;
  background: rgba(255, 255, 255, .66); color: var(--ink);
  border: 1px solid rgba(255, 255, 255, .94);
  box-shadow: var(--shadow), inset 0 1px 0 #fff;
  backdrop-filter: blur(28px) saturate(1.3);
  scrollbar-width: thin; scrollbar-color: #b5cbd466 transparent;
}
.brand { border: 0; padding: 0 8px 18px; gap: 11px; }
.brand-mark {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 15px;
  background: linear-gradient(145deg, #3d9c8a, #24766b); color: white;
  font-family: inherit; font-size: 13px; font-weight: 750; letter-spacing: -.5px;
  box-shadow: 0 5px 12px #267d6d26, inset 0 1px 0 #ffffff50;
}
.brand strong { color: #263e48; font-size: 13px; letter-spacing: 1.3px; }
.brand small { color: #71838d; font-size: 10px; margin-top: 3px; }
.nav { gap: 5px; padding: 0 0 15px; }
.nav-label { padding: 14px 12px 5px; color: #7e8e98; font-size: 9px; letter-spacing: 1.25px; }
.nav a {
  color: #5b6f7b; padding: 8px 11px; font-size: 12px; font-weight: 500;
  border: 1px solid transparent; border-radius: 17px; gap: 11px;
  transition: background .18s ease, transform .18s ease, color .18s ease;
}
.nav a:hover { background: #ffffffa6; color: #28685d; transform: translateX(2px); }
.nav a.active { padding-left: 11px; border: 1px solid #ffffffdf; color: #286e61; background: linear-gradient(115deg, #d6eee5df, #e4f1edce); box-shadow: 0 3px 9px #3b796a0a, inset 0 1px 0 #fff9; font-weight: 650; }
.nav-icon { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 11px; background: #e7edf2a6; color: #6d8a9d; }
.nav a.active .nav-icon { background: #f5fffcbd; color: #358873; }
.nav a:nth-of-type(3n) .nav-icon { background: #eae8f8b0; color: #8a80b7; }
.nav a:nth-of-type(3n + 2) .nav-icon { background: #e3edf8b0; color: #688eaf; }
.nav a.active .nav-icon { color: #358873; background: #f5fffcc9; }
.nav-icon .icon { width: 17px; height: 17px; }
.sidebar-bottom { border-top: 1px solid var(--line); padding-top: 12px; }
.sidebar-bottom a, .link-button { font-size: 11px; padding: 7px 13px; border-radius: 12px; color: #71818a; }
.sidebar-bottom a:hover, .link-button:hover { color: #285f57; background: #ffffffa6; }
.sidebar-bottom .user-chip { color: #4b646d; border-color: var(--line); padding: 15px 11px 0; margin-top: 11px; font-size: 12px; font-weight: 600; }
.avatar { width: 31px; height: 31px; background: linear-gradient(145deg,#e8dcfd,#e1ecfb); border: 1px solid #fff; color: #7c729d; box-shadow: 0 3px 8px #7986af14; }
.sidebar-close { display: none; }
.topbar {
  top: 16px; height: 66px; margin: 16px 28px 0; padding: 10px 14px 10px 19px; gap: 15px;
  border: 1px solid #ffffffd9; border-radius: 25px; background: #ffffff9e;
  backdrop-filter: blur(22px) saturate(1.4); box-shadow: var(--shadow);
}
.global-search { position: relative; max-width: 480px; }
.global-search > .icon { position: absolute; width: 18px; height: 18px; top: 12px; left: 12px; color: #90a0ac; pointer-events: none; }
.global-search input { height: 42px; border-radius: 16px; background: #eef2f770; border: 1px solid transparent; padding: 0 15px 0 39px; font-size: 12px; }
.global-search input::placeholder { color: #84939d; }
.global-search input:focus { background: #fff; border-color: #badbcf; box-shadow: 0 0 0 3px #d9eae780; }
.quick-actions { gap: 8px; flex-shrink: 0; }
.content { max-width: 1600px; padding: 0 28px 38px; }
.demo-strip { margin: 16px 3px 24px; padding: 0; border: 0; color: #82909a; font-size: 9px; align-items: center; }
.demo-strip strong { display: inline-block; color: #7c855c; font-size: 8px; letter-spacing: .8px; font-weight: 650; background: #edf0e4b8; border: 1px solid #ffffffd9; border-radius: 20px; padding: 3px 8px; margin-right: 4px; }
.page-head { margin: 27px 3px 26px; gap: 22px; }
.page-head h1 { font-family: inherit; font-size: 33px; font-weight: 650; letter-spacing: -1.3px; line-height: 1.18; color: #263b49; margin-bottom: 10px; }
.dashboard-head h1 { font-size: 36px; }
.page-head p { color: #7b8994; font-size: 12px; line-height: 1.6; }
.eyebrow { color: #7c939b; font-size: 9px; letter-spacing: 1.1px; font-weight: 600; margin-bottom: 10px; }
.workspace-label { border: 1px solid #ffffffc9; background: #ffffff7d; color: #658173; box-shadow: 0 3px 10px #698c7910; border-radius: 30px; font-size: 10px; padding: 8px 12px; }
.live-dot { background: #5a9e82; box-shadow: 0 0 0 3px #5cba8f15; margin-right: 7px; }
.button {
  min-height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid #2d8173;
  background: linear-gradient(145deg, #398d7d, #277668); color: #fff;
  font-weight: 600; font-size: 12px; box-shadow: 0 4px 10px #326f601a, inset 0 1px 0 #ffffff29;
  transition: box-shadow .2s ease, transform .2s ease, background .2s ease;
}
.button:hover { background: linear-gradient(145deg, #2b7e6e, #216556); box-shadow: 0 5px 15px #326f602c; transform: translateY(-1px); }
.button:active { transform: translateY(0) scale(.98); }
.button.secondary { background: #ffffff94; border: 1px solid #ffffff; color: #647a83; box-shadow: 0 2px 8px #4e758d08, inset 0 0 0 1px #e4ebef55; }
.button.secondary:hover { background: #fff; color: #346f64; }
.button.danger { background: #a85c55; border-color: #a85c55; }
.button[disabled] { box-shadow: none; transform: none; }
.stats { gap: 14px; margin-bottom: 24px; }
.stat {
  position: relative; overflow: hidden; border-radius: 25px; border: 1px solid #ffffffee;
  background: linear-gradient(145deg, #ffffffd9, #ffffff8a); padding: 19px 20px 16px;
  box-shadow: var(--shadow), inset 0 1px 0 #fff; gap: 10px;
  backdrop-filter: blur(15px); transition: transform .22s ease, box-shadow .22s ease;
}
.stat:hover { border-color: #fff; transform: translateY(-3px); box-shadow: 0 12px 25px #49687d0f; }
.stat-top { gap: 8px; }
.stat .stat-top>span:first-child { font-size: 10px; color: #7a8c98; font-weight: 500; }
.stat .stat-icon { background: linear-gradient(145deg,#e2edf9,#dce8f6); border: 1px solid #ffffffb3; color: #6990b5; border-radius: 15px; width: 34px; height: 34px; font-size: 18px; box-shadow: 0 3px 7px #6e8faf0a; flex-shrink: 0; }
.stat:nth-child(2) .stat-icon { background: linear-gradient(145deg,#e1f2eb,#d3e9df); color: #65917b; }
.stat:nth-child(3) .stat-icon { background: linear-gradient(145deg,#ece8fa,#e2ddf3); color: #9384bb; }
.stat:nth-child(4) .stat-icon { background: linear-gradient(145deg,#fbefdc,#f6e4c9); color: #bc9b64; }
.stat strong { font-size: 29px; line-height: 1.4; font-weight: 600; letter-spacing: -1.1px; color: #314654; }
.stat strong em { color: #9cabb2; font-weight: 400; font-size: 20px; margin-left: 1px; }
.stat small { border: 0; padding-top: 2px; color: #8d9ba2; font-size: 9px; }
.stat small>span { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: #8caaa8; background: #edf3f34d; }
.stat-accent { background: linear-gradient(145deg, #fffaf1dc, #ffffff90); }
.dashboard-columns { grid-template-columns: minmax(0,1.65fr) minmax(280px,1fr); gap: 22px; }
.panel { background: var(--glass); border: 1px solid #ffffffde; border-radius: 26px; padding: 23px 24px; margin-bottom: 22px; box-shadow: var(--shadow), inset 0 1px 0 #fff9; backdrop-filter: blur(18px); }
.panel h2 { font-size: 15px; font-weight: 600; letter-spacing: -.2px; color: #405968; }
.panel-head { margin-bottom: 15px; gap: 12px; }
.panel-head .eyebrow { font-size: 8px; color: #9cabb2; letter-spacing: 1.15px; margin-bottom: 5px; }
.panel-head>a { background: #f2f6f8a3; border: 1px solid #fff; padding: 5px 11px; border-radius: 999px; color: #879aa5; white-space: nowrap; font-size: 10px; }
.panel-head>a:hover { background: #e4efe9; color: #397a67; }
.list-row { border-color: #e2e9ed87; padding: 15px 0; transition: background .15s; }
.list-row strong { font-size: 12px; font-weight: 600; color: #425b69; }
.list-row small { font-size: 10px; color: #8fa0aa; margin-top: 4px; }
.list-row:hover { background: #f4f9f97a; }
.workshop-row { gap: 13px; }
.vehicle-tile { border-radius: 17px; width: 43px; height: 43px; border: 1px solid #fff; background: linear-gradient(145deg, #edf0f8, #e6edf3); box-shadow: 0 2px 6px #8fa4b410; color: #8598aa; font-family: inherit; font-size: 12px; font-weight: 500; }
.workshop-row:nth-child(2) .vehicle-tile { background: linear-gradient(145deg, #e8f0eb, #dfece6); color: #80a18f; }
.workshop-row:nth-child(3) .vehicle-tile { background: linear-gradient(145deg, #eeebf6, #e6e2f0); color: #a196b8; }
.workshop-row:nth-child(4) .vehicle-tile { background: linear-gradient(145deg, #fbf1e6, #f3e9db); color: #b59a78; }
.row-arrow { color: #c1ced3; font-size: 21px; }
.badge { border: 1px solid #ffffffab; background: #ecf1f5b3; color: #8193a0; border-radius: 999px; padding: 4px 9px; font-weight: 500; font-size: 9px; box-shadow: inset 0 1px 0 #fff8; }
.badge.green { color: #608f75; background: #e5f2e9c9; }
.badge.amber { color: #ab925c; background: #f8efdbc9; }
.focus-panel { position: relative; overflow: hidden; background: linear-gradient(125deg, #dfefe8e8 0%, #e0edeae3 52%, #e7eff5e8 100%); border: 1px solid #ffffffc9; padding: 27px; }
.focus-panel:before { content: ''; position: absolute; width: 155px; height: 155px; border-radius: 50%; border: 1px solid #ffffff90; background: linear-gradient(145deg,#ffffff3d,#d2e6e512); box-shadow: inset 1px 2px 4px #ffffff74, 0 8px 23px #a5c5bc0d; right: -54px; top: -34px; pointer-events: none; }
.focus-panel:after { content: ''; position: absolute; width: 55px; height: 55px; border-radius: 50%; background: #ffffff30; border: 1px solid #ffffff90; box-shadow: inset 1px 1px 3px #fff5; right: 39px; top: 66px; pointer-events: none; }
.focus-panel>* { position: relative; z-index: 1; }
.focus-panel .eyebrow { font-size: 8px; color: #86a092; letter-spacing: 1.4px; }
.focus-panel h2 { font-family: inherit; font-size: 25px; line-height: 1.25; font-weight: 600; letter-spacing: -.9px; color: #4b7167; margin: 17px 0 15px; }
.focus-panel p { font-size: 11px; color: #839b94; line-height: 1.85; margin: 0 0 21px; max-width: 285px; }
.focus-panel .button { background: #ffffffad; border-color: #ffffffef; color: #578b78; box-shadow: 0 4px 12px #6b9b8714, inset 0 1px 1px white; padding: 0 18px; }
.focus-panel .button:hover { background: #fff; }
.quiet-link { font-size: 10px; color: #829e94; margin-top: 14px; }
.subtle-panel { background: #ffffff55; }
.small-mark { font-family: inherit; font-size: 10px; border-radius: 10px; background: #edf2ed8c; color: #9cb5a3; padding: 7px; }
.mini-stats { gap: 35px; margin: 20px 0; }
.mini-stats strong { font-size: 25px; font-weight: 500; color: #5b7583; }
.mini-stats span { font-size: 10px; color: #91a4ae; }
.connection-note { border-color: #e1e9ed; padding-top: 16px; }
.connection-note strong { color: #7d929d; font-size: 10px; }
.connection-note small { color: #a0aeb6; font-size: 9px; }
.connection-dot { background: #d4b985; box-shadow: 0 0 0 3px #e1c99616; }
.connection-note>a { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: #ffffff9c; color: #a5b4bd; }
.tabs { display: flex; width: fit-content; max-width: 100%; border: 1px solid #ffffffdd; background: #dfe7ed69; padding: 5px; gap: 4px; margin-bottom: 23px; border-radius: 999px; box-shadow: inset 0 1px 3px #536e7f05; }
.tabs a { padding: 9px 17px; border: 1px solid transparent; color: #8397a3; border-radius: 999px; font-size: 11px; gap: 7px; white-space: nowrap; }
.tabs a.active { border: 1px solid #fff; background: #ffffffd9; color: #598577; box-shadow: 0 2px 7px #586f7e0c; }
.count { border-radius: 50%; background: #e1ebe580; color: #81a18e; padding: 1px 6px; font-size: 9px; }
.filterbar { gap: 10px; margin-bottom: 20px; }
.filterbar input, .filterbar select { background: #ffffffa3; border: 1px solid #fff; border-radius: 999px; height: 43px; font-size: 12px; padding: 0 18px; color: #718792; }
.table-wrap { padding: 0; overflow: auto; border-radius: 24px; }
.table-wrap th { padding: 16px 18px; background: #eaf0f543; color: #8b9ba6; border-bottom: 1px solid #fff; font-size: 9px; letter-spacing: .75px; font-weight: 600; }
.table-wrap td { padding: 18px; border-color: #e3eaf07d; font-size: 12px; color: #647d8b; }
.table-wrap td small { color: #99a8b1; font-size: 10px; }
.table-wrap a { font-weight: 600; color: #587b85; }
.table-wrap tr:hover td { background: #f7fafb8a; }
.table-wrap td .button { color: #648779; }
.table-wrap .amount { color: #52717c; }
.form-panel { padding: 28px; }
.form-grid { gap: 22px 25px; }
.field { gap: 8px; }
.field label { color: #6f8490; font-size: 11px; font-weight: 500; padding-left: 3px; }
.field input, .field select, .field textarea { border: 1px solid #ffffff; border-radius: 15px; background: #eaf0f575; padding: 11px 14px; min-height: 44px; color: #526f7d; font-size: 12px; box-shadow: inset 0 1px 2px #4f74860a; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; background: #fff; border-color: #acd8c8; box-shadow: 0 0 0 3px #b7dccf30; }
.field input[type=file] { padding: 8px; }
.field input[type=file]::file-selector-button { border: 1px solid #fff; padding: 7px 12px; border-radius: 999px; background: #fff9; color: #6c8d87; margin-right: 10px; font: inherit; cursor: pointer; }
.field input[type=checkbox] { accent-color: #5caa90; min-height: 0; }
.help, .field .helptext { font-size: 10px; color: #8c9ea9; }
.form-actions { border-color: #e2eaf0; margin-top: 25px; padding-top: 22px; }
.form-section-title { border-color: #e3eaf0; }
.line-card { border: 1px solid #fff; border-radius: 18px; background: #e9f0f446; padding: 15px; }
.mini-action { border-radius: 999px; border-color: #fff; background: #fff8; padding: 5px 10px; color: #6d8d88; }
.message { border: 1px solid #fff; border-radius: 17px; background: #e3f2eac9; color: #5c876c; padding: 13px 17px; font-size: 12px; box-shadow: 0 3px 8px #638a7108; }
.message.warning, .warning-panel { border: 1px solid #fff; background: #fbf3dfc9; color: #9c8558; }
.message.error, .form-errors { border: 1px solid #fff; background: #f9e9e5d9; color: #a46157; border-radius: 16px; }
.panel.note { background: #fbf6e9a6; border-color: #fff; color: #978761; font-size: 12px; }
.details { grid-template-columns: 140px 1fr; gap: 13px 15px; }
.details dt { color: #9ba9b2; font-size: 11px; }
.details dd { color: #65808d; font-size: 12px; }
.totals-web { background: #f2f6f873; border: 1px solid #fff; border-radius: 18px; padding: 10px; margin-top: 14px; }
.totals-web>div { border-color: #e8eef2; color: #68838c; padding: 9px 10px; }
.totals-web .grand { border-color: #dce7ec; color: #487467; }
.totals-web .balance { background: #e1efe8a1; border: 1px solid #fff; border-radius: 13px; color: #5a8b78; }
.vehicle-hero { padding: 0; background: #fff8; }
.vehicle-hero>div { padding: 21px; border-color: #e4eaf0; }
.vehicle-hero strong { color: #68828f; }
.vehicle-hero span { color: #95a5b0; }
.timeline-dot { border-color: #9dc8b6; background: #f4fffa; box-shadow: 0 0 0 4px #c3dfd526; }
.timeline-item div { border-color: #e4ebf0; }
.timeline-item small { color: #91a5b0; }
.locked-note { background: #edf2f6bd; border-radius: 14px; color: #8396a3; border: 1px solid #fff; }
.document-card { background: #f3f7f99c; border: 1px solid #fff; border-radius: 21px; padding: 21px; gap: 11px; transition: transform .2s, background .2s; }
.document-card:hover { background: #e9f4edbd; border-color: #fff; transform: translateY(-3px); }
.document-card strong { color: #65828b; }
.document-card small { color: #97a7af; font-size: 10px; line-height: 1.6; }
.file-icon { border: 1px solid #fff; color: #90a29a; background: #e7f0eab8; border-radius: 11px; padding: 10px 7px; box-shadow: 0 3px 7px #93ac970c; }
.empty-state { padding: 40px 25px; }
.empty-state strong { color: #7f9b96; font-family: inherit; font-size: 20px; letter-spacing: -.5px; font-weight: 500; }
.empty-state p, .empty { color: #9cabb5; }
.muted { color: #8f9fa9; font-size: 11px; }
.text-link, .quiet-link:hover { color: #669b87; }
.payment-qr { border: 8px solid white; border-radius: 20px; background: white; box-shadow: 0 7px 18px #536e7f0a; }
.pagination a { color: #7d9b97; padding: 8px 13px; border: 1px solid #fff; border-radius: 999px; background: #ffffff75; }
.login-body { background: radial-gradient(ellipse at 20% 10%,#cfeae3 0,transparent 48%),radial-gradient(ellipse at 85% 75%,#dcdcf4 0,transparent 50%),#edf3f5; }
.login-card { border-radius: 33px; border: 1px solid #fff; background: #ffffffa8; backdrop-filter: blur(26px); box-shadow: 0 25px 70px #7996a824,inset 0 1px 0 #fff; padding: 42px; width: min(430px,100%); }
.login-brand h1 { font-family: inherit; font-size: 27px; font-weight: 600; letter-spacing: -1px; color: #48666f; }
.login-brand p { color: #8ba0a7; font-size: 12px; }
.login-brand .brand-mark { border-radius: 21px; width: 62px; height: 62px; font-size: 17px; background: linear-gradient(145deg,#4da48d,#2b7f70); color: white; margin-bottom: 21px; }
.login-card .security-note { color: #96a7b1; }
.login-card .field label { font-size: 11px; }
.login-card .button { height: 45px; margin-top: 7px; }
.menu-button { background: #ffffffa6; border: 1px solid #fff; border-radius: 13px; color: #6c8c92; width: 39px; height: 39px; padding: 0; flex-shrink: 0; font-size: 20px; }
a:focus-visible, button:focus-visible { outline: 3px solid #86b8b1; outline-offset: 4px; }
@media(min-width:1700px) { .page-head{margin-top:35px;margin-bottom:32px}.dashboard-head h1{font-size:43px}.stat{padding:25px}.stat strong{font-size:34px}.list-row{padding:20px 0}.nav a{font-size:13px;padding-top:10px;padding-bottom:10px}.sidebar{padding-top:28px} }
@media(max-width:1200px) { .app-shell{grid-template-columns:238px minmax(0,1fr)}.sidebar{margin-left:12px;padding-left:10px;padding-right:10px}.topbar{margin-left:22px;margin-right:22px}.content{padding-left:22px;padding-right:22px}.stats{gap:11px}.stat{padding:16px}.stat strong{font-size:25px}.stat .stat-top>span:first-child{font-size:9px}.dashboard-columns{gap:18px;grid-template-columns:minmax(0,1.45fr) minmax(260px,1fr)}.panel{padding:20px}.table-wrap{padding:0}.focus-panel{padding:24px}.focus-panel h2{font-size:23px}.page-head h1{font-size:30px}.dashboard-head h1{font-size:32px}.nav a{font-size:11px} }
@media(max-width:1050px) { .stats{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-columns{grid-template-columns:1fr}.dashboard-columns>div:last-child{display:grid;grid-template-columns:1fr 1fr;gap:18px}.dashboard-columns .subtle-panel{grid-column:1/-1}.page-head{align-items:flex-start;flex-direction:column;gap:16px}.workspace-label{display:none}.stat .stat-top>span:first-child{font-size:11px}.stat strong{font-size:29px}.page-head .actions{justify-content:flex-start} }
@media(max-width:760px) {
  .app-shell{display:block}.sidebar{position:fixed;width:270px;left:-310px;margin:10px;height:calc(100dvh - 20px);top:0;border-radius:27px;background:#f3f8faed;box-shadow:20px 0 70px #31546c26;padding:24px 17px;transition:left .24s cubic-bezier(.2,.8,.2,1)}.sidebar.open{left:0}.sidebar .brand{padding-right:20px}.sidebar-close{display:block;position:absolute;right:11px;top:13px;border:1px solid #fff;background:#e6eef57f;color:#8aa1ad;width:25px;height:25px;border-radius:50%;font-size:19px;line-height:19px;cursor:pointer}.nav a{font-size:12px}.nav-label{font-size:9px}.topbar{top:9px;margin:10px 12px 0;height:61px;padding:9px;gap:7px;border-radius:22px}.global-search{min-width:0}.global-search input{font-size:10px;padding-left:31px;height:39px;border-radius:13px}.global-search>.icon{left:9px;top:12px;width:15px;height:15px}.quick-actions .button{font-size:10px;padding:0 13px;min-height:39px}.content{padding:0 14px 25px}.demo-strip{margin:14px 1px 22px;font-size:8px;gap:0}.demo-strip strong{font-size:7px;padding:3px 6px;letter-spacing:.4px}.demo-strip>span:last-child{display:none}.page-head{margin:23px 3px 22px}.page-head h1,.dashboard-head h1{font-size:30px;letter-spacing:-1.2px}.page-head p{font-size:11px}.eyebrow{font-size:8px}.stats{gap:10px;margin-bottom:20px}.stat{border-radius:23px;padding:15px;gap:11px}.stat .stat-top>span:first-child{font-size:9px}.stat .stat-icon{display:none}.stat strong{font-size:26px;letter-spacing:-.9px}.stat strong em{font-size:17px}.stat small{font-size:8px}.stat small>span{display:none}.dashboard-columns{display:block}.dashboard-columns>div:last-child{display:block}.panel{border-radius:24px;padding:20px;margin-bottom:18px}.panel h2{font-size:14px}.panel-head>a{font-size:9px;padding:4px 9px}.list-row{padding:16px 0}.list-row strong{font-size:11px}.list-row small{font-size:9px}.vehicle-tile{width:37px;height:37px;border-radius:14px;font-size:10px}.workshop-row{gap:9px}.badge{font-size:8px;padding:4px 7px}.row-arrow{display:none}.focus-panel{padding:27px}.focus-panel h2{font-size:27px}.focus-panel p{font-size:12px}.focus-panel .button{font-size:12px;min-height:43px}.table-wrap{padding:0}.table-wrap th,.table-wrap td{padding:14px}.filterbar input,.filterbar select{font-size:11px}.tabs{width:100%;gap:0;padding:4px;overflow:auto}.tabs a{padding:8px 11px;font-size:10px;flex:1;justify-content:center}.details{grid-template-columns:110px 1fr;gap:12px}.document-grid{grid-template-columns:1fr 1fr;gap:10px}.document-card{padding:16px;border-radius:18px}.document-card strong{font-size:11px}.document-card small{font-size:9px}.field input,.field select,.field textarea{font-size:16px}.form-grid{gap:18px}.form-actions{flex-wrap:wrap}.sidebar-bottom a,.link-button{font-size:11px}.mini-stats{gap:35px}.page-head .actions{width:100%;gap:7px}.page-head .actions .button{font-size:10px;padding:0 13px}.login-card{padding:32px;border-radius:28px}
}
/* Keep the glass light, while text remains readable in a busy workshop. */
.nav-label, .eyebrow, .panel-head .eyebrow, .focus-panel .eyebrow { color: #5b707a; font-size: 10px; }
.page-head p, .list-row small, .table-wrap td small, .help, .field .helptext,
.details dt, .connection-note small, .mini-stats span { color: #596e7c; font-size: 12px; }
.demo-strip { color: #5e707a; font-size: 10px; }
.demo-strip strong { color: #5c6444; font-size: 9px; }
.stat .stat-top>span:first-child, .stat small { color: #5c707c; font-size: 11px; }
.stat strong em { color: #647783; }
.panel-head>a, .quiet-link { color: #526f74; font-size: 11px; }
.list-row strong, .table-wrap td, .details dd { font-size: 13px; }
.badge { color: #526876; font-size: 10px; }
.badge.green { color: #3b6c50; }
.badge.amber { color: #7e642b; }
.focus-panel p { color: #486b60; font-size: 13px; line-height: 1.7; }
.focus-panel .button, .button.secondary { color: #3e665f; }
.sidebar-bottom a, .link-button, .connection-note strong { color: #536a76; font-size: 12px; }
.tabs a, .filterbar input, .filterbar select { color: #526c79; font-size: 12px; }
.tabs a.active { color: #386c5b; }
.count { color: #436c57; font-size: 10px; }
.table-wrap th { color: #566d7a; font-size: 10px; }
.table-wrap td { color: #496572; }
.field label { color: #4d6573; font-size: 12px; }
.field input, .field select, .field textarea { color: #354f5e; }
.message { color: #386448; }
.message.warning, .warning-panel, .panel.note { color: #78602e; }
.message.error, .form-errors { color: #8b4036; }
.document-card small, .vehicle-hero span, .timeline-item small, .locked-note,
.empty-state p, .empty, .muted, .login-brand p { color: #596f7b; }
.global-search input::placeholder, input::placeholder, textarea::placeholder { color: #627783; opacity: 1; }
.button:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid #367a6b; outline-offset: 3px; }
@media(max-width:760px) {
  .demo-strip { font-size: 9px; line-height: 1.7; }
  .demo-strip strong { font-size: 8px; }
  .stat .stat-top>span:first-child { font-size: 11px; }
  .stat small { font-size: 10px; }
  .list-row strong { font-size: 12px; }
  .list-row small { font-size: 10px; }
  .badge { font-size: 9px; }
  .page-head p { font-size: 13px; }
  .sidebar-close { width: 36px; height: 36px; color: #536f7e; }
  .menu-button, .quick-actions .button { min-height: 44px; }
  .field label { font-size: 13px; }
  .table-wrap:has(.cards-ready) { background: transparent; border: 0; box-shadow: none; backdrop-filter: none; overflow: visible; }
  .records-table.cards-ready { display: block; min-width: 0; }
  .records-table.cards-ready thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .records-table.cards-ready tbody { display: grid; gap: 14px; }
  .records-table.cards-ready tr { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 17px 16px; padding: 21px; border: 1px solid #fff; border-radius: 24px; background: #ffffffb8; box-shadow: var(--shadow); }
  .records-table.cards-ready td { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; padding: 0; border: 0; white-space: normal; overflow-wrap: anywhere; text-align: left; font-size: 12px; }
  .records-table.cards-ready td:first-child, .records-table.cards-ready td[colspan] { grid-column: 1 / -1; }
  .records-table.cards-ready td:first-child a { font-size: 15px; }
  .records-table.cards-ready td[data-label]:not(:first-child)::before { content: attr(data-label); color: #617584; font-size: 10px; font-weight: 500; }
  .records-table.cards-ready td .badge { font-size: 10px; }
  .records-table.cards-ready tr:hover td { background: transparent; }
}
@media(prefers-reduced-motion:reduce) { *,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important} }
@media(prefers-reduced-transparency:reduce) { .sidebar,.topbar,.panel,.stat,.login-card{background:#f9fbfc;backdrop-filter:none} }
@media print { body{background:white}.sidebar,.topbar,.demo-strip,.sidebar-close{display:none!important}.content{padding:0}.panel,.stat{background:white!important;box-shadow:none;backdrop-filter:none;border:1px solid #ddd}.focus-panel:before,.focus-panel:after{display:none} }