:root { --ink:#11231e; --muted:#60726c; --line:#dbe5df; --paper:#f6f8f5; --panel:#fff; --accent:#0c7b59; --accent2:#daf3e5; --warn:#fff6de; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif; }
.shell { width:min(1120px,calc(100% - 32px)); margin:0 auto 72px; }
.hero { padding:72px 0 38px; max-width:800px; }
.eyebrow,.step,.tab-label { margin:0 0 9px; color:var(--accent); font-size:.75rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.hero h1 { margin:0 0 20px; font-size:clamp(2.2rem,5vw,4.45rem); line-height:1.02; letter-spacing:-.055em; }
.intro { color:var(--muted); line-height:1.6; font-size:1.08rem; }
.panel,.results { padding:28px; background:var(--panel); border:1px solid var(--line); border-radius:22px; box-shadow:0 18px 44px rgba(22,44,34,.06); }
.panel-heading,.result-heading,.section-heading { display:flex; align-items:start; justify-content:space-between; gap:16px; }
.panel h2,.results h2 { margin:0; font-size:1.35rem; letter-spacing:-.025em; }
.actions { display:flex; align-items:center; gap:10px; }
.counter,.model-badge { padding:7px 11px; border-radius:999px; background:#eef3ef; color:var(--muted); font-size:.78rem; font-weight:700; }
.text-button { padding:0; border:0; background:none; color:var(--accent); font:700 .86rem inherit; cursor:pointer; }
.vehicle-fields { display:grid; grid-template-columns:2fr 1fr 1fr .7fr; gap:11px; margin-top:22px; }
.vehicle-fields label,.note-label { display:grid; gap:7px; font-size:.84rem; font-weight:700; }
.vehicle-fields input,textarea { width:100%; padding:12px; border:1px solid var(--line); border-radius:11px; color:var(--ink); font:inherit; }
.drop-zone { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:160px; gap:8px; margin-top:18px; border:1.5px dashed #9db4aa; border-radius:16px; cursor:pointer; transition:.18s; }
.drop-zone:hover,.dragging { background:var(--accent2); border-color:var(--accent); }
.upload-icon { display:grid; width:38px; height:38px; place-items:center; border-radius:50%; background:#d9f3e7; color:var(--accent); font-size:1.5rem; }
.drop-zone small,.note-label span { color:var(--muted); }
.previews { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:12px; margin-top:15px; }
.preview { position:relative; height:88px; overflow:hidden; border-radius:10px; background:#edf0ed; }
.preview img { width:100%; height:100%; object-fit:cover; }
.preview button { position:absolute; top:5px; right:5px; width:24px; height:24px; border:0; border-radius:50%; background:#17251f; color:#fff; cursor:pointer; font-size:19px; line-height:1; }
.note-label { margin:24px 0 8px; } textarea { min-height:88px; resize:vertical; }
.primary { width:100%; margin-top:16px; padding:14px 18px; border:0; border-radius:12px; background:var(--accent); color:#fff; font:700 1rem inherit; cursor:pointer; }
.primary:disabled,.cutout-button:disabled { opacity:.65; cursor:default; }
.status { min-height:20px; margin:13px 0 0; color:var(--muted); font-size:.92rem; }
.process,.results { margin-top:24px; }
.process-label { margin:19px 0 10px; font-size:1.1rem; font-weight:800; }
.progress-track { height:7px; overflow:hidden; border-radius:999px; background:#e7eeea; }
.progress-track span { display:block; width:0; height:100%; background:var(--accent); transition:width .45s ease; }
.process-steps { display:flex; flex-wrap:wrap; gap:8px; margin:15px 0; }
.process-steps span { padding:7px 9px; border-radius:999px; background:#f1f4f1; color:#91a097; font-size:.8rem; }
.process-steps .done { background:var(--accent2); color:#06714e; }
.vehicle { display:flex; flex-wrap:wrap; align-items:center; gap:9px 18px; padding:16px; margin:22px 0 14px; border-radius:13px; background:#f1f6f2; }
.vehicle strong { font-size:1.08rem; }.vehicle span,.vehicle p { color:var(--muted); font-size:.9rem; }.vehicle p { width:100%; margin:0; }
.warning { padding:12px 14px; border-radius:11px; background:var(--warn); color:#785a0e; font-size:.9rem; line-height:1.4; }.warnings .warning { margin:9px 0; }
.result-layout { display:grid; grid-template-columns:380px minmax(0,1fr); gap:24px; margin-top:23px; }
.map-panel { position:sticky; top:18px; height:max-content; padding:18px; overflow:hidden; border:1px solid var(--line); border-radius:14px; }.map-panel h3 { margin:0; }.map-panel p { color:var(--muted); font-size:.84rem; line-height:1.45; }
.car-map { position:relative; width:340px; height:520px; margin:10px auto 0; border-radius:18px; background:linear-gradient(145deg,#f8fcf9,#edf6f0); }.car-illustration { width:100%; height:100%; overflow:visible; }
.car-body { fill:url(#paint); stroke:#78978a; stroke-width:5; }.hood,.trunk { fill:#ecf8f1; stroke:#94b5a4; stroke-width:3; }.windshield,.cabin-glass { fill:#b8ded0; stroke:#719a8a; stroke-width:3; }.engine-bay { fill:#d8f0e4; stroke:#77b092; stroke-width:3; }.cabin-zone { fill:#e7f6ee; stroke:#a2c6b3; stroke-width:2; }.wheel { fill:#58796b; stroke:#315646; stroke-width:6; }.centerline { fill:none; stroke:#bfd9cb; stroke-width:3; stroke-dasharray:7 7; }
.zone { position:absolute; z-index:3; padding:7px 9px; border:1px solid #b8d8c8; border-radius:9px; background:#fff; color:#547268; font:700 .72rem inherit; cursor:pointer; white-space:nowrap; box-shadow:0 2px 8px rgba(23,64,45,.08); }.zone.active { border-color:#47ae7d; background:#dff8e9; color:#056447; }.zone.selected { outline:3px solid #82d2ae; }.zone:disabled { cursor:default; }
.zone.front { top:20px; left:50%; transform:translateX(-50%); }.zone.engine { top:112px; left:50%; transform:translateX(-50%); }.zone.cabin { top:255px; left:50%; transform:translateX(-50%); }.zone.rear { bottom:18px; left:50%; transform:translateX(-50%); }.zone.left { top:347px; left:3px; }.zone.right { top:347px; right:3px; }
.map-part-token { position:absolute; z-index:2; display:flex; align-items:center; width:96px; min-height:42px; gap:5px; padding:4px; overflow:hidden; border:1px solid #76bd9b; border-radius:9px; background:#fff; color:#104b36; box-shadow:0 5px 16px rgba(16,75,54,.16); font:700 .59rem/1.15 inherit; text-align:left; cursor:pointer; }.map-part-token img { width:31px; height:31px; flex:0 0 31px; border-radius:5px; object-fit:cover; }.map-part-token.front { top:67px; left:calc(50% + (var(--slot) * 100px) - 98px); }.map-part-token.engine { top:174px; left:calc(50% + (var(--slot) * 100px) - 98px); }.map-part-token.cabin { top:308px; left:calc(50% + (var(--slot) * 100px) - 98px); }.map-part-token.rear { top:430px; left:calc(50% + (var(--slot) * 100px) - 98px); }.map-part-token.left { top:347px; left:58px; }.map-part-token.right { top:347px; right:58px; }
.car-map.loading .zone.active { animation:zone-pulse 1.1s ease-in-out infinite; }.car-map.loading:after { content:""; position:absolute; z-index:4; top:44px; left:50%; width:162px; height:4px; border-radius:999px; background:#38ae79; transform:translateX(-50%); animation:scan 1.8s ease-in-out infinite; box-shadow:0 0 18px #38ae79; }
.catalog-area > section + section { margin-top:32px; }.section-heading h3 { margin:0; font-size:1.22rem; }.section-heading > span { color:var(--muted); font-size:.86rem; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px; margin-top:15px; }.part-card { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:14px; background:#fff; }.card-content { position:relative; z-index:1; padding:15px; background:#fff; }
.card-top { display:flex; justify-content:space-between; gap:8px; }.category { color:var(--accent); font-size:.77rem; font-weight:800; text-transform:uppercase; }.confidence,.status-tag { color:var(--muted); font-size:.8rem; }.status-tag { padding:3px 6px; border-radius:6px; background:#f0f2f1; }
.part-card h3 { margin:11px 0 7px; font-size:1.05rem; }.source,.needs,.catalog-message,.attribution,.cutout-note { margin:5px 0; color:var(--muted); font-size:.86rem; line-height:1.4; }.condition { margin:10px 0; padding-left:18px; font-size:.9rem; line-height:1.45; }
.part-cutout,.part-image { position:relative; display:grid; height:180px; overflow:hidden; place-items:center; border-bottom:1px solid var(--line); background:#fff; color:#718079; font-size:.78rem; }.part-image { height:150px; background:#f0f4f1; }.part-cutout img,.part-image img { display:block; width:100%; height:100%; object-fit:contain; }.part-cutout .source-preview { object-fit:cover; filter:saturate(.85); }
.zoomable { cursor:zoom-in; }.zoomable:focus-visible { outline:3px solid #49ad7e; outline-offset:-3px; }.part-cutout.is-processing:after { content:"Создаём вырезку…"; position:absolute; inset:0; display:grid; place-items:center; padding-top:42px; background:rgba(11,37,28,.58); color:#fff; font-weight:800; font-size:.88rem; }.part-cutout.is-processing:before { content:""; position:absolute; z-index:1; top:calc(50% - 32px); left:calc(50% - 16px); width:32px; height:32px; border:3px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:spin .8s linear infinite; }
.image-viewer { width:min(94vw,1100px); max-width:none; max-height:92vh; padding:18px; border:0; border-radius:16px; background:#101713; color:#fff; box-shadow:0 22px 70px rgba(0,0,0,.45); }.image-viewer::backdrop { background:rgba(5,13,9,.76); }.image-viewer img { display:block; width:auto; max-width:100%; max-height:76vh; margin:auto; object-fit:contain; }.image-viewer p { margin:12px 42px 0 0; color:#d7e5dd; font-size:.9rem; }.close-viewer { position:absolute; top:9px; right:11px; z-index:1; width:34px; height:34px; border:0; border-radius:50%; background:rgba(255,255,255,.16); color:#fff; font-size:1.55rem; cursor:pointer; }
.cutout-button { width:100%; padding:10px; border:1px solid var(--accent); border-radius:9px; background:#fff; color:var(--accent); font:700 .84rem inherit; cursor:pointer; }
.catalog-note { padding:11px 13px; border-left:3px solid #d2a832; background:#fffaf0; color:#745c1d; font-size:.88rem; line-height:1.45; }.attribution a,.sources a { color:var(--accent); }.empty { color:var(--muted); }
.sources { margin-top:30px; padding-top:18px; border-top:1px solid var(--line); }.sources h3 { margin:0 0 8px; }.sources p { margin:6px 0; color:var(--muted); font-size:.85rem; }
@keyframes zone-pulse { 50% { filter:brightness(1.08); box-shadow:0 0 0 4px rgba(71,174,125,.18); } } @keyframes scan { 50% { top:455px; opacity:.55; } } @keyframes spin { to { transform:rotate(360deg); } }
@media (max-width:760px) { .hero { padding-top:45px; }.panel,.results { padding:19px; }.vehicle-fields,.result-layout { grid-template-columns:1fr; }.map-panel { position:static; }.hero h1 { font-size:2.4rem; } }
@media (max-width:440px) { .vehicle-fields { grid-template-columns:1fr; }.actions { align-items:end; flex-direction:column; }.car-map { transform:scale(.88); transform-origin:top center; margin-bottom:-28px; } }