:root{--listener-dark:#0f1729;--listener-blue:#2563eb;--listener-orange:#f97316}body{background:#eef2f7}#listener-app{min-height:100dvh}#listener-app button,#listener-app input,#listener-app select,#listener-app textarea{font:inherit}#listener-app svg{width:1.35rem;height:1.35rem;fill:currentColor}.listener-shell{min-height:100dvh;width:100%;max-width:30rem;margin:auto;background:var(--canvas);color:var(--ink);padding-bottom:calc(5.7rem + env(safe-area-inset-bottom))}.listener-header{position:sticky;top:0;z-index:20;height:calc(4rem + env(safe-area-inset-top));padding:env(safe-area-inset-top) 1rem 0;display:grid;grid-template-columns:2.75rem 1fr 2.75rem;align-items:center;gap:.65rem;background:color-mix(in srgb,var(--canvas) 92%,transparent);border-bottom:1px solid var(--line);backdrop-filter:blur(16px)}.listener-header>div{display:grid;line-height:1.1}.listener-header strong{font-family:var(--font-display);font-size:1rem}.listener-header small{color:var(--faint);font-size:.68rem;margin-top:.2rem}.icon-button{width:2.75rem;height:2.75rem;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--ink);font-size:1.3rem}.icon-button:active{background:var(--surface-2)}.listener-mark{display:grid;place-items:center;width:2rem;height:2rem;border-radius:.65rem;background:linear-gradient(135deg,var(--brand),var(--brand-700));color:#fff;font-family:var(--font-display);font-weight:900}.listener-mark--large{width:4rem;height:4rem;border-radius:1.15rem;font-size:1.7rem;margin:auto}.listener-main{padding:1.35rem 1.1rem 2rem;display:grid;gap:1.3rem}.listener-nav{position:fixed;z-index:25;left:50%;bottom:0;transform:translate(-50%);width:min(100%,30rem);height:calc(4.8rem + env(safe-area-inset-bottom));padding:.4rem 1.3rem env(safe-area-inset-bottom);display:grid;grid-template-columns:repeat(3,1fr);background:color-mix(in srgb,var(--surface) 94%,transparent);border-top:1px solid var(--line);backdrop-filter:blur(18px)}.listener-nav button{min-height:3.8rem;border:0;background:transparent;color:var(--faint);display:grid;place-items:center;align-content:center;gap:.1rem;font-size:.7rem;font-weight:700}.listener-nav button.is-active{color:var(--brand)}.listener-nav svg{width:1.45rem!important;height:1.45rem!important}.listener-kicker{margin:0;color:var(--brand);text-transform:uppercase;letter-spacing:.1em;font-size:.7rem;font-weight:800}.listener-hero{min-height:24rem;padding:2rem 1.15rem;border-radius:1.5rem;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;background:radial-gradient(circle at 80% 18%,rgba(37,99,235,.8),transparent 32%),linear-gradient(155deg,#0f1729,#172554 65%,#1d4ed8);box-shadow:var(--shadow-md);overflow:hidden}.listener-hero h1{margin:.8rem 0 1rem;color:#fff;font-size:clamp(2.25rem,11vw,3.4rem);line-height:.94;letter-spacing:-.045em}.listener-hero h1 em{color:#93c5fd;font-style:normal}.listener-hero p{margin:0 0 1.4rem;color:#dbeafe;line-height:1.55;font-size:.94rem}.primary-button,.secondary-button{width:100%;min-height:3.4rem;border-radius:.9rem;padding:.85rem 1rem;font-weight:800;border:1px solid transparent;transition:transform .15s ease,filter .15s ease}.primary-button{background:var(--cta);color:#fff;box-shadow:var(--shadow-cta)}.primary-button:active,.secondary-button:active{transform:scale(.985)}.primary-button--large{min-height:3.75rem;font-size:1rem}.secondary-button{background:var(--surface);color:var(--ink);border-color:var(--line)}.text-button{border:0;background:transparent;color:var(--brand);min-height:2.75rem;font-weight:800}.trust-strip,.permission-card,.disclaimer-card{display:flex;gap:.8rem;padding:1rem;background:var(--surface);border:1px solid var(--line);border-radius:1rem;box-shadow:var(--shadow-sm)}.trust-strip>span{width:2.3rem;height:2.3rem;border-radius:.7rem;display:grid;place-items:center;color:var(--mint-600);background:var(--tint-mint);flex:none}.trust-strip p,.permission-card p,.disclaimer-card p{margin:0;color:var(--muted);font-size:.83rem;line-height:1.5}.trust-strip strong,.permission-card strong,.disclaimer-card strong{display:block;color:var(--ink)}.permission-card,.disclaimer-card{display:block}.disclaimer-card{border-left:4px solid var(--brand)}.section-block,.result-section{display:grid;gap:.8rem}.section-heading{display:flex;align-items:center;justify-content:space-between}.section-heading h2,.result-section h2{font-size:1.1rem}.section-heading button{border:0;background:transparent;color:var(--brand);font-size:.78rem;font-weight:800}.screen-heading{display:grid;gap:.55rem}.screen-heading h1{font-size:2rem;letter-spacing:-.03em}.screen-heading>p:last-child{margin:0;color:var(--muted);line-height:1.55}.progress-line,.processing-bar{height:.35rem;background:var(--line);border-radius:99px;overflow:hidden}.progress-line span,.processing-bar span,.confidence i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--brand),#60a5fa);transition:width .3s ease}.mode-grid{display:grid;gap:.85rem}.mode-card{width:100%;min-height:8rem;text-align:left;border:1px solid var(--line);border-radius:1.15rem;background:var(--surface);padding:1.15rem;display:grid;grid-template-columns:3rem 1fr auto;align-items:center;gap:.9rem;box-shadow:var(--shadow-sm);color:var(--ink)}.mode-card>span,.visual-hero>span{width:3rem;height:3rem;border-radius:1rem;display:grid;place-items:center;background:var(--tint-brand);color:var(--brand)}.mode-card strong{font-family:var(--font-display);font-size:1.05rem}.mode-card p{margin:.25rem 0 0;color:var(--muted);font-size:.8rem;line-height:1.4}.mode-card>b{color:var(--brand);font-size:1.25rem}.listener-form{display:grid;gap:.95rem}.listener-form label{display:grid;gap:.35rem;color:var(--muted);font-size:.78rem;font-weight:700}.listener-form input,.listener-form select,.listener-form textarea{width:100%;min-height:3.15rem;border:1px solid var(--line);border-radius:.75rem;background:var(--surface);color:var(--ink);padding:.75rem .8rem;font-size:.95rem}.listener-form textarea{min-height:5.5rem;resize:vertical}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.sticky-actions{position:sticky;bottom:calc(4.9rem + env(safe-area-inset-bottom));z-index:10;padding-top:.75rem;background:linear-gradient(transparent,var(--canvas) 28%)}.listener-actions-stack{display:grid;gap:.7rem}.visual-hero{min-height:10rem;border-radius:1.35rem;display:grid;place-items:center;align-content:center;gap:.8rem;color:#fff;background:radial-gradient(circle at center,rgba(96,165,250,.25),transparent 48%),var(--listener-dark)}.visual-hero>span{width:4.2rem;height:4.2rem;border-radius:50%;background:#fff}.visual-hero svg{width:2rem!important;height:2rem!important}.visual-hero small{color:#bfdbfe;text-transform:uppercase;letter-spacing:.1em;font-weight:800}.safety-list,.action-list{display:grid;gap:.7rem;counter-reset:safety}.safety-list li,.action-list li{display:grid;grid-template-columns:2rem 1fr;align-items:center;gap:.75rem;padding:.8rem;background:var(--surface);border:1px solid var(--line);border-radius:.85rem;color:var(--muted);font-size:.86rem}.safety-list span,.action-list span{width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;background:var(--tint-brand);color:var(--brand);font-weight:900}.recording-stage{min-height:25rem;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1.2rem;border-radius:1.5rem;color:#fff;background:radial-gradient(circle at center,rgba(37,99,235,.35),transparent 45%),var(--listener-dark)}.recording-pill{display:flex;align-items:center;gap:.45rem;border:1px solid rgba(255,255,255,.2);border-radius:99px;padding:.35rem .7rem;color:#fecaca;font-size:.75rem;font-weight:800}.recording-pill i{width:.5rem;height:.5rem;background:#ef4444;border-radius:50%;animation:pulse 1s infinite}.recording-time{font-family:var(--font-display);font-size:4.2rem;font-weight:800;letter-spacing:-.05em;margin:1.3rem 0 0}.recording-stage>p{color:#94a3b8;margin:.1rem 0 1.7rem;font-size:.8rem}.waveform{height:5rem;display:flex;align-items:center;justify-content:center;gap:.22rem}.waveform i{width:.22rem;min-height:.45rem;border-radius:99px;background:linear-gradient(#60a5fa,#fff);transition:height .12s linear}.capture-meta{display:grid;gap:.2rem;margin-top:1.2rem}.capture-meta span{color:#94a3b8;font-size:.75rem}.record-controls{display:flex;justify-content:space-around;align-items:center;padding:.5rem}.round-button{width:3.4rem;height:3.4rem;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-weight:900}.round-button--stop{width:4.5rem;height:4.5rem;background:#ef4444;color:#fff;border:0}.round-button--cancel{color:var(--danger)}.image-preview{min-height:19rem;border-radius:1.25rem;overflow:hidden;background:var(--surface-2);display:grid;place-items:center;border:1px solid var(--line)}.image-preview img{width:100%;height:100%;max-height:26rem;object-fit:contain;background:#0f1729}.quality-list{display:grid;gap:.65rem;padding:1rem;background:var(--surface);border:1px solid var(--line);border-radius:1rem}.quality-list span{display:flex;gap:.55rem;align-items:center;color:var(--muted);font-size:.85rem}.quality-list svg{color:var(--mint-600)}.processing-stage{min-height:24rem;display:grid;place-items:center;align-content:center;text-align:center;gap:.75rem}.processing-stage h1{font-size:1.7rem}.processing-stage>p:not(.listener-kicker){margin:0;color:var(--muted);font-size:.86rem}.processing-stage small{color:var(--faint)}.processing-orbit{width:8rem;height:8rem;border:1px solid var(--brand-300);border-radius:50%;display:grid;place-items:center;animation:orbitGlow 1.8s infinite}.processing-orbit>span{width:4.4rem;height:4.4rem;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:#fff}.processing-bar{width:100%;margin-top:1rem}.processing-steps{display:grid;gap:.65rem}.processing-steps div{display:flex;gap:.7rem;align-items:center;color:var(--faint);font-size:.82rem}.processing-steps span{width:1.6rem;height:1.6rem;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);font-weight:800}.processing-steps .is-done{color:var(--ink)}.processing-steps .is-done span{background:var(--tint-mint);color:var(--mint-600)}.result-hero{padding:1.3rem;border-radius:1.2rem;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm)}.result-hero h1{margin:.55rem 0;font-size:2rem}.result-hero>p{margin:0;color:var(--muted)}.result-hero--urgent,.result-hero--high{border-top:4px solid var(--danger)}.result-hero--moderate{border-top:4px solid var(--warn)}.result-hero--low{border-top:4px solid var(--mint)}.result-chips,.specialty-row{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1rem}.result-chips span,.specialty-row span{padding:.35rem .65rem;border-radius:99px;background:var(--surface-2);color:var(--muted);font-size:.72rem;font-weight:800;text-transform:capitalize}.safety-banner{padding:1rem;border-radius:1rem;border-left:4px solid var(--warn);background:var(--warn-bg)}.safety-banner p{margin:.3rem 0 0;color:var(--muted);font-size:.82rem}.safety-banner--not_recommended{border-color:var(--danger);background:#fff0f0}.safety-banner--likely{border-color:var(--mint);background:var(--tint-mint)}.cause-card,.plain-card,.cost-card{padding:1rem;border-radius:1rem;background:var(--surface);border:1px solid var(--line)}.cause-card>div:first-child{display:flex;justify-content:space-between;gap:.5rem}.cause-card span{color:var(--brand);font-weight:900}.cause-card p,.plain-card p{margin:.45rem 0 0;color:var(--muted);font-size:.82rem}.confidence{height:.3rem;background:var(--surface-2);border-radius:99px;margin-top:.7rem;overflow:hidden}.cost-card{display:grid;gap:.35rem;background:var(--listener-dark);color:#fff}.cost-card p{margin:0;color:#93c5fd;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;font-weight:800}.cost-card strong{font-family:var(--font-display);font-size:1.6rem}.cost-card small{color:#cbd5e1;line-height:1.45}.privacy-list{display:grid;gap:.75rem}.privacy-list>div{display:grid;grid-template-columns:2.5rem 1fr;gap:.75rem;padding:1rem;background:var(--surface);border:1px solid var(--line);border-radius:1rem;color:var(--brand)}.privacy-list p{margin:0;color:var(--muted);font-size:.82rem}.privacy-list strong{display:block;color:var(--ink)}.map-placeholder{min-height:9rem;border-radius:1.2rem;background:linear-gradient(135deg,#dbeafe,#ecfeff);display:grid;place-items:center;align-content:center;color:var(--brand)}.map-placeholder>span{width:2.8rem;height:2.8rem;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:var(--shadow-sm)}.map-placeholder small{color:var(--muted)}.mechanic-list{display:grid;gap:.75rem}.mechanic-card{display:grid;grid-template-columns:3.2rem 1fr auto;gap:.8rem;align-items:center;padding:1rem;background:var(--surface);border:1px solid var(--line);border-radius:1rem}.avatar{width:3.2rem;height:3.2rem;border-radius:1rem;display:grid;place-items:center;background:linear-gradient(135deg,var(--brand),var(--brand-700));color:#fff;font-family:var(--font-display);font-weight:900}.mechanic-card p{margin:.1rem 0;color:var(--muted);font-size:.78rem}.mechanic-card small{color:var(--faint);font-size:.72rem}.mechanic-card>button{min-height:2.6rem;padding:0 .8rem;border:0;border-radius:.7rem;background:var(--tint-brand);color:var(--brand);font-weight:800}.verified-line{display:flex;align-items:center;gap:.25rem;color:var(--mint-600);font-size:.66rem;font-weight:900;text-transform:uppercase;letter-spacing:.06em}.verified-line svg{width:.9rem!important;height:.9rem!important}.mechanic-profile{display:grid;grid-template-columns:4rem 1fr;gap:1rem;align-items:center}.mechanic-profile .avatar{width:4rem;height:4rem;border-radius:1.2rem}.mechanic-profile h1{font-size:1.8rem}.mechanic-profile p{margin:.2rem 0;color:var(--muted)}.rating{color:var(--warn);font-weight:800;font-size:.78rem}.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}.metric-grid>div{display:grid;gap:.15rem;text-align:center;padding:.75rem .35rem;border:1px solid var(--line);border-radius:.8rem;background:var(--surface)}.metric-grid strong{font-size:.82rem;text-transform:capitalize}.metric-grid span{color:var(--faint);font-size:.62rem}.consent-card{display:grid;grid-template-columns:auto 1fr;gap:.75rem;align-items:flex-start;padding:1rem;background:var(--surface);border:1px solid var(--line);border-radius:1rem}.consent-card input{width:1.25rem;height:1.25rem;accent-color:var(--brand)}.consent-card span{display:grid;gap:.15rem}.consent-card small{color:var(--muted);line-height:1.4}.success-stage,.error-stage{min-height:19rem;display:grid;place-items:center;align-content:center;text-align:center;gap:.65rem}.success-stage>span,.error-stage>span{width:5rem;height:5rem;border-radius:50%;display:grid;place-items:center;background:var(--tint-mint);color:var(--mint-600)}.success-stage>span svg{width:2.4rem!important;height:2.4rem!important}.success-stage h1,.error-stage h1{font-size:2rem}.success-stage>p:last-child,.error-stage>p:last-child{color:var(--muted);margin:0}.error-stage>span{background:#fff0f0;color:var(--danger);font-size:2rem;font-weight:900}.summary-sheet{display:grid;background:var(--surface);border:1px solid var(--line);border-radius:1.1rem;overflow:hidden}.summary-sheet>div{padding:.9rem 1rem;display:grid;gap:.25rem;border-bottom:1px solid var(--line)}.summary-sheet>div:last-child{border:0}.summary-sheet span{color:var(--faint);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;font-weight:800}.summary-sheet strong,.summary-sheet li{font-size:.84rem}.summary-sheet ul{margin:.2rem 0 0;padding-left:1rem;color:var(--muted)}.summary-sheet li{list-style:disc;margin:.2rem 0}.history-list{display:grid;gap:.7rem}.history-card{display:grid;grid-template-columns:1fr auto;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:1rem;overflow:hidden}.history-card>button:first-child{border:0;background:transparent;display:grid;grid-template-columns:2.6rem 1fr auto;align-items:center;gap:.65rem;text-align:left;padding:.9rem;color:var(--ink)}.history-card>button>span{width:2.6rem;height:2.6rem;border-radius:.75rem;display:grid;place-items:center;background:var(--tint-brand);color:var(--brand)}.history-card p{margin:.15rem 0 0;color:var(--muted);font-size:.72rem}.delete-button{height:100%;border:0;border-left:1px solid var(--line);background:transparent;color:var(--danger);padding:.7rem;font-size:.72rem;font-weight:800}.empty-state{min-height:12rem;display:grid;place-items:center;align-content:center;text-align:center;gap:.4rem;padding:1rem;border:1px dashed var(--line);border-radius:1rem;color:var(--muted)}.empty-state>span{font-size:2rem;color:var(--brand)}.empty-state p{margin:0;font-size:.8rem}.listener-toast{position:fixed;z-index:50;left:50%;bottom:calc(5.6rem + env(safe-area-inset-bottom));transform:translate(-50%);width:max-content;max-width:calc(100% - 2rem);padding:.75rem 1rem;border-radius:.8rem;background:var(--listener-dark);color:#fff;font-size:.8rem;box-shadow:var(--shadow-md)}.desktop-notice{min-height:100dvh;display:grid;place-items:center;padding:2rem;background:radial-gradient(circle at 50% 15%,#dbeafe,transparent 35%),#eef2f7}.desktop-notice__card{width:min(31rem,100%);display:grid;gap:1rem;text-align:center;padding:2.4rem;border:1px solid #dbe2eb;border-radius:1.5rem;background:#fff;box-shadow:0 24px 70px -32px #0f172959}.desktop-notice h1{font-size:2.5rem}.desktop-notice p{margin:0;color:#566079}.desktop-notice small{color:#7f8aa3;word-break:break-all}.mock-qr{width:10rem;height:10rem;margin:.5rem auto;display:grid;grid-template-columns:repeat(8,1fr);gap:2px;padding:.55rem;background:#fff;border:1px solid #dbe2eb}.mock-qr i{background:#fff}.mock-qr i.on{background:#0f1729}@keyframes pulse{50%{opacity:.3;transform:scale(.75)}}@keyframes orbitGlow{50%{transform:scale(1.04);box-shadow:0 0 0 1.5rem #2563eb0f}}@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}@media (min-width:768px){.listener-shell{display:none}}@media (max-width:767px){.desktop-notice{display:none}body{background:var(--canvas)}}@media (max-width:360px){.listener-main{padding-inline:.85rem}.field-row{grid-template-columns:1fr}.listener-hero{min-height:22rem}.listener-hero h1{font-size:2.15rem}.metric-grid{grid-template-columns:1fr}.recording-time{font-size:3.5rem}}