:root {
    color-scheme: light;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    color: #17202a;
    background: #eef2f6;
}

* { box-sizing: border-box; }
body { margin: 0; background: linear-gradient(160deg, #e7edf5 0%, #f8fafc 45%, #e9eff6 100%); min-height: 100vh; }
.preview-shell, .empty-state { width: min(1100px, calc(100% - 32px)); margin: 32px auto; }
.empty-state { min-height: 70vh; display: grid; place-content: center; text-align: center; }
.app-logo { width: 72px; margin: 0 auto; }
.hero { display: flex; align-items: center; gap: 24px; padding: 24px 28px; color: white; border-radius: 20px; background: linear-gradient(125deg, #063970, #0a6abf); box-shadow: 0 18px 45px rgba(18, 56, 94, .2); }
.hero span { opacity: .8; text-transform: uppercase; letter-spacing: .12em; font-size: .75rem; }
.hero h1 { margin: 5px 0 0; font-size: clamp(1.5rem, 4vw, 2.4rem); }
.mobile-logo { width: 120px; height: auto; padding: 10px; background: white; border-radius: 12px; }
.summary { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, .8fr); gap: 22px; margin-top: 22px; }
.primary-image { width: 100%; height: 420px; object-fit: contain; border-radius: 18px; background: white; box-shadow: 0 10px 35px rgba(27, 50, 73, .12); }
.price-card, .panel, .details-grid { border: 1px solid #dce4ec; background: rgba(255,255,255,.94); border-radius: 18px; box-shadow: 0 8px 28px rgba(27, 50, 73, .08); }
.price-card { padding: 28px; align-content: center; }
.price-card > strong { display: block; font-size: 2rem; color: #063970; }
.price-card a { display: inline-block; margin-top: 18px; padding: 11px 16px; background: #0a6abf; color: white; border-radius: 9px; text-decoration: none; }
.details-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; overflow: hidden; margin-top: 22px; background: #dce4ec; }
.detail { padding: 17px 20px; background: white; }
.detail span { display: block; margin-bottom: 5px; color: #6b7785; font-size: .82rem; }
.detail strong { overflow-wrap: anywhere; }
.panel { margin-top: 22px; padding: 25px 28px; }
.panel h2 { margin: 0 0 15px; color: #063970; }
.description { white-space: pre-wrap; line-height: 1.6; }
.equipment { columns: 3; margin: 0; padding-left: 20px; line-height: 1.8; }
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
.gallery img { width: 100%; height: 230px; object-fit: cover; border-radius: 14px; background: white; }

@media (max-width: 760px) {
    .preview-shell, .empty-state { width: min(100% - 18px, 1100px); margin: 9px auto 22px; }
    .hero { border-radius: 14px; padding: 18px; }
    .mobile-logo { width: 90px; }
    .summary { grid-template-columns: 1fr; }
    .primary-image { height: 300px; }
    .details-grid { grid-template-columns: 1fr 1fr; }
    .equipment { columns: 2; }
    .gallery { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 460px) {
    .hero { align-items: flex-start; flex-direction: column; }
    .details-grid, .gallery { grid-template-columns: 1fr; }
    .equipment { columns: 1; }
}