/* Approved account visual system, scoped to .tsa-ui; prototype chrome and demo scripts excluded. */

.tsa-ui {
 --ink:#142e40; --muted:#5c6e7b; --navy:#0c2c3d; --navy-2:#153e50;
 --teal:#087f8b; --teal-dark:#056774; --aqua:#65ddd7; --aqua-soft:#e9f7f6;
 --line:#dbe4e8; --paper:#fff; --ground:#f4f7f8; --amber:#966315; --amber-bg:#fff5e5;
 --green:#24724f; --green-bg:#edf8f0; --danger:#ae3441;
 --shadow:0 12px 42px rgba(18,49,65,.05);
 color:var(--ink); font-family:Inter,"Segoe UI",Arial,sans-serif; font-size:15px; line-height:1.55;
 min-height:100vh; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.tsa-ui *, .tsa-ui *::before, .tsa-ui *::after { box-sizing:border-box; }
.tsa-ui [hidden] { display:none!important; }
.tsa-ui :is(h1,h2,h3,h4,p) { margin:0; }
.tsa-ui :is(button,input,select,textarea) { font:inherit; }
.tsa-ui button { cursor:pointer; }
.tsa-ui button:disabled { cursor:not-allowed; opacity:.55; }
.tsa-ui a { color:inherit; text-decoration:none; }
.tsa-ui :is(button,a,input,select,textarea):focus-visible { outline:3px solid #0a8792; outline-offset:4px; }
.tsa-ui .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.tsa-ui .skip { position:fixed; z-index:100; top:-60px; left:12px; background:var(--navy); color:white; padding:12px 20px; border-radius:10px; }
.tsa-ui .skip:focus { top:10px; }
.tsa-ui .icon { width:21px; height:21px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle; }
.tsa-ui .container { width:min(1240px,calc(100% - 72px)); margin-inline:auto; }
.tsa-ui .icon-button { width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:10px; color:var(--ink); background:white; flex:none; }
.tsa-ui .icon-button:hover { background:#f2f7f8; }
.tsa-ui .breadcrumb { display:flex; gap:10px; align-items:center; min-height:62px; font-size:12px; color:#6c7f8a; }
.tsa-ui .breadcrumb button { border:0; background:transparent; color:inherit; padding:4px 0; font-size:inherit; }
.tsa-ui .breadcrumb .icon { width:12px; height:12px; }
.tsa-ui .breadcrumb strong { color:#334f5d; font-weight:550; }
.tsa-ui main { min-width:0; }
.tsa-ui .auth-layout { display:grid; grid-template-columns:1fr 1fr; border-radius:25px; overflow:hidden; background:white; border:1px solid var(--line); box-shadow:var(--shadow); }
.tsa-ui .auth-story { background:var(--navy); color:white; position:relative; overflow:hidden; padding:50px 48px 34px; display:flex; flex-direction:column; min-height:634px; isolation:isolate; }
.tsa-ui .story-overline { display:flex; align-items:center; gap:9px; color:#90dcd9; font-size:11px; font-weight:600; letter-spacing:2.1px; margin-bottom:27px; }
.tsa-ui .story-overline::before { content:""; width:24px; height:1px; background:#70cfce; }
.tsa-ui .auth-story h1 { font-size:49px; line-height:1.13; font-weight:550; letter-spacing:-2px; max-width:440px; position:relative; z-index:1; }
.tsa-ui .auth-story h1 span { display:block; color:#72dfd7; }
.tsa-ui .story-description { color:#b8cdd5; font-size:15px; line-height:1.8; max-width:342px; margin-top:22px; position:relative; z-index:1; }
.tsa-ui .water-art { position:relative; height:155px; margin-top:18px; margin-bottom:2px; }
.tsa-ui .water-ring { position:absolute; width:230px; height:76px; border:1px solid #67cdd145; border-radius:50%; transform:rotate(-13deg); right:28px; top:68px; box-shadow:0 0 0 19px #49b9ba09,0 0 0 38px #49b9ba09,0 0 0 58px #49b9ba06; }
.tsa-ui .water-ring::before { content:""; position:absolute; inset:15px 40px; border-radius:50%; border:1px solid #70dedb6e; }
.tsa-ui .water-orb { position:absolute; width:88px; height:109px; right:96px; top:0; border-radius:62% 38% 56% 44%/66% 43% 57% 34%; transform:rotate(17deg); background:radial-gradient(ellipse at 30% 22%,#d1ffefbd,transparent 37%),linear-gradient(145deg,#83eee3aa,#32949a33 62%,#72e6df66); box-shadow:inset 1px 1px 3px #ddfffa66,inset -7px -10px 23px #82e5e42e,8px 15px 22px #00152333; border:1px solid #a1f7eb66; }
.tsa-ui .orb-dot { width:14px; height:18px; right:59px; top:12px; opacity:.65; }
.tsa-ui .story-features { position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; border-top:1px solid #ffffff20; padding-top:22px; margin-top:auto; }
.tsa-ui .story-features .icon { color:#87d8d4; width:23px; height:23px; margin-bottom:10px; }
.tsa-ui .story-features b { display:block; color:#e9f4f5; font-size:12px; font-weight:500; }
.tsa-ui .story-features small { display:block; font-size:11px; color:#96b1be; margin-top:4px; line-height:1.6; }
.tsa-ui .auth-form-side { padding:45px 58px 32px; display:flex; flex-direction:column; min-width:0; }
.tsa-ui .tabs { display:flex; background:#f0f4f5; border:1px solid #e8eef0; padding:4px; gap:4px; border-radius:11px; margin-bottom:31px; }
.tsa-ui .tabs button { flex:1; padding:10px 8px; font-size:13px; font-weight:600; border:0; border-radius:8px; color:#657783; background:transparent; min-height:41px; }
.tsa-ui .tabs button[aria-selected=true] { color:var(--ink); background:white; box-shadow:0 2px 6px #102d4010; }
.tsa-ui .auth-form-side h2 { font-size:29px; font-weight:650; letter-spacing:-.8px; line-height:1.3; margin-bottom:10px; }
.tsa-ui .auth-intro { font-size:13px; color:var(--muted); line-height:1.7; margin-bottom:25px; }
.tsa-ui .field { margin-bottom:18px; min-width:0; }
.tsa-ui .field label { display:block; font-size:12px; font-weight:650; margin-bottom:8px; color:#284353; }
.tsa-ui .input-wrap { display:flex; align-items:center; position:relative; }
.tsa-ui .input-wrap>.icon { position:absolute; left:15px; color:#7f939e; width:18px; height:18px; pointer-events:none; }
.tsa-ui :is(input:not([type=checkbox]),select,textarea) { width:100%; min-height:50px; border:1px solid #cbd8df; border-radius:9px; background:white; padding:12px 14px; color:var(--ink); font-size:14px; outline:none; transition:border-color .15s,box-shadow .15s; }
.tsa-ui :is(input:not([type=checkbox]),select,textarea):focus { border-color:var(--teal); box-shadow:0 0 0 3px #08818a17; }
.tsa-ui input::placeholder, .tsa-ui textarea::placeholder { color:#84959e; }
.tsa-ui .input-wrap input { padding-left:43px; }
.tsa-ui .input-wrap.has-toggle input { padding-right:47px; }
.tsa-ui .password-toggle { position:absolute; right:4px; top:4px; width:42px; height:42px; border:0; color:#6d8390; background:none; border-radius:7px; }
.tsa-ui .form-options { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12px; margin:2px 0 24px; }
.tsa-ui .checkbox-label { display:flex; align-items:center; gap:8px; color:#506773; min-height:30px; cursor:pointer; }
.tsa-ui input[type=checkbox] { width:16px; height:16px; accent-color:var(--teal); margin:0; flex:none; }
.tsa-ui .text-button { background:none; border:0; padding:4px 0; font-size:12px; font-weight:600; color:var(--teal-dark); min-height:30px; text-align:left; }
.tsa-ui .text-button:hover { text-decoration:underline; text-underline-offset:3px; }
.tsa-ui .button { display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:13px 20px; min-height:47px; border:1px solid transparent; border-radius:9px; font-size:13px; line-height:1.45; font-weight:600; transition:background .15s,box-shadow .15s; }
.tsa-ui .button.primary { background:var(--teal); color:white; }
.tsa-ui .button.primary:hover { background:var(--teal-dark); box-shadow:0 4px 12px #087f8b20; }
.tsa-ui .button.secondary { background:white; color:var(--ink); border-color:#d4dfe4; }
.tsa-ui .button.secondary:hover { background:#f3f8f9; }
.tsa-ui .button.soft { background:#e9f6f5; color:#136874; border-color:#d6eceb; }
.tsa-ui .button.small { padding:10px 14px; min-height:42px; font-size:12px; }
.tsa-ui .button.wide { width:100%; }
.tsa-ui .button .icon { width:18px; height:18px; }
.tsa-ui .auth-submit { min-height:51px; justify-content:space-between; padding-inline:19px; }
.tsa-ui .auth-security { display:flex; align-items:center; justify-content:center; gap:6px; color:#758993; font-size:10px; margin-top:15px; }
.tsa-ui .auth-security .icon { width:13px; height:13px; }
.tsa-ui .auth-divider { border-top:1px solid #e7edef; margin-top:25px; padding-top:19px; display:flex; gap:10px; align-items:center; justify-content:space-between; }
.tsa-ui .auth-divider p { font-size:11px; color:#71838d; }
.tsa-ui .auth-divider strong { display:block; color:#3f5968; font-size:12px; font-weight:550; margin-bottom:3px; }
.tsa-ui .legal-note { font-size:11px; color:#70818b; line-height:1.7; margin:3px 0 18px; }
.tsa-ui .legal-note button { font-size:11px; font-weight:550; }
.tsa-ui .form-feedback { padding:13px 14px; border:1px solid #c9e4d4; border-radius:9px; background:#f0f8f2; color:#305d43; font-size:12px; margin-bottom:16px; }
.tsa-ui .form-feedback.error { color:#8b2d38; border-color:#ebcbd0; background:#fff2f3; }
.tsa-ui .below-auth { display:flex; justify-content:center; gap:34px; padding:26px 0; color:#617783; font-size:12px; }
.tsa-ui .below-auth span { display:flex; align-items:center; gap:8px; }
.tsa-ui .below-auth .icon { width:17px; height:17px; color:#5d8a91; }
/* Signed-in customer area */
.tsa-ui .account-grid { display:grid; grid-template-columns:239px minmax(0,1fr); gap:29px; align-items:start; padding-bottom:40px; }
.tsa-ui .account-sidebar { background:var(--navy); color:white; border-radius:17px; padding:25px 14px 17px; min-width:0; }
.tsa-ui .customer-summary { display:flex; gap:11px; align-items:center; padding:0 10px 23px; border-bottom:1px solid #ffffff1b; }
.tsa-ui .avatar { width:42px; height:42px; flex:none; background:#244d5c; color:#b9eee7; border:1px solid #ffffff16; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600; }
.tsa-ui .customer-summary strong { display:block; font-size:13px; font-weight:600; }
.tsa-ui .customer-summary small { color:#95b3c2; font-size:10px; }
.tsa-ui .nav-label { font-size:9px; font-weight:550; color:#789eaf; letter-spacing:1.65px; margin:22px 13px 12px; }
.tsa-ui .account-nav { display:flex; flex-direction:column; gap:5px; }
.tsa-ui .account-nav a { display:flex; align-items:center; gap:12px; border:0; border-radius:9px; min-height:48px; background:none; color:#c2d4dd; padding:12px 13px; font-size:12px; font-weight:500; text-align:left; width:100%; }
.tsa-ui .account-nav a .icon { width:18px; height:18px; }
.tsa-ui .account-nav a:hover { background:#173e50; }
.tsa-ui .account-nav a[aria-current=page] { background:#214c5b; color:#9aeee6; box-shadow:inset 3px 0 0 #64d8d1; }
.tsa-ui .nav-count { margin-left:auto; background:#ffffff12; border-radius:5px; min-width:21px; padding:1px 5px; font-size:10px; text-align:center; }
.tsa-ui .sidebar-help { border-top:1px solid #ffffff1b; padding:23px 13px 5px; margin-top:24px; }
.tsa-ui .sidebar-help p { font-size:11px; color:#99b7c5; margin:7px 0 13px; }
.tsa-ui .sidebar-help b { font-size:12px; font-weight:550; }
.tsa-ui .sidebar-help button { display:flex; gap:8px; align-items:center; color:#86d9d4; font-size:11px; font-weight:550; padding:0; background:none; border:0; min-height:30px; }
.tsa-ui .sidebar-help .icon { width:15px; height:15px; }
.tsa-ui .logout { margin-top:20px; padding:13px!important; color:#a4bcc8!important; font-size:11px!important; }
.tsa-ui .account-main { min-width:0; }
.tsa-ui .page-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; margin:0 0 23px; }
.tsa-ui .eyebrow { color:#63808c; font-size:10px; letter-spacing:1.7px; font-weight:600; margin-bottom:7px; }
.tsa-ui .page-heading h1 { font-size:30px; line-height:1.25; letter-spacing:-1px; font-weight:620; }
.tsa-ui .page-heading p { margin-top:8px; font-size:12px; color:var(--muted); line-height:1.7; }
.tsa-ui .greeting { display:flex; align-items:center; justify-content:space-between; gap:20px; border:1px solid #d3e9e6; border-radius:15px; padding:22px 25px; background:linear-gradient(110deg,#e4f4f1,#f2faf8); margin-bottom:23px; }
.tsa-ui .greeting h2 { font-size:22px; line-height:1.3; letter-spacing:-.5px; font-weight:600; }
.tsa-ui .greeting p { font-size:12px; line-height:1.7; color:#54716e; margin-top:7px; }
.tsa-ui .greeting .icon-disc { width:47px; height:47px; background:#fff9; border:1px solid #cfe7df; color:#367d79; border-radius:13px; }
.tsa-ui .greeting-text { display:flex; align-items:center; gap:15px; }
.tsa-ui .overview-grid { display:grid; grid-template-columns:1.08fr 1fr; gap:21px; }
.tsa-ui .card { background:white; border:1px solid var(--line); border-radius:14px; padding:23px; min-width:0; }
.tsa-ui .card-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:20px; }
.tsa-ui .card-head h2, .tsa-ui .card-head h3 { display:flex; gap:8px; align-items:center; font-size:14px; font-weight:650; }
.tsa-ui .card-head h2>.icon, .tsa-ui .card-head h3>.icon { width:17px; height:17px; color:#688795; }
.tsa-ui .badge { display:inline-flex; align-items:center; gap:5px; font-size:10px; line-height:1.4; padding:5px 8px; border-radius:6px; background:#edf7f6; color:#24766b; font-weight:550; white-space:nowrap; }
.tsa-ui .badge::before { content:""; width:4px; height:4px; border-radius:100%; background:currentColor; flex:none; }
.tsa-ui .badge.amber { color:var(--amber); background:var(--amber-bg); }
.tsa-ui .badge.gray { color:#637a87; background:#f0f4f6; }
.tsa-ui .appointment { display:flex; gap:15px; align-items:center; margin:7px 0 21px; }
.tsa-ui .date-block { display:flex; align-items:center; justify-content:center; flex-direction:column; width:66px; height:76px; border:1px solid #cfe5e5; background:#eff8f7; border-radius:11px; color:#176e72; flex:none; }
.tsa-ui .date-block strong { font-size:29px; line-height:1.1; font-weight:650; letter-spacing:-1px; }
.tsa-ui .date-block span { font-size:10px; letter-spacing:1.8px; margin-top:4px; }
.tsa-ui .appointment h3 { font-size:15px; font-weight:600; margin-bottom:6px; }
.tsa-ui .appointment p { font-size:11px; color:#6a7f89; }
.tsa-ui .appointment p+p { margin-top:5px; }
.tsa-ui .subtle-row { display:flex; align-items:flex-start; gap:8px; font-size:11px; color:#637a86; }
.tsa-ui .subtle-row .icon { width:15px; height:15px; margin-top:1px; }
.tsa-ui .card-divider { border:0; border-top:1px solid #e6ecef; margin:18px 0 15px; }
.tsa-ui .card-footer { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.tsa-ui .card-footer>span { font-size:10px; color:#82949e; }
.tsa-ui .device-summary { display:flex; align-items:center; gap:19px; }
.tsa-ui .device-thumb { width:88px; height:101px; flex:none; border:1px solid #e7eef0; border-radius:12px; background:#f6f9fa; display:flex; align-items:center; justify-content:center; }
.tsa-ui .device-thumb svg { width:72px; height:83px; }
.tsa-ui .device-summary h3 { font-size:14px; font-weight:600; line-height:1.5; }
.tsa-ui .device-summary p { font-size:11px; color:#6c8390; margin:6px 0 9px; }
.tsa-ui .meta-pair { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-top:17px; font-size:11px; color:#7a8d98; }
.tsa-ui .meta-pair strong { font-weight:550; color:#3d5c69; }
.tsa-ui .orders-overview { grid-column:1/-1; }
.tsa-ui .order-row { display:grid; grid-template-columns:42px minmax(0,1fr) 110px 90px 24px; gap:14px; align-items:center; padding:16px 0; border-top:1px solid #e8eef0; }
.tsa-ui .order-row:first-of-type { border-top:0; }
.tsa-ui .icon-disc { display:flex; align-items:center; justify-content:center; width:41px; height:43px; border-radius:10px; background:#f0f5f6; color:#527481; flex:none; }
.tsa-ui .icon-disc .icon { width:21px; height:21px; }
.tsa-ui .order-row h3 { font-size:12px; font-weight:600; line-height:1.5; }
.tsa-ui .order-row p { font-size:10px; color:#7a909c; margin-top:4px; }
.tsa-ui .order-row .price { text-align:right; font-size:12px; font-weight:600; }
.tsa-ui .row-link { border:0; background:none; color:#6a8896; padding:0; width:32px; min-height:40px; margin-right:-8px; }
.tsa-ui .row-link .icon { width:17px; height:17px; }
.tsa-ui .soft-note { display:flex; gap:10px; align-items:flex-start; padding:15px 17px; border-radius:10px; background:#eef4f6; color:#5d7784; font-size:11px; line-height:1.7; }
.tsa-ui .soft-note>.icon { width:17px; height:17px; margin-top:1px; }
.tsa-ui .dashboard-bottom { display:flex; justify-content:space-between; gap:16px; align-items:center; margin-top:21px; }
.tsa-ui .dashboard-bottom p { display:flex; align-items:center; gap:8px; font-size:11px; color:#7d929b; }
.tsa-ui .dashboard-bottom .icon { width:16px; height:16px; }
.tsa-ui .bottom-nav { display:none; }
.tsa-ui .mobile-account-menu { display:none; }
/* Secondary customer screens */
.tsa-ui .content-stack { display:flex; flex-direction:column; gap:18px; }
.tsa-ui .filters { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:19px; }
.tsa-ui .filter { padding:8px 13px; border-radius:8px; border:1px solid #dce5e9; background:white; color:#647b88; font-size:11px; min-height:37px; }
.tsa-ui .filter[aria-pressed=true] { background:var(--navy); color:white; border-color:var(--navy); }
.tsa-ui .detail-bar { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; align-items:center; padding-bottom:16px; border-bottom:1px solid #e5ecef; margin-bottom:18px; }
.tsa-ui .detail-bar h2 { font-size:14px; font-weight:650; }
.tsa-ui .detail-bar p { color:#82929c; font-size:11px; margin-top:4px; }
.tsa-ui .order-full { display:flex; justify-content:space-between; align-items:center; gap:15px; }
.tsa-ui .order-product { display:flex; align-items:center; gap:15px; }
.tsa-ui .order-product h3 { font-size:14px; font-weight:600; }
.tsa-ui .order-product p { color:#6c8290; font-size:11px; margin-top:6px; }
.tsa-ui .order-full .price { font-size:16px; font-weight:600; margin-bottom:8px; text-align:right; }
.tsa-ui .line-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:21px; }
.tsa-ui .device-detail { display:grid; grid-template-columns:130px minmax(0,1fr); align-items:center; gap:23px; }
.tsa-ui .device-detail .device-thumb { width:130px; height:156px; }
.tsa-ui .device-detail .device-thumb svg { width:95px; height:123px; }
.tsa-ui .device-detail h2 { font-size:20px; font-weight:600; }
.tsa-ui .device-detail p { font-size:12px; color:#6a8390; margin-top:6px; }
.tsa-ui .detail-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; padding:23px 0; margin-top:23px; border-top:1px solid #e6ecef; }
.tsa-ui .detail-grid dt { font-size:11px; color:#7a909d; margin-bottom:8px; }
.tsa-ui .detail-grid dd { margin:0; font-size:13px; font-weight:550; overflow-wrap:anywhere; }
.tsa-ui .timeline { display:flex; flex-direction:column; gap:0; padding:6px 0 0; }
.tsa-ui .timeline-item { display:grid; grid-template-columns:20px 1fr; gap:12px; position:relative; padding-bottom:24px; }
.tsa-ui .timeline-item:last-child { padding-bottom:0; }
.tsa-ui .timeline-item:not(:last-child)::after { content:""; position:absolute; width:1px; top:19px; left:8px; bottom:4px; background:#dce8e9; }
.tsa-ui .timeline-dot { display:flex; align-items:center; justify-content:center; width:17px; height:17px; border-radius:50%; background:#e4f5ee; color:#3c8b6c; margin-top:2px; }
.tsa-ui .timeline-dot .icon { width:11px; height:11px; }
.tsa-ui .timeline-item h3 { font-size:12px; font-weight:600; }
.tsa-ui .timeline-item p { margin-top:5px; font-size:11px; color:#738995; }
.tsa-ui .two-cols { display:grid; grid-template-columns:1fr 1fr; gap:19px; }
.tsa-ui .address-card h2 { font-size:16px; font-weight:600; margin-top:15px; }
.tsa-ui .address-card p { font-size:12px; color:#6a818e; line-height:1.9; margin-top:12px; }
.tsa-ui .address-card .address-type { display:flex; align-items:center; justify-content:space-between; gap:15px; color:#6b8694; font-size:11px; }
.tsa-ui .address-card .address-type .icon { width:20px; height:20px; }
.tsa-ui .profile-form { max-width:710px; }
.tsa-ui .profile-form .card-head { margin-bottom:25px; }
.tsa-ui .profile-form .field label { font-size:12px; }
.tsa-ui .hint { font-size:11px; color:#77909c; margin-top:7px; }
.tsa-ui .empty-state { text-align:center; padding:50px 20px; }
.tsa-ui .empty-state .icon-disc { margin:0 auto 15px; width:60px; height:60px; }
.tsa-ui .empty-state h2 { font-size:19px; margin-bottom:10px; }
.tsa-ui .empty-state p { font-size:13px; color:var(--muted); max-width:360px; margin:auto; }
/* Accessible dialogs */
.tsa-ui dialog { width:min(540px,calc(100% - 32px)); max-height:calc(100dvh - 44px); border:1px solid var(--line); border-radius:18px; padding:0; background:white; color:var(--ink); box-shadow:0 28px 100px #0c2c3d33; overflow:auto; }
.tsa-ui dialog::backdrop { background:#0a25346b; backdrop-filter:blur(3px); }
.tsa-ui .dialog-header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 24px; border-bottom:1px solid #e5ecee; }
.tsa-ui .dialog-header h2 { font-size:18px; font-weight:650; letter-spacing:-.3px; }
.tsa-ui .dialog-body { padding:24px; }
.tsa-ui .dialog-body>p { font-size:13px; color:#6a8290; line-height:1.8; margin-bottom:20px; }
.tsa-ui .dialog-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:24px; }
.tsa-ui .dialog-body .two-cols { gap:13px; }
.tsa-ui .dialog-body textarea { min-height:100px; resize:vertical; }
.tsa-ui .dialog-body .detail-grid { grid-template-columns:1fr 1fr; }
.tsa-ui .support-options { display:flex; flex-direction:column; gap:10px; }
.tsa-ui .support-options button { display:flex; align-items:center; gap:14px; width:100%; background:#f6f9fa; border:1px solid var(--line); border-radius:10px; padding:15px; text-align:left; }
.tsa-ui .support-options strong { display:block; color:var(--ink); font-size:13px; }
.tsa-ui .support-options small { display:block; color:#79909b; font-size:11px; margin-top:4px; }
.tsa-ui .support-options .icon { color:var(--teal); }
.tsa-ui .success-block { text-align:center; padding:8px 0 14px; }
.tsa-ui .success-block .icon-disc { margin:0 auto 20px; width:62px; height:62px; background:#e7f6f0; color:#27795a; border-radius:50%; }
.tsa-ui .success-block h3 { font-size:21px; margin-bottom:12px; }
.tsa-ui .success-block p { color:#6d8490; font-size:13px; }
.tsa-ui .toast { position:fixed; z-index:120; bottom:25px; left:50%; transform:translateX(-50%); max-width:min(500px,calc(100% - 32px)); background:var(--navy); color:white; border:1px solid #3c606d; border-radius:12px; padding:15px 20px; box-shadow:0 9px 30px #112e4230; font-size:12px; }
.tsa-ui .long-value { overflow-wrap:anywhere; }
@media (min-width:1500px) { .tsa-ui .container { width:min(1280px,calc(100% - 100px)); } .tsa-ui .auth-story { min-height:655px; } }
@media (max-width:1100px) {
 .tsa-ui .container { width:calc(100% - 48px); }
 .tsa-ui .auth-story { padding:40px 35px 30px; }
 .tsa-ui .auth-story h1 { font-size:44px; }
 .tsa-ui .auth-form-side { padding:37px 37px 29px; }
 .tsa-ui .account-grid { grid-template-columns:215px minmax(0,1fr); gap:22px; }
 .tsa-ui .overview-grid { gap:15px; }
 .tsa-ui .card { padding:19px; }
 .tsa-ui .greeting { padding:20px; }
 .tsa-ui .greeting-text>.icon-disc { display:none; }
 .tsa-ui .greeting h2 { font-size:20px; }
 .tsa-ui .device-summary { gap:12px; }
 .tsa-ui .device-thumb { width:68px; height:90px; }
 .tsa-ui .appointment { gap:10px; }
 .tsa-ui .date-block { width:56px; height:70px; }
 .tsa-ui .appointment h3 { font-size:13px; }
 .tsa-ui .card-head { gap:8px; }
 .tsa-ui .card-head h2 { font-size:13px; }
 .tsa-ui .card-head h2>.icon { display:none; }
 .tsa-ui .card-head .badge { font-size:9px; }
}
@media (max-width:900px) {
 .tsa-ui .account-sidebar { display:none; }
 .tsa-ui .account-grid { display:block; padding-bottom:28px; }
 .tsa-ui .mobile-account-menu { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:20px; }
 .tsa-ui .mobile-account-menu button { border:1px solid #d7e2e6; background:white; border-radius:8px; padding:8px 12px; color:#5b7685; font-size:11px; min-height:38px; }
 .tsa-ui .mobile-account-menu button[aria-current=page] { color:white; border-color:var(--navy); background:var(--navy); }
 .tsa-ui .auth-story h1 { font-size:38px; letter-spacing:-1.6px; }
 .tsa-ui .auth-story { padding:35px 28px 28px; }
 .tsa-ui .auth-form-side { padding:33px 28px 27px; }
 .tsa-ui .auth-form-side h2 { font-size:26px; }
 .tsa-ui .story-description { font-size:13px; }
 .tsa-ui .story-features { gap:10px; }
 .tsa-ui .story-features small { display:none; }
 .tsa-ui .story-features b { font-size:10px; }
 .tsa-ui .water-ring { right:0; width:200px; }
 .tsa-ui .water-orb { right:65px; }
 .tsa-ui .orb-dot { right:30px; }
}
@media (max-width:650px) {
 .tsa-ui { font-size:14px; }
 .tsa-ui .container { width:calc(100% - 32px); }
 .tsa-ui .breadcrumb { min-height:45px; font-size:11px; }
 .tsa-ui .auth-layout { display:flex; flex-direction:column; border-radius:17px; }
 .tsa-ui .auth-story { padding:22px 25px; min-height:0; }
 .tsa-ui .story-overline { font-size:8px; letter-spacing:1.7px; margin-bottom:14px; }
 .tsa-ui .story-overline::before { width:17px; }
 .tsa-ui .auth-story h1 { font-size:29px; letter-spacing:-1.05px; max-width:260px; line-height:1.14; }
 .tsa-ui .auth-story h1 .desktop-break { display:none; }
 .tsa-ui .auth-story h1 span { display:inline; }
 .tsa-ui .story-description { font-size:11px; line-height:1.7; margin-top:11px; max-width:258px; }
 .tsa-ui .water-art { position:absolute; top:50px; right:-40px; width:140px; height:130px; margin:0; opacity:.45; z-index:-1; }
 .tsa-ui .water-ring { width:140px; height:50px; right:-20px; }
 .tsa-ui .water-orb { width:42px; height:54px; right:30px; top:18px; }
 .tsa-ui .orb-dot { width:10px; height:12px; right:7px; }
 .tsa-ui .story-features { display:none; }
 .tsa-ui .auth-form-side { padding:24px 24px 22px; }
 .tsa-ui .tabs { margin-bottom:24px; }
 .tsa-ui .tabs button { font-size:12px; min-height:38px; padding:9px 7px; }
 .tsa-ui .auth-form-side h2 { font-size:25px; margin-bottom:8px; }
 .tsa-ui .auth-intro { font-size:12px; margin-bottom:22px; }
 .tsa-ui .field { margin-bottom:17px; }
 .tsa-ui .field label { font-size:12px; }
 .tsa-ui :is(input:not([type=checkbox]),select,textarea) { font-size:16px; min-height:51px; }
 .tsa-ui .input-wrap input::placeholder { font-size:13px; }
 .tsa-ui .form-options { font-size:11px; gap:6px; margin-bottom:21px; }
 .tsa-ui .text-button { font-size:11px; }
 .tsa-ui .auth-divider { margin-top:21px; padding-top:16px; }
 .tsa-ui .auth-divider strong { font-size:11px; }
 .tsa-ui .auth-divider p { font-size:10px; }
 .tsa-ui .auth-security { font-size:9px; }
 .tsa-ui .below-auth { gap:17px; padding:23px 0; flex-wrap:wrap; font-size:10px; }
 .tsa-ui .below-auth .icon { width:14px; height:14px; }
 .tsa-ui .below-auth span:last-child { display:none; }
 .tsa-ui.is-account { padding-bottom:calc(76px + env(safe-area-inset-bottom)); }
 .tsa-ui .account-grid { padding-bottom:16px; }
 .tsa-ui .mobile-account-menu { display:none; }
 .tsa-ui .page-heading { margin-bottom:18px; gap:8px; align-items:flex-start; }
 .tsa-ui .page-heading h1 { font-size:26px; }
 .tsa-ui .page-heading p { font-size:11px; margin-top:7px; max-width:270px; }
 .tsa-ui .page-heading .icon-button { width:37px; height:37px; }
 .tsa-ui .page-heading .button { padding:10px; font-size:11px; min-height:40px; }
 .tsa-ui .eyebrow { font-size:8px; margin-bottom:7px; }
 .tsa-ui .greeting { display:block; padding:21px; border-radius:13px; margin-bottom:17px; }
 .tsa-ui .greeting h2 { font-size:21px; }
 .tsa-ui .greeting p { font-size:12px; margin-top:7px; max-width:260px; }
 .tsa-ui .greeting>.button { width:100%; margin-top:17px; min-height:43px; }
 .tsa-ui .overview-grid { grid-template-columns:1fr; gap:16px; }
 .tsa-ui .card { padding:20px; border-radius:13px; }
 .tsa-ui .card-head { margin-bottom:18px; }
 .tsa-ui .card-head h2, .tsa-ui .card-head h3 { font-size:14px; }
 .tsa-ui .card-head h2>.icon { display:inline; }
 .tsa-ui .badge, .tsa-ui .card-head .badge { font-size:10px; }
 .tsa-ui .appointment { gap:15px; margin-bottom:18px; }
 .tsa-ui .date-block { width:63px; height:74px; }
 .tsa-ui .appointment h3 { font-size:15px; }
 .tsa-ui .appointment p { font-size:11px; }
 .tsa-ui .device-summary { gap:17px; }
 .tsa-ui .device-thumb { width:83px; height:96px; }
 .tsa-ui .device-summary h3 { font-size:14px; }
 .tsa-ui .orders-overview { grid-column:auto; }
 .tsa-ui .order-row { grid-template-columns:36px minmax(0,1fr) 24px; gap:10px; padding-block:16px; }
 .tsa-ui .order-row .icon-disc { width:36px; height:40px; }
 .tsa-ui .order-row .order-state { grid-column:2; grid-row:auto; margin-top:-3px; }
 .tsa-ui .order-row .price { grid-column:2; font-size:11px; text-align:left; margin-top:-6px; }
 .tsa-ui .order-row .row-link { grid-column:3; grid-row:span 3; align-self:center; }
 .tsa-ui .order-row h3 { font-size:12px; }
 .tsa-ui .order-row p { font-size:10px; }
 .tsa-ui .dashboard-bottom { display:block; margin-top:19px; }
 .tsa-ui .dashboard-bottom p { font-size:10px; margin-bottom:8px; }
 .tsa-ui .bottom-nav { position:fixed; bottom:0; left:0; right:0; z-index:30; display:flex; justify-content:space-around; align-items:stretch; padding:8px 8px calc(7px + env(safe-area-inset-bottom)); background:#fffffff7; border-top:1px solid #dce6e9; box-shadow:0 -5px 20px #1b374607; backdrop-filter:blur(12px); }
 .tsa-ui .bottom-nav a { width:20%; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:5px; background:none; border:0; padding:6px 3px; color:#728995; border-radius:9px; font-size:9px; min-height:49px; }
 .tsa-ui .bottom-nav a .icon { width:20px; height:20px; }
 .tsa-ui .bottom-nav a[aria-current=page] { color:#0a7782; background:#edf8f7; font-weight:600; }
 .tsa-ui .two-cols { grid-template-columns:1fr; gap:0; }
 .tsa-ui .two-cols>.card { margin-bottom:16px; }
 .tsa-ui .order-product { align-items:flex-start; gap:11px; }
 .tsa-ui .order-product h3 { font-size:12px; }
 .tsa-ui .order-product p { font-size:10px; }
 .tsa-ui .order-full { flex-wrap:wrap; align-items:flex-start; }
 .tsa-ui .order-full .price { font-size:13px; text-align:left; margin-left:52px; }
 .tsa-ui .detail-bar h2 { font-size:13px; }
 .tsa-ui .detail-bar p { font-size:10px; }
 .tsa-ui .device-detail { grid-template-columns:86px 1fr; gap:17px; }
 .tsa-ui .device-detail .device-thumb { width:86px; height:112px; }
 .tsa-ui .device-detail .device-thumb svg { width:73px; height:93px; }
 .tsa-ui .device-detail h2 { font-size:16px; }
 .tsa-ui .device-detail p { font-size:11px; }
 .tsa-ui .detail-grid { grid-template-columns:1fr 1fr; gap:20px 14px; }
 .tsa-ui .detail-grid dt { font-size:10px; }
 .tsa-ui .detail-grid dd { font-size:12px; }
 .tsa-ui .line-actions>.button { flex:1; font-size:11px; padding-inline:10px; }
 .tsa-ui .dialog-header { padding:18px 20px; }
 .tsa-ui .dialog-header h2 { font-size:17px; }
 .tsa-ui .dialog-body { padding:20px; }
 .tsa-ui .dialog-body .two-cols { grid-template-columns:1fr; gap:0; }
 .tsa-ui .dialog-actions { gap:8px; }
 .tsa-ui .dialog-actions .button { flex:1; padding-inline:12px; font-size:12px; }
 .tsa-ui .toast { bottom:calc(88px + env(safe-area-inset-bottom)); font-size:11px; }
}
@media (max-width:360px) {
 .tsa-ui .container { width:calc(100% - 24px); }
 .tsa-ui .auth-story, .tsa-ui .auth-form-side { padding-inline:20px; }
 .tsa-ui .auth-story h1 { font-size:27px; }
 .tsa-ui .card { padding:17px; }
 .tsa-ui .card-head h2 { font-size:13px; }
 .tsa-ui .card-head h2>.icon { display:none; }
 .tsa-ui .card-head .text-button { font-size:10px; }
 .tsa-ui .appointment h3 { font-size:14px; }
}
@media (prefers-reduced-motion:reduce) {  .tsa-ui *, .tsa-ui *::before, .tsa-ui *::after { transition:none!important; animation:none!important; } }
@media print { .tsa-ui .container { width:100%; } .tsa-ui .account-grid { display:block; } .tsa-ui .card { break-inside:avoid; } }
/* Readability refinements — generous cards, readable account copy. */
.tsa-ui .account-nav a { font-size:13px; }
.tsa-ui .customer-summary strong { font-size:14px; }
.tsa-ui .customer-summary small { font-size:11px; }
.tsa-ui .sidebar-help b { font-size:13px; }
.tsa-ui .sidebar-help p { font-size:12px; }
.tsa-ui .page-heading p { font-size:13px; }
.tsa-ui .greeting p { font-size:13px; }
.tsa-ui .account-main .card-head :is(h2,h3) { font-size:16px; }
.tsa-ui .account-main .text-button { font-size:13px; }
.tsa-ui .account-main .badge { font-size:11px; }
.tsa-ui .appointment h3 { font-size:16px; }
.tsa-ui .appointment p { font-size:12px; }
.tsa-ui .subtle-row { font-size:12px; }
.tsa-ui .device-summary h3 { font-size:15px; }
.tsa-ui .device-summary p, .tsa-ui .meta-pair { font-size:12px; }
.tsa-ui .card-footer>span { font-size:11px; }
.tsa-ui .order-row h3 { font-size:14px; }
.tsa-ui .order-row p { font-size:12px; }
.tsa-ui .order-row .price { font-size:13px; }
.tsa-ui .account-main .button { font-size:14px; }
.tsa-ui .address-card p { font-size:14px; }
.tsa-ui .profile-form .field label { font-size:14px; }
@media (min-width:901px) and (max-width:1100px) {
 .tsa-ui .overview-grid { grid-template-columns:1fr; }
 .tsa-ui .orders-overview { grid-column:auto; }
}
@media (max-width:650px) {
 .tsa-ui .account-main .card-head :is(h2,h3) { font-size:15px; }
 .tsa-ui .account-main .text-button { font-size:12px; }
 .tsa-ui .page-heading p { font-size:12px; }
 .tsa-ui .account-main .button { font-size:13px; }
 .tsa-ui .greeting p { font-size:13px; }
 .tsa-ui .appointment h3 { font-size:15px; }
 .tsa-ui .order-row { grid-template-columns:36px minmax(0,1fr) 22px; column-gap:11px; row-gap:9px; }
 .tsa-ui .order-row>.icon-disc { grid-column:1; grid-row:1 / span 2; align-self:start; }
 .tsa-ui .order-row>div { grid-column:2; grid-row:1; }
 .tsa-ui .order-row h3 { font-size:13px; }
 .tsa-ui .order-row p { font-size:11px; }
 .tsa-ui .order-row .order-state { grid-column:2; grid-row:2; justify-self:start; margin:0; }
 .tsa-ui .order-row .price { grid-column:2; grid-row:2; justify-self:end; font-size:11px; margin:0; }
 .tsa-ui .order-row .row-link { grid-column:3; grid-row:1 / span 2; }
 .tsa-ui .order-row .badge { font-size:10px; }
 .tsa-ui .address-card p { font-size:13px; }
 .tsa-ui .account-main .card-head h2>.icon { display:none; }
 .tsa-ui .card-head { gap:8px; }
}
@media (max-width:360px) {
 .tsa-ui .account-main .card-head :is(h2,h3) { font-size:14px; }
 .tsa-ui .account-main .text-button { font-size:11px; }
 .tsa-ui .order-row { column-gap:8px; }
 .tsa-ui .card { padding-inline:17px; }
 .tsa-ui .order-row .badge { font-size:9px; padding-inline:6px; }
 .tsa-ui .order-row .price { font-size:10px; }
}
/* Long customer names and endpoint content must wrap, not be clipped. */
.tsa-ui .customer-summary>div:last-child, .tsa-ui .device-summary>div:last-child { min-width:0; }
.tsa-ui .customer-summary strong, .tsa-ui .greeting h2, .tsa-ui .address-card p, .tsa-ui .account-main .long-value { overflow-wrap:anywhere; }