:root { font-family: Inter, system-ui, Arial, sans-serif; color-scheme: dark; }
* { box-sizing: border-box; }
body { margin:0; background:#050d18; color:#dbe7ff; }
.layout { display:grid; grid-template-columns:300px 1fr; min-height:100vh; }
.sidebar { padding:22px; background:#0a1b32; border-right:1px solid #1f3353; }
.sidebar h1 { margin:0 0 8px; font-size:1.45rem; }
.nav-btn { width:100%; text-align:left; margin:6px 0; padding:10px 12px; background:transparent; border:1px solid #274166; color:#dbe7ff; border-radius:10px; cursor:pointer; }
.nav-btn.active, .nav-btn:hover { background:#17345a; border-color:#4f8df8; }
.content { padding:28px; }
.hero { padding:22px; border:1px solid #274166; border-radius:16px; background:linear-gradient(130deg,#102546,#0d1c33); margin-bottom:18px; box-shadow:0 8px 28px rgba(0,0,0,.25); }
h2 { margin-top:0; }
.grid-2,.grid-3,.grid-4 { display:grid; gap:14px; }
.grid-2{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.grid-3{ grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.grid-4{ grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.card{ background:#0d1e35; border:1px solid #284164; border-radius:14px; padding:14px; box-shadow:0 6px 20px rgba(0,0,0,.22); }
.card img{ width:100%; height:120px; object-fit:cover; border-radius:10px; margin-bottom:8px; }
.probable-option{ cursor:pointer; display:block; }
.probable-option input{ width:auto; margin-right:8px; }
.badge { display:inline-block; padding:3px 8px; border-radius:999px; border:1px solid #3b5780; margin-right:4px; font-size:12px; }
.primary,.secondary{ border:none; padding:10px 14px; border-radius:10px; cursor:pointer; }
.primary{ background:#4f8df8; color:#00122f; font-weight:700; }
.secondary{ background:#274166; color:#dbe7ff; }
input,select,textarea{ width:100%; background:#0b1a2f; color:#dbe7ff; border:1px solid #2b4162; border-radius:8px; padding:8px; }
.steps{ margin-bottom:8px; color:#92abd1; }
.actions{ margin-top:12px; display:flex; gap:10px; }
.loading{ animation:pulse 1.2s infinite; color:#a4c8ff; }
@keyframes pulse { 0%,100%{opacity:.4}50%{opacity:1} }
.big{ font-size:1.2rem; font-weight:700; }
.highlight{ background:#14325a; border-left:4px solid #5ba2ff; padding:10px; border-radius:8px; }
table{ width:100%; border-collapse:collapse; }
th,td{ border-bottom:1px solid #2a405f; padding:8px; text-align:left; font-size:.9rem; }
.map-pin{ position:absolute; width:16px; height:16px; border-radius:50%; transform:translate(-50%,-50%); cursor:pointer; box-shadow:0 0 0 3px rgba(255,255,255,.2); }
@media (max-width: 900px){ .layout{ grid-template-columns:1fr; } .sidebar{ border-right:none; border-bottom:1px solid #1f3353; } }
.visually-hidden{ position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.image-drop-zone{ min-height:190px; display:flex; align-items:center; justify-content:center; gap:16px; padding:18px; margin:12px 0; border:2px dashed #4f8df8; border-radius:12px; background:#09182b; text-align:center; cursor:pointer; transition:.2s ease; }
.image-drop-zone:hover,.image-drop-zone:focus,.image-drop-zone.dragging{ border-color:#8db8ff; background:#112b4b; outline:2px solid transparent; }
.image-preview{ width:min(280px,45%)!important; height:180px!important; margin:0!important; object-fit:contain!important; background:#050d18; }
.analysis-presets{ display:flex; flex-wrap:wrap; gap:7px; margin:12px 0; }
.analysis-presets button{ font-size:.8rem; padding:7px 9px; }
.analysis-status{ min-height:1.4em; color:#a4c8ff; }
.analysis-error{ padding:12px; border:1px solid #e87878; border-radius:8px; background:#381616; color:#ffd7d7; }
.analysis-result{ margin-top:12px; padding:14px; border-left:4px solid #78ff9b; border-radius:8px; background:#0b2a23; }
.analysis-text{ margin-bottom:12px; line-height:1.55; white-space:normal; }
.analysis-disclaimer{ margin-top:14px; padding:10px; border-radius:8px; background:#302910; color:#ffe9a8; font-size:.88rem; }
button:disabled{ opacity:.5; cursor:not-allowed; }
@media (max-width:600px){ .image-drop-zone{ flex-direction:column; }.image-preview{ width:100%!important; } }
.user-summary{ display:flex; flex-direction:column; gap:3px; padding:10px; margin:10px 0; border-radius:10px; background:#102b4b; }
.user-summary small{ color:#a9bdd9; }
.auth-page{ max-width:920px; margin:0 auto; }
.auth-card{ max-width:520px; margin:4vh auto; }
.auth-card label,.registration-form label{ display:block; margin-top:10px; }
.registration-form{ display:grid; gap:16px; }
.registration-form fieldset{ margin:0; padding:18px; border:1px solid #284164; border-radius:14px; background:#0d1e35; }
.registration-form legend{ padding:0 8px; color:#a4c8ff; font-weight:700; }
.check-label{ display:flex!important; align-items:flex-start; gap:8px; }
.check-label input{ width:auto; margin-top:3px; }
.link-button{ border:0; padding:0; color:#8db8ff; background:transparent; text-decoration:underline; cursor:pointer; }
.form-message{ min-height:1.4em; color:#ffd7a8; }
.legal-page{ max-width:850px; margin:0 auto; line-height:1.6; }
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[role="button"]:focus-visible{ outline:3px solid #8db8ff; outline-offset:2px; }
@media(max-width:600px){ .content{ padding:14px; }.registration-form fieldset{ padding:12px; }.actions{ flex-wrap:wrap; }.actions>*{ flex:1 1 100%; } }
.google-login{ width:100%; margin:8px 0; }
.auth-divider{ display:flex; align-items:center; gap:10px; color:#92abd1; margin:10px 0; }
.auth-divider::before,.auth-divider::after{ content:""; flex:1; border-top:1px solid #284164; }
.technical-checklist{ grid-column:1/-1; display:grid; gap:8px; margin-top:14px; }
.technical-checklist details{ border:1px solid #284164; border-radius:10px; padding:10px; background:#09182b; }
.technical-checklist summary{ cursor:pointer; font-weight:700; color:#a4c8ff; }
.checklist-table{ display:grid; gap:8px; margin-top:10px; }
.checklist-row{ display:grid; grid-template-columns:minmax(180px,1fr) minmax(140px,.5fr) minmax(220px,1.5fr); gap:8px; align-items:center; }
@media(max-width:700px){ .checklist-row{ grid-template-columns:1fr; padding-bottom:10px; border-bottom:1px solid #284164; } }
.public-hero{ display:grid; grid-template-columns:minmax(160px,260px) 1fr; align-items:center; gap:24px; }
.public-hero>img{ width:100%; max-height:160px; object-fit:contain; }
@media(max-width:650px){ .public-hero{ grid-template-columns:1fr; text-align:center; }.public-hero>img{ margin:auto; } }