/* Shared, dependency-free presentation for Web and both native bundles.
   Teal is an action/selection; gold is reserved for Pro. Plot colours keep
   their existing acoustic meaning. No continuously running effects. */
:root{--bg:#0e1116;--bg2:#11161d;--panel:#171c23;--panel2:#11161d;--panel3:#1e252e;--line:#343c48;--line2:#505d6d;--text:#f4f6f8;--muted:#b1bbc7;--dim:#99a6b6;--accent:#92ded0;--gold:#92ded0;--gold2:#385f59;--pro:#f5c36b;--pro-ink:#221704;color-scheme:dark}
body{background:var(--bg);color:var(--text);font-family:Inter,"Noto Sans JP",system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.6}
button,input,select,textarea,a,summary{-webkit-tap-highlight-color:transparent}
button,input,select,textarea{font-family:inherit}
:is(button,a,input,select,textarea,summary):focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.btn,.button,.account-bar a,.account-bar button{border-radius:10px;min-height:44px;font-weight:650;transition:background-color .12s,border-color .12s,transform .12s;filter:none}
.btn{background:#202731;border-color:#465363;color:var(--text);box-shadow:none}
.btn:hover,.btn:focus-visible{background:#2a3440;border-color:#8394a8;filter:none}
.btn.primary,.button:not(.secondary),.catalog-appbar [data-action=designer]{background:var(--accent);border-color:var(--accent);color:#09231f;box-shadow:none}
.btn.primary:hover,.button:not(.secondary):hover,.catalog-appbar [data-action=designer]:hover{background:#b1ebdf;color:#09231f}
.btn:active,.account-pro:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;transform:none;cursor:not-allowed}
input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea{background:#11161d;color:var(--text);border-color:#536172;border-radius:9px;min-height:44px}
input[type=range],input[type=checkbox],input[type=radio]{accent-color:var(--accent)}
input::placeholder,textarea::placeholder{color:#99a6b6}
.sidebar,.topbar,.account-bar,.site-header{background:var(--bg2);border-color:var(--line);backdrop-filter:none;-webkit-backdrop-filter:none}
.sidebar{padding:28px 18px}.brand{letter-spacing:-.02em}.brand small{color:var(--muted)}
.step-btn{border-radius:10px;color:var(--muted);min-height:58px}
.step-btn:hover{background:#202731}.step-btn.active{background:#203c39;border-color:#548b80;color:#d4faf2}
.step-btn.active .step-num{background:var(--accent);color:#09231f}
.card,.metric,.advanced-panel,.catalog-card,.unit-tile,.spec-panel,.detail-response,.profile-card{background:var(--panel);border-color:var(--line);box-shadow:none;border-radius:14px}
.card-head{border-color:var(--line)}.card-head h2{letter-spacing:-.015em}
.page-head h1{letter-spacing:-.035em;line-height:1.25}.ey,.eyebrow{color:var(--accent)}
.type-card{background:var(--panel2);border-color:var(--line);border-radius:12px}.type-card.active{background:#203c39;border-color:#7ecabb}
.metric strong,.metric b{font-variant-numeric:tabular-nums}.metric small,.field label,.sub,.page-head p{color:var(--muted)}
.chart{background:#11161d;border-color:var(--line);border-radius:12px;overflow:hidden}
.notice{background:#1d2c31;border-color:#405d65;color:#d4e2e7;border-radius:10px}
.studio-dialog,.catalog-dialog,.modal-box{background:var(--panel);color:var(--text);border:1px solid #536172;border-radius:18px;box-shadow:0 20px 64px #0008}
.studio-dialog::backdrop,.catalog-dialog::backdrop,.modal{background:#080b10c9;backdrop-filter:none;-webkit-backdrop-filter:none}
.dialog-head{align-items:flex-start;gap:20px}.dialog-head h2{line-height:1.35;letter-spacing:-.025em}.dialog-head>[data-close]{flex-shrink:0}
.account-bar{padding:12px clamp(16px,2.5vw,36px);gap:12px}.account-bar strong{letter-spacing:-.015em}
.account-bar .account-pro{background:var(--pro);color:var(--pro-ink);border-color:var(--pro);font-weight:750}
.account-bar .account-pro:hover{background:#ffda92;color:var(--pro-ink)}
.account-bar .account-delete{border-color:transparent;background:transparent;color:var(--muted);font-size:12px;text-decoration:underline;text-underline-offset:3px}
.account-bar .account-delete:hover{color:var(--text);background:transparent}
.project-session-controls #projectPlan{font-size:12px;min-width:64px;background:#202731;color:var(--muted)}
.project-session-controls #projectPlan[data-pro=true]{border-color:#916f34;color:var(--pro)}
.starter-launch{background:#182a29;border-color:#41685f;border-radius:14px}.starter-card{background:var(--panel);border-color:var(--line);border-radius:12px}
/* Pro is explained as three concrete outcomes, with the existing contextual
   explanation, purchase/restore logic and free exit retained. */
#proDialog{width:min(760px,calc(100vw - 28px));padding:28px;max-height:calc(100dvh - 28px);overflow-y:auto}
#proDialog[open]{display:flex;flex-direction:column;overflow:hidden}#proDialog .pro-scroll{min-height:0;overflow:auto;overscroll-behavior:contain;padding-right:3px}#proDialog .dialog-head,#proDialog .pro-purchase{flex-shrink:0}#proDialog .dialog-head{margin-bottom:20px}#proDialog .dialog-head h2{font-size:clamp(24px,3vw,32px);margin:8px 0 0;max-width:520px}
.pro-eyebrow{font-size:11px;font-weight:800;letter-spacing:.13em;color:var(--pro)}
.pro-intro{color:var(--muted);font-size:16px;max-width:600px;margin:0 0 24px}
.pro-benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:0;margin:0 0 20px;list-style:none}
.pro-benefits li{background:#20262e;border:1px solid var(--line);border-radius:12px;padding:18px;min-width:0}
.pro-benefit-icon{display:block;width:32px;height:32px;color:var(--pro);margin-bottom:16px}.pro-benefit-icon svg{width:100%;height:100%}
.pro-benefits h3{font-size:16px;line-height:1.4;margin:0 0 8px}.pro-benefits p{color:var(--muted);font-size:13px;line-height:1.65;margin:0}
.pro-account{font-size:13px;color:var(--muted);margin:12px 0 20px}.pro-account strong{display:block;color:var(--text);margin-bottom:5px}
.pro-purchase{padding-top:18px;border-top:1px solid var(--line)}
#proDialog #billingMessage{font-size:13px;line-height:1.65;margin:0 0 12px;color:var(--muted)}
#proDialog #buyPro{background:var(--pro);color:var(--pro-ink);border-color:var(--pro);min-height:48px;padding:12px 22px;font-size:15px}
#proDialog #buyPro:hover{background:#ffda92}#proDialog #buyPro:disabled{background:#45403a;border-color:#5d554a;color:#ccc1ac;opacity:1}
#proDialog .dialog-head{position:relative;display:block}#proDialog .dialog-head>[data-close]{position:absolute;right:0;top:0}#proDialog .pro-eyebrow{display:block;padding-right:90px;min-height:44px}#proDialog .dialog-head h2{word-break:keep-all;overflow-wrap:anywhere}
#proDialog .pro-free{font-size:12px;color:var(--muted);margin:14px 0 0}#proDialog .notice{border-color:#73603d;background:#2c271f;color:#f3dfba}
/* Catalogue: less visual clutter, bigger actionable targets. */
.catalog-controls,.database-filters{background:var(--panel);border-color:var(--line);border-radius:14px}
.catalog-card:hover,.unit-tile:hover{border-color:#8394a8}.catalog-card{border-radius:14px}
.catalog-card .catalog-photo,.unit-tile .tile-photo{background:#12171e;border-color:var(--line);border-radius:9px}
.catalog-card h3{font-size:20px;line-height:1.35}.catalog-card .catalog-card-brand{color:var(--muted);font-size:13px}
.catalog-card .catalog-values{font-variant-numeric:tabular-nums}.catalog-card .catalog-values dt{color:var(--muted);font-size:12px}
.catalog-card .catalog-actions .btn{min-height:44px;font-size:13px;border-radius:8px}
.catalog-card .catalog-favorite{width:44px;height:44px;min-height:44px;border-radius:50%;font-size:24px;background:#202731;color:var(--text);border:1px solid #657587}
.catalog-card .catalog-favorite[aria-pressed=true]{background:#3e3421;color:var(--pro);border-color:#ac8547}
.catalog-card [data-compare][aria-pressed=true]{background:#203c39;color:#d4faf2;border-color:#7ecabb}
.catalog-sort select,.catalog-controls input:not([type=checkbox]),.catalog-controls select{min-height:44px}
.catalog-presets .btn,.catalog-more summary,.catalog-filter-panel>summary{min-height:44px}
.catalog-comparison{background:#1d292c;border-color:#548b80;box-shadow:0 8px 24px #0005}
.catalog-stats .catalog-stat b,.database-summary strong{color:var(--text);font-variant-numeric:tabular-nums}
@media(max-width:760px){
 .sidebar{padding:16px 12px}.step-btn{min-height:54px}.content{padding:16px 12px}
 .card{padding:18px}.card-head h2{font-size:18px}.account-bar{padding:10px 12px}
 .account-bar .actions{gap:8px}.account-bar .account-delete{min-height:36px;font-size:11px;padding:5px}
 .field input:not([type=range]),.field select,.catalog-controls input:not([type=checkbox]),.catalog-controls select,.catalog-sort select,.catalog-language select,.filter-fields input:not([type=checkbox]),.filter-fields select,.sort-control select{font-size:16px;min-height:44px}
 #proDialog{padding:20px;width:calc(100vw - 20px);max-height:calc(100dvh - 20px);border-radius:16px}
 #proDialog .dialog-head{gap:12px;margin-bottom:16px}#proDialog .dialog-head h2{font-size:25px}
 .pro-intro{font-size:14px;margin-bottom:18px}.pro-benefits{grid-template-columns:1fr;gap:8px;margin-bottom:16px}
 .pro-benefits li{display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:14px;padding:14px}
 .pro-benefit-icon{grid-row:1 / 3;width:28px;height:28px;margin:2px 0 0}.pro-benefits h3{font-size:15px;margin-bottom:4px}.pro-benefits p{font-size:13px}
 #proDialog .pro-purchase .actions{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:8px}#proDialog #buyPro,#proDialog #continueBoth{grid-column:1 / -1;width:100%}
 .pro-account{margin:12px 0;font-size:12px}.pro-purchase{padding-top:14px}
 .catalog-controls{padding:14px 16px}.catalog-filter-panel>summary{display:flex;align-items:center;gap:8px;padding:0;font-weight:700}.catalog-filter-panel>summary::before{content:'+';font-size:20px;color:var(--accent)}.catalog-filter-panel[open]>summary::before{content:'−'}
 .catalog-filter-panel[open]>.catalog-search{margin-top:14px}.catalog-presets{gap:8px}.catalog-presets .btn{font-size:12px}
 .catalog-card .catalog-actions{gap:8px}.catalog-card .catalog-pill{font-size:11px}.catalog-sort{flex-wrap:wrap}
}
@media(max-width:480px){
 .catalog-main .catalog-grid{grid-template-columns:minmax(0,1fr);gap:16px}.catalog-card .catalog-photo{height:176px}
 .catalog-card{contain-intrinsic-size:auto 490px}.catalog-card h3{font-size:21px}.catalog-card .catalog-values dd{font-size:16px}
 .catalog-card .catalog-card-kind{font-size:13px}.catalog-card .catalog-actions{grid-template-columns:1fr 1fr}.catalog-card .catalog-actions .btn{font-size:14px;min-height:46px}
 .catalog-sort>label{flex:1;min-width:0}.catalog-sort select{width:100%;max-width:100%}.catalog-heading h1{font-size:28px}
 .catalog-stats{gap:16px}.catalog-stat b{font-size:24px}.catalog-stat span{font-size:11px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
@media print{body{background:#fff;color:#111}.card,.metric{background:#fff;color:#111;box-shadow:none}.pro-benefits{display:none}}

/* Match the catalogue's explicit surface selectors, including native CSS. */
.public-nav,.workspace-bar{background:#181e26;border-color:var(--line);color:var(--text)}
.database-view .catalog-controls,.database-view .catalog-card,.catalog-dialog .catalog-detail-top{background:var(--panel);border-color:var(--line)}
.database-view .catalog-controls select,.database-view .catalog-sort select,.database-view .catalog-presets .btn{background:var(--panel2);border-color:#536172;color:var(--text)}
.database-view .catalog-card .catalog-photo,.database-view .catalog-card .driver-visual-missing{background:var(--panel2);border-color:var(--line)}
.database-view .catalog-heading .ey{color:var(--accent)}
@media(max-width:760px){#proDialog .pro-scroll{padding-right:6px}#proDialog .pro-benefits li{padding:12px;grid-template-columns:24px minmax(0,1fr);column-gap:10px}#proDialog .pro-benefit-icon{width:24px;height:24px}#proDialog .pro-benefits p{font-size:12px;line-height:1.6}#proDialog .pro-benefits h3{font-size:14px}#proDialog .pro-intro{font-size:13px}#proDialog .pro-free{font-size:11px;line-height:1.5;margin-top:10px}#proDialog #restorePro,#proDialog #adPrivacy{font-size:12px;padding:8px;min-height:44px}}
@media(max-height:500px){#proDialog{padding:14px}#proDialog .dialog-head{margin-bottom:8px}#proDialog .dialog-head h2{font-size:20px;margin-top:2px}#proDialog .pro-purchase{padding-top:8px}#proDialog .pro-free{display:none}}