/* 0016 Studio — a considered workspace for device diagnostics. */
:root{color-scheme:dark;--bg-void:#0e1013;--bg-surface:#16191d;--bg-card:#16191d;--bg-card-hover:#1d2126;--bg-base:#1d2126;--sidebar:#16191d;--text-primary:#eceef1;--text-secondary:#a3abb5;--text-tertiary:#79818b;--border-subtle:#2a2f35;--border-hover:#3a4048;--accent:#f07440;--accent-hover:#f48a5c;--accent-subtle:#2d1f18;--accent-text:#f79a70;--green:#4cc38a;--green-weak:#16271f;--red:#f0716a;--red-weak:#2c1715;--amber:#e3b04b;--amber-weak:#2a2214;--blue:#6aa1f5;--blue-weak:#152035;--font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--font-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;--radius-sm:6px;--radius-md:8px;--shadow-card:none;--shadow-pop:0 8px 24px #0000004d;--transition:140ms ease;--scene-bg:#1d2126;--scene-line:#3a4048;--orange-ink:#f79a70}
body.light{color-scheme:light;--bg-void:#f6f7f9;--bg-surface:#fff;--bg-card:#fff;--bg-card-hover:#f8f9fa;--bg-base:#f1f3f5;--sidebar:#fff;--text-primary:#15181c;--text-secondary:#5b636d;--text-tertiary:#8a929b;--border-subtle:#e3e6ea;--border-hover:#cfd4da;--accent:#e5602c;--accent-hover:#cc5222;--accent-subtle:#fdf1eb;--accent-text:#b84a1c;--green:#16794c;--green-weak:#e7f4ee;--red:#c2362f;--red-weak:#fcebea;--amber:#9a6200;--amber-weak:#fbf3e2;--blue:#2563c9;--blue-weak:#e9f0fb;--shadow-pop:0 8px 24px #1018281f;--scene-bg:#f1f3f5;--scene-line:#e3e6ea;--orange-ink:#b84a1c}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:var(--font-sans);font-size:14px;line-height:1.5;background:var(--bg-void);color:var(--text-primary);-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button,a,input,select,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:wait;opacity:.55}button{color:inherit}a{color:inherit}button,.btn{transition:background var(--transition),border-color var(--transition),transform var(--transition)}button:hover:not(:disabled){filter:brightness(.98)}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #e9683670;outline-offset:4px}h1,h2,h3,h4,p{margin:0}button{border:0}svg{flex-shrink:0}.icon{vertical-align:middle}.hidden{display:none!important}.muted{color:var(--text-secondary)}.mono{font-family:var(--font-mono)}.mobile-only{display:none!important}.skip-link{position:fixed;z-index:1000;left:20px;top:-60px;background:var(--accent);color:white;padding:12px 20px;border-radius:8px}.skip-link:focus{top:12px}
.sidebar{position:fixed;inset:0 auto 0 0;z-index:50;width:238px;display:flex;flex-direction:column;padding:32px 18px 20px;background:var(--sidebar);border-right:1px solid var(--border-subtle)}.brand{display:flex;align-items:center;gap:11px;text-decoration:none;padding:0 13px}.brand-symbol{display:flex;align-items:center;justify-content:center;position:relative;width:37px;height:37px;background:var(--accent);border-radius:8px;color:#fff;font-size:20px;font-weight:800;letter-spacing:-3px;padding-right:3px;transform:rotate(-5deg)}.brand-symbol span{position:absolute;background:#fff;width:4px;height:4px;border-radius:50%;right:6px;top:7px}.brand-word{font-size:28px;font-weight:750;letter-spacing:-1.4px}.brand-word>span{font-size:16px;color:var(--text-tertiary);font-weight:450;letter-spacing:-.6px}.nav-tabs{display:flex;flex-direction:column;gap:6px}.nav-tab-btn{display:flex;align-items:center;text-align:left;gap:11px;background:transparent;padding:12px 13px;border-radius:6px;color:var(--text-secondary);font-size:13px;font-weight:500}.nav-tab-btn .icon{width:18px;height:18px}.nav-tab-btn.active{background:var(--accent-subtle);color:var(--accent)}.nav-tab-btn:hover{background:var(--bg-void)}.nav-tab-btn.active:hover{background:var(--accent-subtle)}.nav-active-dot{width:5px;height:5px;border-radius:50%;margin-left:auto;background:var(--accent)}.nav-tab-btn:not(.active) .nav-active-dot{display:none}.sidebar-bottom{margin-top:auto;padding-top:35px}.credit-card{background:var(--bg-base);border:1px solid var(--border-subtle);border-radius:8px;padding:16px 14px}.credit-card-top{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600}.credit-card-top>.icon{width:16px;color:var(--accent)}.credit-card-dot{width:5px;height:5px;margin-left:auto;background:var(--accent);border-radius:50%}.sidebar-balance{display:flex;align-items:baseline;gap:7px;margin:9px 0 5px}.sidebar-balance strong{font-size:28px;font-weight:600;letter-spacing:-1px}.sidebar-balance span{font-size:12px;color:var(--text-tertiary)}.credit-card p{font-size:12px;line-height:1.8;color:var(--text-secondary);margin-bottom:14px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;border:1px solid transparent;border-radius:6px;padding:10px 17px;font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap}.btn .icon{width:16px;height:16px}.btn-primary{background:var(--accent);color:#fff;box-shadow:0 2px 3px #ad4a2010}.btn-primary:hover{background:var(--accent-hover)}.btn-outline{background:var(--bg-card);border-color:var(--border-subtle);color:var(--text-primary)}.btn-outline:hover{border-color:var(--border-hover);background:var(--bg-card-hover)}.btn-dark{background:var(--text-primary);color:var(--bg-card)}.credit-card .btn-dark{width:100%;font-size:12px;min-height:34px;padding:8px 11px;justify-content:space-between}.btn-sm{font-size:12px;min-height:34px;padding:7px 12px}.btn-danger{color:var(--red);background:color-mix(in srgb,var(--red) 9%,transparent);border-color:color-mix(in srgb,var(--red) 20%,transparent)}.sidebar-overlay{display:none}.app-shell{margin-left:238px;min-height:100vh;display:flex;flex-direction:column}.topbar{height:77px;padding:0 38px;display:flex;align-items:center;justify-content:space-between;gap:18px;background:var(--bg-surface);border-bottom:1px solid var(--border-subtle)}.breadcrumb{display:flex;align-items:center;gap:13px;font-size:12px;white-space:nowrap}.breadcrumb-root{color:var(--text-tertiary)}.breadcrumb-divider{color:var(--border-hover);font-size:14px}.nav-actions{display:flex;align-items:center;gap:15px}.header-help{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text-secondary);background:none;padding:0}.header-help .icon{width:15px;height:15px}.header-separator{height:19px;width:1px;background:var(--border-subtle)}.theme-toggle{font-size:12px;border:1px solid var(--border-subtle);border-radius:6px;background:var(--bg-card);padding:7px 9px;min-height:31px;color:var(--text-secondary)}.user-info{display:flex;align-items:center;gap:9px}.user-email-text{font-size:12px;max-width:130px;overflow:hidden;text-overflow:ellipsis}.credit-counter{display:flex;align-items:center;gap:5px;font-size:12px}.credit-dot{width:5px;height:5px;border-radius:50%;background:var(--green)}.credit-counter.low .credit-dot{background:var(--red)}
.main-wrapper{padding:35px 38px 22px;width:100%;max-width:1520px;margin:0 auto;flex:1}.page-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:29px}.eyebrow{font-size:12px;font-weight:650;color:var(--text-tertiary);letter-spacing:0;margin-bottom:7px}h1{font-size:28px;line-height:1.3;letter-spacing:-.9px;font-weight:620}.page-subtitle{margin-top:6px;font-size:12px;color:var(--text-secondary)}.workspace-tag{display:flex;align-items:center;gap:6px;font-size:12px;border:1px solid var(--border-subtle);background:var(--bg-card);padding:7px 10px;border-radius:6px;color:var(--text-secondary)}.workspace-tag>span{width:5px;height:5px;background:var(--green);border-radius:50%}.view-section{display:none}.view-section.active{display:block;animation:arrive .3s ease}.overview-grid{display:grid;grid-template-columns:1fr 1.12fr 1fr;gap:15px;margin-bottom:22px}.overview-card{display:flex;align-items:center;gap:12px;padding:19px 18px;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:8px;min-width:0}.overview-icon{display:grid;place-items:center;flex-shrink:0;width:37px;height:39px;background:var(--bg-base);border:1px solid var(--border-subtle);border-radius:8px;color:var(--text-secondary)}.overview-card p{font-size:12px;color:var(--text-secondary);margin-bottom:4px}.overview-card strong{font-size:13px;font-weight:550;display:flex;align-items:baseline;gap:7px}.overview-small{margin-left:auto;font-family:var(--font-mono);font-size:12px;color:var(--green);background:color-mix(in srgb,var(--green) 7%,var(--bg-card));border:1px solid color-mix(in srgb,var(--green) 16%,var(--bg-card));padding:3px 5px;border-radius:6px;max-width:82px;line-height:1.4}.metric-suffix{font-size:12px;color:var(--text-tertiary);font-weight:400}.overview-card>.icon-btn{margin-left:auto}.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:29px;height:29px;padding:6px;border-radius:6px;background:transparent;color:var(--text-secondary)}.icon-btn .icon{width:16px;height:16px}.icon-btn:hover{background:var(--bg-base)}
.connection-card{border:1px solid var(--border-subtle);border-radius:12px;background:var(--bg-card);overflow:hidden;box-shadow:var(--shadow-card)}.connection-main{display:grid;grid-template-columns:1.09fr 1fr;min-height:360px}.connection-copy{padding:37px 15px 34px 33px;position:relative;z-index:2}.hero-eyebrow{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:650;letter-spacing:0;color:var(--orange-ink);margin-bottom:18px}.connection-copy h2{font-size:28px;font-weight:550;letter-spacing:-1.65px;line-height:1.16}.connection-copy h2>span{color:var(--text-tertiary)}.connection-copy>p{font-size:12px;line-height:1.9;max-width:315px;color:var(--text-secondary);margin:16px 0 22px}.hero-actions{display:flex;align-items:center;gap:19px}.btn-connect{padding:12px 18px;font-size:12px;min-height:43px}.btn-connect:before{content:'+';font-size:16px;font-weight:400;line-height:1;margin-right:2px}.text-btn{display:inline-flex;align-items:center;gap:7px;background:transparent;color:var(--text-secondary);font-size:12px;font-weight:550;padding:5px 0;white-space:nowrap}.text-btn:hover{color:var(--accent)}.text-btn .icon{width:14px;height:14px}.hero-note{display:flex;align-items:center;gap:5px;color:var(--text-tertiary);font-size:12px;margin-top:17px}.hero-note>.icon{width:12px;height:12px}.scene-orbit{position:absolute;left:54%;top:46%;border:1px solid var(--scene-line);border-radius:50%;transform:translate(-50%,-50%)}.tl{top:-1px;left:-1px;border-width:1px 0 0 1px;border-radius:6px 0 0}.tr{top:-1px;right:-1px;border-width:1px 1px 0 0;border-radius:0 5px 0 0}.bl{bottom:-1px;left:-1px;border-width:0 0 1px 1px;border-radius:0 0 0 5px}.br{bottom:-1px;right:-1px;border-width:0 1px 1px 0;border-radius:0 0 5px 0}.connection-bottom{border-top:1px solid var(--border-subtle);background:var(--bg-card-hover);min-height:47px;padding:12px 23px;display:flex;align-items:center;justify-content:space-between;gap:15px}.connection-indicator{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text-secondary)}.connection-indicator .dot{width:5px;height:5px;border-radius:50%;background:var(--text-tertiary)}.connection-indicator.online{color:var(--green)}.connection-indicator.online .dot{background:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 10%,transparent)}.connection-meta{display:flex;gap:14px;align-items:center;font-size:12px;color:var(--text-tertiary)}.connection-meta>span{display:inline-flex;align-items:center;gap:5px}.connection-meta .icon{width:12px;height:12px}.meta-divider{height:10px;width:1px;background:var(--border-subtle)}.result-mode{display:flex;gap:15px;align-items:center;padding:18px 22px 0}.mode-pill,.charge-status-pill{font-size:12px;display:inline-flex;align-items:center;padding:4px 8px;border-radius:6px;color:var(--green);background:color-mix(in srgb,var(--green) 8%,var(--bg-card));border:1px solid color-mix(in srgb,var(--green) 15%,var(--bg-card))}.charge-status-pill.paid{color:var(--accent);background:var(--accent-subtle);border-color:color-mix(in srgb,var(--accent) 18%,var(--bg-card))}.specs-grid{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:12px;padding:18px 22px}.spec-cell{min-width:0;background:var(--bg-base);border:1px solid var(--border-subtle);border-radius:8px;padding:14px}.spec-caption{display:flex;align-items:center;justify-content:space-between;min-height:28px;color:var(--text-tertiary);font-size:12px;margin-bottom:4px}.spec-actions{display:flex}.spec-actions .icon-btn{width:23px;height:23px;padding:4px}.spec-data{font-size:13px;font-weight:550;overflow-wrap:anywhere}.reboot-row:has(.btn:not(.hidden)){padding:0 22px 20px;display:flex;justify-content:flex-end}
.bottom-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:20px;margin-top:22px}.panel{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:8px;overflow:hidden;box-shadow:var(--shadow-card)}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:22px 23px 17px}.panel-heading h3{font-size:13px;font-weight:600;letter-spacing:-.15px}.panel-heading p{color:var(--text-secondary);font-size:12px;margin-top:4px}.panel-heading>.text-btn{font-size:12px}.empty-state{text-align:center;padding:22px 20px 30px;color:var(--text-secondary)}.empty-icon{display:inline-grid;place-items:center;width:43px;height:43px;border:1px solid var(--border-subtle);border-radius:12px;background:var(--bg-base);color:var(--text-tertiary);margin-bottom:12px;box-shadow:0 3px 0 var(--bg-card),0 4px 0 var(--border-subtle)}.empty-icon .icon{width:20px;height:20px}.empty-title{font-size:13px;font-weight:550;color:var(--text-primary);margin-bottom:6px}.empty-description{font-size:12px;line-height:1.75;margin:0 auto 9px;max-width:270px}.empty-state .text-btn{font-size:12px;color:var(--accent)}.empty-state .btn{margin-top:8px}.guide-card .panel-heading{padding-bottom:13px}.guide-card h3{font-size:14px;letter-spacing:-.3px}.mini-steps{margin:0;padding:0 23px 16px;list-style:none;display:flex;flex-direction:column;gap:13px}.mini-steps li{display:flex;align-items:center;gap:12px}.mini-steps li>span{display:grid;place-items:center;flex-shrink:0;width:24px;height:24px;border:1px solid var(--border-subtle);border-radius:50%;font-size:12px;font-family:var(--font-mono);color:var(--text-tertiary)}.mini-steps strong{font-size:12px;font-weight:600}.mini-steps p{font-size:12px;color:var(--text-secondary);margin-top:2px}.guide-link{display:flex;width:100%;justify-content:space-between;align-items:center;padding:13px 23px;border-top:1px solid var(--border-subtle);background:var(--bg-card-hover);font-size:12px;font-weight:500;color:var(--text-secondary)}.guide-link .icon{width:14px;height:14px}.trust-row{display:flex;align-items:center;justify-content:center;gap:26px;margin:22px 0 0;color:var(--text-tertiary);font-size:12px}.trust-row>span{display:flex;align-items:center;gap:6px}.trust-row .icon{width:12px;height:12px}.app-footer{max-width:1520px;width:100%;margin:0 auto;padding:18px 38px;display:flex;justify-content:space-between;font-size:12px;color:var(--text-tertiary)}.section-title{font-size:20px;font-weight:550;letter-spacing:-.5px}.button-group{display:flex;gap:8px}.history-toolbar{padding:0 23px 20px;display:flex;align-items:center;gap:20px;justify-content:space-between;font-size:12px}.search-field{display:flex;align-items:center;gap:10px;border:1px solid var(--border-subtle);border-radius:6px;background:var(--bg-base);padding:10px 12px;max-width:400px;flex:1}.search-field>.icon{color:var(--text-tertiary);width:16px;height:16px}.search-field>input{border:0;background:none;outline:0!important;width:100%;min-width:0;color:var(--text-primary);font-size:12px}.history-toolbar:has(input:focus-visible) .search-field{outline:2px solid var(--accent)}.guide-intro{padding:10px 0 28px}.guide-intro h2{font-size:28px;letter-spacing:-1.2px;font-weight:550;line-height:1.2}.guide-intro>p{max-width:510px;color:var(--text-secondary);font-size:13px;line-height:1.8;margin-top:16px}.guide-steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.step-card{padding:24px;position:relative}.step-number{position:absolute;right:21px;top:17px;color:var(--border-hover);font-size:28px;font-family:var(--font-mono)}.step-card>.icon{width:27px;height:27px;color:var(--accent);margin-bottom:23px}.step-card h3{font-size:14px;margin-bottom:10px;font-weight:550}.step-card p{font-size:12px;line-height:1.9;color:var(--text-secondary)}.faq-layout{display:grid;grid-template-columns:1fr 1.6fr;gap:40px;padding:40px 0}.faq-layout h2{font-size:24px;font-weight:550;letter-spacing:-.7px;margin-bottom:8px}.faq-layout>.muted,.faq-layout>div>.muted{font-size:12px}.faq-list{border-top:1px solid var(--border-subtle)}.faq-list details{border-bottom:1px solid var(--border-subtle);padding:17px 0}.faq-list summary{font-size:13px;font-weight:550;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:15px}.faq-list summary:after{content:'+';color:var(--accent)}.faq-list details[open] summary:after{content:'−'}.faq-list details p{font-size:12px;line-height:1.9;color:var(--text-secondary);margin:10px 15px 0 0}.guide-start{color:white;background:var(--accent);width:fit-content}.guide-start.active{color:white;background:var(--accent)}.metric-number{font-size:24px;font-weight:600;letter-spacing:-.7px}.clean-table{border-collapse:collapse;width:100%;text-align:left;font-size:12px;white-space:nowrap}.clean-table th{font-weight:500;font-size:12px;color:var(--text-tertiary);background:var(--bg-card-hover);padding:12px 19px;border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle)}.clean-table td{padding:14px 19px;border-bottom:1px solid var(--border-subtle);color:var(--text-secondary);font-size:12px}.clean-table tr:last-child td{border-bottom:0}.clean-table td strong{color:var(--text-primary);font-weight:550}.clean-table tbody tr:hover{background:var(--bg-card-hover)}.table-scroll,#history-content,#recent-history-content{overflow-x:auto}.status-pill{display:inline-flex;align-items:center;font-size:12px;font-weight:550;border-radius:6px;padding:3px 6px;white-space:nowrap;background:var(--bg-base);color:var(--text-secondary)}.status-active,.status-success{color:var(--green);background:color-mix(in srgb,var(--green) 8%,var(--bg-card))}.status-pending{color:var(--amber);background:color-mix(in srgb,var(--amber) 8%,var(--bg-card))}.status-suspended,.status-failed{color:var(--red);background:color-mix(in srgb,var(--red) 8%,var(--bg-card))}.status-admin{color:var(--accent);background:var(--accent-subtle)}
.modal-layer{position:fixed;inset:0;z-index:120;background:#111b2366;backdrop-filter:blur(5px);padding:24px;display:none;align-items:center;justify-content:center;overflow-y:auto}.modal-layer.open{display:flex;animation:arrive .18s ease}.modal-window{width:100%;max-width:440px;max-height:calc(100dvh - 48px);overflow-y:auto;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:12px;box-shadow:0 24px 90px #0003;padding:29px}.modal-window.wide{max-width:800px}.modal-header-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:23px}.modal-title-text{font-size:16px;font-weight:550;letter-spacing:-.5px}.modal-close-btn{width:29px;height:29px;border-radius:6px;color:var(--text-secondary);font-size:24px;background:var(--bg-base);line-height:1}.form-field{margin-bottom:17px}.form-label{display:block;font-size:12px;font-weight:550;color:var(--text-secondary);margin-bottom:7px}.input-control{width:100%;border:1px solid var(--border-subtle);border-radius:6px;background:var(--bg-base);color:var(--text-primary);padding:11px 13px;font-size:13px;min-width:0}.input-control:focus{border-color:var(--accent);outline:2px solid color-mix(in srgb,var(--accent) 15%,transparent)}.notice{padding:11px 14px;border-radius:6px;font-size:12px;line-height:1.7;margin-bottom:17px;border:1px solid var(--border-subtle)}.notice-error{color:var(--red);background:color-mix(in srgb,var(--red) 7%,var(--bg-card))}.notice-success{color:var(--green);background:color-mix(in srgb,var(--green) 7%,var(--bg-card))}.toast-stack{position:fixed;bottom:25px;right:25px;z-index:200;display:flex;flex-direction:column;gap:9px;max-width:calc(100vw - 40px);pointer-events:none}.toast-message{border:1px solid var(--border-subtle);background:var(--text-primary);color:var(--bg-card);padding:13px 18px;border-radius:8px;box-shadow:0 5px 25px #0002;font-size:13px;max-width:400px;animation:arrive .2s ease}pre{white-space:pre-wrap;overflow-wrap:anywhere}.modal-open{overflow:hidden}@keyframes arrive{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@keyframes float-in{from{opacity:0;transform:translateY(12px) rotate(6deg)}to{opacity:1;transform:translateY(0) rotate(12deg)}}
@media(min-width:1500px){.main-wrapper{padding-top:42px}.connection-main{min-height:400px}.connection-copy{padding-top:48px;padding-left:43px}.connection-copy h2{font-size:28px}.connection-copy>p{font-size:13px;max-width:375px}.device-scene{min-height:400px}.panel-heading h3{font-size:14px}.mini-steps strong{font-size:12px}.mini-steps p{font-size:12px}.empty-state{padding-top:28px;padding-bottom:35px}}
@media(max-width:1190px){.sidebar{width:210px;padding-left:13px;padding-right:13px}.app-shell{margin-left:210px}.topbar{padding:0 26px}.main-wrapper{padding:28px 26px 20px}.app-footer{padding-left:26px;padding-right:26px}.overview-grid{gap:10px}.overview-card{padding:16px 12px;gap:9px}.overview-small{display:none}.overview-card strong{font-size:12px}.connection-copy{padding-left:25px}.connection-copy h2{font-size:28px}.hero-actions{gap:14px}.bottom-grid{gap:16px;grid-template-columns:1.2fr 1fr}.panel-heading{padding:20px 19px 17px}.mini-steps{padding-left:19px;padding-right:19px}.header-help,.header-separator{display:none}.nav-actions{gap:10px}.user-email-text{max-width:115px}.user-info .status-pill{display:none}}
@media(max-width:970px){.sidebar{width:195px}.app-shell{margin-left:195px}.main-wrapper{padding:25px 22px 20px}.topbar{padding:0 22px}.nav-tab-btn{font-size:12px;padding:11px}.credit-card{padding:13px}.overview-card{padding:13px 10px;gap:7px}.overview-card p{font-size:12px}.overview-card strong{font-size:12px}.metric-suffix{font-size:12px}.connection-copy h2{font-size:28px}.connection-copy{padding-left:23px;padding-right:0}.connection-copy>p{font-size:12px}.connection-main{grid-template-columns:1fr 1fr}.hero-actions{gap:10px;flex-wrap:wrap}.btn-connect{padding:11px 12px;font-size:12px}.text-btn{font-size:12px}.bottom-grid{grid-template-columns:1fr 1fr}.panel-heading{padding:17px}.panel-heading h3{font-size:13px}.panel-heading p{font-size:12px}.panel-heading>.text-btn{font-size:12px}.mini-steps{padding-left:17px;padding-right:17px}.trust-row{gap:13px;font-size:12px}.guide-card h3{font-size:13px}.guide-link{padding-left:17px;padding-right:17px}.user-email-text{display:none}.guide-steps-grid{gap:12px}.step-card{padding:19px}.step-card h3{font-size:13px}.step-card p{font-size:12px}.guide-steps-grid .step-number{font-size:24px}.faq-layout{gap:25px}.breadcrumb{font-size:12px;gap:10px}}
@media(max-width:760px){.sidebar{transform:translateX(-100%);transition:transform .2s ease;width:245px;padding:25px 20px;box-shadow:5px 0 30px #0001}.sidebar-open .sidebar{transform:translateX(0)}.sidebar-overlay{position:fixed;inset:0;z-index:49;background:#15202c66;backdrop-filter:blur(2px)}.sidebar-open .sidebar-overlay{display:block}.app-shell{margin-left:0}.mobile-only{display:inline-flex!important}.topbar{height:65px;padding:0 20px}.main-wrapper{padding:26px 22px 16px}.breadcrumb{gap:8px}.breadcrumb-root,.breadcrumb-divider{display:none}.nav-actions{gap:9px}.workspace-switch strong{font-size:12px}.nav-tab-btn{font-size:13px;padding:12px}.page-heading{margin-bottom:24px}.eyebrow{font-size:12px}h1{font-size:28px}.page-subtitle{font-size:12px}.workspace-tag{font-size:12px}.overview-grid{gap:10px}.overview-card{padding:15px 12px;gap:10px}.overview-card p{font-size:12px}.overview-card strong{font-size:12px}.connection-copy h2{font-size:28px}.connection-copy>p{font-size:12px}.connection-copy{padding:31px 0 30px 25px}.phone-model{top:43px}.bottom-grid{gap:15px}.panel-heading h3{font-size:13px}.panel-heading p{font-size:12px}.guide-card h3{font-size:13px}.empty-title{font-size:12px}.guide-steps-grid{grid-template-columns:1fr}.step-card{padding:22px 24px}.step-card>.icon{margin-bottom:14px}.step-card p{font-size:13px}.step-card h3{font-size:16px}.faq-layout{grid-template-columns:1fr;gap:22px}.history-toolbar{flex-wrap:wrap;gap:8px}.history-toolbar .muted{font-size:12px}.history-toolbar .search-field{flex-basis:100%;max-width:none}.section-title{font-size:16px}.button-group{gap:6px}.button-group .btn{font-size:12px;padding:7px 9px}.app-footer{padding:17px 22px}.specs-grid{grid-template-columns:1fr}.spec-data{font-size:14px}.result-mode{flex-wrap:wrap}.spec-caption{font-size:12px}.modal-window{padding:24px}}
@media(max-width:520px){.topbar{padding:0 15px}.main-wrapper{padding:25px 16px 13px}.breadcrumb{font-size:12px}.nav-actions{gap:7px}.theme-toggle{font-size:12px;padding:6px;min-height:29px}.nav-actions .btn{font-size:12px;min-height:31px;padding:6px 9px}.nav-actions .btn .icon{display:none}.credit-counter{font-size:12px}.credit-counter>span:last-child{display:none}.page-heading{align-items:flex-start;gap:10px}.workspace-tag{display:none}.page-subtitle{font-size:12px;max-width:290px;line-height:1.8}.eyebrow{font-size:12px;margin-bottom:8px}h1{font-size:28px}.overview-grid{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}.overview-card{padding:12px 10px;gap:9px}.overview-card:nth-child(3){grid-column:1/-1;padding:10px 13px}.overview-card:nth-child(3) .overview-icon{width:27px;height:28px}.overview-card:nth-child(3)>div{display:flex;align-items:center;gap:14px}.overview-card:nth-child(3) p{margin:0}.overview-card strong{font-size:12px}.metric-suffix{font-size:12px}.overview-card p{font-size:12px}.overview-icon{width:28px;height:31px}.connection-main{display:flex;flex-direction:column}.connection-copy{padding:27px 25px 0}.connection-copy h2{font-size:28px;letter-spacing:-1.6px}.connection-copy>p{font-size:12px;max-width:310px;line-height:1.8;margin:14px 0 19px}.hero-actions{gap:24px;flex-wrap:nowrap}.btn-connect{font-size:12px;min-height:43px;padding:12px 16px}.hero-actions .text-btn{font-size:12px}.hero-note{margin-top:15px;font-size:12px}.connection-bottom{padding:12px 17px;min-height:45px}.connection-meta{gap:0;font-size:12px}.connection-meta>span:first-child,.connection-meta .meta-divider{display:none}.connection-indicator{font-size:12px}.bottom-grid{grid-template-columns:1fr;margin-top:16px;gap:16px}.panel-heading{padding:19px 21px 15px}.panel-heading h3{font-size:14px}.panel-heading p{font-size:12px}.panel-heading>.text-btn{font-size:12px}.empty-state{padding:16px 20px 29px}.empty-title{font-size:13px}.empty-description{font-size:12px}.guide-card h3{font-size:16px}.mini-steps{padding:1px 22px 18px;gap:15px}.mini-steps strong{font-size:12px}.mini-steps p{font-size:12px}.mini-steps li>span{width:27px;height:27px}.guide-link{font-size:12px;padding:14px 22px}.trust-row{display:grid;grid-template-columns:1fr;gap:9px;justify-items:center;font-size:12px;margin-top:22px}.app-footer{font-size:12px;padding:20px 16px;gap:10px}.guide-intro h2{font-size:28px}.guide-intro>p{font-size:12px}.faq-layout{padding:30px 0}.faq-list p{font-size:13px}.guide-start{font-size:12px}.modal-layer{padding:16px}.modal-window{padding:24px 20px;max-height:calc(100dvh - 32px)}.modal-title-text{font-size:16px}.modal-header-row{gap:8px}.toast-stack{bottom:15px;right:15px}.toast-message{font-size:12px}.section-title{font-size:16px}#view-history .panel-heading{align-items:flex-start;flex-direction:column;gap:16px}.history-toolbar{padding-left:21px;padding-right:21px}.specs-grid{padding:16px}.spec-caption{font-size:12px}.result-mode{padding-left:16px;padding-right:16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

.table-secondary{font-size:12px;color:var(--text-tertiary);margin-top:3px}.table-actions{display:flex;align-items:center;gap:7px}

.sidebar{overflow-y:auto}@media(max-width:760px){.sidebar{visibility:hidden}.sidebar-open .sidebar{visibility:visible}}

/* ==== v3: multi-platform reading, results, reports, customer details ==== */
.platform-switch{display:inline-flex;gap:3px;padding:3px;margin:2px 0 16px;background:var(--bg-base);border:1px solid var(--border-subtle);border-radius:8px}
.platform-switch button{border:0;background:transparent;color:var(--text-secondary);font:600 11px/1 var(--font-sans);padding:8px 13px;border-radius:6px;transition:var(--transition)}
.platform-switch button:hover{color:var(--text-primary)}
.platform-switch button.active{background:var(--bg-card);color:var(--accent);box-shadow:0 1px 2px #0000000f,0 0 0 1px var(--border-subtle)}
.hero-actions.hidden{display:none}
.hero-actions{flex-wrap:wrap}
.details-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;padding:0 22px 14px}
#sam-flash{padding:0 22px 16px}#sam-flash .sam-files{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;margin:8px 0}#sam-flash label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--text-secondary)}#sam-flash input[type=file]{font:inherit;font-size:12px;max-width:100%}#sam-bar{height:8px;border-radius:4px;background:var(--bg-base);overflow:hidden;margin:8px 0}#sam-bar span{display:block;height:100%;width:0;background:var(--accent)}@media(max-width:760px){#sam-flash .sam-files{grid-template-columns:1fr}}
.detail-row{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--border-subtle);font-size:12px;min-width:0}
.detail-row span{color:var(--text-tertiary);flex-shrink:0}
.detail-row strong{font-family:var(--font-mono);font-weight:600;text-align:right;word-break:break-word;color:var(--text-primary)}
.blacklist-alert{margin:0 22px 14px}
.result-actions,.customer-form{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:0 22px 14px}
.usb-share-code{flex:1 1 100%;margin:0;font-family:var(--font-mono);font-size:40px;font-weight:600;letter-spacing:8px;text-align:center;color:var(--accent-text)}
.result-actions.hidden,.customer-form.hidden{display:none}
.result-actions-label{width:100%;font-size:12px;font-weight:650;letter-spacing:0;text-transform:none;color:var(--text-tertiary)}
.result-actions .btn .icon{width:15px;height:15px;margin-right:4px}
.customer-form .input-control{flex:1 1 170px;width:auto;padding:9px 11px}
.customer-form .input-control:last-of-type{flex-basis:260px}
.reboot-row{display:flex;flex-wrap:wrap;gap:8px}
.mode-guides{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:18px 0 28px}
.mode-guide-card{padding:20px}
.mode-guide-card h3{font-size:14px;margin-bottom:10px}
.mode-guide-card ul{padding-left:16px;font-size:12px;line-height:1.75;color:var(--text-secondary)}
.mode-guide-card li{margin-bottom:4px}
.mode-guide-card b{color:var(--text-primary);font-weight:600}
.mode-guide-card .muted{font-size:12px;margin-top:8px}
@media(max-width:970px){.mode-guides{grid-template-columns:1fr}}
@media(max-width:760px){.details-grid{grid-template-columns:1fr}.platform-switch{display:flex;width:100%}.platform-switch button{flex:1}}
.modal-window.modal-wide{max-width:760px;width:100%}
.compare-table th:first-child{color:var(--text-tertiary);font-weight:500;white-space:nowrap}
.compare-table tr.differs td{background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--text-primary);font-weight:600}
.compare-hint{font-size:12px;margin-top:10px}
.select-col{width:34px}
.compare-box{width:15px;height:15px;accent-color:var(--accent)}
.row-actions{white-space:nowrap;text-align:right}
.row-actions .icon-btn{display:inline-grid;place-items:center;text-decoration:none}
.small-link{font-size:12px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ==== v3: account, credits, team, referrals, support, notifications, languages ==== */
.language-select{border:1px solid var(--border-subtle);background:var(--bg-card);color:var(--text-secondary);font:500 11px var(--font-sans);border-radius:6px;padding:6px 8px;margin-right:8px}
.bell-wrap{position:relative}
.bell-wrap.hidden{display:none}
.bell-btn{position:relative}
.bell-count{position:absolute;top:-3px;right:-4px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--accent);color:#fff;font:700 9px/16px var(--font-sans);text-align:center}
.bell-panel{display:none;position:absolute;right:0;top:calc(100% + 8px);width:320px;max-height:420px;overflow:auto;z-index:60;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:8px;box-shadow:0 18px 40px -16px #0000003a}
.bell-wrap.open .bell-panel{display:block}
.bell-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--border-subtle);font-size:13px}
.bell-actions{display:flex;gap:12px}.bell-row{position:relative}.bell-row .bell-item{padding-right:34px}.bell-x{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:6px;color:var(--text-secondary);font-size:16px;line-height:1}.bell-x:hover{background:var(--bg-hover,#0000000d);color:var(--text-primary)}
.bell-item{padding:11px 14px;border-bottom:1px solid var(--border-subtle);font-size:12px}
.bell-item.unread{background:color-mix(in srgb,var(--accent) 6%,transparent)}
.bell-item strong{display:block;color:var(--text-primary);margin-bottom:2px}
.bell-item p{color:var(--text-secondary);line-height:1.5}
.bell-item span{display:block;color:var(--text-tertiary);font-size:12px;margin-top:4px}
.bell-empty{padding:22px 14px;text-align:center;color:var(--text-tertiary);font-size:13px}
.account-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.account-grid.hidden,.account-signin.hidden{display:none}
.account-card{padding:20px}
.account-wide{grid-column:1/-1}
.account-card .panel-heading{padding:0;border:0;margin-bottom:14px}
.account-card h3{font-size:16px}
.balance-chip{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:12px;color:var(--text-tertiary)}
.balance-chip strong{font-size:24px;color:var(--text-primary);letter-spacing:-.5px}
.packs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:14px}
.pack-card{position:relative;display:flex;flex-direction:column;gap:5px;padding:16px;border:1px solid var(--border-subtle);border-radius:8px;background:var(--bg-base)}
.pack-badge{position:absolute;top:12px;right:12px;font-size:12px;font-weight:700;color:var(--green);background:color-mix(in srgb,var(--green) 12%,transparent);padding:3px 7px;border-radius:999px}
.pack-name{font-size:12px;font-weight:600;color:var(--text-secondary)}
.pack-credits{font-size:20px;letter-spacing:-.5px}.pack-credits small{font-size:12px;font-weight:500;color:var(--text-tertiary)}
.pack-price{font-size:14px;font-weight:700;color:var(--accent)}
.pack-per{font-size:12px;color:var(--text-tertiary);margin-bottom:6px}
.tx-details summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--text-secondary);padding:6px 0}
.tx-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--border-subtle);font-size:12px}
.tx-row small{display:block;color:var(--text-tertiary);font-size:12px;margin-top:2px}
.tx-row .plus{color:var(--green)}.tx-row .minus{color:var(--accent)}
.stack-form{display:flex;flex-direction:column;gap:8px}
.stack-form .form-label{margin-top:4px}
.logo-row,.verify-row,.referral-box,.inline-form{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.verify-row.hidden,.inline-form.hidden{display:none}
.logo-preview{width:48px;height:48px;border-radius:8px;object-fit:cover;border:1px solid var(--border-subtle)}
.file-btn{cursor:pointer}
.referral-box .input-control{flex:1 1 200px}
.inline-form .input-control{flex:1 1 150px;width:auto}
.small-note{font-size:12px;margin-top:8px}
.mini-list{display:flex;flex-direction:column;margin-bottom:12px}
.mini-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border:0;border-bottom:1px solid var(--border-subtle);background:none;text-align:left;width:100%;font:inherit;color:inherit}
.mini-row>span:first-child{min-width:0;overflow-wrap:anywhere}.mini-row strong{display:block;font-size:13px}.mini-row small{display:block;font-size:12px;color:var(--text-tertiary);margin-top:2px}
.danger-link{color:var(--red)}
.support-layout{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:18px;align-items:start}
.support-layout>.panel{padding:18px}
.support-layout .panel-heading{padding:0;border:0;margin-bottom:10px}
.ticket-row{cursor:pointer;padding:10px 8px;border-radius:8px}
.ticket-row.active,.ticket-row:hover{background:var(--bg-base)}
.chat-panel{min-height:420px}
.chat-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:12px;border-bottom:1px solid var(--border-subtle)}
.chat-messages{display:flex;flex-direction:column;gap:10px;max-height:420px;overflow:auto;padding:14px 2px}
.bubble{max-width:78%;padding:10px 12px;border-radius:12px;font-size:13px;line-height:1.55}
.bubble p{white-space:pre-wrap}.bubble span{display:block;font-size:12px;margin-top:4px;opacity:.7}
.bubble.me{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:4px}
.bubble.staff{align-self:flex-start;background:var(--bg-base);border:1px solid var(--border-subtle);border-bottom-left-radius:4px}
.chat-form{display:flex;gap:8px;align-items:flex-end;padding-top:12px;border-top:1px solid var(--border-subtle)}
.chat-form textarea{resize:vertical}
.forgot-link{display:block;margin:12px auto 0}
@media(max-width:970px){.account-grid,.support-layout{grid-template-columns:1fr}.account-wide{grid-column:auto}}
@media(max-width:760px){.language-select{display:none}.bell-panel{position:fixed;left:12px;right:12px;width:auto;top:64px}}
/* v4 firmware finder */
.firmware-body{display:flex;flex-direction:column;gap:14px}.firmware-body>*{flex-shrink:0}
.firmware-summary{display:flex;flex-wrap:wrap;gap:10px}
.firmware-summary>div{flex:1 1 180px;display:flex;flex-direction:column;gap:3px;padding:12px 14px;border:1px solid var(--border-subtle);border-radius:8px;background:var(--bg-base);min-width:0}
.firmware-summary span{font-size:12px;color:var(--text-tertiary)}
.firmware-summary strong{font-size:13px;word-break:break-all}
.firmware-summary em{font-style:normal;font-size:12px;color:var(--text-secondary)}
.firmware-summary .firmware-badge{flex:0 0 auto;justify-content:center;background:transparent;border:0;padding:0}
.firmware-note{font-size:12px;line-height:1.6;color:var(--text-secondary)}
.firmware-region{display:flex;gap:8px}.firmware-region .input-control{max-width:180px;text-transform:none}
.firmware-table{border:1px solid var(--border-subtle);border-radius:8px}
.firmware-links{display:flex;flex-direction:column;gap:6px}
.firmware-link{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;border:1px solid var(--border-subtle);border-radius:8px;font-size:13px;text-decoration:none;transition:border-color var(--transition),background var(--transition)}
.firmware-link:hover{border-color:var(--border-hover);background:var(--bg-card-hover)}
.firmware-loading{display:flex;align-items:center;gap:10px;padding:26px 0;justify-content:center;font-size:13px;color:var(--text-secondary)}
.firmware-loading .spinner{width:16px;height:16px;border:2px solid var(--border-subtle);border-top-color:var(--accent);border-radius:50%;animation:fwspin .8s linear infinite}
@keyframes fwspin{to{transform:rotate(360deg)}}
.firmware-foot{font-size:12px;margin-top:14px}
@media (max-width:640px){.firmware-region .input-control{max-width:none;flex:1}}
/* v5 firmware page */
.firmware-page{padding-bottom:26px}
.fw-search{display:flex;flex-direction:column;gap:14px;margin-bottom:20px}
.fw-brands{display:flex;flex-wrap:wrap;gap:6px}
.fw-brands label{cursor:pointer}
.fw-brands input{position:absolute;opacity:0;pointer-events:none}
.fw-brands span{display:inline-flex;align-items:center;min-height:34px;padding:7px 13px;border:1px solid var(--border-subtle);border-radius:6px;font-size:12px;font-weight:550;color:var(--text-secondary);background:var(--bg-card);transition:border-color var(--transition),background var(--transition),color var(--transition)}
.fw-brands label:hover span{border-color:var(--border-hover)}
.fw-brands input:checked+span{background:var(--accent-subtle);border-color:var(--accent);color:var(--accent)}
.fw-brands input:focus-visible+span{outline:3px solid #e9683670;outline-offset:2px}
.fw-fields{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.fw-field{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--text-secondary)}
.fw-field em{font-style:normal;color:var(--text-tertiary)}
.fw-model{flex:1 1 240px}.fw-field.fw-samsung:nth-of-type(2){flex:0 0 110px}.fw-field.fw-samsung:nth-of-type(3){flex:0 1 200px}
#fw-region,#fw-current{text-transform:none}
.fw-hint{font-size:12px;color:var(--text-tertiary);line-height:1.6}
.fw-result:empty{display:none}
.fw-model-title{font-size:16px;font-weight:620;letter-spacing:-.3px}
.fw-choices{display:flex;flex-wrap:wrap;gap:8px}.fw-choices .btn{white-space:normal;text-align:left}
.fw-download{min-height:30px;padding:5px 10px;font-size:12px}
@media (max-width:640px){.fw-fields>*{flex:1 1 100%!important}.fw-fields .btn{width:100%}}
.firmware-page{padding:0 0 24px}.firmware-page .fw-search,.firmware-page .fw-result{padding:0 23px}
@media (max-width:640px){.firmware-page .fw-search,.firmware-page .fw-result{padding:0 16px}.firmware-table .fw-col-date{display:none}}
@media (min-width:641px){.firmware-table .fw-date-inline{display:none}}
@media (max-width:640px){.firmware-table .clean-table th,.firmware-table .clean-table td{padding:11px 9px}.firmware-table .clean-table th:first-child,.firmware-table .clean-table td:first-child{padding-left:13px}.fw-dl-word{display:none}}
/* v6 two-step sign-in & security */
.twofa-step{display:flex;flex-direction:column;gap:14px}
.twofa-head{display:flex;align-items:flex-start;gap:12px}
.twofa-icon{display:grid;place-items:center;flex-shrink:0;width:38px;height:38px;border-radius:8px;background:var(--accent-subtle);color:var(--accent)}
.twofa-icon .icon{width:19px;height:19px}
.twofa-lead{font-size:13px;line-height:1.65;color:var(--text-secondary)}
.twofa-input{font-family:var(--font-mono);font-size:20px!important;letter-spacing:0;text-align:center}
.check-row{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-secondary);margin:12px 0 4px;cursor:pointer}
.check-row input{accent-color:var(--accent);width:15px;height:15px}
.twofa-links{display:flex;justify-content:space-between;gap:10px}
.twofa-hint{font-size:12px;color:var(--text-tertiary);line-height:1.6}
.backup-lead{font-size:12px;line-height:1.7;margin-bottom:14px}
.backup-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:16px}
.backup-grid code{font-family:var(--font-mono);font-size:13px;text-align:center;padding:9px;border:1px dashed var(--border-hover);border-radius:6px;background:var(--bg-base);letter-spacing:0}
.backup-actions{justify-content:flex-end;flex-wrap:wrap}
.security-actions{flex-wrap:wrap;align-items:center;margin-bottom:18px}
.sec-required{font-size:12px}
.security-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:8px}
.mini-title{font-size:12px;font-weight:600;color:var(--text-secondary);margin-bottom:4px}
.sec-empty{font-size:12px;padding:10px 0;line-height:1.6}
.sec-note{font-size:12px;line-height:1.6;margin-bottom:12px}
@media (max-width:760px){.security-grid{grid-template-columns:1fr}.backup-grid code{font-size:13px}}

/* v9 Workshop */
.ws-announce{border:1px solid color-mix(in srgb,var(--accent) 30%,var(--border-subtle));background:var(--accent-subtle);border-radius:8px;padding:10px 14px;margin-bottom:14px;font-size:13px}
.ws-announce p+p{margin-top:4px}.ws-announce small{color:var(--text-tertiary);margin-left:6px}
.ws-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:14px}
.ws-stat{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:13px 15px;border:1px solid var(--border-subtle);border-radius:8px;background:var(--bg-card);text-align:left;color:var(--text-primary);min-width:0}
button.ws-stat:hover{border-color:var(--border-hover)}
.ws-stat span{font-size:12px;color:var(--text-secondary)}.ws-stat strong{font-size:16px;font-weight:620;letter-spacing:-.3px;word-break:break-word}
.ws-tabs{display:flex;gap:4px;overflow-x:auto;margin-bottom:12px;padding-bottom:2px;scrollbar-width:none}.ws-tabs::-webkit-scrollbar{display:none}
.ws-tabs button{flex:0 0 auto;padding:8px 13px;border-radius:6px;background:transparent;color:var(--text-secondary);font-size:13px;font-weight:550;border:1px solid transparent}
.ws-tabs button.active{background:var(--accent-subtle);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 25%,transparent)}
.ws-panel{padding:18px 20px}
.ws-toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}.ws-toolbar:empty{display:none}
.ws-toolbar .input-control{width:auto;flex:0 1 200px}.ws-toolbar .ws-search{flex:1 1 240px}
.ws-search.search-field{display:flex;align-items:center;gap:8px;border:1px solid var(--border-subtle);border-radius:6px;padding:0 10px;background:var(--bg-base)}
.ws-search.search-field input{border:0;background:transparent;color:var(--text-primary);padding:9px 0;width:100%;font-size:13px;outline:none}
.ws-mine{margin:0}
.ws-row{cursor:pointer}.ws-late{color:var(--red)!important;font-weight:600}
.ws-empty{padding:28px 10px;text-align:center;color:var(--text-secondary);font-size:13px}
.ws-modal{max-width:880px}
.ws-form{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}.ws-form .wide{grid-column:1/-1}
.ws-field{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:550;color:var(--text-secondary);min-width:0}
.ws-field .input-control,.ws-stack .input-control,.ws-inline .input-control{width:100%}
textarea.input-control{resize:vertical;font-family:inherit}
.ws-stack{display:flex;flex-direction:column;gap:9px}
.ws-inline{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:6px 0 10px}.ws-inline .input-control{flex:1 1 160px;width:auto}
.ws-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.ws-error{margin:0}
.ws-job-top{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:13px;margin-bottom:14px}
.ws-two{display:grid;grid-template-columns:1.1fr 1fr;gap:22px;margin-bottom:12px}
.ws-three{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;margin-top:6px}
.ws-kv{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid var(--border-subtle);font-size:13px}
.ws-kv span{color:var(--text-tertiary);flex-shrink:0}.ws-kv strong{font-weight:550;text-align:right;word-break:break-word;white-space:pre-line}
.ws-buttons{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:10px}
.ws-files{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.ws-file{width:92px;height:92px;border:1px solid var(--border-subtle);border-radius:8px;overflow:hidden;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;color:var(--text-secondary);font-size:12px;background:var(--bg-base)}
.ws-file img{width:100%;height:100%;object-fit:cover}.ws-file span{position:absolute;bottom:0;left:0;right:0;background:#0009;color:#fff;font-size:12px;padding:2px 5px;text-transform:capitalize}
.ws-file.doc b{font-size:14px;color:var(--accent)}.ws-file.doc span{position:static;background:none;color:var(--text-secondary);padding:4px;text-align:center;word-break:break-all}
.ws-file.add{cursor:pointer;border-style:dashed}.ws-file.add span{position:static;background:none;color:var(--accent);font-size:13px;font-weight:600}
.ws-history{display:flex;flex-direction:column;gap:2px;max-height:260px;overflow-y:auto}
.ws-history div{display:grid;grid-template-columns:110px 1fr auto;gap:10px;padding:7px 0;border-bottom:1px solid var(--border-subtle);font-size:12px}
.ws-history span,.ws-history small{color:var(--text-tertiary);font-size:12px}
.ws-lines{display:flex;flex-direction:column;gap:6px}
.ws-line{display:grid;grid-template-columns:1fr 70px 110px 30px;gap:6px;align-items:center}
.ws-total{display:flex;justify-content:flex-end;gap:10px;align-items:baseline;font-size:13px;color:var(--text-secondary);margin:6px 0}.ws-total strong{font-size:16px;color:var(--text-primary)}
.ws-totals{display:flex;flex-direction:column;align-items:flex-end;gap:4px;margin:10px 0 14px;font-size:13px}
.ws-totals div{display:flex;gap:18px;min-width:220px;justify-content:space-between}.ws-totals span{color:var(--text-secondary)}
.ws-totals .big strong{font-size:16px}.ws-totals .due strong{color:var(--amber);font-size:14px}
.ws-target{margin:4px 0 16px;font-size:12px;color:var(--text-secondary)}.ws-target small{font-size:12px}.ws-bar{height:8px;border-radius:99px;background:var(--bg-base);border:1px solid var(--border-subtle);overflow:hidden;margin:6px 0}
.ws-bar i{display:block;height:100%;background:var(--accent);border-radius:99px}
.ws-chart{display:flex;align-items:flex-end;gap:4px;height:140px;padding:8px 0;border-bottom:1px solid var(--border-subtle);overflow-x:auto}
.ws-chart div{flex:1 0 14px;max-width:34px;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px}
.ws-chart i{width:100%;background:color-mix(in srgb,var(--accent) 75%,transparent);border-radius:6px 4px 0 0;min-height:4px}.ws-chart span{font-size:12px;color:var(--text-tertiary)}
.ws-help{margin-bottom:8px;font-size:12px;line-height:1.6}
.ws-exp-form .input-control{flex:1 1 130px}
@media (max-width:760px){
  .ws-panel{padding:14px}.ws-form,.ws-two{grid-template-columns:1fr}
  .ws-line{grid-template-columns:1fr 56px 86px 26px}
  .ws-history div{grid-template-columns:1fr;gap:2px}
  .ws-toolbar .input-control,.ws-toolbar select{flex:1 1 140px}
}
/* v10 Workshop round 2 */
.ws-branch{grid-column:1/-1;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-secondary)}.ws-branch select{max-width:260px}
.ws-tests{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-bottom:8px}
.ws-test{border:1px solid var(--border-subtle);border-radius:8px;padding:10px 12px;font-size:13px}.ws-test small{display:block;color:var(--text-tertiary);margin:2px 0 6px}
.ws-test ul{list-style:none;margin:0;padding:0}.ws-test li{display:flex;justify-content:space-between;gap:8px;padding:4px 0;border-bottom:1px solid var(--border-subtle);font-size:12px}
.ws-test li.pass span:last-child{color:var(--green)}.ws-test li.fail span:last-child{color:var(--red)}.ws-test li.skip span:last-child{color:var(--text-tertiary)}
.ws-feedback{font-size:13px;margin-bottom:8px}
.ws-book{display:flex;gap:14px;align-items:center;border:1px solid var(--border-subtle);border-radius:8px;padding:12px;background:var(--bg-base)}
.ws-book-qr svg{width:120px;height:120px;background:#fff;padding:6px;border-radius:8px;display:block}.ws-book strong{font-size:13px;word-break:break-all}
.ws-staff-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.ws-staff-controls select{width:auto}
@media (max-width:760px){.ws-book{flex-direction:column;align-items:flex-start}}
/* v11 signatures */
.ws-sig-pad{width:100%;height:auto;aspect-ratio:3/1;background:#fff;border:1.5px dashed var(--border-hover);border-radius:8px;touch-action:none;cursor:crosshair;margin:6px 0 4px}
.ws-sigs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:8px}.ws-sigs figure{margin:0;border:1px solid var(--border-subtle);border-radius:8px;padding:6px;background:#fff}
.ws-sigs img{height:54px;display:block}.ws-sigs figcaption{font-size:12px;color:#555;margin-top:3px}
/* Workshop round 4: suggestions, perks, mini stats, clock, codes */
.ws-suggest{border:1px solid var(--border-subtle);border-left:3px solid var(--accent);border-radius:8px;padding:10px 12px;background:var(--bg-card);display:flex;flex-direction:column;gap:6px;font-size:13px}
.ws-suggest strong{font-size:13px}.ws-suggest small{font-size:12px;color:var(--text-secondary)}
.ws-suggest-fixes{display:flex;flex-wrap:wrap;gap:6px}.ws-suggest-fixes span{border:1px solid var(--border-subtle);border-radius:999px;padding:3px 9px;font-size:13px}
.ws-suggest-fixes small{font-size:12px;color:var(--text-secondary)}
.ws-perks{display:flex;flex-direction:column;gap:8px}.ws-perks:empty{display:none}
.ws-mini-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin:10px 0}
.ws-stat.ws-clock strong{font-size:14px}
.ws-code{display:inline-block;max-width:100%;overflow-wrap:anywhere;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;background:var(--bg-subtle,rgba(127,127,127,.08));border:1px solid var(--border-subtle);border-radius:6px;padding:4px 7px}
/* Workshop round 5: plan, board, calendar, stock tools, bank */
#ws-plan-banner:empty{display:none}
.ws-plan-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 12px;padding:11px 14px;border:1px solid var(--accent);border-radius:8px;background:var(--accent-subtle);font-size:13px}
.ws-plan-banner.warn{border-color:var(--amber)}.ws-plan-banner.bad{border-color:var(--red);background:transparent}
.ws-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:12px 0}
.ws-plan-card{border:1px solid var(--border-subtle);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:6px;background:var(--bg-card)}
.ws-plan-card.current{border-color:var(--green)}.ws-plan-card h3{font-size:16px}
.ws-plan-price{font-size:24px;font-weight:650;letter-spacing:-.4px}.ws-plan-price small{font-size:13px;font-weight:500;color:var(--text-secondary)}
.ws-plan-card ul{margin:4px 0 8px 16px;font-size:13px;color:var(--text-secondary);display:flex;flex-direction:column;gap:3px}
.ws-seg{display:inline-flex;border:1px solid var(--border-subtle);border-radius:8px;overflow:hidden}
.ws-seg button{border:0;background:transparent;color:var(--text-secondary);padding:7px 12px;font:inherit;font-size:13px;cursor:pointer}
.ws-seg button.active{background:var(--accent-subtle);color:var(--accent);font-weight:600}
.ws-load{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.ws-load-chip{border:1px dashed var(--border-hover);border-radius:999px;padding:6px 12px;font-size:13px}.ws-load-chip.late{border-color:var(--red)}
.ws-load-chip.over,.ws-col.over{background:var(--accent-subtle);border-color:var(--accent)}
.ws-board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(210px,1fr);gap:10px;overflow-x:auto;padding-bottom:6px}
.ws-col{border:1px solid var(--border-subtle);border-radius:8px;padding:8px;min-height:180px;display:flex;flex-direction:column;gap:8px;background:var(--bg-base)}
.ws-col h4{font-size:13px;display:flex;justify-content:space-between;color:var(--text-secondary)}
.ws-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:8px;padding:8px 10px;display:flex;flex-direction:column;gap:2px;font-size:13px;cursor:grab}
.ws-card.late{border-left:3px solid var(--red)}.ws-card.dragging{opacity:.5}.ws-card small{font-size:12px}
.ws-cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin-top:10px}
.ws-cal-head{font-size:12px;color:var(--text-secondary);text-align:center}
.ws-cal-day{min-height:84px;border:1px solid var(--border-subtle);border-radius:8px;padding:4px;display:flex;flex-direction:column;gap:3px;font-size:12px;overflow:hidden}
.ws-cal-day.empty{border:0}.ws-cal-day.today{border-color:var(--accent)}
.ws-cal-job{border:0;border-radius:6px;padding:2px 4px;font:inherit;font-size:12px;text-align:left;background:var(--accent-subtle);color:var(--text-primary);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws-cal-job.ready{background:var(--green-weak)}.ws-cal-job.done{opacity:.55}.ws-cal-job.late{background:var(--red-weak)}
.ws-scan-row input{flex:1}
.ws-count-input{width:84px}
.ws-in{color:var(--green)}.ws-out{color:var(--red)}
.ws-templates{margin:8px 0}.ws-templates summary,details summary{cursor:pointer;font-size:13px;font-weight:600;margin:6px 0}
.ws-template{display:flex;flex-direction:column;gap:4px;padding:8px 0;border-bottom:1px solid var(--border-subtle)}
.ws-errors{font-size:13px;color:var(--text-secondary);margin-left:16px}
@media (max-width:640px){.ws-cal-day{min-height:60px}.ws-cal-job{font-size:12px}}
/* Workshop: grouped tabs, settings sections, getting started */
.ws-tab-sep{flex:0 0 1px;align-self:stretch;margin:6px 4px;background:var(--border-subtle)}
.ws-set-nav{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--border-subtle)}
.ws-set-nav button{border:1px solid var(--border-subtle);background:var(--bg-card);color:var(--text-secondary);border-radius:999px;padding:6px 12px;font:inherit;font-size:13px;cursor:pointer}
.ws-set-nav button.active{background:var(--accent-subtle);color:var(--accent);border-color:var(--accent);font-weight:600}
.ws-sg-hidden{display:none!important}
.ws-setup{border:1px solid var(--border-subtle);border-radius:12px;padding:14px 16px;margin-bottom:14px;background:var(--bg-card)}
.ws-setup-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:14px}
.ws-setup ol{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:6px 18px;margin-top:10px;font-size:13px}
.ws-setup li{display:flex;flex-wrap:wrap;gap:2px 6px;align-items:baseline}.ws-setup li small{flex-basis:100%;padding-left:18px;color:var(--text-tertiary);font-size:12px}
.ws-setup li.done{color:var(--text-tertiary);text-decoration:line-through}
.ws-app-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px;font-size:13px}.ws-app-bar:empty{display:none}
.auth-code-note{margin:-4px 0 12px}
/* Online shop orders */
.ws-order-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:12px 0}.ws-order-grid p{font-size:13px}
@media (max-width:640px){.ws-order-grid{grid-template-columns:1fr}}
.ws-inline-pair{display:flex;gap:8px;align-items:center;width:100%}.ws-inline-pair .input-control{flex:1;min-width:0}
.wo-spec{margin-bottom:6px}

.ws-online-badge{display:inline-block;font-size:12px;font-weight:650;color:var(--accent);background:var(--accent-subtle);border-radius:99px;padding:1px 7px;margin-left:6px;vertical-align:middle}
/* Products */
.ws-products{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.ws-product{display:flex;gap:12px;align-items:flex-start;text-align:left;padding:10px;border:1px solid var(--border-subtle);border-radius:8px;background:var(--bg-card);color:var(--text-primary)}
.ws-product:hover{border-color:var(--border-hover)}
.ws-product-pic{flex:none;width:64px;height:64px;border-radius:8px;overflow:hidden;background:var(--bg-base);display:grid;place-items:center;font-weight:700;color:var(--accent)}
.ws-product-pic img{width:100%;height:100%;object-fit:cover}
.ws-product-info{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:13px}
.ws-product-info strong{font-size:14px;line-height:1.3}.ws-product-info small{font-size:12px;color:var(--text-secondary)}.ws-product-info s{color:var(--text-tertiary);font-size:12px}
.ws-product-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:3px}
.ws-product-tags em{font-style:normal;font-size:12px;font-weight:600;padding:1px 7px;border-radius:99px;background:var(--bg-base);color:var(--text-secondary)}
.ws-product-tags em.on{background:var(--accent-subtle);color:var(--accent)}.ws-product-tags em.warn{color:var(--amber)}
/* Alerts open what they are about */
button.bell-item{display:block;width:100%;text-align:left;background:none;font:inherit;color:inherit;cursor:pointer}
button.bell-item:hover{background:var(--bg-card-hover)}
.bell-item em{font-style:normal;color:var(--accent);font-weight:600}
/* Site email (admins) */
.site-email-form{padding:0 23px 20px}
/* Admin section */
.ad-alerts{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.ad-charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-top:14px}
.ad-chart{border:1px solid var(--border-subtle);border-radius:8px;padding:12px 14px;background:var(--bg-card)}
.ad-chart-head,.ad-chart-foot{display:flex;justify-content:space-between;gap:8px;font-size:13px}.ad-chart-head span,.ad-chart-foot{color:var(--text-secondary)}.ad-chart-foot{font-size:12px;margin-top:4px}
.ad-bars{display:flex;align-items:flex-end;gap:2px;height:90px;margin-top:10px}
.ad-bars i{flex:1;min-height:2px;border-radius:2px 2px 0 0;background:var(--accent);opacity:.85}
.ad-bulk{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.ad-pager{justify-content:center;align-items:center;margin-top:12px}
.ad-sort{width:auto;min-width:150px}
.ad-seen{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.ad-seen i{width:8px;height:8px;border-radius:50%;background:var(--border-hover)}
.ad-seen.on{color:var(--green);font-weight:600}
.ad-seen.on i{background:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 18%,transparent)}
.ad-chat{display:flex;flex-direction:column;gap:8px;margin:10px 0 14px;max-height:46vh;overflow:auto}
.ad-msg{max-width:85%;padding:9px 12px;border-radius:12px;background:var(--bg-base);border:1px solid var(--border-subtle);font-size:13px}
.ad-msg p{white-space:pre-wrap}.ad-msg small{display:block;color:var(--text-tertiary);font-size:12px;margin-top:3px}
.ad-msg.staff{align-self:flex-end;background:var(--accent-subtle);border-color:transparent}
.ad-refund{align-items:flex-start}.ad-refund small{display:block}
.ad-health-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:12px 0}
.ad-log{max-height:300px;overflow:auto;background:var(--bg-base);border:1px solid var(--border-subtle);border-radius:8px;padding:10px;font:11px/1.5 var(--font-mono);white-space:pre-wrap;word-break:break-all}
/* Shop page for visitors, and the Workshop first in the menu */
.nav-tab-main span{font-weight:650}
.home-hero{padding:30px 28px;margin-bottom:22px;background:linear-gradient(135deg,var(--bg-card),color-mix(in srgb,var(--accent) 7%,var(--bg-card)))}
.home-hero h2{font-size:clamp(24px,3.4vw,36px);letter-spacing:-1px;font-weight:600;line-height:1.15;max-width:720px;margin:6px 0 10px}.home-hero h2 span{color:var(--accent)}
.home-hero p{max-width:620px;font-size:13px;line-height:1.7}
.home-hero-actions{flex-wrap:wrap;margin-top:18px}
.home-head{display:flex;align-items:center;justify-content:space-between;margin:4px 2px 12px}.home-head h3{font-size:16px}
.home-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin-bottom:24px}
.home-card{display:flex;flex-direction:column;border:1px solid var(--border-subtle);border-radius:12px;overflow:hidden;background:var(--bg-card);text-decoration:none;color:var(--text-primary);transition:transform .15s,box-shadow .15s}
.home-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-card)}
.home-pic{position:relative;aspect-ratio:1;background:var(--bg-base);display:grid;place-items:center;font-size:28px;font-weight:700;color:var(--accent)}
.home-pic img{width:100%;height:100%;object-fit:cover}
.home-pic em{position:absolute;left:8px;top:8px;font-style:normal;font-size:12px;font-weight:700;padding:2px 8px;border-radius:99px;background:var(--accent);color:#fff}
.home-info{display:flex;flex-direction:column;gap:2px;padding:10px 12px 12px;font-size:13px}
.home-info small{color:var(--text-secondary);font-size:12px}.home-info strong{font-size:14px;line-height:1.3}
.home-price{font-weight:700;font-size:14px}.home-price s{color:var(--text-tertiary);font-weight:400;font-size:12px}
.home-stock{font-size:12px;font-weight:600;color:var(--green)}.home-stock.out{color:var(--red)}
.home-empty{grid-column:1/-1;padding:20px 0}
.home-shops{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:22px 26px}
.home-shops h3{font-size:16px;margin:4px 0 6px}.home-shops p{font-size:13px;max-width:560px}
.is-guest .credit-card,.is-guest .page-heading .page-subtitle,.is-guest .page-heading .eyebrow,.is-guest .page-heading>div+*{display:none!important}

.ws-form .ws-form-pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.ws-addons{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:4px 0 2px}
.chip-add{border:1px dashed var(--border-hover);background:var(--bg-base);border-radius:99px;padding:5px 11px;font-size:13px;color:var(--text-primary);cursor:pointer}
.chip-add small{color:var(--text-secondary);margin-left:2px}.chip-add:hover{border-color:var(--accent);color:var(--accent)}
.ad-offsite{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border:1px solid var(--border-subtle);border-radius:8px;padding:14px 16px;margin-bottom:14px;background:var(--bg-card)}
.ad-offsite p{font-size:13px;margin:4px 0;max-width:680px}
.ad-reviewer{margin-top:14px}.ad-rev-codes{white-space:pre-wrap;word-break:break-word;font:13px/1.6 ui-monospace,Menlo,monospace;background:var(--bg-subtle,var(--bg-card));border:1px solid var(--border-subtle);border-radius:8px;padding:12px;margin:0;user-select:all}
.ad-mail.unread strong{font-weight:750}.ad-mail.unread{box-shadow:inset 3px 0 0 var(--accent)}
.ad-mail-body{white-space:pre-wrap;word-break:break-word;font:13px/1.6 var(--font-sans);background:var(--bg-base);border:1px solid var(--border-subtle);border-radius:8px;padding:12px 14px;max-height:55vh;overflow:auto}


/* Workshop → Reviews */
.rev-stars{color:#f5a623;letter-spacing:0}
.rv-text{display:block;margin:4px 0;white-space:pre-wrap;overflow-wrap:anywhere}
.muted-row{opacity:.6}

/* Admin → Money */
.money-bars{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;align-items:end;height:150px;margin:6px 0 14px}
.money-bar{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;gap:4px;min-width:0}
.money-bar-fill{display:block;width:100%;min-height:2px;border-radius:6px 6px 2px 2px;background:var(--accent, #e96836)}
.money-bar small{font-size:12px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.ws-stat small{display:block;font-size:12px;color:var(--text-secondary);margin-top:2px}

/* Readability: white text on buttons needs a deeper orange (4.6:1), and table headings were too small and faint */
:root{--accent-button:#c4501c;--accent-button-hover:#b5461a}
.btn-primary{background:var(--accent-button)}
.btn-primary:hover{background:var(--accent-button-hover)}
.clean-table th{font-size:12px;color:var(--text-secondary);font-weight:600}
.ws-plan-card ul{list-style:none;margin:4px 0 8px;padding:0}
.ws-plan-card li{position:relative;padding-left:18px;text-align:left}
.ws-plan-card li::before{content:'✓';position:absolute;left:0;color:var(--green);font-weight:700}
.ws-plan-credits{font-size:13px;color:var(--text-secondary)}
.ws-plan-credits strong{color:var(--text-primary)}
.ws-plan-tag{display:inline-block;margin-left:6px;padding:2px 7px;border-radius:999px;font-size:12px;font-weight:600;vertical-align:middle;color:var(--green);background:color-mix(in srgb,var(--green) 12%,var(--bg-card))}
.ws-plan-note{display:flex;align-items:center;justify-content:space-between;gap:10px 14px;flex-wrap:wrap;margin:0 0 12px;padding:11px 14px;border:1px solid var(--border-subtle);border-radius:8px;background:var(--bg-card-hover);font-size:13px;color:var(--text-secondary)}
.ws-auto-renew select{width:auto;min-height:34px;padding:6px 10px;font-size:13px}
.ws-reorder-group{border:1px solid var(--border-subtle);border-radius:8px;padding:10px 12px;margin:0 0 10px}
.ws-reorder-group .mini-title{margin-top:0}
.ws-reorder-group .ws-buttons{margin-top:8px}
.money-bar small{font-size:12px}
/* Narrow phones and large text: nothing runs off the screen */
.ws-setup ol{grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr))}
.ws-setup li .text-btn{white-space:normal;text-align:left}
.ws-seg{flex-wrap:wrap;max-width:100%}
.ws-plans{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}

/* Workshop → Team: staff & access */
.ws-staff{margin-bottom:18px}
.ws-staff-head{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;margin-bottom:6px}
.ws-staff-head .mini-title{margin:0}
.ws-staff-head .btn{margin-left:auto}
.ws-staff-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.ws-access{display:grid;gap:8px;padding:10px 12px;border:1px solid var(--border-subtle);border-radius:8px;background:var(--bg-card-hover)}
.ws-staff-danger{margin-top:8px;padding-top:10px;border-top:1px solid var(--border-subtle)}

/* Admin → Health: server problems */
.ad-log-list .mini-row{align-items:flex-start}
.ad-log-text{display:block;margin:4px 0;font-size:12px;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--text-secondary)}
.ad-log-hint{display:block;color:var(--text-primary)}
.ad-log-error strong{color:var(--red)}
.ad-log-warning strong{color:var(--amber)}

/* Cleaner screens: one plain title per card, no extra labels above it */
.page-heading .eyebrow{display:none}

/* Buy credits by UPI */
.upi-pay{display:grid;gap:12px}
.upi-steps{margin:0;padding-left:18px;display:grid;gap:6px;font-size:13px;color:var(--text-secondary)}
.upi-qr{display:flex;flex-direction:column;align-items:center;gap:6px}
.upi-qr svg{background:#fff;padding:8px;border-radius:8px;width:196px;height:196px}
.upi-qr small{color:var(--text-secondary);font-size:12px}
.upi-open{justify-self:center}
.saved-note{font-size:13px;font-weight:600;color:var(--green)}

/* Home page: repairs & services */
#home-services-box{margin-top:6px}
.home-services{display:grid;gap:8px;margin-bottom:18px}
.home-service{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--border-subtle);border-radius:8px;background:var(--bg-card)}
.home-service strong{display:block;font-size:14px}
.home-service small{display:block;color:var(--text-secondary);font-size:13px;margin-top:2px}
.home-service-meta{text-align:right;flex-shrink:0}

body:not(.is-guest) .guest-only{display:none!important}

/* One screen: the title lives in the top bar, so no second heading; tighter spacing */
.page-heading{display:none}
.main-wrapper{padding-top:22px}
/* Home page: hero with the actions, then services and products side by side */
#view-home .home-hero{padding:22px 26px;margin-bottom:16px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px}
#view-home .home-hero h2{font-size:clamp(20px,2.4vw,28px);line-height:1.2;margin:0 0 6px}
#view-home .home-hero p{margin:0}
#view-home .home-hero-actions{margin:0}
.home-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:18px;align-items:start}
.home-columns.one{grid-template-columns:1fr}
.home-head{margin:0 0 8px}
.home-head h3{font-size:14px}
.home-services{gap:6px;margin-bottom:0}
.home-service{padding:9px 12px}
#view-home .home-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.home-shops{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-top:16px;padding:12px 16px;border:1px solid var(--border-subtle);border-radius:8px;background:var(--bg-card);font-size:13px;color:var(--text-secondary)}
.home-shops strong{color:var(--text-primary)}
@media (max-width:860px){.home-columns{grid-template-columns:1fr}}
#view-home .home-grid{margin-bottom:0}
#view-home .home-pic{aspect-ratio:4/3;font-size:24px}
#view-home .home-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
#view-home .home-pic{aspect-ratio:16/10}
#view-home .home-info{padding:8px 10px;gap:2px}
.topbar{height:62px}
#view-home .home-hero{padding:16px 22px}
#view-home .home-hero-actions .btn{min-height:36px;padding:8px 13px;font-size:13px}
.app-footer{padding-top:12px;padding-bottom:12px}
/* Visitors only have the shop page, so no side menu for them */
body.is-guest .sidebar,body.is-guest #menu-toggle,body.is-guest .sidebar-overlay{display:none!important}
body.is-guest .app-shell{margin-left:0}
@media (max-width:520px){
  #view-home .home-hero{padding:14px 16px;margin-bottom:12px}
  #view-home .home-hero h2{font-size:20px}
  #view-home .home-hero-actions{gap:6px}
  #view-home .home-hero-actions .btn{min-height:34px;padding:7px 11px}
  #view-home .home-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  #view-home .home-info{padding:6px 7px;font-size:12px}
  #view-home .home-pic{aspect-ratio:1;font-size:20px}
  .home-service{padding:8px 10px}
  .home-service small{font-size:12px}
  .home-columns{gap:12px}
  body.is-guest .breadcrumb-root{display:inline!important;font-weight:700;color:var(--text-primary)}
  body.is-guest .breadcrumb-divider,body.is-guest #breadcrumb-current{display:none!important}
}

/* Pop-up forms fit in one screen: wider window with three columns on big screens, tighter spacing everywhere */
#modal-ws .ws-form{gap:9px 12px}
#modal-ws .ws-field{gap:4px}
#modal-ws .input-control{padding:8px 11px}
#modal-ws textarea.input-control{min-height:56px}
#modal-ws .modal-window{padding:20px 22px}
@media (min-width:1000px){
  #modal-ws .ws-modal{max-width:min(1060px,94vw)}
  #modal-ws .ws-form{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-height:760px) and (min-width:1000px){ #modal-ws .ws-form{grid-template-columns:repeat(4,minmax(0,1fr))} }
#modal-ws .ws-details{border:1px solid var(--border-subtle);border-radius:8px;padding:8px 12px}
#modal-ws .ws-details summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--text-secondary)}
#modal-ws .ws-details[open] summary{margin-bottom:8px}
@media (min-width:700px){#wpf-specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px}}
/* Job board and Workshop home on phones: compact, no wasted columns */
.ws-col:not(:has(.ws-card)){min-height:0}
@media (hover:none){ .ws-board + .ws-help, .ws-help.ws-drag-help{display:none} }
@media (max-width:600px){
  .ws-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .ws-stat{padding:8px 9px;gap:2px}
  .ws-stat span{font-size:12px;line-height:1.2}
  .ws-stat strong{font-size:14px}
  .ws-load{gap:5px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px}
  .ws-load-chip{padding:4px 9px;font-size:12px;white-space:nowrap;flex-shrink:0}
  .ws-board{grid-auto-columns:minmax(170px,78vw)}
  .ws-col:not(:has(.ws-card)){width:96px;min-width:96px}
  .ws-col:not(:has(.ws-card)) h4{font-size:12px}
  .ws-board{grid-auto-columns:auto}
  .ws-col:has(.ws-card){width:min(260px,74vw)}
  .ws-app-bar{font-size:12px;gap:6px;margin-bottom:8px}
}

/* Plan screen: who it's for, what's in and out, and a side-by-side table */
.ws-plan-for{font-size:13px;color:var(--text-secondary);margin:2px 0 4px;line-height:1.4}
.ws-plan-card li.no{color:var(--text-tertiary);text-decoration:line-through;text-decoration-color:var(--border-hover)}
.ws-plan-card li.no::before{content:'—';color:var(--text-tertiary)}
.ws-plan-tag.pop{color:var(--accent-button,#c4501c);background:color-mix(in srgb,var(--accent) 12%,var(--bg-card))}
.ws-compare{margin:6px 0 14px;border:1px solid var(--border-subtle);border-radius:12px;padding:10px 14px;background:var(--bg-card)}
.ws-compare summary{cursor:pointer;font-weight:650;font-size:14px}
.ws-compare[open] summary{margin-bottom:10px}
.ws-compare-table td,.ws-compare-table th{white-space:normal;text-align:center;vertical-align:middle}
.ws-compare-table td:first-child,.ws-compare-table th:first-child{text-align:left;min-width:180px}
.ws-compare-table td small{display:block;color:var(--text-tertiary);font-size:12px;margin-top:2px}
.ws-compare-table td.yes{color:var(--green);font-weight:700;font-size:14px}
.ws-compare-table td.no{color:var(--text-tertiary)}
.ws-compare-table td,.ws-compare-table th{padding:8px 12px}
@media (max-width:600px){.ws-compare-table td:first-child,.ws-compare-table th:first-child{min-width:130px}.ws-compare-table td,.ws-compare-table th{padding:7px 8px}}
/* Workshop pop-ups on phones: two fields per row, short text boxes, button always visible */
@media (max-width:760px){
  #modal-ws .ws-form{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 10px}
  #modal-ws .ws-form .form-field{margin-bottom:0;min-width:0}
  #modal-ws .ws-form .form-label{margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #modal-ws .ws-form .input-control{padding:9px 10px}
  #modal-ws .ws-form textarea.input-control{min-height:0;height:58px}
  #modal-ws .modal-window{padding:18px 16px 0}
  #modal-ws .modal-header-row{margin-bottom:12px}
  #modal-ws .ws-form>.ws-actions{position:sticky;bottom:0;z-index:2;background:var(--bg-card);margin:0 -16px;padding:10px 16px 14px;border-top:1px solid var(--border-subtle)}
  #modal-ws .ws-form>.ws-actions .btn{flex:1}
}
@media (max-width:760px){
  /* Labels wrap instead of being cut ("Order this many when lo…"); the boxes in a row still line up at the bottom */
  #modal-ws .ws-field{justify-content:flex-end}
  #modal-ws .ws-field>span{line-height:16px}
  #modal-ws .ws-details{padding:7px 10px}
  #modal-ws .ws-details summary{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media (max-width:520px){
  #modal-ws.modal-layer{padding:0;align-items:flex-end}
  #modal-ws .modal-window{max-height:100dvh;border-radius:12px 16px 0 0;border-bottom:0}
}
@media (max-width:760px){
  #modal-ws .modal-window{padding-bottom:14px}
  #modal-ws .ws-form>.ws-actions{margin-bottom:-14px}
}
@media (max-width:760px){
  #modal-ws .ws-form{row-gap:7px}
  #modal-ws .ws-form .input-control{padding-top:8px;padding-bottom:8px}
}
@media (min-width:761px){
  #modal-ws details.ws-details:has(#wpf-low){grid-column:span 2;align-self:end}
  #modal-ws details.ws-details:has(#wpf-low)[open]{grid-column:1/-1}
}

/* Smart / Full view: Smart keeps the essentials on screen, the rest one tap away */
.ui-mode{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px;padding:0 4px;font-size:12px;color:var(--text-secondary)}
.ui-mode-seg{display:inline-flex;padding:2px;border:1px solid var(--border-subtle);border-radius:8px;background:var(--bg-base)}
.ui-mode-seg button{background:transparent;border-radius:6px;padding:5px 11px;font-size:12px;font-weight:550;color:var(--text-secondary)}
.ui-mode-seg button.active{background:var(--bg-card);color:var(--accent);box-shadow:0 1px 2px #0000001a}
.mode-smart .nav-tab-btn[data-extra]:not(.active){display:none}
.mode-smart .credit-card p{display:none}
.mode-smart .credit-card .sidebar-balance{margin-bottom:10px}
.ws-tabs-wrap{position:relative}
.ws-more{display:none!important}
.mode-smart .ws-more{display:inline-flex!important;align-items:center;gap:4px}
.mode-smart #ws-tabs>button[data-ws]:not([data-core]):not(.active),.mode-smart #ws-tabs .ws-tab-sep{display:none}
.ws-more-menu{position:absolute;top:calc(100% - 8px);z-index:30;min-width:190px;padding:6px;display:grid;gap:2px;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:8px;box-shadow:0 12px 32px #0000002e}
.ws-more-menu button{text-align:left;padding:9px 12px;border-radius:6px;background:transparent;color:var(--text-primary);font-size:13px;font-weight:500}
.ws-more-menu button:hover,.ws-more-menu button.active{background:var(--accent-subtle);color:var(--accent)}
body:not(.mode-smart) .ws-more-menu{display:none}
.mode-smart .ws-views{display:none}
@media (min-width:761px){.ws-tabs{flex-wrap:wrap;overflow-x:visible;row-gap:6px}}
.mode-smart .ws-tabs{flex-wrap:wrap;overflow-x:visible;row-gap:6px}
.mode-smart .ws-setup li.done{display:none}
.ws-setup ol{padding-left:0}
.ws-setup li .text-btn{flex:1 1 0;min-width:0;padding:0}
@media (max-width:760px){.mode-smart .ws-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.mode-smart .ws-tabs button{justify-content:center;text-align:center;background:var(--bg-card);border-color:var(--border-subtle)}.mode-smart .ws-tabs button.active{background:var(--accent-subtle)}}

/* ===================================================================== v3 design layer
   One look across web, iPhone and Android (DESIGN.md): system type on a 7-step scale, hairline cards,
   orange only for the main action and the current place, colour in badges only. */
body{font-size:14px;line-height:20px;font-feature-settings:"cv11"}
.tnum,.ws-stat strong,.clean-table td,.sidebar-balance strong,.credit-counter strong,.balance-chip strong{font-variant-numeric:tabular-nums}
h1,#page-title{font-size:24px;line-height:32px;font-weight:650;letter-spacing:-.2px}
.page-heading{margin-bottom:20px}.page-subtitle{font-size:13px;line-height:18px;color:var(--text-secondary);margin-top:2px}
.section-title,.panel-heading h2{font-size:20px;line-height:28px;font-weight:600;letter-spacing:-.1px}
.panel-heading h3{font-size:16px;line-height:24px;font-weight:600;letter-spacing:0}
.panel-heading p,.panel-heading .muted{font-size:13px;line-height:18px}
.muted{color:var(--text-secondary)}

/* Shell */
.brand-symbol{transform:none;border-radius:8px;width:32px;height:32px;font-size:16px;letter-spacing:-1px}
.brand-symbol span{right:5px;top:6px;width:3px;height:3px}
.brand-word{font-size:20px;letter-spacing:-.4px;font-weight:700}.brand-word>span{font-size:14px;letter-spacing:0}
.sidebar{padding:20px 12px 16px}.brand{padding:0 8px;margin-bottom:20px}
.nav-tabs{gap:2px}
.nav-tab-btn{font-size:14px;font-weight:500;padding:8px 10px;min-height:36px;border-radius:6px;color:var(--text-secondary);gap:10px}
.nav-tab-btn .icon{width:18px;height:18px}
.nav-tab-btn:hover{background:var(--bg-base);color:var(--text-primary)}
.nav-tab-btn.active,.nav-tab-btn.active:hover{background:var(--accent-subtle);color:var(--accent-text);font-weight:600}
.nav-active-dot{display:none}
.sidebar-bottom{padding-top:24px}
.credit-card{padding:12px;border-radius:8px;background:var(--bg-surface)}
.credit-card-top{font-size:13px;font-weight:500;color:var(--text-secondary)}.credit-card-top>.icon{display:none}.credit-card-dot{display:none}
.sidebar-balance{margin:4px 0 8px}.sidebar-balance strong{font-size:22px;font-weight:600;letter-spacing:0}.sidebar-balance span{font-size:12px}
.credit-card p{font-size:12px;line-height:16px;margin-bottom:10px}
.credit-card .btn-dark{font-size:13px;min-height:32px;background:var(--bg-surface);color:var(--text-primary);border:1px solid var(--border-hover);justify-content:center}
.credit-card .btn-dark .icon{display:none}
.topbar{height:56px;padding:0 24px;background:var(--bg-surface)}
.breadcrumb{font-size:13px;gap:8px}.breadcrumb-root{color:var(--text-tertiary)}
#breadcrumb-current{font-weight:500}
.nav-actions{gap:12px}
.header-help{font-size:13px}
.theme-toggle{font-size:13px;min-height:32px;padding:5px 10px;border-radius:6px;border-color:var(--border-hover);background:var(--bg-surface);color:var(--text-primary)}
.user-email-text{font-size:13px;color:var(--text-secondary)}
.credit-counter{font-size:13px;color:var(--text-secondary)}.credit-counter strong{color:var(--text-primary);font-weight:600}
.main-wrapper{padding:24px}

/* Buttons */
.btn{min-height:36px;padding:8px 14px;border-radius:6px;font-size:14px;font-weight:600;gap:6px;box-shadow:none}
.btn .icon{width:16px;height:16px}
.btn-sm{min-height:32px;padding:6px 12px;font-size:13px}
.btn-primary{background:var(--accent);color:#fff;box-shadow:none}
.btn-primary:hover{background:var(--accent-hover)}
.btn-outline{background:var(--bg-surface);border-color:var(--border-hover);color:var(--text-primary)}
.btn-outline:hover{background:var(--bg-base);border-color:var(--border-hover)}
.btn-dark{background:var(--text-primary);color:var(--bg-surface)}
.btn-danger{background:var(--bg-surface);color:var(--red);border-color:var(--border-hover)}
.btn-danger:hover{background:var(--red-weak)}
.text-btn{font-size:13px;font-weight:500;color:var(--text-secondary)}
.small-link{font-size:13px}
button:hover:not(:disabled){filter:none}
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Inputs */
.input-control,.ws-form input:not([type=checkbox]):not([type=radio]),.ws-form select,.ws-form textarea,.ws-toolbar input:not([type=checkbox]),.ws-toolbar select,.search-field{border:1px solid var(--border-hover);border-radius:6px;background:var(--bg-surface);color:var(--text-primary);font-size:14px;min-height:36px}
.input-control{padding:7px 10px}
.input-control::placeholder,input::placeholder,textarea::placeholder{color:var(--text-tertiary)}
.input-control:focus,.ws-form input:focus,.ws-form select:focus,.ws-form textarea:focus{border-color:var(--accent);outline:2px solid color-mix(in srgb,var(--accent) 25%,transparent);outline-offset:0}
label,.ws-form label{font-size:13px}

/* Cards, panels, stats */
.panel{border-radius:8px;box-shadow:none;border-color:var(--border-subtle)}
.ws-stats{gap:12px}
.ws-stat{padding:12px 16px;gap:2px;border-radius:8px;box-shadow:none}
.ws-stat:hover{border-color:var(--border-hover);background:var(--bg-surface)}
.ws-stat span{font-size:13px;line-height:18px;color:var(--text-secondary)}
.ws-stat strong{font-size:22px;line-height:28px;font-weight:600;letter-spacing:0;color:var(--text-primary)}
.ws-stat.warn strong{color:var(--amber)}.ws-stat.bad strong{color:var(--red)}.ws-stat.good strong{color:var(--green)}
.ws-stat.ws-clock strong{font-size:16px;line-height:28px}
.ws-panel{padding:0}
.ws-toolbar{padding:12px 16px;gap:8px;border-bottom:1px solid var(--border-subtle)}
.ws-body{padding:16px}

/* Section tabs: quiet underline, current one in text colour with an accent rule */
.ws-tabs{gap:0;border-bottom:1px solid var(--border-subtle);margin-bottom:16px;padding-bottom:0}
.ws-tabs button{padding:10px 12px;margin-bottom:-1px;border:0;border-bottom:2px solid transparent;border-radius:0;font-size:14px;font-weight:500;color:var(--text-secondary);background:transparent}
.ws-tabs button:hover{color:var(--text-primary);background:transparent}
.ws-tabs button.active{color:var(--text-primary);background:transparent;border-color:transparent;border-bottom-color:var(--accent);font-weight:600}
.ws-tab-sep{margin:10px 6px}
.ws-more-menu{top:100%;margin-top:4px;border-radius:8px;box-shadow:var(--shadow-pop);padding:4px}
.ws-more-menu button{font-size:14px;padding:8px 10px;border-radius:6px}
.ws-more-menu button:hover{background:var(--bg-base);color:var(--text-primary)}
.ws-more-menu button.active{background:var(--accent-subtle);color:var(--accent-text)}
/* Segmented controls (List / Board, Due / Paid): grey track, white selected segment */
.ws-seg,.ui-mode-seg{background:var(--bg-base);border:1px solid var(--border-subtle);border-radius:6px;padding:2px;gap:2px}
.ws-seg button,.ui-mode-seg button{border-radius:4px;padding:4px 10px;font-size:13px;font-weight:500;color:var(--text-secondary);background:transparent;border:1px solid transparent}
.ws-seg button.active,.ui-mode-seg button.active{background:var(--bg-surface);color:var(--text-primary);border-color:var(--border-subtle);font-weight:600;box-shadow:0 1px 1px #1018280d}
.ui-mode{font-size:13px;padding:0 2px}

/* Tables */
.clean-table{font-size:14px}
.clean-table th{font-size:12px;line-height:16px;font-weight:500;color:var(--text-secondary);background:var(--bg-base);padding:8px 16px;text-transform:none;letter-spacing:0}
.clean-table td{font-size:14px;line-height:20px;padding:11px 16px;color:var(--text-primary)}
.clean-table td small,.clean-table td .muted{font-size:12px;color:var(--text-secondary)}
.clean-table tbody tr:hover{background:var(--bg-card-hover)}

/* Badges */
.status-pill{font-size:12px;line-height:16px;font-weight:500;border-radius:999px;padding:2px 8px;background:var(--bg-base);color:var(--text-secondary)}
.status-success,.status-active{color:var(--green);background:var(--green-weak)}
.status-pending{color:var(--amber);background:var(--amber-weak)}
.status-failed,.status-suspended{color:var(--red);background:var(--red-weak)}
.status-info{color:var(--blue);background:var(--blue-weak)}
.status-neutral{color:var(--text-secondary);background:var(--bg-base)}
.status-admin{color:var(--accent-text);background:var(--accent-subtle)}

/* Notices, empty states, modals, toasts */
.notice{border-radius:8px;font-size:13px}
.empty-state{padding:32px 16px}
.empty-icon{display:none}
.empty-title{font-size:14px;font-weight:600;color:var(--text-primary)}
.empty-description{font-size:13px;color:var(--text-secondary);margin-top:2px}
.empty-state .btn{margin-top:12px}
.modal-window{border-radius:12px;box-shadow:var(--shadow-pop);padding:24px}
.modal-title-text{font-size:20px;line-height:28px;font-weight:600}
.toast-message{background:#15181c;color:#fff;border:0;border-radius:999px;padding:10px 16px;font-size:13px;box-shadow:var(--shadow-pop)}
#ws-plan-banner>*,.ws-announce{border-radius:8px}
.ws-setup{border-radius:8px;padding:12px 16px}
.ws-setup-head{font-size:14px}.ws-setup ol{font-size:14px}.ws-setup li small{font-size:12px}
.ws-bar{height:4px;border-radius:2px}

@media (max-width:760px){
  .topbar{height:56px;padding:0 16px}.main-wrapper{padding:16px}
  .ws-body{padding:12px}.ws-toolbar{padding:12px}
  h1,#page-title{font-size:22px;line-height:28px}
  .mode-smart .ws-tabs{border-bottom:0;gap:6px}
  .mode-smart .ws-tabs button{border:1px solid var(--border-subtle);border-radius:6px;margin:0;padding:8px 6px;font-size:13px}
  .mode-smart .ws-tabs button.active{border-color:var(--accent);color:var(--accent-text);background:var(--accent-subtle)}
}
.search-field{padding:0 10px;gap:8px}
.search-field>input,.ws-toolbar .search-field>input{border:0!important;min-height:34px;background:transparent;font-size:14px;outline:0}
.search-field:focus-within{border-color:var(--accent);outline:2px solid color-mix(in srgb,var(--accent) 25%,transparent);outline-offset:0}
.ws-plan-banner{background:var(--bg-surface);border:1px solid var(--border-subtle);padding:10px 12px 10px 16px;font-size:14px}
.ws-plan-banner.warn{background:var(--amber-weak);border-color:color-mix(in srgb,var(--amber) 30%,transparent)}
.ws-plan-banner.bad{background:var(--red-weak);border-color:color-mix(in srgb,var(--red) 30%,transparent)}
/* Device check without the illustration: one calm card */
.connection-main{display:block}
.connection-copy{padding:24px;max-width:640px}
.connection-copy h2{font-size:24px;line-height:32px;font-weight:650;letter-spacing:-.2px}
.connection-copy>p{font-size:14px;line-height:20px;color:var(--text-secondary);margin:4px 0 16px;max-width:520px}
.hero-actions{gap:8px;flex-wrap:wrap}
.btn-connect{min-height:36px;padding:8px 14px;font-size:14px}
.hero-note{margin-top:12px;font-size:13px;color:var(--text-secondary)}
.connection-bottom{padding:10px 24px;min-height:0;font-size:13px}
.connection-meta,.connection-indicator{font-size:13px}
.platform-switch{background:var(--bg-base);border:1px solid var(--border-subtle);border-radius:6px;padding:2px;margin-bottom:16px}
.platform-switch button{font-size:13px;font-weight:500;border-radius:4px;padding:4px 12px;color:var(--text-secondary);border:1px solid transparent}
.platform-switch button.active{background:var(--bg-surface);color:var(--text-primary);border-color:var(--border-subtle);font-weight:600}
.overview-grid{gap:12px;margin-bottom:12px}
.overview-card{padding:12px 16px;gap:8px;border-radius:8px;box-shadow:none}
.overview-card p{font-size:13px;color:var(--text-secondary)}
.overview-card strong{font-size:16px;line-height:24px;font-weight:600}
.metric-suffix{font-size:13px;color:var(--text-secondary);font-weight:400}
.connection-card{border-radius:8px;box-shadow:none}
.mini-steps{gap:12px}.mini-steps li>span{width:24px;height:24px;font-size:12px;border-radius:999px}
.mini-steps strong{font-size:14px}.mini-steps p{font-size:13px}
.guide-link{font-size:13px}
.spec-caption{font-size:12px;color:var(--text-secondary)}.spec-data{font-size:16px;font-weight:600}
@media (max-width:760px){.connection-copy{padding:16px}.connection-bottom{padding:10px 16px}}
.connection-main{min-height:0!important;grid-template-columns:none}
.trust-row{display:none}
.pack-card{background:var(--bg-surface);gap:2px;padding:16px}
.pack-name{font-size:13px;font-weight:500}
.pack-credits{font-size:22px;line-height:28px;font-weight:600;letter-spacing:0;font-variant-numeric:tabular-nums}
.pack-credits small{font-size:13px;font-weight:400;color:var(--text-secondary)}
.pack-price{font-size:16px;font-weight:600;color:var(--text-primary);margin-top:4px}
.pack-per{font-size:12px;margin-bottom:12px}
.pack-badge{font-size:12px;font-weight:500;color:var(--green);background:var(--green-weak);padding:2px 8px}
.pack-card .btn{margin-top:auto}
.balance-chip span{font-size:12px;color:var(--text-secondary)}.balance-chip strong{font-size:22px;font-weight:600}
.form-label{font-size:13px;font-weight:500;color:var(--text-primary);margin-bottom:4px}
.stack-form>button[type=submit]{align-self:flex-start;width:auto;min-width:96px}
.ws-form input,.ws-form select,.ws-form textarea,.input-control,select{font-weight:400}
.home-pic{font-size:12px;font-weight:500;color:var(--text-tertiary)}
.home-pic .nopic,.nopic{font-size:12px;font-weight:500;color:var(--text-tertiary);opacity:1}
.home-pic em{font-weight:500;background:var(--bg-surface);color:var(--text-primary);border:1px solid var(--border-subtle)}
.theme-toggle{white-space:nowrap}
@media (max-width:600px){
  .ws-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .ws-stat{padding:10px 12px}
  .ws-stat strong{font-size:20px;line-height:26px}
  .ws-stat.ws-clock strong{font-size:14px;line-height:26px}
}
@media (max-width:520px){
  .nav-actions{gap:8px}
  .theme-toggle{font-size:12px;padding:4px 8px;min-height:30px}
  #nav-credit-badge{display:none!important}
  .nav-actions .btn{font-size:13px;min-height:32px;padding:6px 10px}
}
.home-hero{background:var(--bg-surface);padding:24px;margin-bottom:16px}.home-hero h2{font-size:24px;line-height:32px;font-weight:650;letter-spacing:-.2px}
.ws-actions-gap{flex:1}
/* Product pop-up on a computer: one screen, four columns, read top to bottom —
   what it is → price → stock and shop → description and photos → optional extras → actions */
@media (min-width:1000px){
  #modal-ws #wpf{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 12px}
  #modal-ws #wpf .ws-field:has(#wpf-name){grid-column:span 2}
  #modal-ws #wpf .wpf-online-row{grid-column:span 1;order:12;align-self:end;min-height:36px;display:flex;align-items:center;gap:8px}
  #modal-ws #wpf .ws-field:has(#wpf-desc){grid-column:span 2;order:15}
  #modal-ws #wpf .ws-field:has(#wpf-desc) textarea{height:64px}
  #modal-ws #wpf .wpf-photos-block{grid-column:span 2;order:16}
  #modal-ws #wpf .wpf-photos-block .ws-files img{width:56px;height:56px}
  #modal-ws #wpf .wpf-more,#modal-ws #wpf .wpf-more[open]{grid-column:span 2;order:20;align-self:start}
  #modal-ws #wpf .wpf-specs-box{grid-column:span 2;order:21;align-self:start}
  #modal-ws #wpf .wpf-specs-box[open]{grid-column:1/-1}
  #modal-ws #wpf .ws-error{order:29}
  #modal-ws #wpf>.ws-actions{order:30}
  #modal-ws #wpf .mini-title{margin:0 0 6px;font-size:13px;font-weight:500;color:var(--text-secondary)}
}
@media (min-width:1000px){#modal-ws #wpf details.wpf-more[open]{grid-column:span 2}#modal-ws #wpf .wpf-more .ws-form{grid-template-columns:repeat(2,minmax(0,1fr))}}
.upi-done h4{font-size:16px;font-weight:600;margin-bottom:6px}.upi-done p{font-size:14px;margin-bottom:8px}.upi-done .ws-actions{margin-top:12px}
/* Row actions as small secondary buttons (DESIGN.md): bordered, text colour, clearly separate */
.row-actions>*+*{margin-left:6px}
.row-actions .text-btn,.row-actions .btn-sm{display:inline-flex;align-items:center;min-height:28px;padding:3px 10px;border:1px solid var(--border-hover);border-radius:6px;background:var(--bg-surface);color:var(--text-primary);font-size:13px;font-weight:500;text-decoration:none}
.row-actions .text-btn:hover,.row-actions .btn-sm:hover{background:var(--bg-base);text-decoration:none}
.row-actions .text-btn.danger,.row-actions .text-btn.danger-link,.row-actions .text-btn[data-delete],.row-actions .text-btn[data-remove]{color:var(--red)}
/* Private mode */
.pk-list{margin:8px 0 8px 18px;font-size:14px;line-height:20px;color:var(--text-secondary)}.pk-list li{margin:4px 0}
.pk-warn{font-size:14px;color:var(--red);background:var(--red-weak);border-radius:6px;padding:8px 12px}
.pk-step{margin-top:12px}
.pk-code{display:block;margin-top:6px;padding:10px 12px;border:1px dashed var(--border-hover);border-radius:6px;background:var(--bg-base);font-family:var(--font-mono);font-size:14px;letter-spacing:.5px;word-break:break-all;user-select:all}
.locked{color:var(--text-tertiary);font-style:italic}
.pk-qr{display:grid;place-items:center;margin:12px 0;padding:12px;background:#fff;border-radius:8px}.pk-qr svg{width:240px;height:240px}
/* Bill lines with GST details: name · qty · price · HSN · rate · remove */
.ws-line.ws-line-gst{grid-template-columns:1fr 56px 90px 88px 92px 26px}
@media (max-width:760px){.ws-line.ws-line-gst{grid-template-columns:1fr 56px 86px 26px}.ws-line.ws-line-gst [data-l="hsn"],.ws-line.ws-line-gst [data-l="rate"]{grid-column:span 2;order:5}}
#wb-taxline{display:block;font-size:12px;margin-top:2px}
/* Voice assistant */
.va-fab{position:fixed;right:22px;bottom:22px;z-index:60;display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:11px 18px 11px 15px;border-radius:999px;background:var(--accent);color:#fff;font-weight:650;font-size:13px;box-shadow:var(--shadow-pop)}.va-fab .icon{width:19px;height:19px}.va-fab:hover{background:var(--accent-hover)}
.va-panel{position:fixed;right:22px;bottom:22px;z-index:70;width:min(400px,calc(100vw - 32px));height:min(560px,calc(100vh - 110px));display:flex;flex-direction:column;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:12px;box-shadow:var(--shadow-pop);overflow:hidden}
.va-head{display:flex;align-items:center;gap:6px;padding:10px 10px 10px 16px;border-bottom:1px solid var(--border-subtle)}.va-head strong{font-size:14px;margin-right:auto}.va-lang{font-size:12px;border:1px solid var(--border-subtle);border-radius:6px;background:var(--bg-base);color:var(--text-primary);padding:5px 6px}.va-head .icon-btn{font-size:16px;width:32px;height:32px}
.va-log{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px}.va-hint{color:var(--text-secondary);font-size:13px;line-height:1.7;margin:auto 0;text-align:center}.va-hint em{color:var(--text-tertiary);font-style:normal;font-size:12px}
.va-msg{max-width:88%;padding:9px 12px;border-radius:12px;font-size:13px;line-height:1.55;overflow-wrap:anywhere}.va-me{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:4px}.va-bot{align-self:flex-start;background:var(--bg-base);border:1px solid var(--border-subtle);border-bottom-left-radius:4px}.va-err{color:var(--red);background:var(--red-weak)}.va-dots{display:inline-flex;gap:4px;padding:3px 0}.va-dots i{width:6px;height:6px;border-radius:50%;background:var(--text-tertiary);animation:va-dot 1s infinite ease-in-out}.va-dots i:nth-child(2){animation-delay:.15s}.va-dots i:nth-child(3){animation-delay:.3s}@keyframes va-dot{0%,80%,100%{opacity:.3;transform:none}40%{opacity:1;transform:translateY(-3px)}}
.va-confirm{align-self:stretch;max-width:none;background:var(--accent-subtle);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}.va-confirm p{font-weight:600;margin-bottom:8px}.va-confirm.va-yes{background:var(--green-weak);border-color:color-mix(in srgb,var(--green) 30%,transparent)}.va-confirm.va-no{opacity:.6}
.va-input{display:flex;gap:8px;align-items:center;padding:10px;border-top:1px solid var(--border-subtle)}.va-input .input-control{flex:1;min-width:0}.va-mic{flex-shrink:0;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--accent-subtle);color:var(--accent)}.va-mic .icon{width:20px;height:20px}.va-mic.on{background:var(--red);color:#fff;animation:va-pulse 1.2s ease-in-out infinite}
@keyframes va-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--red) 45%,transparent)}50%{box-shadow:0 0 0 9px transparent}}
@media (max-width:760px){.va-fab{right:16px;bottom:16px}.va-panel{right:0;left:0;bottom:0;width:100%;height:62vh;border-radius:14px 14px 0 0}}
.va-hf .icon{width:16px;height:16px}.va-hf.on{background:var(--accent);color:#fff;border-radius:8px}.va-done{border-left:3px solid var(--success,#1a7f37)}
/* Voice assistant — in the app's own style: a card like the other windows, the shop's orange only, the app's chips and buttons */
.va-panel{--va-ease:cubic-bezier(.2,.8,.2,1);--va-spring:cubic-bezier(.22,1.2,.36,1);width:min(380px,calc(100vw - 32px));height:min(600px,calc(100vh - 100px));
  background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:12px;box-shadow:0 24px 90px #0003;transform-origin:calc(100% - 40px) calc(100% - 24px);animation:va-open .38s var(--va-spring) both}
.va-panel.hidden{display:none}
@keyframes va-open{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
.va-head{position:relative;gap:6px;padding:16px 16px 6px 20px;border:0}
.va-title{margin-right:auto;display:inline-flex;align-items:center;gap:9px;font-size:16px;font-weight:550;letter-spacing:-.5px;color:var(--text-primary)}
.va-dot{width:8px;height:8px;border-radius:50%;background:var(--border-hover);transition:background .3s,box-shadow .3s}
.va-panel:has(.va-orb.listening) .va-dot,.va-panel:has(.va-orb.speaking) .va-dot{background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent)}
.va-icon{width:29px;height:29px;border-radius:6px;display:grid;place-items:center;color:var(--text-secondary);background:var(--bg-base);transition:color .2s,background .2s}
.va-icon:hover{color:var(--text-primary);background:var(--bg-card-hover)}
.va-icon svg{width:16px;height:16px;fill:currentColor;stroke:currentColor;stroke-width:2;stroke-linecap:round}
#va-close svg{fill:none}
.va-menu{position:absolute;top:50px;right:16px;z-index:3;width:228px;padding:6px;border-radius:8px;background:var(--bg-card);border:1px solid var(--border-subtle);box-shadow:var(--shadow-pop);animation:va-menu .22s var(--va-ease) both;transform-origin:top right}
.va-menu[hidden]{display:none}
@keyframes va-menu{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.va-row{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:38px;padding:8px 10px;border-radius:6px;background:none;font-size:13px;font-weight:500;color:var(--text-primary);text-align:left}
.va-row:hover{background:var(--bg-base)}
.va-row select{border:0;background:none;color:var(--text-secondary);font:500 13px var(--font-sans);text-align:right;cursor:pointer;max-width:120px}
.va-switch{position:relative;flex:none;width:32px;height:18px;border-radius:999px;background:var(--border-hover);transition:background .2s}
.va-switch::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #0000004d;transition:transform .25s var(--va-spring)}
.va-row[aria-checked="true"] .va-switch{background:var(--accent)}.va-row[aria-checked="true"] .va-switch::after{transform:translateX(14px)}
.va-stage{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:10px;padding:4px 24px 8px;text-align:center}
.va-stage>:first-child{margin-top:auto}.va-stage>:last-child{margin-bottom:auto}
.va-panel .va-log{display:none}.va-panel.show-log .va-log{display:flex;animation:va-fade .25s var(--va-ease)}.va-panel.show-log .va-stage{display:none}
@keyframes va-fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
/* The orb: the shop's orange only — light, true and deep tones drifting inside a sphere; --lvl (0…1) is the voice */
.va-orb{--lvl:0;--spin:18s;position:relative;width:120px;height:120px;flex-shrink:0;margin:6px 0 12px;transition:transform .45s var(--va-spring)}
.va-orb-body{position:absolute;inset:0;border-radius:50%;overflow:hidden;isolation:isolate;
  background:radial-gradient(circle at 50% 110%,color-mix(in srgb,var(--accent) 75%,#000) 0,var(--accent) 62%,color-mix(in srgb,var(--accent) 80%,#fff) 100%);
  transform:scale(calc(1 + var(--lvl) * .12));transition:transform .09s linear;box-shadow:inset 0 -12px 28px color-mix(in srgb,var(--accent) 50%,#000),inset 0 10px 20px #ffffff38,0 18px 40px -18px color-mix(in srgb,var(--accent) 90%,transparent)}
.va-orb-body i{position:absolute;width:80%;height:80%;border-radius:44% 56% 61% 39% / 42% 45% 55% 58%;filter:blur(12px);animation:va-blob var(--spin) linear infinite}
.va-orb-body i:nth-child(1){left:-12%;top:-10%;background:color-mix(in srgb,var(--accent) 45%,#fff);opacity:.85}
.va-orb-body i:nth-child(2){right:-16%;top:22%;background:color-mix(in srgb,var(--accent) 70%,#000);opacity:.7;animation-duration:calc(var(--spin) * 1.35);animation-direction:reverse}
.va-orb-body i:nth-child(3){left:14%;bottom:-24%;background:var(--accent-hover);opacity:.8;animation-duration:calc(var(--spin) * .8)}
.va-orb-body b{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 32% 24%,#ffffff70 0,#ffffff14 22%,transparent 46%)}
@keyframes va-blob{0%{transform:rotate(0) translate(6%,2%) scale(1)}33%{transform:rotate(120deg) translate(-4%,6%) scale(1.1)}66%{transform:rotate(240deg) translate(5%,-5%) scale(.93)}100%{transform:rotate(360deg) translate(6%,2%) scale(1)}}
.va-orb-glow{position:absolute;inset:-16%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 38%,transparent) 0,transparent 66%);
  opacity:calc(.25 + var(--lvl) * .75);transform:scale(calc(.92 + var(--lvl) * .3));transition:opacity .1s,transform .1s linear}
.va-orb-ring{position:absolute;inset:-7px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--accent) 50%,transparent);opacity:0}
.va-orb.idle{--spin:24s}.va-orb.idle .va-orb-body{animation:va-breathe 5s ease-in-out infinite}
.va-orb.listening{--spin:10s;transform:scale(1.03)}.va-orb.listening .va-orb-ring{animation:va-ring 1.9s var(--va-ease) infinite}
.va-orb.thinking{--spin:3.5s;transform:scale(.95)}
.va-orb.thinking .va-orb-ring{opacity:1;border-color:transparent;border-top-color:var(--accent);animation:va-spin .9s linear infinite}
.va-orb.speaking{--spin:7s}
@keyframes va-breathe{0%,100%{transform:scale(.98)}50%{transform:scale(1.02)}}
@keyframes va-ring{0%{opacity:.75;transform:scale(1)}100%{opacity:0;transform:scale(1.3)}}
@keyframes va-spin{to{transform:rotate(360deg)}}
.va-state{min-height:18px;margin:0;font-size:12px;font-weight:500;color:var(--text-tertiary)}
.va-you{min-height:20px;margin:0;max-width:100%;font-size:13px;line-height:1.5;color:var(--text-secondary);overflow-wrap:anywhere}
.va-you:not(:empty)::before{content:"“"}.va-you:not(:empty)::after{content:"”"}
.va-says{width:100%;display:flex;flex-direction:column;align-items:center;gap:12px;min-height:52px}
.va-says .va-msg{align-self:center;max-width:100%;padding:0;border:0;background:none;border-radius:0;font-size:18px;line-height:1.45;font-weight:600;letter-spacing:-.3px;color:var(--text-primary);text-align:center}
.va-says .va-err{color:var(--red);background:none}.va-says .va-done{border:0}
.va-w{display:inline-block;animation:va-word .42s var(--va-ease) backwards;animation-delay:calc(var(--i) * 26ms);transition:color .18s,opacity .18s}
@keyframes va-word{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.va-karaoke .va-w{color:var(--text-tertiary)}.va-karaoke .va-w.said{color:var(--text-primary)}
.va-says .va-confirm{width:100%;padding:16px;border-radius:8px;font-size:15px;background:var(--accent-subtle);border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);animation:va-fade .3s var(--va-ease)}
.va-says .va-confirm p{margin:0 0 14px}.va-says .ws-buttons{justify-content:center;gap:8px}.va-says .va-offer{margin-top:14px;animation:va-fade .3s var(--va-ease) .2s both}
.va-says .va-confirm.va-yes{background:var(--green-weak);border-color:color-mix(in srgb,var(--green) 30%,transparent)}.va-says .va-confirm.va-no{opacity:.6}
.va-says .va-msg .small-link{font-size:13px;font-weight:600;margin-left:4px;letter-spacing:0}
.va-tips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:12px}
.va-tip{display:inline-flex;align-items:center;min-height:34px;padding:0 13px;border:1px solid var(--border-subtle);border-radius:999px;background:var(--bg-card);color:var(--text-primary);font:600 12.5px/18px var(--font-sans);
  animation:va-fade .35s var(--va-ease) both;transition:border-color .15s}
.va-tip:nth-child(2){animation-delay:.04s}.va-tip:nth-child(3){animation-delay:.08s}.va-tip:nth-child(4){animation-delay:.12s}
.va-tip:hover{border-color:var(--border-hover)}
.va-tips-more{width:100%;margin:6px 0 0;font-size:12px;color:var(--text-tertiary)}
/* Controls: one round orange mic between two quiet buttons */
.va-input{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:20px;padding:10px 16px 18px;border-top:0}
.va-input #va-key{justify-self:end}.va-input .va-end{justify-self:start}
.va-input .input-control,.va-input .va-send{display:none}
.va-mic{--lvl:0;position:relative;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--accent);box-shadow:0 10px 24px -10px color-mix(in srgb,var(--accent) 85%,transparent);transition:transform .3s var(--va-spring),background .2s}
.va-mic:hover{background:var(--accent-hover);transform:scale(1.04)}.va-mic:active{transform:scale(.95)}
.va-mic .icon{width:24px;height:24px}
.va-mic::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid color-mix(in srgb,var(--accent) 40%,transparent);opacity:0;transform:scale(calc(1 + var(--lvl) * .2));transition:opacity .25s,transform .08s linear}
.va-mic.on{background:var(--accent);animation:none}.va-mic.on::before{opacity:1}
.va-mic.live:not(.on){background:var(--accent);color:#fff}
.va-side{width:40px;height:40px;border-radius:6px;display:grid;place-items:center;background:var(--bg-base);border:1px solid var(--border-subtle);color:var(--text-secondary);transition:color .15s,border-color .15s}
.va-side:hover{color:var(--text-primary);border-color:var(--border-hover)}
.va-side svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.va-end{width:auto;height:34px;padding:0 13px;font-size:12.5px;font-weight:600;color:var(--red);background:var(--red-weak);border-color:transparent;animation:va-fade .25s var(--va-ease)}
.va-panel.typing .va-input{display:flex;gap:8px;padding:12px 14px 16px;border-top:1px solid var(--border-subtle)}
.va-panel.typing .va-input .input-control{display:block;flex:1;min-width:0}
.va-panel.typing .va-input .va-send{display:inline-flex}
.va-panel.typing .va-mic{width:40px;height:40px;flex-shrink:0}.va-panel.typing .va-mic .icon{width:19px;height:19px}.va-panel.typing .va-end{display:none}
@media (max-width:760px){
  .va-panel{left:0;right:0;bottom:0;width:100%;height:min(84vh,660px);border-radius:12px 12px 0 0;border-bottom:0;transform-origin:50% 100%;animation-name:va-sheet}
  .va-panel::before{content:"";position:absolute;top:7px;left:50%;width:36px;height:4px;margin-left:-18px;border-radius:999px;background:var(--border-hover)}
  .va-says .va-msg{font-size:17px}.va-input{padding-bottom:calc(18px + env(safe-area-inset-bottom))}}
@keyframes va-sheet{from{transform:translateY(100%)}to{transform:none}}
/* The Ask button, like the app's main button */
.va-fab{background:var(--accent);box-shadow:0 12px 28px -12px color-mix(in srgb,var(--accent) 90%,transparent);transition:transform .3s var(--va-spring),background .2s}
.va-fab:hover{background:var(--accent-hover);transform:translateY(-1px)}
@media (prefers-reduced-motion:reduce){.va-panel,.va-menu,.va-w,.va-tip,.va-orb-body,.va-orb-body i,.va-orb-ring,.va-says .va-confirm,.va-says .va-offer{animation:none!important}.va-orb-body,.va-orb-glow,.va-mic::before{transition:none}}
@media (prefers-reduced-motion:reduce){.va-mic.on{animation:none}}
body:not(.in-workshop) .va-fab,body:not(.in-workshop) .va-panel{display:none}
body:has(.modal-layer.open) .va-fab{display:none}
/* Room under the Workshop for the Ask button; a round icon button on phones */
body.in-workshop .main-wrapper{padding-bottom:88px}
@media (max-width:760px){.va-fab{width:52px;height:52px;min-height:0;padding:0;justify-content:center}.va-fab span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.va-fab .icon{width:22px;height:22px}}
/* Photo studio */
.studio{border:0;padding:0;width:min(560px,100vw);max-width:100vw;max-height:100dvh;border-radius:12px;background:var(--bg-card);color:var(--text-primary);box-shadow:var(--shadow-pop);display:flex;flex-direction:column}
.studio:not([open]){display:none}.studio::backdrop{background:#0009}
.studio-head{display:flex;align-items:center;justify-content:space-between;padding:12px 12px 12px 18px;border-bottom:1px solid var(--border-subtle)}.studio-head .icon-btn{font-size:20px}
.studio-body{padding:14px 16px;overflow:auto;display:flex;flex-direction:column;gap:12px}
.studio-start{display:flex;flex-direction:column;gap:12px;font-size:13px;line-height:1.6}
.studio-busy{display:flex;flex-direction:column;align-items:center;gap:10px;padding:30px 10px;text-align:center;font-size:13px;color:var(--text-secondary)}
.studio-bar{width:220px;height:6px;border-radius:6px;background:var(--bg-base);overflow:hidden}.studio-bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .2s}
.studio-edit{display:flex;flex-direction:column;gap:10px}
.studio-tabs,.studio-seg{display:inline-flex;align-self:flex-start;border:1px solid var(--border-subtle);border-radius:8px;overflow:hidden}
.studio-tabs button,.studio-seg button{background:var(--bg-card);padding:7px 14px;font-size:13px;font-weight:600;color:var(--text-secondary)}
.studio-tabs button.on,.studio-seg button.on{background:var(--accent-subtle);color:var(--accent)}
.studio-stage{display:grid;place-items:center;background:var(--bg-base);border:1px solid var(--border-subtle);border-radius:10px;overflow:hidden}
.studio-stage canvas{display:block;max-width:100%;max-height:min(52dvh,480px);height:auto;width:auto;touch-action:none}
.studio-stage canvas.fixing{cursor:crosshair}
.studio-fix{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.studio-size{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-secondary)}.studio-size input{width:110px}
.studio-opts{display:flex;flex-wrap:wrap;gap:6px 16px}.studio-opts .check-row{font-size:13px}
.studio-foot{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid var(--border-subtle)}
@media (max-width:760px){.studio{width:100vw;height:100dvh;border-radius:0}.studio-body{flex:1}}
/* Broadcast: news scrolling in the top bar, between the page name and Help */
.topbar{gap:14px}.broadcast-bar{flex:1;min-width:0;display:flex;align-items:center;gap:4px;height:34px;border:1px solid var(--border-subtle);border-radius:999px;background:var(--bg-base);padding:0 4px 0 12px;overflow:hidden}
.bc-window{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 18px),transparent);mask-image:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 18px),transparent)}
.bc-track{display:inline-flex;white-space:nowrap;animation:bc-scroll var(--bc-time,20s) linear infinite;will-change:transform}
.broadcast-bar:hover .bc-track,.broadcast-bar:focus-within .bc-track{animation-play-state:paused}
.bc-run{display:inline-flex;align-items:center;gap:14px;padding-right:48px;font-size:12px;color:var(--text-secondary)}
.bc-item{display:inline-flex;align-items:center;gap:7px}.bc-item a{color:var(--accent);font-weight:650;text-decoration:none}.bc-item a:hover{text-decoration:underline}
.bc-dot{width:6px;height:6px;border-radius:50%;background:var(--blue)}.bc-offer .bc-dot{background:var(--accent)}.bc-warning .bc-dot{background:var(--amber)}.bc-warning{color:var(--text-primary);font-weight:600}
.bc-sep{color:var(--text-tertiary)}
.bc-close{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:transparent;color:var(--text-tertiary);font-size:16px;line-height:1}.bc-close:hover{background:var(--bg-card);color:var(--text-primary)}
@keyframes bc-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.bc-track{animation:none}.bc-run[aria-hidden]{display:none}.bc-window{-webkit-mask-image:none;mask-image:none;overflow-x:auto}}
@media (max-width:760px){.topbar{flex-wrap:wrap;height:auto;min-height:64px;padding-top:10px;padding-bottom:10px}.broadcast-bar{order:3;flex-basis:100%}
  /* The screen name gives way to the buttons, so the bar stays one row ("Credits & plans" pushed them down) */
  .topbar>.breadcrumb{flex:1 1 0;min-width:0}.topbar>.nav-actions{flex:none}#breadcrumb-current{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
.chat-head-end{display:flex;align-items:center;gap:8px;flex-shrink:0}
/* Reseller page and its top-bar button */
.reseller-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:20px;align-items:start}.reseller-history{max-height:70vh;overflow:auto}
@media (max-width:900px){.reseller-layout{grid-template-columns:minmax(0,1fr)}}
.nav-reseller{font-size:12px;font-weight:650;border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);background:var(--accent-subtle);color:var(--accent);border-radius:999px;padding:5px 11px;min-height:28px}.nav-reseller:hover{filter:brightness(.97)}

/* Audit fixes: red for every destructive action, a filled red confirm button, readable dark-mode colours */
.btn.danger-link,.text-btn.danger-link,.btn-outline.danger-link{color:var(--red)}
#modal-confirm .btn-danger{background:var(--red);border-color:var(--red);color:#fff}
.toast-message{border:1px solid var(--border-hover)}
.bell-count{font-size:11px;min-width:16px;height:16px}
.ws-file-wrap{position:relative;display:inline-flex}.ws-file-del{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;background:color-mix(in srgb,var(--bg-card) 88%,transparent);border:1px solid var(--border-subtle);color:var(--red);font-size:15px;line-height:1;display:grid;place-items:center;box-shadow:var(--shadow-pop)}
.ws-file-del:hover{background:var(--red-weak)}

/* Workshop 4.0: the 0016 workshop-ticket look, the same as the iPhone and Android apps.
   Jobs, orders and customers are ticket cards (number tag, status dot + word, due date); the home is a workshop board.
   Job tones: waiting amber, in repair blue, ready green, done grey, late red. Cards: hairline border, 14 radius, no shadow. */
.tone-waiting{--tone:var(--amber);--tone-weak:var(--amber-weak)}.tone-active{--tone:var(--blue);--tone-weak:var(--blue-weak)}
.tone-ready{--tone:var(--green);--tone-weak:var(--green-weak)}.tone-done{--tone:var(--text-secondary);--tone-weak:var(--bg-base)}
.tone-late{--tone:var(--red);--tone-weak:var(--red-weak)}
.tk-dot{display:inline-flex;align-items:center;gap:6px;font-size:13px;line-height:18px;font-weight:600;color:var(--tone,var(--text-secondary));white-space:nowrap}
.tk-dot::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.tk-late{display:inline-flex;align-items:center;gap:5px;font-size:12px;line-height:16px;font-weight:600;color:var(--red);white-space:nowrap}
.tk-late svg{width:13px;height:13px;flex:none}
.tk-due{font-size:12px;line-height:16px;font-weight:500;color:var(--text-secondary);white-space:nowrap}
.tk-tag{display:inline-block;font:500 12px/16px var(--font-mono);letter-spacing:.02em;color:var(--text-secondary);background:var(--bg-base);border:1px solid var(--border-subtle);border-radius:6px;padding:2px 7px;white-space:nowrap}
.tk-money{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text-primary);white-space:nowrap}
.tk-meta{font-size:12px;line-height:16px;color:var(--text-secondary)}
.tk-card{display:flex;flex-direction:column;gap:6px;width:100%;min-width:0;padding:14px 16px;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:14px;text-align:left;font:inherit;color:inherit;cursor:pointer;transition:border-color var(--transition)}
.tk-card:hover{border-color:var(--border-hover)}
.tk-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tk-row{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.tk-row-start{display:flex;align-items:center;gap:8px;min-width:0}
.tk-title{font-size:16px;line-height:22px;font-weight:600;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.tk-sub{font-size:13px;line-height:18px;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:2px;min-width:0}
.tk-foot-start{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;min-width:0}
.tk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.tk-flat{padding:10px 0;border:0;border-radius:0;background:none}
.tk-flat+.tk-flat{border-top:1px solid var(--border-subtle)}
.tk-flat:hover{border-color:var(--border-subtle)}
.tk-new{font-size:12px;font-weight:600;color:var(--amber);background:var(--amber-weak);border-radius:999px;padding:1px 8px}
.tk-avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--bg-base);border:1px solid var(--border-subtle);color:var(--text-secondary);font-weight:600;font-size:15px}
.tk-person{flex-direction:row;align-items:center;gap:12px}
.tk-person>.tk-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.tk-chips-extra{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;line-height:16px;color:var(--text-secondary)}
.tk-chips-extra .pts{color:var(--amber);font-weight:600}
.tk-chips-extra .plan{color:var(--green);font-weight:600}

/* Filter chips with counts */
.tk-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0;flex:1 1 100%;min-width:0}
.tk-chips::-webkit-scrollbar{display:none}
.tk-chip{display:inline-flex;align-items:center;gap:7px;flex:none;min-height:36px;padding:0 12px;border:1px solid var(--border-subtle);border-radius:999px;background:var(--bg-card);color:var(--text-primary);font:600 13px/18px var(--font-sans);white-space:nowrap;cursor:pointer}
.tk-chip:hover{border-color:var(--border-hover)}
.tk-chip i{width:7px;height:7px;border-radius:50%;background:var(--tone);flex:none}
.tk-chip b{font-weight:500;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.tk-chip.active{background:var(--text-primary);border-color:var(--text-primary);color:var(--bg-card)}
.tk-chip.active b{color:inherit;opacity:.75}
.tk-chip.active i{box-shadow:0 0 0 1.5px var(--bg-card)}

/* Lists shown as cards sit on the page, not inside another panel */
.ws-panel.ws-bare{background:none;border:0;padding:0;overflow:visible}
.ws-bare .ws-toolbar{padding:0;margin-bottom:14px;border-bottom:0}.ws-bare .ws-toolbar:empty{display:none}.ws-bare .ws-body{padding:0}
.ws-bare .ws-body>.ws-empty{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:14px}
.ws-bare .ws-setup{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:14px;margin-bottom:12px}
.ws-bare .ws-plan-banner{margin-bottom:12px}

/* Home: workshop board, money strip, New job, Needs you, latest jobs */
.tk-home{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:start}
.tk-home-col{display:flex;flex-direction:column;gap:12px;min-width:0}
.tk-section{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:14px;padding:16px}
.tk-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px}
.tk-section-head h3{margin:0;font-size:16px;line-height:24px;font-weight:600;color:var(--text-primary)}
.tk-section-head span,.tk-section-head .text-btn{font-size:13px;color:var(--text-secondary)}
.tk-section-head .text-btn{color:var(--accent-text);font-weight:600;background:none;border:0;padding:0;cursor:pointer}
.tk-bar{display:flex;gap:4px;height:10px;margin-bottom:14px}
.tk-bar span{border-radius:3px;background:var(--tone);min-width:6px}
.tk-bar .empty{flex:1;background:var(--border-subtle)}
.tk-stages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.tk-stage{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:4px 6px;margin:-4px -6px;border:0;border-radius:8px;background:none;font:inherit;color:inherit;cursor:pointer;text-align:left;min-width:0}
.tk-stage:hover{background:var(--bg-base)}
.tk-stage strong{font-size:22px;line-height:28px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text-primary)}
.tk-stage.zero strong{color:var(--text-tertiary)}
.tk-stage.tone-late:not(.zero) strong{color:var(--red)}
.tk-stage .tk-dot{font-weight:500;color:var(--text-secondary)}
.tk-stage .tk-dot::before{background:var(--tone)}
.tk-money-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:14px;padding:14px 0}
.tk-money-strip>*{display:flex;flex-direction:column;gap:2px;padding:0 16px;min-width:0;border:0;background:none;font:inherit;color:inherit;text-align:left}
.tk-money-strip>*+*{border-left:1px solid var(--border-subtle)}
.tk-money-strip button{cursor:pointer}
.tk-money-strip span{font-size:12px;line-height:16px;color:var(--text-secondary)}
.tk-money-strip strong{font-size:18px;line-height:24px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-money-strip strong.warn{color:var(--amber)}
@media(max-width:480px){.tk-money-strip{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:12px}.tk-money-strip>:nth-child(3){grid-column:1/-1;border-left:0;border-top:1px solid var(--border-subtle);padding-top:12px}}
.tk-new-job{width:100%;min-height:48px;font-size:15px;margin:0;border-radius:12px;gap:8px}
.tk-new-job svg{width:18px;height:18px}
.tk-quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:8px}
.tk-quick .btn{margin:0;min-height:42px;border-radius:12px;white-space:normal;text-align:center;line-height:18px;background:var(--bg-card);border:1px solid var(--border-subtle);color:var(--text-primary);gap:7px}
.tk-quick .btn:hover{border-color:var(--border-hover)}
.tk-quick .btn.good{color:var(--green)}
.tk-quick svg{width:16px;height:16px}
.tk-needs{display:flex;flex-direction:column}
.tk-need{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 0;border:0;border-top:1px solid var(--border-subtle);background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.tk-need:first-child{border-top:0;padding-top:0}
.tk-need:last-child{padding-bottom:0}
.tk-need>strong{font-size:20px;line-height:28px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--tone)}
.tk-need.zero>strong{color:var(--text-tertiary)}
.tk-need>span{display:flex;flex-direction:column;min-width:0}
.tk-need b{font-size:14px;line-height:20px;font-weight:500;color:var(--text-primary)}
.tk-need small{font-size:12px;line-height:16px;color:var(--text-secondary)}
.tk-need>svg{width:16px;height:16px;color:var(--text-tertiary)}
.tk-need:hover b{color:var(--accent-text)}
.tk-home-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.tk-home-head h2{margin:0;font-size:24px;line-height:32px;font-weight:650;letter-spacing:-.2px}
.tk-home-head p{margin:0;font-size:13px;color:var(--text-secondary)}
/* The old stat tiles are replaced by the board; the strip keeps only the branch picker */
#ws-stats.tk-stats-min{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
#ws-stats.tk-stats-min:empty{display:none}

/* Job page: ticket header, progress line, money card, next step */
.tk-job{display:flex;flex-direction:column;gap:16px}
.tk-job-head{display:flex;flex-direction:column;gap:6px}
.tk-job-head h2{margin:0;font-size:24px;line-height:32px;font-weight:650;letter-spacing:-.2px;color:var(--text-primary)}
.tk-job-head .tk-row-start{flex-wrap:wrap;gap:6px 14px}
.tk-job-head .tk-dot{font-size:14px}
.tk-job-head .tk-late{font-size:14px}
.tk-job-head .tk-late svg{width:15px;height:15px}
.tk-job-who{font-size:14px;color:var(--text-secondary);display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.tk-job-who a{color:var(--accent-text)}
.tk-job-who .status-pill{display:inline-flex}
.tk-label{font-size:13px;font-weight:600;color:var(--text-secondary);margin:0 0 8px}
.tk-progress{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:16px 8px 12px;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:14px}
.tk-step{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;line-height:16px;color:var(--text-secondary);text-align:center}
.tk-step::before{content:"";position:absolute;top:11px;right:50%;width:100%;height:2px;background:var(--border-subtle);z-index:0}
.tk-step:first-child::before{display:none}
.tk-step.done::before,.tk-step.now::before{background:var(--tone)}
.tk-step i{position:relative;z-index:1;width:24px;height:24px;border-radius:50%;border:2px solid var(--border-hover);background:var(--bg-card);display:grid;place-items:center;color:#fff}
.tk-step.done i,.tk-step.now i{background:var(--tone);border-color:var(--tone)}
.tk-step i svg{width:14px;height:14px}
.tk-step.now{color:var(--text-primary);font-weight:600}
.tk-step.done{color:var(--text-primary)}
.tk-cancelled{font-size:13px;color:var(--text-secondary);background:var(--bg-base);border:1px solid var(--border-subtle);border-radius:14px;padding:12px 16px}
.tk-moneycard{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:14px;padding:0 16px}
.tk-moneycard>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 0;font-size:14px;color:var(--text-secondary)}
.tk-moneycard>div+div{border-top:1px solid var(--border-subtle)}
.tk-moneycard strong{font-weight:500;color:var(--text-primary);font-variant-numeric:tabular-nums;text-align:right}
.tk-moneycard .big strong{font-size:22px;line-height:28px;font-weight:600}
.tk-moneycard .big small{font-size:12px;color:var(--text-secondary);font-weight:500;margin-right:8px}
.tk-detailcard{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:14px;padding:4px 16px}
.tk-detailcard .ws-kv:last-child{border-bottom:0}
.tk-actionbar{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap}
.tk-actionbar .btn{margin:0;min-height:44px;border-radius:12px}
.tk-actionbar .tk-next{flex:1 1 200px;font-size:15px}
.tk-actionbar .tk-icon{width:44px;padding:0;flex:none}
.tk-actionbar .tk-icon svg{width:18px;height:18px}
.tk-actionbar .btn-outline{background:var(--bg-card)}
.tk-change{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:14px;padding:14px 16px}
.tk-change[hidden]{display:none}
.tk-job .ws-two{gap:16px}
.tk-job .ws-buttons .btn{margin:0}
.tk-job-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.tk-job-cols>div{display:flex;flex-direction:column;gap:16px;min-width:0}

@media (max-width:900px){.tk-home{grid-template-columns:minmax(0,1fr)}.tk-job-cols{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){
  .tk-grid{grid-template-columns:minmax(0,1fr);gap:10px}
  .tk-money-strip strong{font-size:15px;line-height:22px}
  .tk-money-strip>*{padding:0 10px}
  .tk-stage strong{font-size:20px}
  .tk-actionbar .tk-next{flex-basis:0}
  .ws-bare .ws-toolbar{margin-bottom:12px}
}
.tk-card-new{border-color:color-mix(in srgb,var(--amber) 45%,var(--border-subtle))}
@media (max-width:760px){.mode-smart .ws-tabs{grid-template-columns:repeat(4,1fr)}.mode-smart .ws-tabs .ws-tab-sep{display:none}}
.tk-home{grid-template-areas:"main needs" "latest needs"}.tk-home>:nth-child(1){grid-area:main}.tk-home>:nth-child(2){grid-area:needs}.tk-home>.tk-home-latest{grid-area:latest}
@media (max-width:900px){.tk-home{grid-template-areas:"main" "needs" "latest"}}
@media (max-width:640px){.ws-bare .ws-toolbar .ws-search{flex:1 1 100%;max-width:none}.ws-bare .ws-toolbar #ws-new-job{margin-left:auto}}
@media (max-width:640px){.tk-actionbar{flex-wrap:nowrap}.tk-actionbar .tk-next{min-width:0}.tk-actionbar #ws-change-status:not(.tk-next){padding:0 12px;flex:none}}

/* Home page: search every open shop */
.home-search{display:flex;gap:8px;margin:0 0 16px}.home-search .search-field{max-width:none;padding:0 12px;background:var(--bg-card)}.home-search .search-field>input{font-size:14px;padding:9px 0}
.home-search:has(input:focus-visible) .search-field{outline:2px solid var(--accent)}
.home-results{margin-bottom:24px}
.home-shop-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px;margin-bottom:12px}.home-shop-list:empty{display:none}
.home-shop-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--border-subtle);border-radius:8px;background:var(--bg-card);color:var(--text-primary);text-decoration:none}
.home-shop-row:hover{background:var(--bg-card-hover)}.home-shop-row strong{display:block;font-size:14px}.home-shop-row small{display:block;color:var(--text-secondary);font-size:12px;margin-top:2px}.home-shop-row>small{flex-shrink:0;margin:0}
.home-info .home-card-shop{margin-top:2px}
@media(max-width:760px){.home-search .btn{padding:7px 12px}}
/* Side list: Products and Used phones are items of their own (they open those Workshop screens) */
body.is-guest .user-only{display:none!important}
/* Counter sale */
.sale-scan{flex:1;min-width:240px}.sale-scan .input-control{flex:1}
.sale-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
.sale-pay{padding:16px;display:flex;flex-direction:column;gap:12px}
.sale-buttons{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}.sale-buttons .btn{min-height:48px;font-size:15px}
.sale-qty{display:inline-flex;align-items:center;gap:8px}.sale-qty b{min-width:20px;text-align:center}
.sale-price{width:90px}
.sale-imei{margin-top:6px;width:100%;max-width:280px;font-size:13px}
.sale-qr{display:flex;flex-direction:column;align-items:center;gap:6px}.sale-qr svg{width:150px;height:150px;background:#fff;padding:6px;border-radius:8px}.sale-qr small{color:var(--text-secondary);font-size:12px;text-align:center}
@media(max-width:860px){.sale-grid{grid-template-columns:1fr}}
/* Day closing */
.closing-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start;margin-top:12px}.closing-grid>*{min-width:0}
.closing-drawer{padding:16px;display:flex;flex-direction:column;gap:10px}
.cl-line{display:flex;justify-content:space-between;gap:12px;font-size:14px}.cl-line b{font-variant-numeric:tabular-nums;white-space:nowrap}
.cl-total{border-top:1px solid var(--border-subtle);padding-top:8px;font-weight:600}.cl-total b.good{color:var(--green)}.cl-total b.bad{color:var(--red)}
.cl-note-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px;margin-top:8px}.cl-note-grid label{display:flex;align-items:center;gap:6px;font-size:13px;min-width:0;white-space:nowrap}.cl-note-grid .input-control{flex:1;min-width:0;width:auto}
@media(max-width:860px){.closing-grid{grid-template-columns:minmax(0,1fr)}}
/* Customer credit */
.tk-chips-extra .due{color:var(--amber);font-weight:600}.bad-text{color:var(--red)}
/* Side list: Orders with a count of what needs the shop */
.nav-count{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--accent);color:#fff;font-size:12px;font-weight:600;line-height:20px;text-align:center;font-variant-numeric:tabular-nums}
/* Side list: branch switcher */
.nav-branches{display:flex;flex-direction:column;gap:2px;margin-top:14px;padding-top:12px;border-top:1px solid var(--border-subtle)}
.nav-branches-title{font-size:12px;color:var(--text-tertiary);padding:0 13px 4px}
.nav-branch{display:block;text-align:left;background:transparent;padding:7px 13px;border-radius:6px;color:var(--text-secondary);font-size:13px}
.nav-branch:hover{background:var(--bg-void)}.nav-branch.active{background:var(--accent-subtle);color:var(--accent);font-weight:600}
.branch-table td.best{color:var(--green);font-weight:600}

/* Audit fixes: numbers stay on one line (they shrink to fit their box), the job's main button is never cut off on a
   phone, and nothing hides under the round Ask button at the bottom right */
.ws-stat{container-type:inline-size}
.ws-stat strong{word-break:normal;white-space:nowrap;font-size:min(22px,13.5cqi)}
#ws-app{padding-bottom:76px}
@media (max-width:760px){.tk-actionbar{flex-wrap:wrap}.tk-actionbar .tk-next{flex:1 1 100%;order:-1;min-width:0}.tk-actionbar #ws-change-status:not(.tk-next){flex:1 1 auto}}
/* Counter mode: the "Show on counter" menu */
.ws-buttons{position:relative}.counter-menu,.row-menu{position:absolute;z-index:40;min-width:220px;padding:6px;display:grid;gap:2px;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:8px;box-shadow:0 12px 32px #0000002e}.counter-menu button,.row-menu button{text-align:left;padding:9px 12px;border-radius:6px;background:transparent;color:var(--text-primary);font-size:14px;font-weight:500}.counter-menu button:hover,.counter-menu button:focus-visible,.row-menu button:hover,.row-menu button:focus-visible{background:var(--accent-subtle);color:var(--accent)}.counter-menu-head{padding:6px 12px 2px;font-size:12px;color:var(--text-secondary);font-weight:600}
/* Money owed: on a phone the amount and buttons go under the name */
@media(max-width:600px){.credit-list .mini-row{flex-wrap:wrap}.credit-list .mini-row>.ws-buttons{width:100%;justify-content:flex-start;flex-wrap:wrap}}
/* Phones: tighter table cells so a bill's Amount column fits without sideways scrolling */
@media(max-width:480px){.clean-table th{padding:8px 10px}.clean-table td{padding:11px 10px}}
/* Phones: a card's badge or button goes under its title instead of squeezing it into a narrow column */
@media(max-width:520px){.panel-heading{flex-wrap:wrap;row-gap:8px}.panel-heading>div:first-child{flex:1 1 200px;min-width:0}}
/* Firmware: how to update or restore an iPhone with Apple's tool */
.fw-steps{display:grid;gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid var(--border-subtle)}.fw-steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:12px}.fw-steps section{border:1px solid var(--border-subtle);border-radius:8px;padding:12px 14px;background:var(--bg-card)}.fw-steps h4{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;font-weight:600;margin-bottom:8px}.fw-steps ol{margin:0;padding-left:18px;display:grid;gap:6px;font-size:13px;line-height:1.5;color:var(--text-primary)}
/* iPhone panic reports */
.panic-input{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px;margin:4px 0 14px}.panic-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:150px;padding:18px;border:2px dashed var(--border-hover);border-radius:10px;background:var(--bg-base);cursor:pointer;text-align:center}.panic-drop.is-over,.panic-drop:hover{border-color:var(--accent);background:var(--accent-subtle)}.panic-drop:focus-within{outline:2px solid var(--accent);outline-offset:2px}.panic-paste{display:grid;gap:8px}.panic-paste textarea{min-height:110px;font-family:var(--font-mono);font-size:12px;resize:vertical}.panic-help{margin-bottom:14px;font-size:13px}.panic-help summary{cursor:pointer;font-weight:600}.panic-help ol{margin:8px 0;padding-left:20px;display:grid;gap:6px}.panic-help .mono{word-break:break-all}.panic-result{display:grid;gap:12px}.panic-summary{padding:10px 14px;border-radius:8px;background:var(--accent-subtle)}.panic-card{border:1px solid var(--border-subtle);border-radius:10px;padding:14px 16px;background:var(--bg-card);display:grid;gap:10px}.panic-card header{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}.panic-finding{display:grid;gap:4px;padding-top:8px;border-top:1px solid var(--border-subtle)}.panic-finding-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.panic-finding ol{margin:4px 0 0;padding-left:18px;display:grid;gap:3px;font-size:13px}.panic-finding p{margin:0;font-size:13px}.panic-raw{white-space:pre-wrap;word-break:break-all;font-family:var(--font-mono);font-size:12px;background:var(--bg-base);padding:10px;border-radius:6px;max-height:240px;overflow:auto}.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.panic-page{padding:0 0 24px}.panic-page .panic-input,.panic-page .panic-help,.panic-page .panic-result{margin-left:23px;margin-right:23px}@media (max-width:640px){.panic-page .panic-input,.panic-page .panic-help,.panic-page .panic-result{margin-left:16px;margin-right:16px}}
/* Recovery / DFU walkthrough */
.ios-mode-body{display:grid;gap:12px;padding:4px 0 6px}.ios-mode-tabs{justify-self:start}.ios-mode-family{display:grid;gap:4px;font-size:13px;color:var(--text-secondary)}.ios-mode-steps{margin:0;padding-left:0;list-style:none;display:grid;gap:6px;counter-reset:st}.ios-mode-steps li{counter-increment:st;display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;padding:9px 12px;border:1px solid var(--border-subtle);border-radius:8px;font-size:14px}.ios-mode-steps li::before{content:counter(st);display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--bg-base);font-size:12px;font-weight:600}.ios-mode-steps li em{font-style:normal;font-weight:600;color:var(--text-secondary)}.ios-mode-steps li.is-now{border-color:var(--accent);background:var(--accent-subtle)}.ios-mode-steps li.is-now em{color:var(--accent);font-size:18px}.ios-mode-steps li.is-done{opacity:.55}
.ios-mode-body .ws-buttons{position:sticky;bottom:-1px;z-index:1;padding:10px 0;background:var(--bg-card);border-top:1px solid var(--border-subtle)}
/* 0016 Helper */
#helper-state{align-self:center;font-size:12px}.helper-job-step{font-weight:600;margin:6px 0 10px}.helper-job-track{height:10px;border-radius:999px;background:var(--bg-base);overflow:hidden;border:1px solid var(--border-subtle)}.helper-job-track span{display:block;height:100%;width:2%;background:var(--accent);transition:width .4s ease}.helper-job-track.is-busy span{width:30%!important;animation:helper-busy 1.4s ease-in-out infinite}@keyframes helper-busy{0%{transform:translateX(-100%)}100%{transform:translateX(340%)}}@media (prefers-reduced-motion:reduce){.helper-job-track.is-busy span{animation:none}}#helper-job-msg{margin-top:12px}
.fw-install{margin-top:6px}
.check-row{cursor:pointer}#modal-check .compare-table td{white-space:normal;word-break:break-word;color:var(--text-primary)}#modal-check .modal-actions{display:flex;justify-content:flex-end;margin-top:14px}
.fw-local{border:1px solid var(--border-subtle);border-radius:8px;padding:12px 14px;margin:0 0 14px;background:var(--bg-card-hover)}.fw-local h4{font-size:13px;font-weight:600;margin:0 0 8px}.fw-local-list{list-style:none;margin:0 0 8px;padding:0}.fw-local-list li{padding:8px 0;border-top:1px solid var(--border-subtle);display:flex;flex-direction:column;gap:5px}.fw-local-list li:first-child{border-top:0;padding-top:0}.fw-local-file{word-break:break-all}.fw-local .ws-buttons{margin-top:2px}.fw-install .btn{white-space:nowrap}
.fw-local-actions{display:flex;flex-wrap:wrap;gap:6px 18px}
.log-tools{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}.log-tools .input-control{flex:1 1 220px;min-width:0}.log-body{height:min(56vh,520px);overflow:auto;margin:0;padding:10px 12px;border:1px solid var(--border-subtle);border-radius:8px;background:var(--bg-base);font:11px/1.55 var(--font-mono);white-space:pre-wrap;word-break:break-word;color:var(--text-secondary)}.log-body mark{background:var(--amber-weak);color:var(--amber)}.log-body .log-bad{color:var(--red)}
.offline-bar{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:60;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;max-width:calc(100% - 32px);padding:10px 16px;border-radius:8px;background:var(--amber-weak);color:var(--text-primary);border:1px solid var(--amber);box-shadow:var(--shadow-pop);font-size:12px}.offline-bar.is-bad{background:var(--red-weak);border-color:var(--red)}.offline-bar .text-btn{color:var(--accent);font-weight:600}.offline-list{list-style:none;margin:12px 0 0;padding:0}.offline-list li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid var(--border-subtle);font-size:13px}.offline-list li.is-bad strong{color:var(--red)}
.ho-totals{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:8px 0 14px}.ho-totals>div{border:1px solid var(--border-subtle);border-radius:8px;padding:12px 14px;background:var(--bg-card)}.ho-totals span{display:block;font-size:12px;color:var(--text-secondary)}.ho-totals strong{font-size:20px;font-weight:600;letter-spacing:-.4px}.ho-approvals{list-style:none;margin:8px 0 0;padding:0}.ho-approval{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding:12px 0;border-top:1px solid var(--border-subtle)}.ho-approval p{margin:4px 0 2px;font-size:13px}
.android-read{display:flex;flex-direction:column;gap:6px;align-items:flex-start}.android-reasons{margin:6px 0 0 18px;font-size:12px}
.ff-device{display:flex;gap:6px}.ff-device .active{background:var(--accent-subtle);border-color:var(--accent);color:var(--accent-text)}.ff-body{padding:0 23px 23px}.ff-symptoms{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}.ff-symptoms .btn{justify-content:flex-start;white-space:normal;text-align:left;min-height:48px}.ff-head{display:flex;align-items:center;gap:14px;margin-bottom:10px}.ff-head h3{font-size:16px;font-weight:600}.ff-trail{margin:0 0 12px 18px;font-size:13px}.ff-trail li{margin-bottom:4px}.ff-step,.ff-result{border:1px solid var(--border-subtle);border-radius:8px;padding:16px;background:var(--bg-card-hover);margin-bottom:14px}.ff-q{font-size:15px;font-weight:550;margin-bottom:10px}.ff-result{border-color:var(--accent)}.ff-result h3{font-size:18px;margin:2px 0 8px}.ff-result ol{margin:8px 0 12px 18px;font-size:13px}.ff-side{border-top:1px solid var(--border-subtle);padding-top:12px;margin-top:12px;font-size:13px}.ff-side h4{font-size:13px;font-weight:600;margin-bottom:6px}.ff-side ul{margin:4px 0 0 18px}.ff-side .ws-inline{margin:6px 0}
.ios-update-offer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;width:100%;margin-top:10px;padding:12px 14px;border:1px solid var(--accent);border-radius:8px;background:var(--accent-subtle);font-size:13px}
.adz-extras{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:8px}.adz-group{display:flex;flex-direction:column;gap:4px;font-size:12px}.adz-group strong{font-size:12px;margin-bottom:2px}
.tb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin-bottom:16px}.tb-tile{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:84px;padding:12px;border:1px solid var(--border-subtle);border-radius:8px;background:var(--bg-card);text-align:left}.tb-tile strong{font-size:16px}.tb-tile small{color:var(--text-tertiary);font-size:12px}.tb-tile.busy{border-color:var(--amber);background:var(--amber-weak)}.tb-tile.busy span{font-weight:600}
.tb-order{display:grid;grid-template-columns:1.2fr 1fr;gap:16px}.tb-menu-list{max-height:52vh;overflow:auto;margin-top:8px}.tb-cat h4{font-size:12px;color:var(--text-tertiary);margin:10px 0 6px}.tb-item{display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px;margin:0 6px 6px 0;padding:8px 10px;min-width:110px;border:1px solid var(--border-subtle);border-radius:6px;background:var(--bg-card);text-align:left;font-size:13px}.tb-item small{color:var(--text-secondary)}.tb-lines{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}.tb-line{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;font-size:13px}.tb-qty{display:inline-flex;align-items:center;gap:8px}.tb-qty button{width:28px;height:28px;border:1px solid var(--border-subtle);border-radius:6px;background:var(--bg-card)}.tb-total{display:flex;justify-content:space-between;border-top:1px solid var(--border-subtle);padding-top:8px;margin:6px 0 10px;font-size:15px}.tb-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}.tb-actions select{width:auto}
@media (max-width:760px){.tb-order{grid-template-columns:1fr}.tb-menu-list{max-height:34vh}}
#kot-print{display:none}
@media print{body.printing-kot>*{display:none!important}body.printing-kot #kot-print{display:block!important;width:72mm;font:14px/1.4 monospace;color:#000}#kot-print h2{font-size:18px;margin:0 0 4px}#kot-print table{width:100%;border-collapse:collapse;margin-top:6px}#kot-print td{padding:3px 0;vertical-align:top;font-size:15px}#kot-print td.q{width:42px;font-weight:700}#kot-print .n{border-top:1px dashed #000;margin-top:6px;padding-top:4px}}
/* Trades (workshop-trades.js): measurements, cake details */
.ws-trade{border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:10px 12px;margin:0;min-width:0}
.ws-trade legend{padding:0 6px;font-weight:600;color:var(--text-secondary)}
.ws-measure-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.ws-measure-grid .ws-field span{font-size:12px}
/* Mobile shop (workshop-phones.js): the IMEI under a bill line, accessories that fit the phone */
.ws-line [data-l="imei"]{grid-column:1/-1;order:9}
.chip-add.fits{border-style:solid;border-color:var(--accent);color:var(--accent-text)}
.chip.active{border-color:var(--accent);color:var(--accent-text);background:var(--accent-subtle)}
.chip{border:1px solid var(--border-hover);background:var(--bg-base);border-radius:99px;padding:5px 11px;font-size:13px;color:var(--text-primary);cursor:pointer}
.chip:hover{border-color:var(--accent)}
/* Repair bench (workshop-repair.js): OK / Fault / Could not test on each check */
.wr-pick{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;font-size:13px;cursor:pointer}
.wr-pick input{margin:0}
.wr-bulk{grid-template-columns:1fr 150px 1.4fr}
@media (max-width:760px){.wr-bulk{grid-template-columns:1fr}}
/* Board map (board-map.js): boards, chips, connectors; the likely faulty parts glow */
.bm-svg{width:100%;max-width:420px;height:auto;display:block;margin:0 auto;touch-action:manipulation}
.bm-board rect{fill:#1f5c3a;stroke:#2f7d52;stroke-width:1.2}
.bm-board text{fill:#cfe9d9;font-size:7px;font-family:var(--font-sans)}
.bm-part{cursor:pointer;outline:none}
.bm-part rect{transition:fill .2s,stroke .2s,opacity .2s}
.bm-part.chip rect{fill:#2b2f36;stroke:#6b7480;stroke-width:.8}
.bm-part.conn rect{fill:#c9a24a;stroke:#8a6d25;stroke-width:.8}
.bm-part.area rect{fill:#24704a;stroke:#2f7d52;stroke-dasharray:3 2}
.bm-part.frame rect{fill:none;stroke:#9ad1b0;stroke-width:1;stroke-dasharray:4 3}
.bm-part text{fill:#f2f4f6;font-size:5.2px;font-family:var(--font-sans);pointer-events:none}
.bm-part.conn text{fill:#2a2008}
.bm-part:hover rect,.bm-part:focus rect,.bm-part.picked rect{stroke:#fff;stroke-width:1.4}
.bm-part.hot rect{fill:var(--accent);stroke:#fff;stroke-width:1.4;animation:bm-glow 1.4s ease-in-out infinite}
.bm-part.hot text{fill:#fff;font-weight:700}
.bm-part.frame.hot rect{fill:none;stroke:var(--accent);stroke-width:2.5}
@keyframes bm-glow{0%,100%{opacity:1;filter:drop-shadow(0 0 0 rgba(240,116,64,.0))}50%{opacity:.75;filter:drop-shadow(0 0 5px rgba(240,116,64,.95))}}
.bm-why{display:flex;align-items:center;gap:8px;margin:0 0 10px}
.bm-dot{width:10px;height:10px;border-radius:50%;background:var(--accent);flex:none;animation:bm-glow 1.4s ease-in-out infinite}
.bm-tabs{margin-bottom:10px;flex-wrap:wrap}
.bm-info{margin-top:10px;padding:10px 12px;border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--bg-base)}
.bm-info h4{margin:0 0 4px}
.bm-note{margin-top:8px;font-size:12px}
.bm-photo{position:relative;max-width:520px;margin:0 auto;cursor:crosshair}
.bm-photo img{width:100%;display:block;border-radius:var(--radius-md)}
.bm-pin{position:absolute;transform:translate(-50%,-50%);width:16px;height:16px;border-radius:50%;border:2px solid #fff;background:#2b2f36;padding:0;cursor:pointer}
.bm-pin span{position:absolute;left:18px;top:-3px;white-space:nowrap;font-size:11px;background:rgba(0,0,0,.7);color:#fff;padding:1px 5px;border-radius:4px;pointer-events:none}
.bm-pin.hot{background:var(--accent);animation:bm-glow 1.4s ease-in-out infinite}
/* Fault finder: steps slide in, bench measurement choices, the board under the result, "did it fix it" */
.ff-anim{animation:ff-in .22s ease-out}
@keyframes ff-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ff-options{display:grid;gap:8px;margin:10px 0}
.ff-options .btn{justify-content:flex-start;text-align:left;white-space:normal;height:auto;padding:10px 12px}
.ff-measure{border-left:3px solid var(--accent);padding-left:12px}
.ff-board{position:relative;max-width:360px;margin:12px auto;cursor:pointer;border-radius:var(--radius-md)}
.ff-board-hint{display:block;text-align:center;font-size:12px;color:var(--text-secondary);margin-top:4px}
.ff-learn{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px;padding-top:10px;border-top:1px solid var(--border-subtle)}
.ff-shop{background:var(--accent-subtle);color:var(--accent-text);padding:6px 10px;border-radius:var(--radius-sm)}
.ff-job{margin:0 0 8px}
.ff-search{max-width:360px;margin-bottom:10px}
.panic-actions{margin:8px 0}
.panic-timeline{margin:8px 0}.panic-timeline li{margin:6px 0}
@media (prefers-reduced-motion:reduce){.bm-part.hot rect,.bm-pin.hot,.bm-dot{animation:none}.ff-anim{animation:none}}
/* Workshop: the old screen dims (and cannot be tapped) for the moment the next one loads */
#ws-body.ws-stale{opacity:.45;pointer-events:none;transition:opacity .12s ease}
/* Support: bug report / feature request buttons, and a bug's technical details for staff */
.ticket-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.ticket-meta{margin:0 0 12px;padding:10px 12px;border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--bg-base);font-size:12px}
.ticket-meta dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:8px 0}.ticket-meta dt{color:var(--text-secondary)}.ticket-meta dd{margin:0;word-break:break-word}
.ticket-meta pre{white-space:pre-wrap;font:12px var(--font-mono);margin:4px 0 0}
/* Fault finder: the "Software corrupted?" entry above the symptoms */
.ff-soft-entry{display:flex;flex-direction:column;gap:2px;width:100%;max-width:560px;text-align:left;margin:0 0 12px;padding:12px 14px;border:1px solid var(--accent);border-radius:var(--radius-md);background:var(--accent-subtle);color:var(--text-primary);cursor:pointer}
.ff-soft-entry span{font-size:13px;color:var(--text-secondary)}
.ff-symptoms .btn.active{border-color:var(--accent);color:var(--accent-text)}
/* Device check cards: long words wrap inside the card, and the small tag never spills out of it */
.overview-card>div{min-width:0;flex:1 1 auto}
.overview-card strong{flex-wrap:wrap;overflow-wrap:anywhere}
.overview-small{max-width:none;white-space:nowrap;flex-shrink:0}
.overview-small.bad{color:var(--red);background:var(--red-weak);border-color:color-mix(in srgb,var(--red) 22%,var(--bg-card))}
/* Add from the phone list (workshop-stock.js): ticked models, options per model, then one row per product — cards on a phone, a table on a computer */
.bk{display:flex;flex-direction:column;gap:10px;min-width:0}
.bk .ws-buttons{margin-top:0}
.bk-label{display:block;font-size:12px;font-weight:600;color:var(--text-secondary);margin:4px 0}
.bk-filter{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:8px}
.bk-models{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px;max-height:48vh;overflow-y:auto;padding:2px}
.bk-model{display:flex;gap:9px;align-items:flex-start;padding:8px 10px;border:1px solid var(--border-subtle);border-radius:8px;cursor:pointer;min-width:0;font-size:13px}
.bk-model input{accent-color:var(--accent);width:16px;height:16px;margin:2px 0 0;flex:none}
.bk-model span{display:flex;flex-direction:column;gap:1px;min-width:0;overflow-wrap:anywhere}.bk-model small{font-size:12px;color:var(--text-secondary)}
.bk-model:has(input:checked){border-color:var(--accent);background:var(--accent-subtle)}
.bk-card{border:1px solid var(--border-subtle);border-radius:8px;padding:10px 12px;margin-bottom:8px;display:flex;flex-direction:column;gap:4px}
.bk-card h4{margin:0;font-size:14px}
.bk-add{width:auto;max-width:240px;padding:5px 10px!important;font-size:13px}
.bk-total{font-weight:600;margin:0}
.bk-rows{display:flex;flex-direction:column;gap:2px}
.bk-group{border-top:1px solid var(--border-subtle);padding-top:6px}
.bk-group-head{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;justify-content:space-between}
.bk-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 8px;padding:8px 0;border-bottom:1px dashed var(--border-subtle)}
.bk-row .bk-name{grid-column:1/-1;font-weight:600;font-size:13px;overflow-wrap:anywhere}
.bk-row label{display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--text-secondary);min-width:0}
.bk-row .input-control{min-width:0;width:100%}
.bk-row .bk-down{grid-column:1/-1;justify-self:start}
.bk-head{display:none}
.bk-common{margin-top:4px}
.bk-skipped{margin:0 0 8px;padding-left:18px;font-size:13px;max-height:30vh;overflow-y:auto}
@media (min-width:760px){
  .bk-row{grid-template-columns:minmax(0,2fr) repeat(var(--bk-cols,4),minmax(0,1fr)) 86px;align-items:center;padding:3px 0;border-bottom:0}
  .bk-row .bk-name{grid-column:auto;font-weight:500}
  .bk-row label span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .bk-row .bk-down{grid-column:auto}
  .bk-head{display:grid;font-size:12px;font-weight:600;color:var(--text-secondary)}
}
/* A used phone in the online shop: what buyers will see */
.uo-facts{display:flex;flex-direction:column;gap:3px;font-size:13px;color:var(--text-secondary);padding:8px 10px;border-radius:8px;background:var(--bg-base)}
#uo-grade .chip strong{font-weight:700}
/* Signed in, but the shop's kind of business is not known yet on this device: its name and Workshop tabs wait (app.js applyBusinessMenu) */
.biz-unknown #ws-tabs,.biz-unknown #tab-workshop span,.biz-unknown #page-title,.biz-unknown #page-subtitle,.biz-unknown #view-studio{visibility:hidden}
/* ---------------------------------------------------------------- Small business: a simple home for a beginner
   Big buttons with a line each, three numbers, a short to-do list; on a phone the sections are in a bottom bar.
   Text 15–16 px and 56 px touch targets: easy to read and tap at the counter. (workshop.js renderTodaySmall) */
.sm-home{display:flex;flex-direction:column;gap:16px}
.sm-hello h2{margin:0;font-size:24px;line-height:32px;font-weight:650;letter-spacing:-.2px}
.sm-hello p{margin:2px 0 0;font-size:14px;color:var(--text-secondary)}
.sm-acts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.sm-act{display:flex;align-items:center;gap:12px;min-height:76px;padding:14px 16px;text-align:left;border-radius:12px;border:1px solid var(--border-subtle);background:var(--bg-card);color:var(--text-primary);cursor:pointer;transition:border-color .15s,background .15s}
.sm-act:hover{border-color:var(--border-hover)}
.sm-act:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sm-act svg{flex:0 0 auto;width:26px;height:26px;color:var(--accent)}
.sm-act span{display:flex;flex-direction:column;gap:2px;min-width:0}
.sm-act b{font-size:16px;line-height:22px;font-weight:600}
.sm-act small{font-size:13px;line-height:18px;color:var(--text-secondary)}
.sm-act.main{grid-column:1/-1;background:var(--accent);border-color:var(--accent);color:#fff}
.sm-act.main svg,.sm-act.main small{color:#fff}
.sm-act.main small{opacity:.9}
.sm-act.main:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.sm-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.sm-num{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:14px 16px;border-radius:12px;border:1px solid var(--border-subtle);background:var(--bg-card);color:var(--text-primary);text-align:left;cursor:pointer}
.sm-num:hover{border-color:var(--border-hover)}
.sm-num strong{font-size:26px;line-height:32px;font-weight:650;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.sm-num span{font-size:14px;line-height:20px;color:var(--text-secondary)}
.sm-num[class*="tone-"] strong{color:var(--tone)}
.sm-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.sm-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:12px;padding:16px}
.sm-card h3{margin:0 0 8px;font-size:17px;line-height:24px;font-weight:600}
.sm-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px}
.sm-card-head h3{margin:0}
.sm-card-head span{font-size:13px;color:var(--text-secondary)}
.sm-todo{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:8px 0;border:0;border-top:1px solid var(--border-subtle);background:none;color:var(--text-primary);text-align:left;cursor:pointer}
.sm-todo:first-of-type{border-top:0}
.sm-todo span:not(.sm-dot){display:flex;flex-direction:column;flex:1;min-width:0}
.sm-todo b{font-size:16px;line-height:22px;font-weight:600}
.sm-todo small{font-size:13px;line-height:18px;color:var(--text-secondary)}
.sm-todo svg{width:18px;height:18px;color:var(--text-tertiary);flex:0 0 auto}
.sm-dot{flex:0 0 auto;width:10px;height:10px;border-radius:50%;background:var(--tone)}
.sm-done{display:flex;align-items:center;gap:8px;margin:4px 0;font-size:15px;color:var(--text-secondary)}
.sm-done svg{width:18px;height:18px;color:var(--green)}
.sm-empty{margin:4px 0;font-size:15px;line-height:22px;color:var(--text-secondary)}
.sm-next .ws-bar{margin:4px 0 12px}
.sm-next p{display:flex;flex-direction:column;gap:2px;margin:0 0 12px}
.sm-next p b{font-size:16px;line-height:22px}
.sm-next p small{font-size:14px;color:var(--text-secondary)}
.sm-next .btn{min-height:44px;padding:0 20px;font-size:15px}
.sm-more{display:flex;flex-direction:column}
.sm-more-row{display:flex;align-items:center;gap:14px;min-height:60px;padding:8px 4px;border:0;border-top:1px solid var(--border-subtle);background:none;color:var(--text-primary);text-align:left;cursor:pointer}
.sm-more-row:first-child{border-top:0}
.sm-more-row>svg:first-child{width:22px;height:22px;color:var(--accent);flex:0 0 auto}
.sm-more-row>svg:last-child{width:18px;height:18px;color:var(--text-tertiary);margin-left:auto;flex:0 0 auto}
.sm-more-row span{display:flex;flex-direction:column}
.sm-more-row b{font-size:16px;font-weight:600}
.sm-more-row small{font-size:13px;color:var(--text-secondary)}
/* The bottom bar: only on a phone, only in the Workshop */
.sm-nav{display:none}
@media (max-width:1100px){.sm-acts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .sm-cols{grid-template-columns:1fr}
  .sm-acts{gap:10px}
  .sm-act{min-height:72px;padding:12px;gap:10px;align-items:flex-start}
  .sm-act.main{align-items:center;min-height:64px}
  .sm-act svg{width:24px;height:24px}
  .sm-act b{font-size:15px;line-height:20px}
  .sm-num{padding:12px}
  .sm-num strong{font-size:22px;line-height:28px}
  .sm-num span{font-size:13px;line-height:18px}
  body.ws-small.in-workshop .sm-nav{position:fixed;left:0;right:0;bottom:0;z-index:55;display:grid;grid-template-columns:repeat(5,1fr);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));background:var(--bg-card);border-top:1px solid var(--border-subtle)}
  .sm-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;padding:4px 2px;border:0;border-radius:10px;background:none;color:var(--text-secondary);font-size:12px;font-weight:550;cursor:pointer}
  .sm-nav button svg{width:22px;height:22px}
  .sm-nav button.active{color:var(--accent);background:var(--accent-subtle)}
  .sm-nav button span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* The bar replaces the grid of tab boxes; the page leaves room for it, and the assistant button sits above it */
  body.ws-small.in-workshop #ws-tabs{display:none}
  body.ws-small.in-workshop .main-wrapper{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  body.ws-small.in-workshop .va-fab{bottom:calc(80px + env(safe-area-inset-bottom))}
}
@media (max-width:340px){.sm-acts{grid-template-columns:1fr}.sm-act{min-height:60px;align-items:center}.sm-nums{gap:8px}.sm-num{padding:10px}.sm-num strong{font-size:20px}}
/* Small business: the trial and alerts notes only on Home; a title on each screen on a phone; Jobs tools folded */
body.ws-small:not([data-ws-tab="today"]) #ws-plan-banner,body.ws-small:not([data-ws-tab="today"]) #ws-app-bar{display:none}
.sm-title{display:none}
.sm-tools{display:inline-block;position:relative}
.sm-tools>summary{list-style:none;cursor:pointer}
.sm-tools>summary::-webkit-details-marker{display:none}
.sm-tools[open]>summary{background:var(--accent-subtle);color:var(--accent-text);border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
.sm-tools-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
/* Small business: Add expense in three taps */
.sm-exp{display:flex;flex-direction:column;gap:10px}
.sm-step{font-size:14px;font-weight:650;margin-top:4px}
.sm-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.sm-chip{position:relative}
.sm-chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.sm-chip span{display:flex;align-items:center;justify-content:center;min-height:48px;padding:8px 10px;border:1px solid var(--border-subtle);border-radius:10px;background:var(--bg-base);font-size:14px;font-weight:600;text-align:center}
.sm-chip input:checked+span{border-color:var(--accent);background:var(--accent-subtle);color:var(--accent-text)}
.sm-chip input:focus-visible+span{outline:3px solid #e9683670;outline-offset:2px}
.sm-big-input{font-size:24px!important;font-weight:650;min-height:56px}
.sm-save{min-height:52px;font-size:15px;width:100%}
.sm-exp .text-btn{align-self:center}
@media (max-width:760px){
  body.ws-small.in-workshop .sm-title:not(:empty){display:block;margin:4px 0 12px;font-size:22px;line-height:28px;font-weight:650;letter-spacing:-.2px}
  body.ws-small .sm-tools{display:block;width:100%}
}
/* Reports: the wide sections under the grid (profit on phones sold, parts used by model) */
.ws-report-wide{margin-top:18px;border:1px solid var(--border-subtle);border-radius:8px;padding:14px;background:var(--bg-card)}
.ws-report-wide .table-scroll{margin:8px 0}
/* Visitor home (v2): a light top band with search, Track my repair and Book a repair side by side; categories, shops, products */
.hm-band{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:12px;padding:28px 28px 26px;margin-bottom:24px}
.hm-title{font-size:clamp(26px,3.4vw,44px);line-height:1.12;letter-spacing:-.8px;font-weight:700;max-width:820px}
.hm-lead{font-size:16px;margin-top:8px}
.hm-search{margin:18px 0 0;max-width:820px}.hm-search .search-field{background:var(--bg-base);min-height:50px}.hm-search .search-field>input{font-size:15px}.hm-search .btn{min-height:50px;padding:0 24px;font-size:14px}
.hm-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.hm-pills button{height:32px;padding:0 14px;border-radius:999px;background:var(--bg-base);color:var(--text-secondary);font-size:13px;font-weight:600}
.hm-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:16px;margin-top:24px}
.hm-panel{background:var(--bg-void);border:1px solid var(--border-subtle);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:12px;min-width:0}
.hm-panel h3{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:650}.hm-panel h3 small{margin-left:auto;font-size:12px;font-weight:500}
.hm-panel>p.muted{font-size:13px}
.hm-ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center}.hm-ic .icon{width:18px;height:18px}
.hm-ic-green{background:var(--green-weak);color:var(--green)}.hm-ic-orange{background:var(--accent-subtle);color:var(--accent-text)}
.hm-in{display:grid;grid-template-columns:1fr 1fr;gap:8px}.hm-in .input-control,.hm-panel>.input-control{background:var(--bg-card);font-size:14px;min-height:44px}
.hm-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.hm-panel .notice{margin:0}
.hm-brands{display:flex;flex-wrap:wrap;gap:6px}
.hm-brands button{height:34px;padding:0 12px;border-radius:8px;background:var(--bg-card);border:1px solid var(--border-subtle);font-size:13px;font-weight:600}
.hm-brands button.on{background:var(--text-primary);border-color:var(--text-primary);color:var(--bg-card)}
.hm-probs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.hm-probs button{border-radius:10px;padding:10px 12px;text-align:left;font-size:13px;font-weight:650;display:flex;flex-direction:column;gap:2px;border:0}
.hm-probs small{font-weight:500;font-size:12px;opacity:.8}
.hm-probs .p1{background:#FDE7DC;color:#9B3A12}.hm-probs .p2{background:#E2F1E8;color:#145C3B}.hm-probs .p3{background:#E3ECFB;color:#1E4F9E}.hm-probs .p4{background:#F6EBC9;color:#7A5200}
.hm-probs button.on{box-shadow:0 0 0 2px var(--text-primary) inset}
.hm-offers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.hm-offers:empty{display:none}.hm-offers>p{grid-column:1/-1;font-size:13px}
.hm-offer{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:2px;min-width:0}
.hm-offer.best{border-color:var(--text-primary);box-shadow:0 0 0 1px var(--text-primary) inset}
.hm-offer b{font-size:18px;font-variant-numeric:tabular-nums}.hm-offer small{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hm-offer .btn{margin-top:6px}
.hm-contact:not(:has(a:not(.hidden))){display:none}
.hm-cats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:28px}
.hm-cat{position:relative;overflow:hidden;border-radius:14px;padding:16px 18px;height:132px;text-decoration:none;font-weight:700;font-size:16px}
.hm-cat small{display:block;font-weight:500;font-size:13px;opacity:.8;position:relative;z-index:1;max-width:62%}
.hm-cat.c1{background:#EAF0F8;color:#1E3F6B}.hm-cat.c2{background:#E6F2EA;color:#145C3B}.hm-cat.c3{background:#F7EFE3;color:#6E4A00}.hm-cat.c4{background:#F1ECF8;color:#4B2A80}
.hm-art{position:absolute;right:-4px;bottom:-22px;width:108px;height:114px}.hm-art svg{width:100%;height:100%}
.hm-sec{margin-bottom:28px}
.hm-sec-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}.hm-sec-h h3{font-size:22px;font-weight:650;letter-spacing:-.3px;margin-right:6px}.hm-sp{flex:1}
.hm-tabs{display:flex;gap:6px;flex-wrap:wrap}
.hm-tab{height:32px;padding:0 13px;border-radius:999px;background:var(--bg-card);border:1px solid var(--border-subtle);font-size:13px;font-weight:600;color:var(--text-secondary)}
.hm-tab.on{background:var(--text-primary);border-color:var(--text-primary);color:var(--bg-card)}
.hm-shops{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.hm-shop{display:flex;gap:14px;align-items:center;padding:10px;border:1px solid var(--border-subtle);border-radius:12px;background:var(--bg-card);min-width:0}
.hm-shop-pic{width:104px;height:76px;border-radius:8px;overflow:hidden;flex:none}.hm-shop-pic svg{width:100%;height:100%;display:block}
.hm-shop-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.hm-shop-text strong{font-size:15px}.hm-shop-text small{font-size:12px;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hm-shop-acts{display:flex;gap:6px;flex-shrink:0}
.hm-prods{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.hm-prod{display:flex;flex-direction:column;border:1px solid var(--border-subtle);border-radius:12px;overflow:hidden;background:var(--bg-card);text-decoration:none;color:var(--text-primary);min-width:0}
.hm-prod-pic{position:relative;aspect-ratio:1/0.95;background:#F4F5F7;display:grid;place-items:center}.hm-prod-pic svg{width:78%;height:78%}.hm-prod-pic.photo img{width:100%;height:100%;object-fit:cover}
.hm-tag,.hm-off{position:absolute;top:10px;font-style:normal;font-size:12px;font-weight:650;height:22px;padding:0 9px;border-radius:999px;display:inline-flex;align-items:center}
.hm-tag{left:10px;background:#fff;color:#2563C9;border:1px solid #E3E6EA}.hm-tag.used{background:#16794C;border-color:#16794C;color:#fff}
.hm-off{right:10px;background:#C2362F;color:#fff;border-radius:6px}
.hm-prod-t{display:flex;flex-direction:column;gap:2px;padding:12px 14px 14px;font-size:13px}.hm-prod-t small{color:var(--text-secondary);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hm-prod-t strong{font-size:14px;line-height:1.3}
.hm-price{font-weight:700;font-size:17px;font-variant-numeric:tabular-nums;margin-top:4px}.hm-price s{font-weight:400;font-size:12px;color:var(--text-tertiary)}
.hm-owner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:22px 26px;border:1px solid var(--border-subtle);border-radius:14px;background:var(--bg-card)}.hm-owner h3{font-size:20px;font-weight:650;margin-bottom:4px}
@media(max-width:1100px){.hm-prods{grid-template-columns:repeat(3,minmax(0,1fr))}.hm-duo{grid-template-columns:1fr}}
@media(max-width:760px){
  .hm-band{padding:18px 16px;border-radius:10px}.hm-lead{font-size:14px}.hm-search .btn{padding:0 14px}
  .hm-pills{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.hm-pills::-webkit-scrollbar{display:none}.hm-pills button{flex:none}.hm-panel h3 small{display:none}
  .hm-probs{grid-template-columns:1fr 1fr}.hm-offers{grid-template-columns:1fr}.hm-in{grid-template-columns:1fr}
  .hm-cats{grid-template-columns:1fr 1fr;gap:8px}.hm-cat{height:100px;font-size:14px;padding:12px 14px}.hm-cat small{font-size:11px;max-width:58%}.hm-art{width:76px;height:82px;bottom:-24px;right:-6px}
  .hm-shops{grid-template-columns:1fr}.hm-shop-pic{width:76px;height:58px}.hm-shop-acts{flex-direction:column}
  .hm-prods{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.hm-sec-h h3{font-size:19px}
}
body:not(.light) .hm-prod-pic{background:#1D2126}

/* Device check */
.dc-status{display:flex;flex-wrap:wrap;align-items:center;gap:8px 32px;padding:12px 16px;margin-bottom:12px;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:8px}
.dc-status-item{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;font-size:13px;color:var(--text-secondary)}
.dc-status-item strong{font-size:14px;font-weight:600;color:var(--text-primary)}
.dc-status-credits{margin-left:auto}
.dc-status-credits .text-btn{font-size:13px}
#view-studio .btn-connect::before,#view-studio .dc-tools .btn::before{content:none;display:none}
.dc-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.dc-start{padding:24px;border-right:1px solid var(--border-subtle)}
.dc-start h2{font-size:24px;line-height:32px;font-weight:650;letter-spacing:-.2px;margin:0}
.dc-intro{font-size:14px;line-height:20px;color:var(--text-secondary);margin:4px 0 24px}
.dc-step{font-size:14px;line-height:20px;font-weight:600;color:var(--text-primary);margin:0 0 8px}
.dc-start .platform-switch{margin:0 0 24px}
.hero-actions.dc-modes{display:block}
.hero-actions.dc-modes.hidden,.dc-tools.hidden,.dc-steps.hidden{display:none}
.dc-mode{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--border-subtle)}
.dc-mode:has(>.hidden){display:none}
.dc-mode>div{min-width:0}
.dc-mode strong{display:block;font-size:14px;line-height:20px;font-weight:600}
.dc-mode span{display:block;font-size:13px;line-height:18px;color:var(--text-secondary)}
.dc-mode .btn{flex:0 0 176px;justify-content:center}
.dc-group{font-size:13px;line-height:18px;font-weight:600;color:var(--text-secondary);margin:12px 0 8px}
.dc-group+.dc-mode{border-top:1px solid var(--border-subtle)}
.dc-start .hero-note{margin-top:16px}
.dc-result{display:flex;flex-direction:column;min-width:0;padding:24px 0 12px}
.dc-result>.dc-step{padding:0 24px}
.dc-result .connection-bottom{padding:0 24px 12px;border:0;background:transparent;flex-wrap:wrap;gap:4px 16px}
.dc-empty{margin:0 24px;padding:32px 16px;font-size:13px;line-height:18px;text-align:center;color:var(--text-secondary);background:var(--bg-base);border-radius:8px}
.dc-result:has(#specs-grid:not(.hidden)) .dc-empty,.dc-result:has(#detected-mode-box:not(.hidden)) .dc-empty{display:none}
.dc-result .specs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.dc-result .reboot-row{padding:0 24px}
.dc-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:16px 24px;border-top:1px solid var(--border-subtle)}
.dc-tools-title{width:100%;margin:0;font-size:13px;line-height:18px;font-weight:600;color:var(--text-secondary)}
#view-studio .bottom-grid{margin-top:12px;gap:12px}
.dc-fold{margin-top:12px}
.dc-fold>summary{display:flex;flex-direction:column;gap:2px;padding:16px;cursor:pointer;list-style:none;position:relative;padding-right:40px}
.dc-fold>summary::-webkit-details-marker{display:none}
.dc-fold>summary::after{content:"";position:absolute;right:18px;top:50%;width:8px;height:8px;margin-top:-6px;border-right:1.5px solid var(--text-secondary);border-bottom:1.5px solid var(--text-secondary);transform:rotate(45deg)}
.dc-fold[open]>summary::after{transform:rotate(-135deg);margin-top:-2px}
.dc-fold>summary strong{font-size:16px;line-height:24px;font-weight:600}
.dc-fold>summary span{font-size:13px;line-height:18px;color:var(--text-secondary)}
.dc-fold-note{margin:0;padding:0 16px 12px;font-size:13px;line-height:18px;color:var(--text-secondary)}
#dc-transfer .pt-panel{margin-top:0!important;border:0;border-radius:0;box-shadow:none}
#dc-transfer .pt-panel>.panel-heading>div{display:none}
#dc-transfer .pt-panel>.panel-heading{justify-content:flex-end}
@media(max-width:1000px){.dc-layout{grid-template-columns:1fr}.dc-start{border-right:0;border-bottom:1px solid var(--border-subtle)}}
@media(max-width:520px){.dc-start{padding:16px}.dc-mode{flex-direction:column;align-items:stretch;gap:8px}.dc-mode .btn{flex:0 0 auto;width:100%}.dc-status-credits{margin-left:0}.dc-result{padding-top:16px}.dc-result>.dc-step,.dc-result .connection-bottom,.dc-tools{padding-left:16px;padding-right:16px}.dc-empty{margin:0 16px}}
#check-body td{white-space:pre-line}
#view-history .panel-heading{flex-wrap:wrap}#view-history .panel-heading .button-group{flex-wrap:wrap}

/* ===================================================================== v4: one size for each thing, room for fingers, calm motion
   Buttons come in two sizes (36 and 32, 44 for the one big action on a screen), one corner (6) and one weight. On touch
   screens everything you tap is at least 36 tall. Motion is short and soft, and off when the device asks for less. */
:root{--ease:cubic-bezier(.2,.8,.2,1);--t-fast:120ms;--t:180ms;--t-slow:240ms}
.btn{min-height:36px;padding:7px 14px;line-height:20px;border-radius:6px;font-size:14px;font-weight:600;
  transition:background-color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.btn-sm{min-height:32px;padding:6px 12px;line-height:18px;font-size:13px}
.btn:active:not(:disabled){transform:scale(.98)}
.tk-new-job,.sale-buttons .btn,.tk-actionbar .btn{min-height:44px;border-radius:6px;font-size:15px}
.tk-quick{grid-auto-rows:1fr}.tk-quick .btn{min-height:44px;height:100%;border-radius:6px}
.credit-card .btn-dark{min-height:32px;padding:6px 12px;line-height:18px}
.row-actions .text-btn,.row-actions .btn-sm{min-height:32px;padding:6px 10px;line-height:18px}
.input-control{transition:border-color var(--t-fast) var(--ease)}
/* Job counts on Today: each one's tap area stays inside its own column */
.tk-stages{gap:4px}.tk-stage{margin:0;padding:4px 6px}
/* Badges are read at a glance: never under 12px */
.nav-badge,.bell-count,.badge-count{font-size:12px}
/* Footer: the links wrap as a row with room between them */
.app-footer{flex-wrap:wrap;gap:8px 24px;align-items:center}
.app-footer>span:last-child{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px}

/* News in the top bar: one message at a time, the next one fades in (no moving text) */
.bc-window{display:grid;align-items:center;-webkit-mask-image:none;mask-image:none}
.bc-slide{grid-area:1/1;display:flex;align-items:center;min-width:0;opacity:0;transform:translateY(4px);visibility:hidden;
  transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease),visibility 0s linear var(--t-slow)}
.bc-slide.on{opacity:1;transform:none;visibility:visible;transition-delay:0s}
.bc-slide .bc-item{display:flex;align-items:center;gap:8px;min-width:0;font-size:13px;color:var(--text-secondary)}
.bc-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bc-item a{flex:none}
.bc-count{flex:none;font-size:12px;color:var(--text-tertiary);font-variant-numeric:tabular-nums;padding:0 4px}
@media (max-width:760px){.broadcast-bar{height:auto;min-height:36px;border-radius:12px;padding:6px 4px 6px 12px}
  .bc-text{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}

/* Phones: the Workshop sections are one row you swipe, with More always at the end */
@media (max-width:760px){
  .ws-tabs,.mode-smart .ws-tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;gap:6px;border-bottom:0;
    margin:0 -16px 12px;padding:0 16px 2px;scrollbar-width:none}
  .ws-tabs button,.mode-smart .ws-tabs button{flex:0 0 auto;white-space:nowrap;min-height:36px;margin:0;padding:7px 14px;border:1px solid var(--border-subtle);
    border-radius:999px;background:var(--bg-card);color:var(--text-secondary);font-size:14px;font-weight:500}
  .ws-tabs button.active,.mode-smart .ws-tabs button.active{border-color:var(--accent);background:var(--accent-subtle);color:var(--accent-text);font-weight:600}
  /* the right edge fades while there are more sections to swipe to */
  .ws-tabs{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  .ws-tabs.at-end{-webkit-mask-image:none;mask-image:none}
}

/* Touch screens: everything you tap is big enough for a finger */
@media (pointer:coarse){
  .btn{min-height:40px;padding-top:9px;padding-bottom:9px}
  .btn-sm,.row-actions .text-btn,.row-actions .btn-sm,.credit-card .btn-dark{min-height:36px;padding-top:8px;padding-bottom:8px}
  .icon-btn,.modal-close-btn,.bc-close,.bell-btn,.menu-toggle,.sidebar-toggle{min-width:40px;min-height:40px}
  .text-btn:not(p .text-btn):not(td .text-btn),.small-link:not(p .small-link){min-height:36px;display:inline-flex;align-items:center}
  .text-btn:not(p .text-btn):not(td .text-btn),.small-link:not(p .small-link),.row-actions .text-btn,.row-actions .btn-sm{min-width:36px}
  .bc-item a{display:inline-flex;align-items:center;min-height:36px;padding:0 4px}
  .theme-toggle{min-height:36px}
  .app-footer a{display:inline-flex;align-items:center;min-height:36px;padding:0 4px}
  .compare-box,.check-row input{width:20px;height:20px}
}

/* Motion: pages, pop-ups, menus and messages arrive softly; nothing bounces */
@keyframes v4-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes v4-pop{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
@keyframes v4-fade{from{opacity:0}to{opacity:1}}
.view-section.active{animation:v4-rise var(--t-slow) var(--ease)}
.modal-layer.open{animation:v4-fade var(--t) var(--ease)}
.modal-layer.open .modal-window,.modal-layer.open .studio{animation:v4-pop var(--t-slow) var(--ease)}
.ws-more-menu:not(.hidden),.va-menu{animation:v4-pop var(--t) var(--ease)}
.toast-message{animation:v4-rise var(--t) var(--ease)}
.panel,.ws-stat,.tk-stage,.nav-tab-btn,.ws-tabs button{transition:background-color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
details>summary{transition:color var(--t-fast) var(--ease)}
/* Small phones: the top bar's buttons stay compact so the shop name has room */
@media (max-width:520px){.nav-actions .btn,.nav-actions .theme-toggle{padding-left:10px;padding-right:10px}.nav-actions{gap:6px}}
/* Phones: Dark mode lives in the side menu, not the top bar */
@media (max-width:760px){#theme-toggle{display:none}}
/* Account › Security: a list's title with its clear button on the same line */
.mini-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.mini-head .mini-title{margin-bottom:0}.mini-head+.mini-list{margin-top:8px}
/* Device history: fits the screen, no sideways scrolling. A computer gets four columns with the actions wrapping
   under each other; a phone gets one card per phone. */
/* history rows share the name "check-row" with the checkbox labels, whose flex layout broke the table */
tr.check-row{display:table-row;margin:0;gap:0;font-size:inherit;color:inherit}
.hist-table{table-layout:auto;width:100%}
.hist-table .hist-device{min-width:0;overflow-wrap:anywhere}
.hist-table .hist-device strong,.hist-table .hist-device .table-secondary{white-space:normal;overflow-wrap:anywhere}
.hist-table .hist-result{white-space:nowrap}
.hist-pills{display:flex;flex-wrap:wrap;gap:4px}
.hist-credits{margin-top:4px;font-size:13px;color:var(--text-secondary)}
.hist-table .hist-when{white-space:nowrap}
.hist-table .hist-actions{width:300px;text-align:right}
@media (max-width:1100px){.hist-table .hist-actions{width:220px}}
.hist-acts{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:6px;max-width:300px;margin-left:auto}
.hist-acts .text-btn,.hist-acts .icon-btn{min-height:32px;padding:4px 10px;border:1px solid var(--border-hover);border-radius:6px;background:var(--bg-surface);color:var(--text-primary);font-size:13px;display:inline-flex;align-items:center}
.hist-acts .danger-link{color:var(--red)}
@media (max-width:760px){
  .hist-table thead{display:none}
  .hist-table,.hist-table tbody,.hist-table tr,.hist-table td,.hist-table tr.check-row{display:block;width:auto}
  .hist-table tr.check-row{padding:12px 16px;border-bottom:1px solid var(--border-subtle)}
  #view-history .panel-heading{flex-wrap:nowrap;justify-content:flex-start}
  #view-history .panel-heading>div{flex:0 0 auto}   /* its 200px basis is a width side by side, a height when stacked */
  .hist-table td{padding:0;border:0}
  .hist-table .hist-result{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:8px;white-space:normal}
  .hist-table .hist-credits{margin-top:0}
  .hist-table .hist-when{margin-top:4px}
  .hist-table .hist-actions{width:auto;text-align:left}
  .hist-acts{justify-content:flex-start;max-width:none;margin:10px 0 0}
  #history-content .table-scroll{overflow-x:visible}
}
@media (pointer:coarse){.hist-acts .text-btn,.hist-acts .icon-btn{min-height:36px}}