:root {
  --bg: #f4f8ff;
  --card: #ffffff;
  --text: #1f2a37;
  --muted: #607089;
  --line: #d6e4f5;
  --primary: #1852c8;
  --primary-2: #2d7cff;
  --green-soft: #eef9f1;
  --green-soft-2: #dff2e6;
  --green-border: #bfe1c9;
  --shadow: 0 12px 32px rgba(17,32,53,.08);
  --radius: 18px;
}
* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body {
  min-height: 100dvh;
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  color: var(--text);
  background: radial-gradient(circle at 12% 0%, rgba(83,151,255,.16), transparent 20%), radial-gradient(circle at 88% 0%, rgba(91,196,255,.10), transparent 18%), linear-gradient(180deg, #edf5ff 0%, #f7fbff 100%);
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
.hidden { display:none !important; }
.field-with-label { display:grid; gap:4px; }
.field-label { font-size:12px; color:var(--muted); line-height:1.2; }
.field-label.required::after { content:" *"; color:#b42318; font-weight:700; }
.required-note { color:var(--muted); font-size:12px; margin-top:4px; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
.page { max-width: 1440px; margin: 0 auto; padding: 12px; display: grid; gap: 12px; min-height: calc(100dvh - 24px); align-content: start; grid-auto-rows: min-content; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.topbar { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(240,247,255,.96)); }
.brand { display: grid; gap: 6px; min-width: 0; }
.brand-home { border: none; background: transparent; padding: 0; display: inline-flex; align-items: center; gap: 10px; width: fit-content; color: inherit; }
.brand-kicker { font-size: 11px; line-height: 1; text-transform: uppercase; letter-spacing: .18em; color: var(--primary-2); font-weight: 700; }
.brand-title { font-size: 18px; font-weight: 700; color: #123b90; }
.brand-subtitle { margin: 0; color: #2959b8; font-size: 12px; font-weight: 600; line-height: 1.5; }
.topbar-tools,.nav,.form-actions,.contact-actions,.detail-badges,.thumbs,.footer-links,.wanted-actions,.pager,.quick-chips,.contact-chip-row,.badges { display:flex; flex-wrap:wrap; gap:8px; }
.chip,.badge,.btn,.nav-btn { border-radius:999px; border:1px solid var(--line); background:#fff; color:#35506f; padding:6px 10px; font-size:12px; font-weight:600; }
.btn,.nav-btn { min-height: 40px; border-radius:12px; padding:8px 12px; }
.btn.primary,.nav-btn.active { background: linear-gradient(135deg, #1c56cb 0%, #2d7cff 100%); border-color:#1c56cb; color:#fff; }
.btn.danger { border-color:#ef4444; color:#b91c1c; background:#fff5f5; }
.chip.contact { background:#eef5ff; border-color:#c7d9ff; color:#1f56c8; }
.section-card,.notice-card,.partner-card,.footer,.detail-card,.form-card,.section-head-wrap { padding:16px; }
.section-head h1,.section-head h2,.section-head h3 { margin:0 0 6px; line-height:1.2; color:#123b90; }
.section-head h1,.section-head h2 { font-size:22px; } .section-head h3 { font-size:18px; }
.section-head p,.muted,.listing-summary,.detail-copy,.footer-note,.message { margin:0; color:var(--muted); font-size:12px; line-height:1.55; }
.notice-card { background:linear-gradient(135deg,#eef6ff 0%,#f7fbff 100%); border-color:#cfe0ff; display:grid; gap:10px; }
.wizard-grid { display:grid; gap:10px; }
.wizard-grid-main { grid-template-columns: repeat(4, minmax(0,1fr)); }
.wizard-grid-secondary { grid-template-columns: repeat(3, minmax(0,1fr)); margin-top:10px; }
.contact-compact-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
input,select,textarea { width:100%; min-height:42px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--text); outline:none; transition:.18s ease; }
textarea { min-height:110px; resize:vertical; }
input:focus,select:focus,textarea:focus { border-color: rgba(45,124,255,.55); box-shadow:0 0 0 3px rgba(45,124,255,.12); }
select:disabled { background:#f1f4fa; color:#8a97ad; cursor:not-allowed; }
.nav { padding:10px; position:sticky; top:10px; z-index:8; }
.section { display:none; } .section.active { display:block; }
.catalog-layout { display:grid; grid-template-columns:minmax(0,1.12fr) 380px; gap:14px; align-items:start; }
.stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.stat-box { border-radius:16px; border:1px solid var(--line); background:linear-gradient(180deg,#fff 0%,#f8fbff 100%); padding:11px; box-shadow:var(--shadow); display:grid; gap:4px; }
.stat-box strong { font-size:14px; color:#123b90; } .stat-box span { color:var(--muted); font-size:12px; line-height:1.45; }
.inline-banner { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 14px; border-radius:16px; border:1px solid #2f6fe8; background:linear-gradient(135deg,#1c56cb 0%,#2d7cff 62%,#55b6ff 100%); box-shadow:0 14px 30px rgba(45,124,255,.18); }
.inline-banner strong,.inline-banner p { color:#fff; } .inline-banner p { opacity:.92; }
.inline-banner .btn { background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.32); color:#fff; }
.message { border-radius:14px; padding:12px 14px; border:1px solid transparent; }
.message.hidden { display:none; }
.message.info { background:#eef6ff; border-color:#cfe0ff; color:#234078; }
.message.error { background:#fff2f2; border-color:#f1b6b6; color:#b42318; font-weight:600; }
.message.success { background:#eef9f1; border-color:#bfe1c9; color:#166534; font-weight:600; }
.listing-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.listing-card { border:1px solid var(--line); border-radius:16px; background:linear-gradient(180deg,#fff 0%,#f8fbff 100%); padding:12px; display:grid; gap:10px; cursor:pointer; transition:.15s ease; }
.listing-card.active { border-color:#75b88a; background:linear-gradient(180deg,#f1fbf4 0%,#e7f7ec 58%,#dff2e6 100%); box-shadow:0 0 0 3px rgba(108,181,129,.14), 0 14px 30px rgba(84,160,107,.14); }
.listing-actions { display:flex; justify-content:flex-start; }
.listing-open-link { width:fit-content; background:#fff; border-color:#9fc4ff; color:#1f56c8; }
.listing-top { display:grid; grid-template-columns:96px minmax(0,1fr); gap:12px; align-items:start; }
.photo-box,.detail-photo,.thumb { border:1px solid #d7e6fb; overflow:hidden; background:linear-gradient(160deg,#eff5ff 0%,#f8fbff 100%); display:flex; align-items:center; justify-content:center; flex-shrink:0; border-radius:16px; }
.photo-box { width:96px; height:96px; }
.photo-box img,.detail-photo img,.thumb img { width:100%; height:100%; object-fit:contain; background:#fff; padding:10px; display:block; }
.photo-box img.real,.detail-photo img.real,.thumb img.real { object-fit:cover; padding:0; background:transparent; }
.listing-title { margin:0 0 6px; font-size:15px; font-weight:700; }
.detail-card { border:1px solid #cfe4d6; border-radius:18px; background:linear-gradient(180deg,#f0fbf4 0%,#eef9f2 160px,#e7f5ec 300px,#dcf0e3 72%,#d1ead9 88%,#c5e4cf 100%); display:grid; gap:12px; position:sticky; top:12px; }
.detail-hero { display:grid; grid-template-columns:140px minmax(0,1fr); gap:12px; align-items:start; }
.detail-photo { width:140px; height:140px; border-radius:18px; }
.detail-title { margin:0 0 6px; color:#123b90; font-size:20px; }
.detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.detail-grid > div,.detail-block,.contact-panel { background:rgba(248,251,255,.96); border:1px solid #d7e6fb; border-radius:14px; padding:10px; }
.detail-grid small { display:block; color:var(--muted); margin-bottom:6px; }
.thumbs .thumb { width:52px; height:52px; padding:0; border-radius:12px; background:#fff; }
.thumb.active { box-shadow:0 0 0 2px rgba(45,124,255,.24); }
.buy-divider { height:1px; width:100%; background:linear-gradient(90deg,transparent 0%,#cfe0ff 16%,#9fc4ff 50%,#cfe0ff 84%,transparent 100%); margin:18px 0 14px; border:0; }
.wanted-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.wanted-card { padding:12px; border-radius:16px; border:1px solid #cfe0ff; background:linear-gradient(180deg,#f5fbff 0%,#ebf6ff 55%,#e1f0ff 100%); box-shadow:0 10px 24px rgba(45,124,255,.10); display:grid; gap:8px; }
.wanted-badge { width:fit-content; border-radius:999px; background:#fff; border:1px solid #bcd6ff; color:#1f56c8; padding:5px 9px; font-size:11px; font-weight:700; }
.wanted-budget { color:#0f7a43; font-weight:700; font-size:15px; }
.buy-form-actions { justify-content:flex-end; align-items:center; padding-top:2px; }
.footer { display:grid; gap:12px; }
.footer-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:14px; align-items:start; }
.footer-links button { border:none; background:transparent; padding:0; color:#1f56c8; font-weight:700; cursor:pointer; }
.modal-overlay { position:fixed; inset:0; z-index:50; background:rgba(16,27,56,.42); display:flex; align-items:center; justify-content:center; padding:16px; }
.modal-overlay.hidden { display:none; }
.modal-window { width:min(760px,100%); max-height:min(88vh,920px); overflow:auto; border-radius:18px; border:1px solid #d5e3fb; background:linear-gradient(180deg,#fff 0%,#f8fbff 100%); box-shadow:0 18px 44px rgba(17,32,53,.22); }
.modal-header { position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px; border-bottom:1px solid #e0ebfb; background:rgba(255,255,255,.96); }
.modal-title { margin:0; font-size:18px; color:#123b90; }
.modal-body { padding:16px; display:grid; gap:14px; }
.icon-btn { border:none; background:transparent; font-size:20px; line-height:1; cursor:pointer; }
.photo-modal-stage { position:relative; width:100%; aspect-ratio:1/1; border-radius:18px; overflow:hidden; background:#f2f7ff; border:1px solid #d7e6fb; }
.photo-modal-stage::after { content:'DEAF.RU'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; width:200%; left:-50%; font-size:clamp(110px,18vw,220px); font-weight:800; letter-spacing:.10em; text-transform:uppercase; color:rgba(255,255,255,.10); transform:rotate(-28deg); pointer-events:none; z-index:2; white-space:nowrap; }
.photo-modal-stage img { width:100%; height:100%; object-fit:cover; display:block; }
.photo-modal-actions { display:flex; justify-content:space-between; gap:10px; }
.test-note { padding:12px 14px; border-radius:14px; border:1px dashed #c5d9ff; background:#f7fbff; color:#44566f; font-size:12px; line-height:1.5; }
.seo-page { max-width: 1100px; }
.seo-listing { display:grid; grid-template-columns:minmax(280px, .9fr) minmax(0, 1.1fr); gap:18px; padding:18px; align-items:start; }
.seo-listing-media { border:1px solid #d7e6fb; border-radius:18px; background:#f4f8ff; overflow:hidden; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; }
.seo-listing-media img { width:100%; height:100%; object-fit:contain; background:#fff; }
.seo-listing-content { display:grid; gap:14px; }
.seo-listing-content h1 { margin:0; color:#123b90; font-size:28px; line-height:1.18; }
.seo-listing-summary { margin:0; color:var(--text); font-size:15px; line-height:1.6; }
@media (max-width: 1120px) { .catalog-layout,.footer-grid { grid-template-columns:1fr; } .detail-card { position:static; } }
@media (max-width: 900px) { .topbar { grid-template-columns:1fr; } .topbar-tools { justify-content:flex-start; } .wizard-grid-main,.wizard-grid-secondary,.stats,.detail-grid,.wanted-grid,.contact-compact-grid,.listing-grid { grid-template-columns:1fr; } }
@media (max-width: 760px) { .detail-hero,.listing-top,.seo-listing { grid-template-columns:1fr; } .detail-photo,.photo-box { width:100%; height:220px; } .nav,.form-actions,.contact-actions,.footer-links { flex-direction:column; align-items:stretch; } .seo-listing-content h1 { font-size:24px; } }