.garage-hero { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:42px; margin:24px 0; border-radius:24px; background:#e9f0de; color:#253e29; }
.garage-eyebrow { font-size:11px; letter-spacing:2px; font-weight:800; }
.garage-hero h1 { margin:14px 0; font-size:clamp(26px,3vw,40px); line-height:1.3; letter-spacing:-1.5px; }
.garage-hero p { line-height:1.7; color:#52634e; margin:0; }
.garage-hero-mark { font-size:64px; white-space:nowrap; }.garage-hero-mark span { font-size:28px; vertical-align:middle; }
.garage-layout { display:grid; grid-template-columns:minmax(260px, .8fr) minmax(0, 1.7fr); gap:24px; padding-bottom:50px; align-items:start; }
.garage-panel { min-width:0; padding:24px; background:#fffdf8; border:1px solid #e4e5d9; border-radius:20px; }
.garage-section-title { display:flex; align-items:center; justify-content:space-between; gap:10px; }.garage-section-title h2 { font-size:20px; margin:0; }.garage-section-title > span { font-size:12px; color:#65725f; }
.garage-note { font-size:12px; color:#697066; line-height:1.65; }.garage-empty { text-align:center; padding:30px 16px; background:#f5f5ed; border-radius:14px; margin:18px 0; color:#5f6c59; font-size:14px; line-height:1.65; }.garage-empty p { margin:8px 0 0; font-size:13px; }
.garage-register { margin-top:20px; border-top:1px solid #e3e7dc; padding-top:20px; }.garage-register summary { cursor:pointer; font-weight:700; }.garage-register form { display:grid; gap:15px; margin-top:20px; }
.garage-panel label { display:flex; flex-direction:column; gap:8px; font-size:13px; font-weight:600; }.garage-panel label span { font-weight:400; }
.garage-panel input:not([type=checkbox]), .garage-panel select { width:100%; min-width:0; min-height:44px; padding:10px; border:1px solid #d9dfd3; border-radius:9px; background:white; color:#293729; font:inherit; box-sizing:border-box; }
.owned-machine { display:flex; gap:12px; padding:16px; margin-top:14px; border:1px solid #e2e5da; border-radius:14px; overflow-wrap:anywhere; }.owned-machine.is-selected { border-color:#6c895b; background:#f0f5e8; }.owned-machine-icon { font-size:27px; }.owned-machine > div:last-child { min-width:0; flex:1; }.owned-machine p { margin:5px 0; font-size:12px; }.owned-machine small { font-size:11px; color:#68755d; }.owned-actions { display:flex; justify-content:space-between; gap:10px; margin-top:12px; }.owned-actions button { background:none; border:0; color:#4e6841; font-size:12px; min-height:32px; cursor:pointer; }
.garage-tabs { display:grid; grid-template-columns:1fr 1fr; background:#ecefe5; padding:5px; border-radius:12px; margin:22px 0 14px; gap:4px; }.garage-tabs button { border:0; border-radius:9px; min-height:44px; background:transparent; font:inherit; font-size:14px; cursor:pointer; }.garage-tabs button[aria-pressed=true] { background:#fff; color:#36542b; font-weight:700; box-shadow:0 2px 5px #253e2910; }
.garage-mode-help { font-size:13px; line-height:1.65; min-height:42px; color:#5e6858; }.garage-search-fields { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }.garage-search-actions { display:flex; justify-content:space-between; gap:12px; align-items:center; margin:16px 0; }.garage-search-actions label { flex-direction:row; align-items:center; font-size:12px; }.garage-search-actions label[hidden] { display:none; }.garage-search-actions > button { margin-left:auto; }
.compat-badge { display:inline-flex; padding:5px 9px; border-radius:7px; font-size:11px; font-weight:700; }.compat-compatible { background:#e5f1dd; color:#3b6327; }.compat-check { background:#fff0d3; color:#886021; }.compat-incompatible { background:#fce9e5; color:#a04634; }.compat-notApplicable { background:#edf0e9; color:#5a6554; }
.garage-result-count { margin-top:22px; font-size:12px; color:#68735e; }.compat-result { border:1px solid #dfe5d7; border-radius:16px; padding:20px; margin-top:14px; background:white; }.compat-result h3 { font-size:19px; margin:12px 0 8px; overflow-wrap:anywhere; }.compat-result h3 span { color:#91a083; }.compat-reason { font-size:12px; color:#66735e; line-height:1.7; }
.compat-machines { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; margin:16px 0; }.compat-machines > div { min-width:0; padding:14px; background:#f7f8f2; border-radius:10px; display:flex; flex-direction:column; gap:7px; }.compat-machines span { font-size:11px; color:#6d7b61; }.compat-machines strong { font-size:13px; overflow-wrap:anywhere; }.compat-machines small { color:#697361; font-size:11px; }.compat-item-actions { display:flex; gap:10px; flex-wrap:wrap; }.compat-item-actions button { border:0; border-bottom:1px solid #a4b398; background:none; font-size:12px; color:#456237; padding:7px 0; cursor:pointer; }
.compat-total { display:flex; align-items:center; justify-content:space-between; gap:15px; border-top:1px solid #edf0e6; padding-top:15px; }.compat-total > span { font-size:13px; }.compat-total small { display:block; font-size:11px; color:#77816f; margin-top:5px; }.compat-total > strong { font-size:23px; color:#33512a; white-space:nowrap; }
.detail-compatibility { padding:18px; background:#edf3e5; border:1px solid #dce5d2; border-radius:14px; margin:16px 0; }.detail-compatibility > strong { display:block; margin:10px 0; }.detail-compatibility p { font-size:13px; line-height:1.7; }
@media(max-width:900px) { .garage-layout { grid-template-columns:1fr; }.garage-hero-mark { font-size:42px; }.garage-hero { padding:28px; } }
@media(max-width:520px) { .garage-panel { padding:18px; }.garage-hero { padding:24px; }.garage-hero-mark { display:none; }.garage-search-fields { grid-template-columns:1fr 1fr; }.garage-search-fields > label:first-child { grid-column:1/-1; }.garage-search-actions { align-items:stretch; flex-direction:column; }.garage-search-actions > button { width:100%; }.compat-machines { grid-template-columns:1fr; }.compat-total > strong { font-size:21px; }.garage-tabs button { font-size:12px; } }