/* =========================================================
   go7.uz — стили сайта и кабинета
   ========================================================= */
:root {
  --bg: #F6F2EC;
  --bg-2: #EFE8DE;
  --surface: #FFFFFF;
  --ink: #0B1F3A;
  --ink-2: #3D4A63;
  --muted: #7A8399;
  --line: #E6DED3;
  --accent: #FF5A36;
  --accent-2: #FF8A3D;
  --accent-soft: #FFEDE6;
  --accent-soft-2: #FFE0D4;
  --accent-ink: #C2410C;
  --teal-ink: #0B6B5F;
  --surface-2: #FBF8F4;
  --field: #FFFFFF;
  --seg-on: #FFFFFF;
  --sel-bg: #FFF9F6;
  --ink-3: #5F6B82;
  --ink-4: #8A93A6;
  --line-2: #D3C9BC;
  --navy: #0B1F3A;
  --chrome: #0B1F3A;
  --teal: #0E9F8E;
  --teal-soft: #E0F5F2;
  --danger: #D92D20;
  --danger-soft: #FDECEC;
  --gold: #F5A524;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 1px 2px rgba(11,31,58,.04), 0 8px 24px rgba(11,31,58,.06);
  --shadow-lg: 0 24px 64px rgba(11,31,58,.16);
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 800; letter-spacing: -.025em; margin: 0; line-height: 1.15; }
h1 { font-size: clamp(30px, 5vw, 56px); font-weight: 800; }
h2 { font-size: clamp(22px, 3vw, 32px); font-weight: 600; }
h3 { font-size: 18px; font-weight: 600; }
p { margin: 0; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; }
.stack > * + * { margin-top: 14px; }

/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border-radius: 999px; border: 0; cursor: pointer;
  font: 700 15px/1 var(--font); color: #fff; background: var(--accent);
  transition: transform .12s ease, box-shadow .2s ease, background .2s;
  white-space: nowrap; text-decoration: none !important;
}
.btn:hover { background: #F04A26; box-shadow: 0 8px 20px rgba(255,90,54,.28); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
.btn.lg { padding: 16px 28px; font-size: 16px; }
.btn.sm { padding: 9px 14px; font-size: 13px; }
.btn.block { width: 100%; }
.btn.dark { background: var(--navy); }
.btn.dark:hover { background: #142E52; box-shadow: 0 8px 20px rgba(11,31,58,.25); }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn.ghost:hover { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.btn.soft { background: var(--accent-soft); color: var(--accent); }
.btn.soft:hover { background: var(--accent-soft-2); box-shadow: none; }
.btn.danger { background: var(--danger-soft); color: var(--danger); }
.btn.danger:hover { background: #FBD9D7; box-shadow: none; }
.btn.tg { background: #2AABEE; } .btn.tg:hover { background: #1E96D4; box-shadow: 0 8px 20px rgba(42,171,238,.3); }
.btn.wa { background: #25D366; } .btn.wa:hover { background: #1EBE5A; box-shadow: 0 8px 20px rgba(37,211,102,.3); }
.icon-btn {
  width: 38px; height: 38px; border-radius: 50%; border: 0; background: transparent; cursor: pointer;
  display: inline-grid; place-items: center; color: var(--ink-2); font-size: 18px;
}
.icon-btn:hover { background: var(--bg-2); }
.spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid currentColor; border-right-color: transparent;
  animation: spin .7s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Формы ---------- */
.field { display: block; }
.field > span { display: block; font-weight: 700; font-size: 13px; margin-bottom: 6px; color: var(--ink-2); }
.field small { display: block; color: var(--muted); font-size: 12px; margin-top: 5px; }
.input, select.input, textarea.input {
  width: 100%; padding: 13px 15px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--line); background: var(--field); color: var(--ink);
  font: 500 15px/1.4 var(--font); outline: none; transition: border-color .15s, box-shadow .15s;
}
textarea.input { resize: vertical; min-height: 90px; line-height: 1.5; }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(255,90,54,.12); }
.input.err { border-color: var(--danger); }
.pass-wrap { position: relative; }
.pass-wrap .icon-btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 15px; }
.seg { display: inline-flex; background: var(--bg-2); border-radius: 999px; padding: 4px; gap: 2px; flex-wrap: wrap; }
.seg button {
  border: 0; background: transparent; padding: 8px 14px; border-radius: 999px; cursor: pointer;
  font: 700 13px var(--font); color: var(--ink-2);
}
.seg button.on { background: var(--seg-on); color: var(--ink); box-shadow: 0 1px 3px rgba(11,31,58,.12); }
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; font-size: 14px; user-select: none; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); }

.alert { padding: 12px 14px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; }
.alert.err { background: var(--danger-soft); color: var(--danger); }
.alert.ok { background: var(--teal-soft); color: var(--teal-ink); }
.alert.info { background: var(--accent-soft); color: var(--accent-ink); }

/* ---------- Логотип ---------- */
.logo { font: 800 22px var(--display); color: var(--ink); letter-spacing: -.035em; display: inline-flex; align-items: center; gap: 8px; text-decoration: none !important; }
.logo b { color: var(--accent); font-weight: 700; }
.logo .mark {
  width: 34px; height: 34px; border-radius: 10px; background: var(--navy); color: #fff;
  display: grid; place-items: center; font-size: 16px; transform: rotate(-8deg);
}

/* ---------- Лендинг ---------- */
.site-head { position: sticky; top: 0; z-index: 30; background: rgba(246,242,236,.85); backdrop-filter: blur(12px); }
.site-head .in { max-width: 1180px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; gap: 16px; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.hero { padding: 48px 0 72px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.hero .kicker { display: inline-flex; gap: 8px; align-items: center; background: var(--surface); border-radius: 999px; padding: 7px 14px 7px 8px; font-weight: 700; font-size: 13px; box-shadow: var(--shadow); margin-bottom: 22px; }
.hero .kicker i { background: var(--accent); color: #fff; font-style: normal; border-radius: 999px; padding: 3px 9px; font-size: 11px; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero p.lead { font-size: 18px; color: var(--ink-2); margin: 20px 0 30px; max-width: 520px; }
.hero .cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero .note { margin-top: 18px; font-size: 13px; color: var(--muted); }

.demo { position: relative; min-height: 440px; }
.demo .shot {
  position: absolute; left: 0; top: 30px; width: 78%; background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-lg);
  overflow: hidden; transform: rotate(-4deg); font-size: 10px;
}
.demo .shot .bar { background: #3B5F7E; color: #fff; padding: 7px 10px; font-weight: 700; display: flex; gap: 22px; }
.demo .shot .ln { display: grid; grid-template-columns: 1.1fr 2fr .9fr; gap: 6px; padding: 7px 10px; border-bottom: 1px solid #eee; color: #445; }
.demo .shot .ln b { color: #2B7A5B; font-weight: 600; }
.demo .shot .ln.red { background: #F2B8B5; }
.demo .poster {
  position: absolute; right: 0; bottom: 0; width: 62%; aspect-ratio: 4/5; border-radius: 22px; overflow: hidden;
  background: linear-gradient(160deg, #FF7A45 0%, #FF3D6E 45%, #5B2BB8 100%); color: #fff; padding: 22px;
  box-shadow: var(--shadow-lg); transform: rotate(3deg); display: flex; flex-direction: column;
}
.demo .poster .sun { position: absolute; right: -40px; top: -40px; width: 180px; height: 180px; border-radius: 50%; background: rgba(255,255,255,.18); }
.demo .poster small { opacity: .85; font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.demo .poster h4 { font: 800 34px var(--display); margin: 6px 0 4px; }
.demo .poster .it { margin-top: 8px; background: rgba(255,255,255,.16); border-radius: 12px; padding: 8px 10px; display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; }
.demo .poster .it span:last-child { white-space: nowrap; }
.demo .arrow { position: absolute; left: 33%; top: 70%; width: 56px; height: 56px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-size: 22px; z-index: 3; box-shadow: var(--shadow-lg); }

.section { padding: 72px 0; }
.section.alt { background: var(--surface); }
.section .head { max-width: 640px; margin-bottom: 36px; }
.section .head p { color: var(--ink-2); margin-top: 12px; font-size: 17px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step { background: var(--bg); border-radius: var(--radius); padding: 26px; }
.section:not(.alt) .step { background: var(--surface); box-shadow: var(--shadow); }
.step .n { font: 700 14px var(--display); width: 40px; height: 40px; border-radius: 12px; background: var(--navy); color: #fff; display: grid; place-items: center; margin-bottom: 18px; }
.step h3 { margin-bottom: 8px; }
.step p { color: var(--ink-2); }
.feat { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.feat > div { background: var(--surface); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.feat .ic { font-size: 26px; margin-bottom: 12px; }
.feat h3 { font-size: 16px; margin-bottom: 6px; }
.feat p { color: var(--ink-2); font-size: 14px; }
.cta-band { background: var(--navy); color: #fff; border-radius: 28px; padding: 48px; display: flex; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.cta-band p { color: #B7C2D6; margin-top: 8px; }
.site-foot { padding: 36px 0 48px; color: var(--muted); font-size: 14px; }
.site-foot .wrap { display: flex; gap: 16px; justify-content: space-between; flex-wrap: wrap; }

/* ---------- Авторизация ---------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth .side {
  background: linear-gradient(165deg, #0B1F3A 0%, #1C3A6B 60%, #3A2470 100%); color: #fff; padding: 40px; position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
}
.auth .side .logo { color: #fff; }
.auth .side .logo .mark { background: var(--accent); }
.auth .side h2 { font-size: 34px; max-width: 420px; }
.auth .side p { color: #B7C2D6; max-width: 400px; margin-top: 14px; }
.auth .side .orb { position: absolute; width: 420px; height: 420px; right: -140px; bottom: -120px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #FF8A3D, #FF3D6E 55%, transparent 70%); opacity: .55; filter: blur(4px); }
.auth .main { display: grid; place-items: center; padding: 32px 20px; }
.auth .card { width: 100%; max-width: 420px; }
.auth .card h2 { margin-bottom: 8px; }
.auth .card .sub { color: var(--ink-2); margin-bottom: 26px; }
.auth .switch { margin-top: 22px; text-align: center; color: var(--ink-2); font-size: 14px; }
.auth .m-logo { display: none; margin-bottom: 22px; }
.auth .back { display: inline-flex; gap: 6px; align-items: center; color: var(--ink-2); font-weight: 700; font-size: 14px; margin-bottom: 26px; cursor: pointer; }

.otp { display: flex; gap: 10px; justify-content: space-between; margin: 6px 0 18px; }
.otp input {
  width: 100%; max-width: 58px; aspect-ratio: 4/5; text-align: center; border-radius: 14px; border: 1.5px solid var(--line);
  font: 700 26px var(--display); color: var(--ink); background: var(--field); outline: none;
}
.otp input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(255,90,54,.12); }
.otp.shake { animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }
.otp-mail { background: var(--surface); border-radius: var(--radius-sm); padding: 12px 14px; display: flex; gap: 10px; align-items: center; margin-bottom: 18px; box-shadow: var(--shadow); font-weight: 700; word-break: break-all; }

/* ---------- Кабинет ---------- */
.ava { width: 36px; height: 36px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-weight: 800; flex: none; }

.main-area { min-width: 0; }
.page { max-width: none; margin: 0; padding: 28px 28px 120px; }
.page-head { display: flex; gap: 16px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; margin-bottom: 24px; }
.page-head p { color: var(--ink-2); margin-top: 6px; }
.card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; }

/* Загрузка */
.drop {
  border: 2px dashed var(--line-2); border-radius: 24px; background: var(--surface); padding: 48px 24px; text-align: center; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.drop:hover, .drop.over { border-color: var(--accent); background: var(--sel-bg); }
.drop .big { font-size: 46px; margin-bottom: 10px; }
.drop h3 { font-size: 20px; margin-bottom: 8px; }
.drop p { color: var(--ink-2); }
.drop kbd { background: var(--bg-2); border-radius: 6px; padding: 2px 7px; font: 700 12px var(--font); }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-top: 16px; }
.thumb { position: relative; border-radius: 14px; overflow: hidden; background: var(--bg-2); aspect-ratio: 16/10; box-shadow: var(--shadow); }
.thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.thumb button { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(11,31,58,.75); color: #fff; cursor: pointer; }
.gen-opts { display: grid; grid-template-columns: auto 1fr; gap: 18px 24px; align-items: start; margin-top: 22px; }
.gen-opts > label { font-weight: 700; font-size: 14px; padding-top: 8px; }

.progress-card { text-align: center; padding: 56px 24px; }
.progress-card .orb {
  width: 92px; height: 92px; margin: 0 auto 24px; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--accent), var(--accent-2), #FF3D6E, #5B2BB8, var(--accent));
  animation: spin 2.2s linear infinite; position: relative;
}
.progress-card .orb::after { content: "✨"; position: absolute; inset: 8px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 30px; animation: spin 2.2s linear infinite reverse; }
.progress-steps { display: inline-flex; flex-direction: column; gap: 10px; text-align: left; margin-top: 18px; }
.progress-steps div { color: var(--muted); font-weight: 600; display: flex; gap: 10px; align-items: center; }
.progress-steps div.on { color: var(--ink); }
.progress-steps div.done { color: var(--teal); }

/* Результат */
.dest-hero {
  border-radius: 24px; padding: 28px; color: #fff; position: relative; overflow: hidden; margin-bottom: 20px;
  background: linear-gradient(135deg, #0B1F3A 0%, #1C3A6B 55%, #FF5A36 140%);
}
.dest-hero .flag { font-size: 34px; }
.dest-hero h2 { font-size: clamp(26px, 4vw, 40px); margin: 6px 0 8px; }
.dest-hero p { color: #D2DAE8; max-width: 640px; }
.dest-hero .chips { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; }
.chip { display: inline-flex; gap: 6px; align-items: center; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.14); font-size: 13px; font-weight: 700; }
.toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; background: var(--surface); padding: 12px 14px; border-radius: 16px; box-shadow: var(--shadow); margin-bottom: 18px; }
.toolbar .lbl { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.toolbar .input { width: 110px; padding: 9px 12px; }

.tours { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.tour {
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; position: relative;
  border: 2px solid transparent; transition: border-color .15s, box-shadow .15s; display: flex; flex-direction: column;
}
.tour.sel { border-color: var(--accent); box-shadow: 0 10px 30px rgba(255,90,54,.15); }
.tour.na { opacity: .6; }
.tour .top { display: flex; gap: 12px; align-items: flex-start; }
.tour .pick { width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--line-2); display: grid; place-items: center; cursor: pointer; flex: none; margin-top: 2px; color: #fff; font-weight: 800; font-size: 14px; background: var(--surface); }
.tour.sel .pick { background: var(--accent); border-color: var(--accent); }
.tour .name { font: 700 16.5px/1.25 var(--font); }
.stars { color: var(--gold); letter-spacing: 1px; font-size: 13px; }
.tour .area { color: var(--muted); font-size: 13px; font-weight: 600; margin-top: 2px; }
.tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.tag { font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 8px; background: var(--bg); color: var(--ink-2); }
.tag.meal { background: var(--teal-soft); color: var(--teal-ink); }
.tag.nrf { background: #FFF4E0; color: #A15C00; }
.tag.na { background: var(--danger-soft); color: var(--danger); }
.tour .desc { color: var(--ink-2); font-size: 14px; margin-top: 12px; flex: 1; }
.tour .desc[contenteditable="true"] { outline: 2px dashed var(--accent); border-radius: 8px; padding: 4px; }
.tour ul.hl { margin: 10px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--ink-2); }
.tour ul.hl li::before { content: "✓ "; color: var(--teal); font-weight: 800; }
.tour .foot { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); gap: 10px; }
.tour .when { font-size: 13px; color: var(--ink-2); font-weight: 600; }
.price { font: 700 22px var(--display); white-space: nowrap; }
.price small { font: 700 12px var(--font); color: var(--muted); display: block; text-align: right; }
.price .old { font: 600 12px var(--font); color: var(--muted); text-decoration: line-through; display: block; text-align: right; }

.actionbar {
  position: fixed; left: var(--sbw, 248px); right: 0; bottom: 0; z-index: 25; padding: 14px 28px; background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px); border-top: 1px solid var(--line); display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.actionbar .cnt { font-weight: 800; margin-right: auto; }
.actionbar .cnt span { color: var(--accent); }

/* Списки */
.list { display: grid; gap: 10px; }
.li { background: var(--surface); border-radius: 16px; box-shadow: var(--shadow); padding: 16px 18px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.li .t { font-weight: 800; }
.li .m { color: var(--muted); font-size: 13px; margin-top: 2px; }
.li .grow { min-width: 200px; }
.empty { text-align: center; padding: 56px 20px; color: var(--ink-2); }
.empty .big { font-size: 48px; margin-bottom: 12px; }
.empty h3 { margin-bottom: 8px; }
.empty .btn { margin-top: 18px; }

/* Модальные окна */
.modal-bg { position: fixed; inset: 0; background: rgba(11,31,58,.5); z-index: 100; display: grid; place-items: center; padding: 16px; animation: fade .15s; overflow-y: auto; }
@keyframes fade { from { opacity: 0; } }
.modal { background: var(--surface); border-radius: 24px; width: 100%; max-width: 560px; box-shadow: var(--shadow-lg); animation: pop .18s ease; max-height: calc(100vh - 32px); display: flex; flex-direction: column; }
.modal.wide { max-width: 1040px; }
@keyframes pop { from { transform: translateY(10px) scale(.98); opacity: 0; } }
.modal .mh { padding: 20px 24px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); }
.modal .mh h3 { flex: 1; }
.modal .mb { padding: 22px 24px; overflow-y: auto; }
.modal .mf { padding: 16px 24px; border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

.poster-ui { display: grid; grid-template-columns: 1fr 300px; gap: 24px; align-items: start; }
.poster-ui .poster-preview { position: sticky; top: 0; }
.poster-preview { background: var(--bg-2); border-radius: 18px; padding: 18px; display: grid; place-items: center; min-height: 420px; }
.poster-preview canvas { max-width: 100%; max-height: 64vh; border-radius: 10px; box-shadow: var(--shadow-lg); background: #fff; }
.poster-ctrl .field + .field { margin-top: 16px; }
.themes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.themes button { aspect-ratio: 1; border-radius: 12px; border: 3px solid transparent; cursor: pointer; }
.themes button.on { border-color: var(--ink); }

.share-box { background: var(--bg); border-radius: 14px; padding: 14px; display: flex; gap: 10px; align-items: center; }
.share-box input { flex: 1; border: 0; background: transparent; font: 700 14px var(--font); color: var(--ink); outline: none; min-width: 0; }

.toast-wrap { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 200; display: grid; gap: 8px; width: max-content; max-width: calc(100vw - 32px); }
.toast { background: var(--navy); color: #fff; padding: 12px 18px; border-radius: 14px; font-weight: 700; font-size: 14px; box-shadow: var(--shadow-lg); animation: pop .2s; }
.toast.err { background: var(--danger); }
.toast.ok { background: #0B7A6C; }

.boot { min-height: 100vh; display: grid; place-items: center; }

/* ---------- Адаптив ---------- */
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; padding-top: 24px; }
  .demo { min-height: 380px; }
  .steps, .feat { grid-template-columns: 1fr 1fr; }
  .auth { grid-template-columns: 1fr; }
  .auth .side { display: none; }
  .auth .m-logo { display: inline-flex; }
  .poster-ui { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .page { padding: 20px 16px 170px; }
  .actionbar { left: 0; bottom: 60px; padding: 10px 16px; }
  .actionbar .btn { flex: 1; padding: 11px 10px; font-size: 13px; }
  .actionbar .cnt { width: 100%; }
  .gen-opts { grid-template-columns: 1fr; gap: 8px; }
  .gen-opts > label { padding-top: 8px; }
  .toast-wrap { bottom: 140px; }
}
@media (max-width: 600px) {
  .steps, .feat { grid-template-columns: 1fr; }
  .tours { grid-template-columns: 1fr; }
  .cta-band { padding: 28px; }
  .site-head .hide-sm { display: none; }
  .modal .mh, .modal .mb, .modal .mf { padding-left: 16px; padding-right: 16px; }
  .demo .poster h4 { font-size: 26px; }
  .drop { padding: 36px 16px; }
}

/* =========================================================
   Рабочая область результата (без всплывающих окон)
   ========================================================= */
.page.page-wide { max-width: none; padding: 24px 24px 48px; }
.field span em { font-style: normal; font-weight: 600; color: var(--muted); margin-left: 4px; }

.ws-head { margin-bottom: 18px; }
.ws-back { display: inline-block; font-weight: 700; font-size: 14px; color: var(--ink-2); margin-bottom: 10px; }
.ws-hero {
  display: flex; gap: 18px; align-items: center; padding: 20px 24px; border-radius: 22px; color: #fff;
  background: linear-gradient(120deg, #0B1F3A 0%, #1C3A6B 60%, #4A2C6E 100%);
}
.ws-flag { font-size: 40px; line-height: 1; flex: none; }
.ws-hero h2 { font-size: clamp(22px, 2.6vw, 30px); }
.ws-hero h2 span { opacity: .55; font-weight: 500; }
.ws-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 14px; font-weight: 600; color: #C9D4E6; }
.ws-edit { margin-left: auto; font-size: 13px; background: rgba(255,255,255,.12); padding: 8px 14px; border-radius: 12px; color: #fff; text-align: right; }

.ws { display: grid; grid-template-columns: minmax(0, 1fr) clamp(420px, 30vw, 600px); grid-template-areas: "head panel" "list panel"; grid-template-rows: auto 1fr; gap: 0 20px; align-items: start; }
.ws-head { grid-area: head; }
.ws-list { grid-area: list; }
.ws-panel { grid-area: panel; }
.ws-mtabs { grid-area: tabs; }
.ws-list { min-width: 0; }

.ws-bar { background: var(--surface); border-radius: 18px; box-shadow: var(--shadow); padding: 12px 16px; margin-bottom: 12px; position: sticky; top: 12px; z-index: 5; }
.ws-bar-row { display: flex; gap: 10px 20px; align-items: center; flex-wrap: wrap; }
.ws-bar .ctl { display: flex; gap: 8px; align-items: center; }
.ws-bar .lbl { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.ws-bar .input { width: 84px; padding: 8px 10px; }
.ws-bar .seg button { padding: 7px 12px; }
.ws-selrow { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 10px; font-size: 14px; }
.selinfo { color: var(--ink-2); } .selinfo b { color: var(--accent); }
.lnk { border: 0; background: none; padding: 4px 2px; font: 700 14px var(--font); color: var(--accent); cursor: pointer; }
.lnk:hover { text-decoration: underline; }

.trows { background: var(--surface); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; }
.trow { border-bottom: 1px solid var(--line); transition: background .12s; }
.trow:last-child { border-bottom: 0; }
.trow.sel { background: var(--sel-bg); box-shadow: inset 3px 0 0 var(--accent); }
.trow.na { opacity: .55; }
.tr-main { display: grid; grid-template-columns: 24px minmax(0, 1fr) 128px 112px 28px; gap: 14px; align-items: center; padding: 13px 14px 13px 16px; cursor: pointer; user-select: none; }
.trow:not(.sel) .tr-main:hover { background: var(--surface-2); }
.trow .pick { width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--line-2); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 13px; background: var(--surface); }
.trow.sel .pick { background: var(--accent); border-color: var(--accent); }
.tr-info { min-width: 0; }
.tr-name { font-weight: 800; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-name .stars { font-size: 12px; }
.tr-sub { font-size: 13px; color: var(--muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.tr-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; }
.tr-tags:empty { display: none; }
.tr-tags .tag { font-size: 11px; padding: 2px 7px; }
.tr-when-m { display: none; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.tr-when { font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.35; }
.tr-when span { display: block; font-weight: 600; color: var(--muted); }
.tr-price { text-align: right; font: 700 17px var(--display); white-space: nowrap; }
.tr-price s { display: block; font: 600 12px var(--font); color: var(--muted); }
.tr-price b { display: block; font-weight: 700; }
.tr-price small { display: block; margin-top: 2px; font: 600 11.5px var(--font); color: var(--muted); letter-spacing: 0; }
.tr-price small.tot { margin-top: 0; font-weight: 500; opacity: .85; }
.tr-pax { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--bg, #F5F7FB); }
.tr-pax .lbl { font-weight: 700; font-size: 13px; }
.tr-pax label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.tr-pax select.input { width: auto; min-width: 58px; padding: 6px 28px 6px 10px; height: auto; font-size: 13px; }
.tr-exp { width: 28px; height: 28px; border-radius: 8px; border: 0; background: var(--bg); cursor: pointer; color: var(--ink-2); font-size: 13px; }
.tr-exp:hover { background: var(--bg-2); }
.tr-more { padding: 0 16px 16px 54px; }
.tr-desc { width: 100%; border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; font: 500 14px/1.5 var(--font); color: var(--ink-2); resize: vertical; background: var(--surface); }
.tr-desc:focus { outline: none; border-color: var(--accent); }
.tr-more .hl { margin: 8px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 4px 14px; }
.tr-more .hl li::before, .vstart .hl li::before { content: "✓ "; color: var(--teal); font-weight: 800; }

.ws-panel { position: sticky; top: 12px; background: var(--surface); border-radius: 22px; box-shadow: var(--shadow); display: flex; flex-direction: column; max-height: calc(100vh - 24px); overflow: hidden; }
.ws-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 12px 12px 0; padding: 4px; background: var(--bg); border-radius: 14px; }
.ws-tabs button { border: 0; background: transparent; padding: 8px 4px; border-radius: 10px; cursor: pointer; font: 700 12.5px var(--font); color: var(--ink-2); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ws-tabs button span { font-size: 18px; }
.ws-tabs button.on { background: var(--seg-on); color: var(--ink); box-shadow: 0 1px 3px rgba(11,31,58,.12); }
.ws-pbody { flex: 1; overflow-y: auto; padding: 16px 18px; }
.ws-pfoot { padding: 14px 18px 16px; border-top: 1px solid var(--line); }
.ws-pfoot:empty { display: none; }
.pv { position: relative; background: var(--bg-2); border-radius: 16px; padding: 14px; display: grid; place-items: center; margin-bottom: 16px; }
.pv canvas { max-width: 100%; max-height: 42vh; border-radius: 8px; box-shadow: 0 10px 30px rgba(11,31,58,.18); }
.pv .pv-back { position: absolute; top: 10px; left: 10px; z-index: 2; height: 40px; padding: 0 16px; border-radius: 999px; border: 0; background: rgba(11,31,58,.8); color: #fff; font: 700 13px var(--font); cursor: pointer; }
.pv .pv-back:hover { background: var(--navy); }
.pv .snd { position: absolute; top: 10px; right: 10px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(11,31,58,.8); color: #fff; font-size: 17px; cursor: pointer; }
.pform { display: grid; gap: 14px; }
.pform > * { min-width: 0; } /* ничего внутри формы не растягивает панель вширь */
.pform .seg { display: flex; flex-wrap: wrap; }
.pform .themes button { aspect-ratio: auto; height: 40px; }
.fold { background: var(--bg); border-radius: 12px; padding: 10px 12px; }
.fold summary { cursor: pointer; font-weight: 700; font-size: 14px; }
.fold[open] summary { margin-bottom: 10px; }
.fold .scene { margin-bottom: 10px; }
.fold .scene .input { padding: 8px 10px; font-size: 13.5px; margin-top: 5px; }
.vstart { text-align: center; padding: 28px 8px; color: var(--ink-2); }
.vstart .big { font-size: 48px; margin-bottom: 10px; }
.vstart h3 { color: var(--ink); margin-bottom: 8px; }
.vstart .hl { list-style: none; padding: 0; font-size: 14px; display: grid; gap: 4px; }
.ptip { background: var(--accent-soft); color: var(--accent-ink); border-radius: 12px; padding: 10px 12px; font-size: 13px; margin-bottom: 12px; }
.post-ta { min-height: 52vh; font-size: 14px; line-height: 1.55; }
.share-done { background: var(--teal-soft); border-radius: 16px; padding: 14px; margin-bottom: 16px; }
.share-done .share-box { background: var(--surface); margin-top: 12px; }
.ws-mtabs { display: none; }

@media (max-width: 1180px) {
  .ws { grid-template-columns: 1fr; grid-template-areas: "head" "tabs" "list" "panel"; grid-template-rows: auto; }
  .ws[data-m="list"] .ws-panel { display: none; }
  .ws:not([data-m="list"]) .ws-list { display: none; }
  .ws-panel { position: static; max-height: none; overflow: visible; }
  .ws-tabs { display: none; }
  .ws-pbody { overflow: visible; }
  .ws-pfoot { position: sticky; bottom: 0; background: var(--surface); border-radius: 0 0 22px 22px; }
  .pv canvas { max-height: 56vh; }
  .ws-mtabs { display: flex; gap: 6px; overflow-x: auto; position: sticky; top: 0; z-index: 20; background: var(--bg); padding: 8px 0 10px; margin-bottom: 4px; scrollbar-width: none; }
  .ws-mtabs::-webkit-scrollbar { display: none; }
  .ws-mtabs button { flex: none; border: 0; background: var(--surface); border-radius: 999px; padding: 9px 14px; font: 700 13.5px var(--font); color: var(--ink-2); cursor: pointer; box-shadow: var(--shadow); white-space: nowrap; }
  .ws-mtabs button b { color: var(--accent); }
  .ws-mtabs button.on { background: var(--navy); color: #fff; }
  .ws-mtabs button.on b { color: #FFB199; }
  .ws-bar { position: static; }
}
@media (max-width: 860px) {
  .ws-mtabs { top: 57px; }
  .page.page-wide { padding-bottom: 110px; }
  .ws-pfoot { bottom: 60px; }
  .ws-hero { padding: 16px 18px; gap: 12px; flex-wrap: wrap; }
  .ws-flag { font-size: 30px; }
  .ws-edit { margin-left: 0; text-align: left; }
}
@media (max-width: 680px) {
  .tr-main { grid-template-columns: 22px minmax(0, 1fr) auto 26px; gap: 10px; padding: 12px; }
  .tr-when { display: none; }
  .tr-when-m { display: inline; }
  .tr-tags { display: flex; }
  .tr-more { padding: 0 12px 14px 12px; }
  .ws-bar .ctl { width: 100%; }
}

/* ---------- Telegram ---------- */
.tgsend { display: grid; gap: 8px; margin-top: 10px; }
.tgsend .input { padding: 10px 12px; }
.tgres:empty { display: none; }
.tgres.ok { color: var(--teal-ink); font-weight: 700; }
.tgres.err { color: var(--danger); font-weight: 700; }
.tg-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; align-items: start; }
.tg-list { display: grid; gap: 10px; }
.tg-ch { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 14px; background: var(--bg); flex-wrap: wrap; }
.tg-ch .ava { background: #2AABEE; color: #fff; }
.tg-ch b { font-size: 15px; }
.tg-acts { display: flex; gap: 6px; align-items: center; }
.tg-step { display: flex; gap: 14px; padding: 14px 0; border-top: 1px dashed var(--line); }
.tg-step:first-of-type { border-top: 0; padding-top: 0; }
.tg-step .n { width: 30px; height: 30px; border-radius: 10px; background: var(--navy); color: #fff; display: grid; place-items: center; font: 700 13px var(--display); flex: none; }
.tg-step b { display: block; margin-bottom: 4px; }
.tg-step p { margin-bottom: 10px; }
.tg-code { display: flex; gap: 10px; align-items: center; background: var(--accent-soft); border-radius: 14px; padding: 10px 10px 10px 16px; margin: 6px 0; }
.tg-code span { font: 700 22px var(--display); letter-spacing: .06em; color: var(--ink); flex: 1; }
.tg-wait { display: inline-flex; gap: 10px; align-items: center; color: #1E96D4; font-weight: 700; font-size: 14px; }
@media (max-width: 980px) { .tg-grid { grid-template-columns: 1fr; } }

.ws-pfoot.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch; }
.ws-pfoot.pair > .btn { padding: 13px 10px; font-size: 15px; }
.ws-pfoot.pair .tgsend { display: contents; }
.ws-pfoot.pair > * { order: 1; }
.ws-pfoot.pair .tgsend select { grid-column: 1 / -1; order: 0; }
.ws-pfoot.pair .tgsend .btn { padding: 13px 10px; font-size: 15px; order: 1; }
.ws-pfoot.pair .tgres, .ws-pfoot.pair > .small { grid-column: 1 / -1; order: 2; text-align: center; }

/* ---------- Вход: владелец / сотрудник ---------- */
.auth-tabs { display: flex; margin-bottom: 26px; width: 100%; }
.auth-tabs a { flex: 1; text-align: center; padding: 10px 12px; border-radius: 999px; font: 700 14px var(--font); color: var(--ink-2); text-decoration: none !important; }
.auth-tabs a.on { background: var(--seg-on); color: var(--ink); box-shadow: 0 1px 3px rgba(11,31,58,.12); }
.key-input { font: 700 20px/1.2 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .08em; text-align: center; text-transform: uppercase; padding: 16px; }

/* ---------- Сотрудники ---------- */
.team-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 18px; align-items: start; }
.mem { padding: 14px; border-radius: 16px; background: var(--bg); margin-bottom: 10px; }
.mem.off { opacity: .7; }
.mem .ava { background: var(--navy); color: #fff; }
.mem b { font-size: 15.5px; }
.mem-stats { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 6px; }
.mem-stats span { background: var(--surface); border-radius: 8px; padding: 3px 9px; font-size: 12.5px; color: var(--ink-2); }
.mem-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; padding-left: 48px; align-items: center; }
.mem-edit { margin-top: 12px; padding: 14px; background: var(--surface); border-radius: 12px; }
.how ol { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 8px; color: var(--ink-2); font-size: 14px; }
.how code, .key-big { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.how code { background: var(--bg); padding: 1px 6px; border-radius: 6px; font-size: 12.5px; }
.key-card { background: linear-gradient(120deg, #0B1F3A, #1C3A6B 70%, #3A2470); color: #fff; border-radius: 22px; padding: 22px 24px; margin-bottom: 18px; box-shadow: var(--shadow-lg); }
.key-big { font-size: clamp(24px, 4vw, 38px); font-weight: 800; letter-spacing: .08em; margin: 8px 0 10px; color: #FFD7C9; word-break: break-all; }
.btn.ghost-w { background: rgba(255,255,255,.12); color: #fff; }
.btn.ghost-w:hover { background: rgba(255,255,255,.2); box-shadow: none; }

/* ---------- Логотип ---------- */
.logo-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.logo-box { width: 140px; height: 96px; border-radius: 14px; display: grid; place-items: center; padding: 10px;
  background: repeating-conic-gradient(#EFE8DE 0% 25%, #fff 0% 50%) 50% / 16px 16px; border: 1.5px solid var(--line); }
.logo-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-box span { font-size: 12px; font-weight: 700; color: var(--muted); background: var(--surface); padding: 2px 8px; border-radius: 6px; }

/* ---------- Выбор фото ---------- */
.photo-pick { display: grid; gap: 8px; }
.pp-url { display: flex; gap: 6px; }
.pp-url .input { padding: 10px 12px; font-size: 14px; }
.pp-alt { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.pp-alt .lnk { font-size: 13px; }
.photo-pick small { color: var(--muted); font-size: 12px; line-height: 1.45; }
.pp-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.pp-th { position: relative; width: 72px; height: 54px; border-radius: 10px; overflow: hidden; background: var(--bg-2); }
.pp-th img { width: 100%; height: 100%; object-fit: cover; }
.pp-th button { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: rgba(11,31,58,.8); color: #fff; font-size: 10px; cursor: pointer; }

@media (max-width: 980px) { .team-grid { grid-template-columns: 1fr; } .mem-acts { padding-left: 0; } }

/* ---------- Тарифы ---------- */
.nav-link { font-weight: 700; font-size: 14px; color: var(--ink-2); padding: 6px 8px; }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 360px)); gap: 16px; align-items: stretch; }
.plan { position: relative; background: var(--surface); border-radius: 22px; padding: 26px 22px 22px; box-shadow: var(--shadow); display: flex; flex-direction: column; border: 2px solid transparent; }
.section.alt .plan { background: var(--bg); box-shadow: none; }
.plan.is-feat { border-color: var(--accent); box-shadow: 0 16px 40px rgba(255,90,54,.16); }
.plan.cur { border-color: var(--teal); }
.plan-badge { position: absolute; top: -12px; left: 22px; background: var(--accent); color: #fff; font: 800 12px var(--font); padding: 4px 12px; border-radius: 999px; }
.plan-name { font: 700 19px var(--display); }
.plan-desc { color: var(--ink-2); font-size: 14px; margin-top: 4px; }
.plan-price { font: 700 30px var(--display); margin: 16px 0 12px; }
.plan-price span { font: 600 14px var(--font); color: var(--muted); margin-left: 6px; }
.plan ul { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 8px; font-size: 14px; color: var(--ink-2); flex: 1; }
.plan ul li::before { content: "✓  "; color: var(--teal); font-weight: 800; }
.packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.pack { background: var(--surface); border-radius: 16px; padding: 16px 18px; box-shadow: var(--shadow); display: flex; gap: 14px; align-items: center; }
.pack > div:first-child { flex: 1; min-width: 0; }
.pack-price { font: 700 18px var(--display); white-space: nowrap; }
.packs-line { text-align: center; margin-top: 22px; color: var(--ink-2); }
.sec-h { margin: 28px 0 14px; }
.bill-now { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; color: #fff; border-radius: 24px; padding: 26px 28px; background: linear-gradient(120deg, #0B1F3A, #1C3A6B 65%, #3A2470); }
.bill-now h2 { font-size: clamp(24px, 3vw, 34px); margin: 4px 0 10px; }
.bill-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; font-weight: 600; color: #C9D4E6; }
.bill-left { min-width: 220px; }
.big-num { font: 700 46px var(--display); line-height: 1; }
.bill-left .bar { height: 8px; border-radius: 8px; background: rgba(255,255,255,.18); margin: 10px 0 6px; overflow: hidden; }
.bill-left .bar i { display: block; height: 100%; background: #3DDC97; border-radius: 8px; }
.order-box { background: #FFF8E8; border: 1.5px solid #F5D68A; border-radius: 18px; padding: 18px 20px; margin-top: 18px; }
.pay-info { white-space: pre-wrap; font: 600 15px/1.6 var(--font); background: var(--surface); border-radius: 12px; padding: 14px 16px; margin: 14px 0 10px; color: var(--ink); }
/* ---------- Инструкция по оплате ---------- */
.pg-help .ico, .pg-howbtn .ico, .pg-tg .ico, [data-copy-pay] .ico { flex: none; }
.pg-help, .pg-howbtn, .pg-tg, [data-copy-pay] { display: inline-flex; align-items: center; gap: 7px; }
.pg-box { padding: 22px 24px; }
.pg-head { display: flex; gap: 14px; align-items: flex-start; }
.pg-ic { font-size: 30px; line-height: 1; }
.pg-kicker { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #A15C00; }
.pg-title { display: block; font-size: 17px; margin: 3px 0 4px; }
.pg-sum { white-space: nowrap; color: var(--ink); }
.pg-steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 0; counter-reset: none; }
.pg-steps li { position: relative; display: flex; gap: 14px; padding: 0 0 18px; }
.pg-steps li:last-child { padding-bottom: 0; }
.pg-steps li::before { content: ""; position: absolute; left: 15px; top: 34px; bottom: 4px; width: 2px; border-radius: 2px; background: var(--line-2); }
.pg-steps li:last-child::before { display: none; }
.pg-n { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 800 14px var(--font); background: var(--surface); color: var(--ink-2); box-shadow: inset 0 0 0 1.5px var(--line-2); position: relative; z-index: 1; }
.pg-steps li.is-cur .pg-n { background: var(--accent); color: #fff; box-shadow: 0 0 0 4px rgba(255,90,54,.16); }
.pg-steps li.is-done .pg-n { background: var(--teal); color: #fff; box-shadow: none; }
.pg-steps li.is-done::before { background: var(--teal); }
.pg-steps li.is-done .pg-b p { color: var(--muted); }
.pg-b { flex: 1; min-width: 0; padding-top: 5px; }
.pg-b > b { font-size: 15px; }
.pg-b > p { margin: 3px 0 0; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.pg-b > .btn, .pg-b > .pg-card, .pg-b > .pay-info { margin-top: 10px; }
.pg-b > .pay-info { margin-bottom: 8px; }
.pg-card { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; background: var(--surface); border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow); max-width: 520px; }
.pg-card-main { flex: 1; min-width: 200px; }
.pg-card-lbl { font-size: 12.5px; color: var(--muted); }
.pg-card-lbl b { color: var(--ink-2); }
.pg-card-num { font: 700 20px/1.3 var(--display); letter-spacing: .02em; margin: 3px 0; color: var(--ink); word-break: break-all; }
.pg-foot { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: space-between; margin-top: 18px; padding-top: 14px; border-top: 1px dashed #F0C96A; font-size: 13px; color: var(--ink-2); }
.pg-warn { color: #A15C00; font-weight: 700; }
.pg-flash { animation: pgFlash 1.4s ease; }
@keyframes pgFlash { 0%, 100% { box-shadow: none; } 25%, 60% { box-shadow: 0 0 0 4px rgba(255,90,54,.35); } }
.pg-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 18px; background: var(--surface); border-radius: 18px; padding: 16px 20px; box-shadow: var(--shadow); }
.pg-flow-i { display: flex; align-items: center; gap: 10px; }
.pg-flow-i .pg-n { width: 28px; height: 28px; font-size: 13px; background: var(--accent-soft); color: var(--accent); box-shadow: none; }
.pg-flow-i b { display: block; font-size: 14px; }
.pg-flow-i small { display: block; font-size: 12.5px; color: var(--muted); }
.pg-flow .lnk { margin-left: auto; }
.pg-modal .pg-steps { margin-top: 4px; }
.pg-modal .pg-steps .pg-n { background: var(--accent-soft); color: var(--accent); box-shadow: none; }
.pg-modal .pg-steps li.is-cur .pg-n { background: var(--accent); color: #fff; }
.pg-modal .pg-steps li.is-done .pg-n { background: var(--teal); color: #fff; }
.pg-mhead { background: var(--bg); border-radius: 14px; padding: 12px 16px; margin-bottom: 16px; }
.pg-mhead b { font-size: 16px; }
.pg-faq { display: grid; gap: 14px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.pg-faq b { font-size: 14px; }
.pg-faq p { margin: 3px 0 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
@media (max-width: 640px) {
  .pg-box { padding: 18px 16px; }
  .pg-flow { flex-direction: column; align-items: flex-start; }
  .pg-flow .lnk { margin-left: 0; }
  .pg-card-num { font-size: 18px; }
  .li .pg-howbtn, .li [data-cancel] { flex: 1; justify-content: center; }
}
.mobile-links { display: none; }
/* ---------- Списки с выбором ---------- */
.selbar { display: flex; gap: 14px; align-items: center; background: var(--surface); border-radius: 14px; padding: 10px 16px; box-shadow: var(--shadow); flex-wrap: wrap; }
.sel-li .li-ck { width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.sel-li.picked { box-shadow: inset 0 0 0 2px var(--accent), var(--shadow); }
@media (max-width: 860px) {
  .mobile-links { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 16px; }
  .mobile-links a { flex: none; background: var(--surface); border-radius: 999px; padding: 9px 14px; font-weight: 700; font-size: 13.5px; color: var(--ink); box-shadow: var(--shadow); text-decoration: none; }
}
#pricingPlans { justify-content: center; }

/* Широкие экраны: используем всю ширину */
@media (min-width: 1600px) {
  .tr-main { grid-template-columns: 24px minmax(0, 1fr) 150px 130px 28px; }
  .pv canvas { max-height: 46vh; }
  .tours, .plans { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
}

/* ---------- Таблица туров на широких экранах ---------- */
.trow-head, .tr-col { display: none; }
/* Таблица включается по ширине самого списка (а не окна) — чтобы колонки не обрезались рядом с панелью */
.ws-list { container-type: inline-size; }
@container (min-width: 960px) {
  .tr-main { grid-template-columns: 24px minmax(240px, 1.6fr) minmax(130px, .8fr) minmax(150px, 1fr) 150px 120px 28px; }
  .trow-head { display: grid; grid-template-columns: 24px minmax(240px, 1.6fr) minmax(130px, .8fr) minmax(150px, 1fr) 150px 120px 28px;
    gap: 14px; padding: 12px 14px 10px 16px; font: 800 11.5px var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
    border-bottom: 1px solid var(--line); background: var(--surface-2); position: sticky; top: 0; z-index: 2; }
  .tr-col { display: block; font-size: 13px; color: var(--ink-2); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .tr-room { white-space: nowrap; }
  .tr-meal .tag { white-space: nowrap; }
  .tr-sub .s-x { display: none; }
  .tr-more { padding-left: 54px; max-width: 1100px; }
}

/* ---------- Широкие экраны: все страницы на всю ширину ---------- */
@media (min-width: 1300px) {
  #genCard { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(360px, 1fr); grid-template-areas: "drop opts" "thumbs go"; gap: 20px 32px; align-items: start; }
  #genCard:has(.progress-card), #genCard:has(> .alert) { display: block; }
  #genCard > .drop { grid-area: drop; min-height: 320px; display: flex; flex-direction: column; justify-content: center; }
  #genCard > .thumbs { grid-area: thumbs; margin-top: 0; }
  #genCard > .gen-opts { grid-area: opts; margin-top: 0; grid-template-columns: 1fr; gap: 8px; }
  #genCard > .row { grid-area: go; margin-top: 0 !important; }
  #genCard > .row .btn { width: 100%; }
}
@media (min-width: 1400px) {
  #list.list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #list.list > .selbar, #list.list > .empty, #list.list > .alert { grid-column: 1 / -1; }
}
@media (min-width: 2200px) {
  #list.list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.wrap { max-width: 1400px; }

/* ---------- Пост: текст на всю высоту экрана ---------- */
.ws-panel:has(.post-ta) { height: calc(100vh - 24px); }
.ws-pbody:has(.post-ta) { display: flex; flex-direction: column; }
textarea.input.post-ta { flex: 1; min-height: 320px; resize: none; font-size: 14.5px; line-height: 1.6; }
@media (max-width: 1180px) {
  .ws-panel:has(.post-ta) { height: auto; }
  textarea.input.post-ta { flex: none; min-height: calc(100vh - 300px); }
}

/* Кнопка связи под постом в Telegram (выбор Telegram / WhatsApp) */
.cbtn { display: grid; gap: 8px; padding: 12px; border-radius: 14px; background: var(--bg-2); }
.ws-pbody > .cbtn { margin-top: 18px; }
.cbtn-h { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; font-size: 13px; }
.cbtn .seg { display: flex; background: var(--surface); }
.cbtn .seg button { flex: 1 1 auto; padding: 7px 8px; }
.cbtn .seg button.on { background: var(--navy); color: #fff; }
.cbtn .field { margin: 0; }
.cbtn .field > span { margin-bottom: 4px; }
.cbtn .input { padding: 10px 12px; background: var(--field); }
.cbtn-who { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; color: var(--ink-2); }
.cbtn-who:empty { display: none; }
.cbtn-who > span { font-weight: 700; }
.cbtn-who > span.muted { font-weight: 600; }
.cb-edit { border: 0; background: none; padding: 0 0 0 4px; font: 600 12px var(--font); color: #1A7FB8; text-decoration: underline; cursor: pointer; }
.kb-prev { display: grid; gap: 4px; }
.kb-prev > div { display: flex; gap: 4px; }
.kb-prev span { flex: 1 1 0; min-width: 0; text-align: center; padding: 7px 8px; border-radius: 8px; background: rgba(42,171,238,.14); color: #1A7FB8; font-weight: 700; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cbtn-note { line-height: 1.4; }
.field small.bad { color: var(--danger); font-weight: 600; }

/* Видео: выбор одного из трёх готовых вариантов */
.vpick-head { text-align: center; padding: 6px 4px 14px; }
.vpick-head h3 { margin-bottom: 6px; }
.vpick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.vcard { display: flex; flex-direction: column; gap: 4px; padding: 8px 8px 10px; border: 2px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); text-align: left; font: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.vcard:hover { transform: translateY(-2px); }
.vcard.on { border-color: var(--accent); box-shadow: 0 8px 22px rgba(255,90,54,.18); }
.vcard canvas { display: block; width: 100%; aspect-ratio: 9 / 16; border-radius: 10px; background: var(--bg-2); margin-bottom: 4px; }
.vcard b { font-size: 14px; line-height: 1.25; }
.vcard span { font-size: 12px; line-height: 1.35; color: var(--muted); }
.vpick-ai { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 2px 8px; margin-top: 14px; }
@media (max-width: 420px) { .vpick { gap: 6px; } .vcard { padding: 6px; } .vcard span { display: none; } }

/* История: подборки для туристов под своей записью */
.li-cols { flex-basis: 100%; display: grid; gap: 8px; margin-top: 2px; padding-top: 12px; border-top: 1px dashed var(--line); }
.li-cols-h { font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.li-col { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border-radius: 12px; background: var(--bg-2); }
.li-col .ic { font-size: 16px; }
.li-col .grow { flex: 1; min-width: 180px; }
.li-col a:not(.btn) { font-weight: 700; font-size: 14px; color: var(--accent); word-break: break-all; }
.li-col .m { margin-top: 2px; }

/* Медиатека: лента фото направления в панели картинки и видео */
.lib { background: var(--bg); border-radius: 14px; padding: 10px 12px; margin-bottom: 10px; min-width: 0; max-width: 100%; overflow: hidden; }
#libV, #libP { min-width: 0; max-width: 100%; }
.lib-h { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.lib-h .lnk { margin-left: auto; font-size: 13px; padding: 2px; }
/* Фото переносятся на новую строку и всегда помещаются в ширину панели */
.lib-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 8px; padding: 8px 3px 6px; }
.lib-row button { position: relative; width: 100%; height: auto; aspect-ratio: 1; min-width: 0; border-radius: 10px; border: 0; padding: 0; overflow: hidden; cursor: pointer; background: var(--bg-2); transition: transform .12s; }
.lib-row button:hover { transform: translateY(-2px); }
.lib-row img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lib-row button.on { outline: 3px solid var(--accent); outline-offset: 2px; }
.lib-row button.on::after { content: "✓"; position: absolute; right: 4px; bottom: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: #fff; font: 800 11px/18px var(--font); text-align: center; }
.lib-cr { font-size: 11px; color: var(--muted); line-height: 1.4; overflow-wrap: anywhere; }
.lib-cr:empty { display: none; }
.lib-cr a { color: inherit; text-decoration: underline; }

/* ===== Туры: переключатель «Список / Плитка» и вид плиткой ===== */
.vmode .seg { padding: 3px; }
.vmode .seg button { padding: 6px 11px; font-size: 13px; }
.vmode .vm-i { font-size: 14px; line-height: 1; }
@media (max-width: 560px) { .vmode .vm-t { display: none; } }
.trows.tgrid { background: transparent; box-shadow: none; overflow: visible; border-radius: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; align-items: stretch; }
.tgrid .tcard { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; }
.tgrid .tcard:last-child { border-bottom: 1px solid var(--line); }
.tgrid .tcard.sel { background: var(--sel-bg); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), var(--shadow); }
.tgrid .tcard.open { grid-column: 1 / -1; }
.tgrid .tr-main { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 14px; flex: 1; }
.tgrid .trow:not(.sel) .tr-main:hover { background: var(--surface-2); }
.tc-head { display: flex; gap: 10px; align-items: flex-start; }
.tc-head .pick { flex: none; margin-top: 1px; }
.tc-ttl { flex: 1; min-width: 0; }
.tc-name { font-weight: 800; font-size: 15px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tc-ttl .stars { font-size: 12px; margin-top: 2px; }
.tc-head .tr-exp { flex: none; margin: -2px -2px 0 0; }
.tc-area { font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tc-tags:empty { display: none; }
.tc-tags .tag { font-size: 11px; padding: 2px 7px; }
.tc-room { font-size: 12.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-foot { margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--line); display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.tc-when { font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.35; min-width: 0; }
.tc-when span { display: block; font-weight: 600; color: var(--muted); }
.tgrid .tr-price { flex: none; }
.tgrid .tr-more { padding: 0 14px 14px; max-width: none; }

/* ===== Вкладка «Подборка»: текстом в чат ===== */
.lk-sw { margin-bottom: 14px; }
.lk-sw .seg { display: flex; width: 100%; }
.lk-sw .seg button { flex: 1 1 0; padding: 9px 10px; }
.ct-form { gap: 16px; }
.ct-form .seg button { padding: 7px 11px; font-size: 12.5px; }
.ct-need { margin-top: 8px; display: flex; gap: 12px; align-items: center; background: #FFF4E0; color: #7A4A00; border-radius: 12px; padding: 10px 12px; font-size: 12.5px; line-height: 1.45; }
.ct-need b { color: #5C3700; }
.ct-need .btn { flex: none; }
.ct-inc { display: flex; flex-wrap: wrap; gap: 6px; }
.ct-chip { border: 1.5px solid var(--line); background: var(--surface); border-radius: 999px; padding: 6px 12px; font: 700 13px var(--font); color: var(--muted); cursor: pointer; transition: .12s; }
.ct-chip b { display: inline-block; width: 12px; }
.ct-chip:hover { border-color: var(--line-2); }
.ct-chip.on { border-color: var(--teal); background: var(--teal-soft); color: var(--teal-ink); }
.ct-dirty { font-size: 12.5px; color: var(--accent-ink); background: var(--accent-soft); border-radius: 10px; padding: 6px 10px; margin-bottom: 6px; }
.ct-dirty .lnk { font-size: 12.5px; padding: 0; }
textarea.input.ct-ta { min-height: 380px; resize: vertical; font: 500 14px/1.6 var(--font); background: var(--surface-2); }
#ctCnt .warn { color: var(--danger); }
.ct-foot { display: flex; gap: 8px; }
.ct-foot .btn { white-space: nowrap; }
@media (max-width: 480px) { .ct-foot .tx { display: none; } .ct-need { flex-direction: column; align-items: stretch; } }

/* ---------- Подборка текстом: панель и поле текста до низа экрана ---------- */
.ws-panel:has(.ct-ta) { height: calc(100vh - 24px); }
.ws-pbody:has(.ct-ta) { display: flex; flex-direction: column; }
.ws-pbody:has(.ct-ta) > #lkBody { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.ws-pbody .ct-form:has(.ct-ta) { flex: 1; grid-template-rows: auto auto auto 1fr; }
.field.ct-out { display: flex; flex-direction: column; min-height: 0; }
textarea.input.ct-ta { flex: 1; min-height: 280px; resize: none; }
@media (max-width: 1180px) {
  .ws-panel:has(.ct-ta) { height: auto; }
  textarea.input.ct-ta { flex: none; min-height: calc(100vh - 320px); }
}

/* ---------- Выбор стиля: мини-превью ---------- */
.stg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.stg button { border: 0; background: var(--bg-2); border-radius: 14px; padding: 5px 5px 7px; cursor: pointer; display: grid; gap: 6px; text-align: center; font: 700 12.5px/1.2 var(--font); color: var(--ink-2); box-shadow: inset 0 0 0 2px transparent; transition: box-shadow .15s, transform .15s, background .15s; min-width: 0; }
.stg button:hover { transform: translateY(-2px); background: var(--surface); }
.stg button.on { background: var(--seg-on); color: var(--ink); box-shadow: inset 0 0 0 2px var(--accent), 0 8px 18px rgba(11,31,58,.12); }
.stg-th { display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: linear-gradient(110deg, #E9E2D7 30%, #F5F0E9 50%, #E9E2D7 70%); background-size: 200% 100%; animation: stgsh 1.2s linear infinite; }
.stg button.ready .stg-th { animation: none; background: var(--surface); box-shadow: 0 1px 3px rgba(11,31,58,.15); }
.stg canvas { width: 100%; height: 100%; display: block; }
.stg b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; }
@keyframes stgsh { to { background-position: -200% 0; } }
@media (max-width: 420px) { .stg { gap: 6px; } .stg button { padding: 4px 3px 6px; font-size: 10.5px; letter-spacing: -.1px; } }

/* Цвет «Без цвета» — фото без окраски */
.themes { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.themes button { position: relative; }
.themes button i { position: absolute; inset: 0; display: grid; place-items: center; font: 800 10.5px/1.1 var(--font); font-style: normal; color: var(--ink-2); text-align: center; padding: 0 2px; }
/* Узкая панель: у WhatsApp / Telegram остаются только значки, кнопки не вылезают за край */
.ws-pfoot:has(.ct-foot) { container-type: inline-size; }
.ct-foot .btn { min-width: 0; }
@container (max-width: 470px) { .ct-foot .tx { display: none; } .ct-foot .btn.wa, .ct-foot .btn.tg { padding-left: 18px; padding-right: 18px; } }

/* ---------- «На телефон» (QR-код) ---------- */
.btn.phonebtn { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); padding: 10px 16px; gap: 12px; justify-content: center; }
.btn.phonebtn:hover { background: var(--sel-bg); box-shadow: inset 0 0 0 1.5px var(--accent); }
.btn.phonebtn svg { color: var(--accent); flex: none; }
.btn.phonebtn .pb-t { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; line-height: 1.1; text-align: left; min-width: 0; }
.btn.phonebtn .pb-t b { font-size: 15px; }
.btn.phonebtn .pb-t small { font-size: 11.5px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* Скачать · В Telegram · На телефон — в одну линию */
.ws-pfoot.pair:has(> .phonebtn) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ws-pfoot:not(.pair):has(> .phonebtn) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: stretch; }
.ws-pfoot:not(.pair):has(> .phonebtn) > :not(.btn) { grid-column: 1 / -1; }
.ws-pfoot:has(> .phonebtn) > .btn, .ws-pfoot.pair:has(> .phonebtn) .tgsend .btn { padding: 13px 8px; font-size: 14px; min-width: 0; }
.ws-pfoot.pair > .phonebtn { order: 2; }
.ws-pfoot.pair .tgres, .ws-pfoot.pair > .small { order: 3; }
.ws-pfoot > .phonebtn { gap: 8px; }
.ws-pfoot > .phonebtn .pb-t small { display: none; }
.ws-pfoot > .phonebtn svg { width: 19px; height: 19px; }
.ws-pfoot > .phonebtn .pb-t b { font-size: inherit; }
/* Узкая панель (телефон, планшет): подписи переносятся на две строки, а не вылезают за кнопку */
.ws-pfoot:has(> .phonebtn) { container-type: inline-size; }
@container (max-width: 440px) {
  .ws-pfoot:has(> .phonebtn) > .btn, .ws-pfoot.pair:has(> .phonebtn) .tgsend .btn { white-space: normal; line-height: 1.15; font-size: 13px; padding: 10px 6px; text-align: center; }
  .ws-pfoot > .phonebtn { gap: 6px; }
  .ws-pfoot > .phonebtn svg { width: 17px; height: 17px; }
}

.modal.qrm { max-width: 640px; }
.qrm-grid { display: grid; grid-template-columns: 236px 1fr; gap: 24px; align-items: center; }
.qrm-box { width: 236px; height: 236px; border-radius: 20px; background: var(--bg); display: grid; place-items: center; position: relative; }
.qrm-box.ready { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line), 0 10px 28px rgba(11,31,58,.08); animation: pop .22s ease; }
.qrm-qr { position: relative; width: 200px; height: 200px; }
.qrm-qr svg { display: block; width: 100%; height: 100%; }
.qrm-qr svg rect[fill="#ffffff"], .qrm-qr svg rect[fill="white"] { fill: transparent; }
.qrm-qr svg path, .qrm-qr svg rect[fill="#000000"], .qrm-qr svg rect[fill="black"] { fill: var(--ink); }
.qrm-logo { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 13px; background: var(--navy); color: var(--accent); display: grid; place-items: center; font: 700 24px var(--display); box-shadow: 0 0 0 5px #fff; }
.qrm-load { display: grid; justify-items: center; gap: 10px; padding: 18px; text-align: center; width: 100%; }
.qrm-load .spinner { color: var(--accent); width: 26px; height: 26px; }
.qrm-load b { font-size: 14px; }
.qrm-load small { color: var(--muted); font-weight: 600; font-size: 12px; }
.qrm-load.err b { color: var(--danger); }
.qrm-bar { width: 80%; height: 6px; background: var(--line); border-radius: 99px; overflow: hidden; }
.qrm-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 99px; transition: width .2s; }
.qrm-steps { margin: 0; padding: 0; list-style: none; counter-reset: q; display: grid; gap: 12px; }
.qrm-steps li { counter-increment: q; display: flex; gap: 12px; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.qrm-steps li::before { content: counter(q); flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 800; font-size: 13px; display: grid; place-items: center; }
.qrm-steps b { color: var(--ink); }
.qrm-apps { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0 38px; }
.qrm-apps span { font-size: 12px; font-weight: 700; color: var(--ink-2); background: var(--bg); border-radius: 999px; padding: 4px 10px; display: inline-flex; align-items: center; gap: 6px; }
.qrm-apps i { width: 8px; height: 8px; border-radius: 50%; }
.qrm-st { margin-top: 16px; display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 700; color: var(--ink-2); background: var(--bg); border-radius: 12px; padding: 10px 12px; }
.qrm-st i { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex: none; }
.qrm-st.wait i { background: var(--gold); animation: qrpulse 1.4s ease-in-out infinite; }
.qrm-st.ok { background: var(--teal-soft); color: #0B7A6D; }
.qrm-st.ok i { background: var(--teal); }
.qrm-st.err { background: var(--danger-soft); color: var(--danger); }
.qrm-st.err i { background: var(--danger); }
@keyframes qrpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(245,165,36,.5); } 50% { box-shadow: 0 0 0 6px rgba(245,165,36,0); } }
.qrm-link { display: flex; gap: 8px; margin-top: 20px; }
.qrm-link .input { flex: 1; min-width: 0; font-size: 13px; padding: 10px 12px; color: var(--ink-2); }
.qrm-warn { margin-top: 12px; background: #FFF6E5; color: #8A5A00; border-radius: 12px; padding: 10px 12px; font-size: 13px; font-weight: 600; }
.qrm-note { margin-top: 12px; }
@media (max-width: 600px) {
  .qrm-grid { grid-template-columns: 1fr; justify-items: center; gap: 18px; }
  .qrm-apps { margin-left: 0; }
}

/* =========================================================
   Кабинет: боковое меню (редизайн 2026-10)
   ========================================================= */
.app { --sbw: 264px; display: grid; grid-template-columns: var(--sbw) minmax(0, 1fr); min-height: 100vh; }
.app.sb-mini { --sbw: 78px; }
.ico { flex: none; display: block; }
.btn .ico { flex: none; }

.snav {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; overflow-x: hidden;
  background: var(--chrome); color: #B8C3D6; padding: 18px 14px 14px;
  display: flex; flex-direction: column; gap: 2px; scrollbar-width: none;
}
.snav::-webkit-scrollbar { display: none; }
.snav-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding-left: 6px; margin-bottom: 16px; }
.snav-logo { color: #fff; font-size: 21px; }
.snav-logo .mark { background: var(--accent); }
.snav-ibtn {
  width: 36px; height: 36px; border-radius: 10px; border: 0; background: transparent; color: #8FA0BD;
  display: grid; place-items: center; cursor: pointer; flex: none; transition: background .15s, color .15s;
}
.snav-ibtn:hover { background: rgba(255,255,255,.08); color: #fff; }
.snav a:focus-visible, .snav button:focus-visible { outline: 2px solid #FF8A3D; outline-offset: 2px; }

.snav-cta {
  display: flex; align-items: center; justify-content: center; gap: 10px; height: 46px; border-radius: 12px;
  background: var(--accent); color: #fff; font-weight: 800; font-size: 14.5px; text-decoration: none !important;
  margin-bottom: 20px; box-shadow: 0 8px 20px rgba(255,90,54,.28); transition: background .15s, transform .12s;
  flex: none;  /* не сжимается, когда меню длиннее экрана */
}
.snav-cta:hover { background: #F04A26; }
.snav-cta:active { transform: translateY(1px); }
.snav-cta.on { box-shadow: 0 0 0 2px var(--chrome), 0 0 0 4px rgba(255,138,61,.6); }

.snav-group { font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #7F90AE; padding: 16px 12px 6px; }
.snav-group:first-child { padding-top: 0; }
.snav-nav a {
  position: relative; display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 12px; margin-bottom: 2px;
  border-radius: 10px; color: #B8C3D6; font-weight: 700; font-size: 14.5px; text-decoration: none !important;
  transition: background .15s, color .15s;
}
.snav-nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.snav-nav a.on { background: rgba(255,255,255,.1); color: #fff; }
.snav-nav a.on::before { content: ""; position: absolute; left: -14px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.snav-nav a.on .ico { color: #FF8A3D; }

.snav-bottom { margin-top: auto; padding-top: 18px; display: grid; gap: 8px; }
.snav-usage { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 14px; }
.u-t { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 700; color: #9AA9C4; }
.u-t span { font-weight: 600; white-space: nowrap; }
.u-n { margin-top: 6px; font-size: 13px; color: #C9D2E3; }
.u-n b { font: 700 22px/1 var(--display); color: #fff; margin-right: 2px; }
.u-bar { height: 6px; border-radius: 6px; background: rgba(255,255,255,.12); margin-top: 10px; overflow: hidden; }
.u-bar i { display: block; height: 100%; border-radius: 6px; background: #2EC4A9; }
.snav-usage.low .u-bar i { background: #FF6B5B; }
.snav-usage.low .u-n b { color: #FF8A7E; }
.u-link { display: inline-flex; align-items: center; gap: 2px; margin-top: 10px; font-size: 13px; font-weight: 800; color: #FF8A3D; text-decoration: none !important; }
.u-link:hover { color: #FFB27A; }
.u-mini { display: none; }
.snav-me { display: flex; align-items: center; gap: 10px; padding: 8px 4px 2px 6px; }
.snav-me .ava { width: 36px; height: 36px; border-radius: 10px; background: rgba(255,90,54,.18); color: #FFA286; font-size: 13px; }
.snav-me .who { min-width: 0; flex: 1; }
.snav-me .who b { display: block; color: #fff; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snav-me .who span { display: block; font-size: 12px; color: #9AA9C4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Свёрнутое меню (кнопка рядом с логотипом) */
.app.sb-mini .snav { padding-left: 12px; padding-right: 12px; }
.app.sb-mini .snav .lbl { display: none !important; }
.app.sb-mini .snav-top { flex-direction: column; gap: 10px; padding: 0; }
.app.sb-mini .snav-cta { width: 46px; margin-left: auto; margin-right: auto; }
.app.sb-mini .snav-group { padding: 10px 8px; }
.app.sb-mini .snav-group:first-child { display: none; }
.app.sb-mini .snav-group::after { content: ""; display: block; height: 1px; background: rgba(255,255,255,.12); }
.app.sb-mini .snav-nav a { width: 46px; justify-content: center; padding: 0; margin-left: auto; margin-right: auto; }
.app.sb-mini .snav-nav a.on::before { left: -4px; }
.app.sb-mini .snav-usage { padding: 0; background: none; border: 0; }
.app.sb-mini .u-mini {
  display: grid; place-items: center; width: 46px; height: 40px; margin: 0 auto; border-radius: 10px;
  background: rgba(255,255,255,.08); color: #fff; font: 700 14px var(--display); text-decoration: none !important;
}
.app.sb-mini .snav-usage.low .u-mini { color: #FF8A7E; }
.app.sb-mini .snav-me { flex-direction: column; gap: 6px; padding: 6px 0 0; }

/* Телефон: верхняя панель + нижнее меню */
.mtop, .mnav { display: none; }
@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .snav { display: none; }
  .mtop {
    display: flex; align-items: center; gap: 8px; position: sticky; top: 0; z-index: 30;
    padding: calc(8px + env(safe-area-inset-top)) 8px 8px 16px; background: var(--chrome);
  }
  .mtop .logo { color: #fff; font-size: 19px; margin-right: auto; }
  .mtop .logo .mark { width: 30px; height: 30px; font-size: 14px; background: var(--accent); }
  .mtop-usage {
    display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px;
    background: rgba(255,255,255,.1); color: #C9D2E3; font-size: 13px; font-weight: 700; text-decoration: none !important;
  }
  .mtop-usage b { color: #fff; }
  .mtop-usage.low b { color: #FF8A7E; }
  .mtop-btn { width: 44px; height: 44px; border-radius: 12px; border: 0; background: transparent; color: #B8C3D6; display: grid; place-items: center; cursor: pointer; }
  .mnav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--surface);
    border-top: 1px solid var(--line); padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 24px rgba(11,31,58,.06);
  }
  .mnav a {
    flex: 1; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    font-size: 11px; font-weight: 700; color: var(--ink-3); text-decoration: none !important; border-radius: 12px;
  }
  .mnav a.on { color: var(--ink); }
  .mnav a.on .ico { color: var(--accent); }
  .mnav-plus { width: 46px; height: 32px; border-radius: 12px; background: var(--accent); color: #fff; display: grid; place-items: center; box-shadow: 0 6px 14px rgba(255,90,54,.3); }
  .mnav a.mnav-new.on .ico { color: #fff; }
}

/* =========================================================
   История (редизайн 2026-10)
   ========================================================= */
.hx { max-width: 1480px; }
.hx-head .btn .ico { margin-left: -4px; }
.hx-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.hx-stat { display: flex; align-items: center; gap: 14px; background: var(--surface); border-radius: 16px; padding: 16px 18px; box-shadow: var(--shadow); min-width: 0; }
.hx-stat-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); flex: none; }
.hx-stat:nth-child(2) .hx-stat-ic { background: #E7EEF9; color: #2A5BA8; }
.hx-stat:nth-child(3) .hx-stat-ic { background: var(--teal-soft); color: var(--teal-ink); }
.hx-stat b { display: block; font: 700 22px/1.15 var(--display); color: var(--ink); }
.hx-stat span { font-size: 13px; color: var(--ink-2); }

.hx-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 22px; }
.hx-search {
  flex: 1 1 320px; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; background: var(--surface);
  border-radius: 12px; box-shadow: inset 0 0 0 1.5px var(--line); color: var(--ink-3); cursor: text; transition: box-shadow .15s;
}
.hx-search:focus-within { box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 4px rgba(255,90,54,.12); }
.hx-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: 600 14.5px var(--font); color: var(--ink); }
.hx-search input::placeholder { color: var(--ink-4); font-weight: 500; }
.hx-switch { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 700; font-size: 14px; color: var(--ink-2); cursor: pointer; user-select: none; }
.hx-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.hx-switch .sw { position: relative; width: 38px; height: 22px; border-radius: 22px; background: var(--line-2); transition: background .15s; flex: none; }
.hx-switch .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s; }
.hx-switch input:checked + .sw { background: var(--teal); }
.hx-switch input:checked + .sw::after { transform: translateX(16px); }
.hx-switch input:focus-visible + .sw { outline: 2px solid var(--accent); outline-offset: 2px; }
.hx-chips { flex-basis: 100%; display: flex; gap: 8px; overflow-x: auto; padding: 2px; scrollbar-width: none; }
.hx-chips::-webkit-scrollbar { display: none; }
.hx-chip {
  flex: none; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border: 0; border-radius: 999px;
  background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line); font: 700 13.5px var(--font); color: var(--ink-2); cursor: pointer;
}
.hx-chip:hover { box-shadow: inset 0 0 0 1.5px var(--line-2); color: var(--ink); }
.hx-chip span { font-size: 12px; color: var(--ink-3); }
.hx-chip.on { background: var(--navy); color: #fff; box-shadow: none; }
.hx-chip.on span { color: #9FB0CC; }
.hx-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.flag { font-style: normal; }

.hx-list { display: grid; gap: 28px; }
.hx-day { display: grid; gap: 10px; }
.hx-day-h { display: flex; align-items: center; gap: 8px; margin: 0 2px; font: 800 12px var(--font); text-transform: uppercase; letter-spacing: .07em; color: var(--ink-2); }
.hx-day-h span { background: var(--bg-2); border-radius: 999px; padding: 2px 8px; font-size: 11px; letter-spacing: 0; }
.hx-day-h::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.hx-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; background: var(--surface); border-radius: 16px; box-shadow: var(--shadow); transition: box-shadow .15s; }
.hx-row:hover { box-shadow: 0 1px 2px rgba(11,31,58,.05), 0 12px 32px rgba(11,31,58,.1); }
.hx-main { display: flex; align-items: center; gap: 16px; min-width: 0; padding: 14px 18px; border-radius: 16px; color: inherit; text-decoration: none !important; }
.hx-main:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.hx-main:hover .hx-title > span { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.hx-cal {
  width: 62px; height: 66px; flex: none; border-radius: 12px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
}
.hx-cal small { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-ink); }
.hx-cal b { font: 700 22px/1 var(--display); color: var(--ink); margin: 4px 0 3px; }
.hx-cal span { font-size: 11px; font-weight: 700; color: var(--ink-2); }
.hx-cal.none { color: var(--ink-3); }
.hx-info { display: grid; gap: 6px; min-width: 0; }
.hx-title { display: flex; align-items: center; gap: 8px; min-width: 0; font: 600 17px/1.25 var(--display); color: var(--ink); }
.hx-title > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hx-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13.5px; color: var(--ink-2); }
.hx-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.hx-meta .ico { color: var(--ink-4); }
.hx-price b { color: var(--ink); font-weight: 800; }
.hx-side { display: flex; align-items: center; gap: 12px; padding: 14px 18px 14px 0; }
.hx-badge { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--teal-soft); color: var(--teal-ink); font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.hx-badge.none { background: var(--bg); color: var(--ink-3); font-weight: 700; }
.hx-open .ico { margin-right: -4px; }

.hx-links { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 580px), 1fr)); gap: 8px; padding: 0 18px 16px 96px; }
.hx-orph .hx-links { padding: 16px 18px; }
.hx-link { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 10px 10px 12px; border-radius: 12px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.lk-ic { width: 32px; height: 32px; flex: none; border-radius: 9px; display: grid; place-items: center; background: var(--surface); color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--line); }
.lk-body { flex: 1; min-width: 0; }
.lk-url { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; overflow: hidden; white-space: nowrap; font-weight: 800; font-size: 14px; color: var(--accent-ink); }
.lk-url .ico { opacity: .75; }
.lk-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 3px; font-size: 12.5px; color: var(--ink-2); }
.lk-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.lk-meta .ico { color: var(--ink-4); }
.lk-client { font-weight: 700; color: var(--ink); }
.lk-views.seen, .lk-views.seen .ico { color: var(--teal-ink); font-weight: 700; }
.lk-acts { display: flex; gap: 6px; flex: none; }
.lk-acts .btn { height: 36px; padding: 0 12px; gap: 6px; }
.lk-copy.done { background: var(--teal-soft); color: var(--teal-ink); }

.hx-none { display: grid; justify-items: center; gap: 8px; padding: 56px 20px; text-align: center; background: var(--surface); border-radius: 16px; box-shadow: var(--shadow); color: var(--ink-2); }
.hx-none > .ico { color: var(--ink-4); margin-bottom: 4px; }
.hx-none p { max-width: 440px; }
.hx-none .btn { margin-top: 10px; }

@media (max-width: 1100px) { .hx-links { padding-left: 18px; } }
@media (max-width: 720px) {
  .hx-head .btn { display: none; }
  .hx-stats { gap: 8px; }
  .hx-stat { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
  .hx-stat-ic { width: 34px; height: 34px; border-radius: 10px; }
  .hx-stat b { font-size: 18px; }
  .hx-stat span { display: block; font-size: 11.5px; line-height: 1.3; }
  .hx-row { grid-template-columns: minmax(0, 1fr); }
  .hx-main { gap: 12px; padding: 14px 14px 8px; }
  .hx-cal { width: 54px; height: 60px; }
  .hx-title { font-size: 16px; }
  .hx-side { justify-content: space-between; padding: 0 14px 14px 80px; }
  .hx-links { padding: 0 14px 14px; }
  .hx-orph .hx-links { padding: 14px; }
  .hx-link { flex-wrap: wrap; }
  .lk-acts { width: 100%; }
  .lk-acts .btn { flex: 1; }
}

/* Выбор Telegram-канала — в одной линии с кнопками: Скачать · [канал ▾] · В Telegram · На телефон */
.ws-pfoot.pair:has(#tgCh) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr); }
.ws-pfoot.pair:has(> .phonebtn):has(#tgCh) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)); }
.ws-pfoot.pair .tgsend select#tgCh {
  grid-column: auto; order: 1; min-width: 0; min-height: 46px; height: 100%;
  padding: 0 30px 0 12px; font-size: 14px; font-weight: 700; text-overflow: ellipsis;
}
.ws-pfoot.pair .tgsend select#tgCh { border-radius: 999px; }
/* Четыре элемента в ряд: длинные подписи переносятся внутри кнопки, а не обрезаются */
.ws-pfoot.pair:has(#tgCh) > .btn, .ws-pfoot.pair:has(#tgCh) .tgsend .btn { white-space: normal; line-height: 1.15; text-align: center; padding: 10px 8px; font-size: 14px; min-width: 0; }
.ws-pfoot.pair:has(#tgCh) > .phonebtn { gap: 6px; }
/* Узкий экран: канал — отдельной строкой над кнопками, как раньше */
@media (max-width: 560px) {
  .ws-pfoot.pair:has(#tgCh) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ws-pfoot.pair:has(> .phonebtn):has(#tgCh) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ws-pfoot.pair .tgsend select#tgCh { grid-column: 1 / -1; order: 0; height: auto; }
}

/* =========================================================
   Подборка: компактная шапка и панель фильтров (редизайн 2026-10)
   ========================================================= */
.ws-head { margin-bottom: 12px; }
.ws-hero {
  display: flex; align-items: center; gap: 14px; padding: 12px 18px 12px 12px; border-radius: 18px;
  background: var(--chrome); color: #fff; box-shadow: var(--shadow);
}
.ws-back {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center; margin: 0; border-radius: 12px;
  color: #C9D2E3; background: rgba(255,255,255,.06); text-decoration: none !important; transition: background .15s, color .15s;
}
.ws-back:hover { background: rgba(255,255,255,.14); color: #fff; }
.ws-back:focus-visible { outline: 2px solid #FF8A3D; outline-offset: 2px; }
.ws-flag {
  width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 12px;
  background: rgba(255,255,255,.08); font-size: 28px; line-height: 1;
}
.ws-ttl { min-width: 0; flex: 1; }
.ws-hero h2 { font-size: clamp(19px, 1.8vw, 24px); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-hero h2 span { color: #8FA0BD; opacity: 1; font-weight: 500; }
.ws-meta { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 6px; font-size: 13px; font-weight: 600; color: #C9D2E3; }
.ws-meta > span { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; background: rgba(255,255,255,.07); }
.ws-meta .ico { color: #FF8A3D; }
.ws-edit {
  margin-left: auto; display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px;
  background: rgba(255,138,61,.14); color: #fff; font-size: 13px; text-align: left; max-width: 280px; min-width: 0;
}
.ws-edit > .ico { color: #FF8A3D; }
.ws-edit > span { min-width: 0; display: grid; }
.ws-edit small { font-size: 11px; font-weight: 700; color: #FFB27A; text-transform: uppercase; letter-spacing: .05em; }
.ws-edit b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ws-bar { padding: 10px 12px; border-radius: 16px; }
.ws-bar-row { gap: 8px 14px; }
.ws-bar .ctl { gap: 8px; }
.ws-bar .ctl + .ctl { padding-left: 14px; border-left: 1px solid var(--line); }
.ws-bar .lbl { font-size: 12px; font-weight: 800; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }
.ws-bar .seg { padding: 3px; gap: 2px; border-radius: 10px; background: var(--bg-2); flex-wrap: nowrap; }
.ws-bar .seg button { height: 30px; padding: 0 12px; border-radius: 8px; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.ws-bar .seg button:hover:not(.on) { color: var(--ink); }
.ws-bar .seg button.on { box-shadow: 0 1px 2px rgba(11,31,58,.14); }
.ws-bar .seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ws-bar #mkVal { width: 76px; height: 36px; padding: 0 10px; border-radius: 10px; font-weight: 700; }
.ws-bar #mkVal:disabled { display: none; }
.ws-selrow { margin-top: 8px; padding-top: 8px; font-size: 13.5px; }
.selinfo { display: inline-flex; align-items: baseline; gap: 4px; color: var(--ink-2); font-weight: 600; margin-right: 2px; }
.selinfo b { font: 700 15px var(--display); color: var(--accent); }
.wsb-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 0; border-radius: 9px;
  background: transparent; font: 700 13px var(--font); color: var(--ink-2); cursor: pointer; transition: background .15s, color .15s;
}
.wsb-btn:hover { background: var(--bg); color: var(--ink); }
.wsb-btn .ico { color: var(--ink-4); }
.wsb-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.wsb-chip {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 10px;
  box-shadow: inset 0 0 0 1.5px var(--line); font-size: 13px; font-weight: 700; color: var(--ink-2); cursor: pointer; user-select: none;
}
.wsb-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wsb-chip span { font-size: 12px; color: var(--ink-3); }
.wsb-chip:hover { box-shadow: inset 0 0 0 1.5px var(--line-2); color: var(--ink); }
.wsb-chip:has(input:checked) { background: var(--navy); color: #fff; box-shadow: none; }
.wsb-chip:has(input:checked) span { color: #9FB0CC; }
.wsb-chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.vmode .seg { padding: 3px; }
.vmode .seg button { height: 30px; padding: 0 10px; font-size: 13px; }

@media (max-width: 860px) {
  .ws-hero { flex-wrap: nowrap; gap: 10px; padding: 10px 12px 10px 10px; }
  .ws-flag { width: 40px; height: 40px; font-size: 24px; }
  .ws-back { width: 36px; height: 36px; }
  .ws-edit { display: none; }
}
@media (max-width: 680px) {
  .ws-bar .ctl { width: 100%; }
  .ws-bar .ctl + .ctl { padding-left: 0; border-left: 0; }
  .ws-bar .ctl .lbl { min-width: 104px; }
  .ws-meta > span { height: 24px; padding: 0 8px; font-size: 12.5px; }
}
@media (max-width: 560px) {
  .ws-bar .ctl #mkVal { flex: 1; width: auto; min-width: 0; }
  .ws-selrow { flex-wrap: nowrap; gap: 4px; }
  .selinfo { white-space: nowrap; }
  .wsb-btn { width: 34px; padding: 0; justify-content: center; }
  .wsb-btn .t, .vmode .vm-t { display: none; }
  .wsb-chip { padding: 0 10px; white-space: nowrap; }
  .wsb-chip .ico { display: none; }
  .wsb-btn .ico { color: var(--ink-2); }
}

/* Панель фильтров прокручивается вместе со страницей (не закрывает карточки туров) */
.ws-bar { position: static; top: auto; }

/* =========================================================
   Тёмно-синяя тема (включается переключателем в меню; только в кабинете)
   ========================================================= */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0B1526;
  --bg-2: #18263F;
  --surface: #122036;
  --surface-2: #0F1B2E;
  --field: #0D1829;
  --seg-on: #2A3D5E;
  --sel-bg: rgba(255,90,54,.08);
  --ink: #E8EEF7;
  --ink-2: #B3C0D6;
  --ink-3: #96A5BF;
  --ink-4: #7D8DA9;
  --muted: #8E9DB8;
  --line: #22334E;
  --line-2: #364B6E;
  --navy: #2C4A7C;
  --chrome: #071022;
  --accent-soft: rgba(255,90,54,.15);
  --accent-soft-2: rgba(255,90,54,.24);
  --accent-ink: #FF9C78;
  --teal-soft: rgba(46,196,169,.14);
  --teal-ink: #5ED9C3;
  --danger-soft: rgba(217,45,32,.2);
  --shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.22);
  --shadow-lg: 0 24px 64px rgba(0,0,0,.5);
}
html[data-theme="dark"] body { background: var(--bg); }
html[data-theme="dark"] .snav { border-right: 1px solid var(--line); }
html[data-theme="dark"] .ws-hero { box-shadow: inset 0 0 0 1px var(--line); }
html[data-theme="dark"] .mtop { border-bottom: 1px solid var(--line); }
html[data-theme="dark"] .btn.dark:hover { background: #3A5C94; box-shadow: 0 8px 20px rgba(0,0,0,.35); }
html[data-theme="dark"] .btn.ghost:hover { background: var(--bg-2); }
html[data-theme="dark"] .btn.danger:hover { background: rgba(217,45,32,.3); }
html[data-theme="dark"] .btn.danger { color: #FF8A80; }
html[data-theme="dark"] .alert.err, html[data-theme="dark"] .tgres.err { color: #FF8A80; }
html[data-theme="dark"] .hx-stat:nth-child(2) .hx-stat-ic { background: rgba(110,160,240,.16); color: #9CC0F7; }
html[data-theme="dark"] .tag.nrf, html[data-theme="dark"] .ct-need, html[data-theme="dark"] .qrm-warn { background: rgba(245,165,36,.14); color: #F5C46B; }
html[data-theme="dark"] .ct-need b { color: #FFD88A; }
html[data-theme="dark"] .order-box { background: rgba(245,165,36,.1); border-color: rgba(245,165,36,.35); }
html[data-theme="dark"] .pg-kicker, html[data-theme="dark"] .pg-warn { color: #F5C46B; }
html[data-theme="dark"] .pg-foot { border-top-color: rgba(245,165,36,.35); }
html[data-theme="dark"] .stg-th { background: linear-gradient(110deg, #16243C 30%, #1F304D 50%, #16243C 70%); background-size: 200% 100%; }
html[data-theme="dark"] .actionbar { background: rgba(18,32,54,.94); }
html[data-theme="dark"] .modal-bg { background: rgba(2,8,20,.7); }
html[data-theme="dark"] .hx-day-h span { background: var(--bg-2); }
html[data-theme="dark"] .snav-cta.on { box-shadow: 0 0 0 2px var(--chrome), 0 0 0 4px rgba(255,138,61,.6); }
html[data-theme="dark"] .mnav { box-shadow: 0 -8px 24px rgba(0,0,0,.35); }
html[data-theme="dark"] .input::placeholder, html[data-theme="dark"] textarea::placeholder { color: #6F7F9C; }
html[data-theme="dark"] .ws-panel, html[data-theme="dark"] .card, html[data-theme="dark"] .hx-row, html[data-theme="dark"] .ws-bar, html[data-theme="dark"] .trows { box-shadow: inset 0 0 0 1px var(--line), var(--shadow); }
html[data-theme="dark"] img.thumb-bg, html[data-theme="dark"] canvas { color-scheme: light; }
html[data-theme="dark"] .hx-switch .sw::after { background: #fff; }

/* Переключатель темы в меню */
.snav-theme {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 40px; padding: 0 10px 0 12px; border: 0; border-radius: 10px;
  background: transparent; color: #B8C3D6; font: 700 14px var(--font); cursor: pointer; transition: background .15s, color .15s;
}
.snav-theme:hover { background: rgba(255,255,255,.06); color: #fff; }
.snav-theme .t { flex: 1; text-align: left; }
.snav-theme .tsw { position: relative; width: 34px; height: 20px; border-radius: 20px; background: rgba(255,255,255,.16); flex: none; transition: background .15s; }
.snav-theme .tsw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .15s; }
.snav-theme[aria-checked="true"] .tsw { background: var(--accent); }
.snav-theme[aria-checked="true"] .tsw::after { transform: translateX(14px); }
.snav-theme:focus-visible { outline: 2px solid #FF8A3D; outline-offset: 2px; }
.app.sb-mini .snav-theme { width: 46px; justify-content: center; padding: 0; margin: 0 auto; }
.app.sb-mini .snav-theme .tsw { display: none; }

/* =========================================================
   Компьютер: меню и правая панель стоят на месте, прокручивается только содержимое
   ========================================================= */
@media (min-width: 861px) {
  html:has(.app), html:has(.app) body { height: 100%; overflow: hidden; overscroll-behavior: none; }
  .app { height: 100vh; height: 100dvh; min-height: 0; }
  .snav { height: 100%; overscroll-behavior: contain; }
  .main-area { height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; }
}
/* Страница подборки: шапка и панель «Картинка / Видео / Пост» неподвижны, прокручивается только список туров */
@media (min-width: 1181px) {
  .main-area:has(.ws) { overflow: hidden; }
  .main-area:has(.ws) #page { height: 100%; }
  .page.page-wide:has(> .ws) { height: 100%; padding-bottom: 20px; }
  .ws { height: 100%; grid-template-rows: auto minmax(0, 1fr); }
  .ws-list { height: 100%; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px 6px 24px; margin: -2px -6px 0; scrollbar-gutter: stable; }
  .ws-panel { position: relative; top: auto; height: 100%; max-height: none; }
  .ws-pbody { overscroll-behavior: contain; }
}

/* Правая панель подборки — как боковое меню: колонка на всю высоту, прижата к правому краю */
@media (min-width: 1181px) {
  .page.page-wide:has(> .ws) { padding: 0; }
  .ws { gap: 0 24px; }
  .ws-head { padding: 24px 0 0 24px; }
  .ws-list { padding: 2px 4px 24px 24px; margin: -2px 0 0 0; }
  .ws-panel, html[data-theme="dark"] .ws-panel {
    height: 100%; border-radius: 0; box-shadow: none; border-left: 1px solid var(--line);
  }
  .ws-pfoot { border-radius: 0; }
}

/* Страница подборки: шапка и фильтры прокручиваются вместе со списком туров;
   меню слева и панель справа остаются на месте */
@media (min-width: 1181px) {
  .main-area:has(.ws) { overflow-y: auto; }
  .main-area:has(.ws) #page, .page.page-wide:has(> .ws) { height: auto; }
  .ws { height: auto; grid-template-rows: auto 1fr; align-items: start; }
  .ws-list { height: auto; min-height: 0; overflow: visible; margin: 0; padding: 0 4px 24px 24px; }
  .ws-panel, html[data-theme="dark"] .ws-panel { position: sticky; top: 0; align-self: start; height: 100vh; height: 100dvh; }
}

/* Картинка: «Формат» и «Содержание» — в одну строку */
.pform { container-type: inline-size; }
.pform .frow2 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; }
.pform .frow2 > * { min-width: 0; }
.pform .frow2 .seg { flex-wrap: nowrap; }
.pform .frow2 .seg button { flex: 1 1 auto; padding: 8px 6px; white-space: nowrap; }
@container (max-width: 460px) { .pform .frow2 { grid-template-columns: 1fr; } }

/* Вкладки панели «Картинка · Видео · Пост · Подборка» — компактные, с линией снизу */
.ws-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0 10px; background: transparent; border-radius: 0; border-bottom: 1px solid var(--line); flex: none; }
.ws-tabs button {
  position: relative; flex-direction: row; justify-content: center; gap: 7px; height: 50px; padding: 0 6px; min-width: 0;
  border-radius: 0; background: transparent; box-shadow: none; font: 700 13.5px var(--font); color: var(--ink-3); transition: color .15s;
}
.ws-tabs button span { font-size: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-tabs button .ico { color: var(--ink-4); transition: color .15s; }
.ws-tabs button:hover { color: var(--ink); }
.ws-tabs button:hover .ico { color: var(--ink-2); }
.ws-tabs button.on { background: transparent; color: var(--ink); box-shadow: none; }
.ws-tabs button.on .ico { color: var(--accent); }
.ws-tabs button.on::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2.5px; border-radius: 3px 3px 0 0; background: var(--accent); }
.ws-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; border-radius: 8px; }
.ws-mtabs button { display: inline-flex; align-items: center; gap: 6px; }
.ws-mtabs button .ico { flex: none; }

/* Цвета рекламы: 10 вариантов — две ровные строки по 5 */
.themes { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* Медиатека: заголовок с кнопками «Другое фото» и «Без фото» */
.lib-h { gap: 8px; }
.lib-h > .ico { color: var(--accent); }
.lib-acts { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.lib-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; border: 0; border-radius: 9px;
  background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line); font: 700 12.5px var(--font); color: var(--ink-2);
  cursor: pointer; transition: background .15s, color .15s, box-shadow .15s;
}
.lib-btn:hover { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.lib-btn .ico { color: var(--ink-4); }
.lib-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lib-shuf { background: var(--accent-soft); box-shadow: none; color: var(--accent-ink); }
.lib-shuf .ico { color: var(--accent); }
.lib-shuf:hover { background: var(--accent-soft-2); box-shadow: none; color: var(--accent-ink); }
.lib-shuf.spin .ico { animation: libspin .55s ease; }
@keyframes libspin { to { transform: rotate(360deg); } }
@media (max-width: 420px) { .lib-btn span { display: none; } .lib-btn { width: 34px; padding: 0; justify-content: center; } }

/* Цвета рекламы — в одну строку (10 образцов); «Без цвета» — перечёркнутый образец */
.pform .themes { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; }
.pform .themes button { height: 38px; aspect-ratio: auto; border-radius: 10px; border-width: 2.5px; transition: transform .12s; }
.pform .themes button:hover { transform: translateY(-2px); }
.pform .themes button.on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--surface) inset; }
.pform .themes button i { font-size: 0; }
.pform .themes button i::before { content: ""; position: absolute; left: 50%; top: 50%; width: 140%; height: 2px; background: var(--danger); transform: translate(-50%, -50%) rotate(-45deg); border-radius: 2px; }
.pform .themes button:has(i) { overflow: hidden; }
.pform .themes button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@container (max-width: 380px) { .pform .themes { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* Видео: ссылка «Сценарий от ИИ» под шаблонами */
.mv-ai { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.mv-ai .lnk { font-size: 13.5px; }

/* Видео: формат + музыка (выпадающий список) + «другая музыка» — в одну строку */
.mv-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.mv-row > .field { min-width: 0; }
.mv-row .seg { flex-wrap: nowrap; }
.mv-row .seg button { white-space: nowrap; padding: 8px 12px; }
.mv-music { position: relative; display: flex; align-items: center; min-width: 0; }
.mv-music > .ico { position: absolute; left: 12px; color: var(--accent); pointer-events: none; }
.mv-music select { width: 100%; min-width: 0; height: 42px; padding: 0 30px 0 38px; border-radius: 999px; font-weight: 700; font-size: 14px; text-overflow: ellipsis; cursor: pointer; }
.mv-shuf {
  width: 42px; height: 42px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--accent-soft); color: var(--accent); transition: background .15s;
}
.mv-shuf:hover { background: var(--accent-soft-2); }
.mv-shuf:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mv-shuf.spin .ico { animation: libspin .55s ease; }
@container (max-width: 400px) {
  .mv-row { grid-template-columns: minmax(0, 1fr) auto; }
  .mv-row > .field { grid-column: 1 / -1; }
  .mv-row .seg { display: flex; } .mv-row .seg button { flex: 1; }
}
@container (min-width: 401px) { .mv-row .seg button { padding: 8px 10px; font-size: 12.5px; } }

/* Видео: кнопка «Уникальное видео с ИИ» — наверху панели настроек */
.mv-aibtn {
  position: relative; display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 18px; border: 0; border-radius: 16px;
  background: var(--chrome); color: #fff; text-align: left; cursor: pointer; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); transition: transform .12s, box-shadow .2s;
}
.mv-aibtn::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 92% 20%, rgba(255,138,61,.35), transparent 45%), radial-gradient(circle at 10% 120%, rgba(123,108,246,.35), transparent 50%);
}
.mv-aibtn > * { position: relative; }
.mv-aibtn > .ico { color: #FFB27A; flex: none; }
.mv-aibtn span { display: grid; gap: 2px; min-width: 0; }
.mv-aibtn b { font: 700 15px var(--font); }
.mv-aibtn small { font-size: 12.5px; color: #B8C3D6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-aibtn:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(255,138,61,.5), 0 10px 24px rgba(11,31,58,.25); }
.mv-aibtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mv-aibtn:disabled { cursor: progress; transform: none; }
.mv-aibtn .spinner { color: #FFB27A; width: 22px; height: 22px; flex: none; }
html[data-theme="dark"] .mv-aibtn { background: #1B2D4D; }

/* «Мои стили» видео */
.mv-sec { display: flex; align-items: baseline; gap: 8px; margin: 4px 2px -6px; }
.mv-sec b { font-size: 13.5px; font-weight: 800; color: var(--ink); }
.mv-sec span { font-size: 12.5px; font-weight: 700; color: var(--ink-3); }
.mv-sec .lnk { margin-left: auto; font-size: 13px; padding: 0; }
.mv-save {
  display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border-radius: 14px;
  background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent-soft-2); animation: pop .25s ease;
}
.mv-save-sw, .sty-sw { position: relative; flex: none; width: 44px; height: 44px; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
.mv-save-sw i, .sty-sw i { position: absolute; right: 6px; bottom: 6px; width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(0,0,0,.15); }
.mv-save-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.mv-save-t b { font-size: 14px; color: var(--ink); }
.mv-save-t small { font-size: 12.5px; color: var(--ink-2); line-height: 1.35; }
.mv-save .btn { flex: none; gap: 6px; }
@container (max-width: 400px) { .mv-save { flex-wrap: wrap; } .mv-save .btn { width: 100%; } }

.sty-new { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: var(--bg); margin-bottom: 14px; }
.sty-new > div { display: grid; gap: 2px; min-width: 0; }
.sty-new small, .sty-row-t small { font-size: 12.5px; color: var(--ink-3); }
.sty-full { margin: 14px 0 10px; padding: 10px 12px; border-radius: 12px; background: rgba(245,165,36,.14); color: var(--ink); font-size: 13.5px; line-height: 1.45; }
.sty-list { display: grid; gap: 8px; }
.sty-row {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; cursor: pointer;
  box-shadow: inset 0 0 0 1.5px var(--line); transition: box-shadow .15s, background .15s;
}
.sty-row:hover { box-shadow: inset 0 0 0 1.5px var(--line-2); }
.sty-row input[type=radio] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sty-row:has(input[type=radio]:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.sty-row.on { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.sty-row-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.sty-row-t b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sty-rep { flex: none; font-size: 12.5px; font-weight: 800; color: var(--ink-3); padding: 6px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--line); }
.sty-row.on .sty-rep { background: var(--accent); color: #fff; box-shadow: none; }
.sty-edit { cursor: default; }
.sty-edit .input { padding: 8px 10px; font-weight: 700; }

/* Кнопка под постом: до 4 Telegram-кнопок (ник + подпись) */
.cbtn { container-type: inline-size; }
.tgb { display: grid; gap: 8px; }
.tgb-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.tgb-h b { font-size: 13px; font-weight: 800; color: var(--ink); }
.tgb-h span { font-size: 12px; font-weight: 700; color: var(--ink-3); }
.tgb-list { display: grid; gap: 6px; }
.tgb-row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.tgb-row:not(:has(.tgb-del)) { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.tgb-nick { position: relative; display: block; min-width: 0; }
.tgb-nick > span { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-weight: 800; color: #2AABEE; pointer-events: none; }
.tgb-nick .input, .tgb-lab { width: 100%; min-width: 0; height: 40px; padding: 0 10px; font-size: 14px; background: var(--field); }
.tgb-nick .input { padding-left: 26px; font-weight: 700; }
.tgb-del { width: 34px; height: 34px; color: var(--ink-3); }
.tgb-del:hover { color: var(--danger); background: var(--danger-soft); }
.tgb-add {
  display: inline-flex; align-items: center; gap: 6px; justify-self: start; height: 34px; padding: 0 12px; border: 0; border-radius: 9px;
  background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line-2);
  font: 700 13px var(--font); color: var(--ink-2); cursor: pointer;
}
.tgb-add .ico { color: #2AABEE; }
.tgb-add span { font-weight: 600; color: var(--ink-3); margin-left: 2px; }
.tgb-add:hover { color: var(--ink); box-shadow: inset 0 0 0 1.5px #2AABEE; }
.tgb-add:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tgb-note { font-size: 11.5px; color: var(--ink-3); line-height: 1.4; }
@container (max-width: 380px) { .tgb-row { grid-template-columns: minmax(0, 1fr) auto; } .tgb-lab { grid-column: 1; } .tgb-del { grid-row: 1 / span 2; grid-column: 2; } }

/* Видео: подпись — это пост из вкладки «Пост» */
.mv-capnote { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--bg); font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.mv-capnote > .ico { color: var(--accent); margin-top: 1px; }
.mv-capnote .lnk { font-size: 13px; padding: 0; }

/* Футер поста */
.pfoot-bar { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--bg); font-size: 13px; }
.pfoot-bar.empty { flex-wrap: nowrap; background: var(--accent-soft); }
.pfoot-bar.empty > .ico { color: var(--accent); flex: none; }
.pfoot-bar.empty > span { flex: 1; display: grid; gap: 1px; color: var(--ink-2); line-height: 1.35; }
.pfoot-bar.empty b { color: var(--ink); font-size: 13.5px; }
.pfoot-bar .btn { flex: none; }
.pfoot-sw { position: relative; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); cursor: pointer; user-select: none; flex: none; }
.pfoot-sw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pfoot-sw .sw { position: relative; width: 34px; height: 20px; border-radius: 20px; background: var(--line-2); transition: background .15s; }
.pfoot-sw .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.pfoot-sw input:checked + .sw { background: var(--teal); }
.pfoot-sw input:checked + .sw::after { transform: translateX(14px); }
.pfoot-sw input:focus-visible + .sw { outline: 2px solid var(--accent); outline-offset: 2px; }
.pfoot-prev { flex: 1; min-width: 0; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pfoot-bar .lnk { font-size: 13px; padding: 0; flex: none; }
.ft-ex { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 8px; font-size: 12.5px; font-weight: 700; color: var(--ink-3); }
.ft-ex > span:last-child { display: contents; }
.ft-chip { height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font: 700 12.5px var(--font); cursor: pointer; }
.ft-chip:hover { background: var(--accent-soft-2); }
.ft-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ft-ta { font: 500 14px/1.55 var(--font); resize: vertical; min-height: 150px; }
.ft-cnt { display: flex; justify-content: space-between; gap: 10px; }
.ft-cnt span:first-child { color: #B45309; font-weight: 700; }
html[data-theme="dark"] .ft-cnt span:first-child { color: #F5C46B; }
.ft-prev-h { margin: 14px 0 6px; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.ft-prev { white-space: pre-wrap; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); font-size: 13.5px; line-height: 1.5; color: var(--ink); max-height: 220px; overflow: auto; }
.ft-prof { display: grid; gap: 8px; }
.ft-prof > div { position: relative; padding: 10px 12px; border-radius: 12px; background: var(--bg); }
.ft-prof pre { margin: 0; white-space: pre-wrap; font: 500 13px/1.5 var(--font); color: var(--ink-2); max-height: 140px; overflow: auto; }
.ft-tag { position: absolute; top: 8px; right: 10px; font-size: 10.5px; font-weight: 800; color: var(--ink-3); }
.modal.ft-modal { max-width: 640px; }
.pfoot-bar, .pfoot-bar.empty > span { text-align: left; }

/* Вкладка «Пост»: панель прокручивается целиком (текст — фиксированной высоты, его можно растянуть) */
.ws-pbody:has(.post-ta) { display: block; }
.ws-pbody > * { flex-shrink: 0; }
textarea.input.post-ta { flex: none; height: 46vh; min-height: 260px; resize: vertical; }
@media (max-width: 1180px) { textarea.input.post-ta { height: 50vh; min-height: 240px; } }

/* Низ вкладки «Пост»: ↻ · Копировать · канал · В Telegram — в одну строку */
.ws-pfoot.post-foot { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
.post-foot .tgsend { display: contents; }
.post-foot > .pf-ibtn {
  flex: none; width: 46px; height: 46px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--surface); color: var(--ink-2); box-shadow: inset 0 0 0 1.5px var(--line); transition: color .15s, box-shadow .15s;
}
.post-foot > .pf-ibtn:hover { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.post-foot > .pf-ibtn:active .ico { transform: rotate(180deg); transition: transform .3s; }
.post-foot > .pf-ibtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.post-foot .pf-copy, .post-foot .tgsend .btn { flex: 1 1 auto; height: 46px; padding: 0 16px; gap: 8px; font-size: 14px; min-width: 0; }
.post-foot .pf-copy { flex: 0 1 auto; }
.post-foot .pf-copy.done { background: var(--teal); }
.post-foot .tgsend select#tgCh { flex: 1 1 120px; min-width: 0; height: 46px; padding: 0 30px 0 14px; border-radius: 999px; font-weight: 700; font-size: 14px; text-overflow: ellipsis; }
.post-foot .tgsend .tgres { flex-basis: 100%; text-align: center; }
.post-foot .tgsend > a.btn { flex-basis: 100%; }
.post-foot .tgsend .btn { width: auto; } .post-foot .tgsend > a.btn { width: 100%; }
.ws-pfoot.post-foot { container-type: inline-size; }
@container (max-width: 560px) {
  .post-foot:has(#tgCh) .pf-copy { flex: none; width: 46px; padding: 0; border-radius: 50%; }
  .post-foot:has(#tgCh) .pf-copy span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* =========================================================
   Вкладка «Подборка» (редизайн): компактные настройки, обычная прокрутка
   ========================================================= */
.lk-sw { margin-bottom: 14px; }
.lk-sw .seg { padding: 3px; border-radius: 12px; background: var(--bg-2); }
.lk-sw .seg button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 10px; border-radius: 9px; font-size: 13.5px; }
.lk-sw .seg button .ico { color: var(--ink-4); }
.lk-sw .seg button.on .ico { color: var(--accent); }

/* панель прокручивается целиком; поле текста фиксированной высоты (можно растянуть) */
.ws-pbody:has(.ct-ta), .ws-pbody:has(.ct-ta) > #lkBody { display: block; }
textarea.input.ct-ta { flex: none; height: 42vh; min-height: 240px; resize: vertical; }
@media (max-width: 1180px) { textarea.input.ct-ta { height: 50vh; } }

.ct2 { display: grid; gap: 14px; }
.ct2-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.ct2-f { display: grid; gap: 5px; min-width: 0; }
.ct2-f > span, .ct2-inc > span { font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.ct2-f select { height: 42px; padding: 0 30px 0 12px; border-radius: 12px; font-weight: 700; font-size: 14px; min-width: 0; text-overflow: ellipsis; cursor: pointer; }
.ct2 > small { margin-top: -6px; font-size: 12px; color: var(--ink-3); line-height: 1.4; }
.ct2 .ct-need { margin-top: -4px; }
.ct2-inc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ct2-inc > span { margin-right: 2px; }
.ct2-inc .ct-chip { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 11px; border-width: 1.5px; font-size: 13px; color: var(--ink-3); }
.ct2-inc .ct-chip .ico { color: var(--ink-4); }
.ct2-inc .ct-chip.on .ico { color: var(--teal-ink); }
.ct2-inc .ct-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ct2-out { display: grid; gap: 6px; }
.ct2-oh { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ct2-oh b { font-size: 13.5px; font-weight: 800; color: var(--ink); }
.ct2-oh span { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.ct2 .ct-dirty { margin: 0; }
@container (max-width: 400px) { .ct2-grid { grid-template-columns: 1fr; } }

/* низ: Копировать · WhatsApp · Telegram */
.ct-foot { display: flex; gap: 8px; }
.ct-foot .btn { flex: 1 1 0; height: 46px; padding: 0 14px; gap: 8px; font-size: 14px; min-width: 0; }
.ct-foot .ct-copy { flex: 1.3 1 0; }
.ct-foot .ct-copy.done { background: var(--teal); }
.ct2 { container-type: inline-size; }
@container (max-width: 470px) { .ct-foot .tx { display: inline; } .ct-foot .btn.wa, .ct-foot .btn.tg { padding: 0 12px; } }
@container (max-width: 380px) { .ct-foot .tx { display: none; } }

/* «Подборка → Текстом в чат»: поле текста занимает всё свободное место до кнопок
   (на ПК; если экран низкий — не меньше 240px, панель прокручивается) */
@media (min-width: 1181px) {
  .ws-pbody:has(.ct2) { display: flex; flex-direction: column; }
  .ws-pbody:has(.ct2) > .lk-sw { flex: none; }
  .ws-pbody:has(.ct2) > #lkBody { flex: 1 0 auto; display: flex; flex-direction: column; }
  .ct2 { flex: 1 0 auto; display: flex; flex-direction: column; }
  .ct2 > * { flex: none; }
  .ct2 > .ct2-out { flex: 1 0 auto; display: flex; flex-direction: column; }
  .ct2-out > * { flex: none; }
  .ct2-out > textarea.input.ct-ta { flex: 1 0 240px; height: auto; min-height: 240px; resize: none; }
}

/* Низ «Картинка» / «Видео»: Скачать · канал · Telegram · QR-код — одинаковые кнопки с иконками */
.ws-pfoot.pair > #pdl, .ws-pfoot.pair > #mvDl, .ws-pfoot.pair .tgsend #tgGo, .ws-pfoot.pair > .phonebtn {
  height: 48px; padding: 0 12px; gap: 8px; font-size: 14.5px; white-space: nowrap; min-width: 0;
}
.ws-pfoot.pair > .phonebtn { gap: 8px; }
.ws-pfoot.pair > .phonebtn .pb-t { align-items: center; }
.ws-pfoot.pair > .phonebtn .pb-t b { font-size: 14.5px; }
.ws-pfoot.pair > .phonebtn .pb-t small { display: none; }
.ws-pfoot.pair .tgsend select#tgCh { height: 48px; }
@container (max-width: 440px) {
  .ws-pfoot.pair > #pdl, .ws-pfoot.pair > #mvDl, .ws-pfoot.pair .tgsend #tgGo, .ws-pfoot.pair > .phonebtn { white-space: nowrap; font-size: 13px; padding: 0 8px; gap: 6px; }
}
/* компактнее: ниже, кнопки по ширине текста, канал занимает остаток */
.ws-pfoot.pair > #pdl, .ws-pfoot.pair > #mvDl, .ws-pfoot.pair .tgsend #tgGo, .ws-pfoot.pair > .phonebtn,
.ws-pfoot.pair .tgsend select#tgCh { height: 42px; font-size: 13.5px; }
.ws-pfoot.pair > #pdl, .ws-pfoot.pair > #mvDl, .ws-pfoot.pair .tgsend #tgGo, .ws-pfoot.pair > .phonebtn { padding: 0 14px; gap: 7px; }
.ws-pfoot.pair > .phonebtn .pb-t b { font-size: 13.5px; white-space: nowrap; }
.ws-pfoot.pair > .phonebtn svg { width: 17px; height: 17px; }
.ws-pfoot.pair:has(> .phonebtn):has(#tgCh) { grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 6px; }
.ws-pfoot.pair:has(#tgCh):not(:has(> .phonebtn)) { grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px; }
@container (max-width: 440px) {
  .ws-pfoot.pair > #pdl, .ws-pfoot.pair > #mvDl, .ws-pfoot.pair .tgsend #tgGo, .ws-pfoot.pair > .phonebtn { padding: 0 10px; font-size: 12.5px; }
  .ws-pfoot.pair > .phonebtn .pb-t b { font-size: 12.5px; }
}
@media (max-width: 560px) {
  .ws-pfoot.pair:has(> .phonebtn):has(#tgCh) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ws-pfoot.pair:has(#tgCh):not(:has(> .phonebtn)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Шаблоны картинок: кнопка «Выбрать шаблон» и окно со всеми шаблонами ---------- */
.mv-sec span { display: inline-flex; align-items: center; gap: 4px; }
.mv-sec span .ico, .tplm-hint .ico { display: inline-block; flex: none; }
.ps-more { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: -4px; }
.ps-more em { font-style: normal; font-weight: 600; font-size: 12.5px; color: var(--ink-3); }
.modal.tplm { max-width: 1120px; }
.tplm-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.tplm-f { display: flex; gap: 6px; flex-wrap: wrap; }
.tplm-f button { border: 0; background: var(--bg-2); color: var(--ink-2); font: 700 13px var(--font); padding: 8px 14px; border-radius: 999px; cursor: pointer; transition: background .15s, color .15s; }
.tplm-f button:hover { background: var(--seg-on); }
.tplm-f button.on { background: var(--ink); color: var(--surface); }
.tplm-f button span { opacity: .6; margin-left: 6px; font-weight: 600; }
.tplm-f button:focus-visible, .tplc-pick:focus-visible, .tplc-pin:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tplm-cnt { margin-left: auto; display: flex; align-items: center; gap: 6px; font: 700 13px var(--font); color: var(--ink-2); background: var(--accent-soft-2, rgba(255,90,54,.1)); padding: 7px 12px; border-radius: 999px; }
.tplm-cnt .ico { color: var(--accent); }
.tplm-hint { font-size: 13px; color: var(--ink-3); margin: 0 0 16px; }
.tplm-hint .ico { vertical-align: -2px; color: var(--accent); }
.tplm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 16px; }
.tplc { position: relative; background: var(--bg-2); border-radius: 18px; padding: 8px; transition: transform .15s, box-shadow .15s, background .15s; }
.tplc:hover { transform: translateY(-3px); background: var(--surface); box-shadow: 0 14px 30px rgba(11,31,58,.14); }
.tplc.on { background: var(--surface); box-shadow: inset 0 0 0 2px var(--accent), 0 10px 24px rgba(255,90,54,.18); }
.tplc.hide { display: none; }
.tplc-pick { display: block; width: 100%; border: 0; padding: 0; background: none; cursor: pointer; border-radius: 12px; }
.tplc .stg-th { border-radius: 12px; }
.tplc.ready .stg-th { animation: none; background: var(--surface); box-shadow: 0 1px 3px rgba(11,31,58,.15); }
.tplc canvas { width: 100%; height: 100%; display: block; }
.tplc-b { padding: 9px 4px 3px; display: grid; gap: 3px; }
.tplc-b b { font: 800 14px var(--font); color: var(--ink); }
.tplc-b small { font-size: 12px; line-height: 1.35; color: var(--ink-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tplc-cur { font: 700 10.5px var(--font); color: var(--accent); text-transform: uppercase; letter-spacing: .05em; margin-left: 4px; }
.tplc-pin { position: absolute; top: 15px; right: 15px; width: 36px; height: 36px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(255,255,255,.94); color: #5B6B82; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.2); transition: transform .15s, background .15s, color .15s; }
.tplc-pin:hover { transform: scale(1.08); color: var(--accent); }
.tplc-pin.on { background: var(--accent); color: #fff; }
.tplc-new { position: absolute; top: 15px; left: 15px; font: 800 10.5px var(--font); letter-spacing: .06em; text-transform: uppercase; font-style: normal; background: #0B1F3A; color: #fff; padding: 5px 9px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.2); pointer-events: none; }
@media (max-width: 640px) {
  .tplm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tplc { padding: 6px; border-radius: 14px; }
  .tplc-b small { display: none; }
  .tplc-pin { top: 11px; right: 11px; width: 32px; height: 32px; }
  .tplc-new { top: 11px; left: 11px; }
  .tplm-cnt { margin-left: 0; }
}

/* =========================================================
   Документы туриста (docs.js): список, заказ, печать
   ========================================================= */
.dz-page { padding-top: 0; }
.dz-ph { padding-top: 28px; }
.dz-search { position: relative; display: block; margin-bottom: 14px; max-width: 520px; }
.dz-search .ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.dz-search .input { padding-left: 42px; }
.dz-rows { display: grid; gap: 10px; }
.dz-row { display: flex; gap: 16px; align-items: center; background: var(--surface); border-radius: 18px; box-shadow: var(--shadow); padding: 14px 16px; cursor: pointer; transition: box-shadow .15s, transform .15s; outline: none; }
.dz-row:hover, .dz-row:focus-visible { box-shadow: 0 0 0 2px var(--accent-soft-2), var(--shadow); }
.dz-num { flex: none; width: 58px; height: 58px; border-radius: 16px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; align-content: center; font: 700 19px/1 var(--display); }
.dz-num small { font: 800 10px var(--font); opacity: .7; margin-bottom: 2px; }
.dz-main-c { flex: 1; min-width: 0; }
.dz-t { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dz-t b { font-size: 16px; }
.dz-st { font-size: 11.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: var(--teal-soft); color: var(--teal-ink); }
.dz-st.wait { background: #FFF4E0; color: #A15C00; } .dz-st.off { background: var(--danger-soft); color: var(--danger); }
.dz-m { display: flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: 13px; margin-top: 4px; min-width: 0; }
.dz-m span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dz-m .ico { flex: none; color: var(--muted); }
.dz-dot { color: var(--line-2); }
.dz-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.dz-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; background: var(--bg); color: var(--ink); font-weight: 700; font-size: 13px; text-decoration: none !important; transition: background .15s; }
.dz-chip:hover { background: var(--accent-soft); color: var(--accent); }
.dz-chip.off { color: var(--ink-4); background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); }
.dz-empty { text-align: center; padding: 44px 24px; max-width: 760px; margin: 0 auto; }
.dz-empty-ic { width: 68px; height: 68px; border-radius: 22px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; margin: 0 auto 16px; }
.dz-empty p { max-width: 520px; margin: 8px auto 0; }
.dz-steps3 { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 24px 0; padding: 0; text-align: left; }
.dz-steps3 li { background: var(--bg); border-radius: 16px; padding: 14px; display: flex; gap: 10px; font-size: 13.5px; color: var(--ink-2); }
.dz-steps3 b { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 13px; }

/* шапка заказа и печати */
.dz-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 0 14px; margin-bottom: 4px; background: var(--bg); }
.dz-back { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ink-2); text-decoration: none !important; padding: 8px 12px 8px 8px; border-radius: 999px; }
.dz-back:hover { background: var(--surface); color: var(--ink); }
.dz-title { flex: 1; min-width: 180px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.dz-title h2 { font-size: clamp(20px, 2.4vw, 26px); }
.dz-save-st { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--muted); }
.dz-save-st.ok { color: var(--teal-ink); } .dz-save-st.warn { color: #A15C00; }
.dz-save-st .spinner { width: 13px; height: 13px; border-width: 2px; }
.dz-top-r { display: flex; gap: 8px; align-items: center; }
.dz-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.dz-col { min-width: 0; }
.dz-side { position: sticky; top: 84px; display: grid; gap: 14px; }

/* навигация по разделам */
.dz-nav { position: sticky; top: 72px; z-index: 15; display: flex; gap: 6px; overflow-x: auto; padding: 10px 0; margin: 6px 0 2px; background: var(--bg); scrollbar-width: none; }
.dz-nav::-webkit-scrollbar { display: none; }
.dz-nav a { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow); color: var(--ink-2); font-weight: 700; font-size: 13px; text-decoration: none !important; }
.dz-nav a:hover { color: var(--accent); }
.dz-nav em { font-style: normal; font-size: 11px; background: var(--accent-soft); color: var(--accent); border-radius: 999px; padding: 1px 7px; }

/* блоки формы */
.dz-sec { margin-top: 14px; padding: 20px 22px 22px; scroll-margin-top: 140px; }
.dz-sec > header { display: flex; align-items: center; gap: 12px; justify-content: space-between; flex-wrap: wrap; margin-bottom: 16px; }
.dz-sec > header h3 { display: flex; align-items: center; gap: 9px; font-size: 17px; }
.dz-sec > header h3 .ico { color: var(--accent); }
.dz-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.dz-f, .dz-check, .dz-money, .dz-route, .dz-warn, .dz-warnslot { grid-column: span var(--s, 12); min-width: 0; }
.dz-warnslot { grid-column: 1 / -1; }
.dz-warnslot:empty { display: none; }
.dz-money, .dz-pt { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; }
.dz-f > span { font-size: 12.5px; margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dz-f .input { padding: 11px 13px; font-size: 14.5px; }
.dz-f input[type=time].input, .dz-f input[type=date].input { padding-right: 8px; min-width: 0; }
.dz-f select.input { padding-right: 30px; }
.dz-f textarea.input { min-height: 0; }
.input.up { text-transform: uppercase; }
.input.up::placeholder { text-transform: none; }
.dz-lbl-row { display: flex !important; align-items: center; justify-content: space-between; gap: 10px; white-space: normal !important; }
.dz-check { display: flex; gap: 11px; align-items: center; align-self: end; min-height: 46px; padding: 9px 12px; border-radius: var(--radius-sm); border: 1.5px solid var(--line); cursor: pointer; background: var(--field); }
.dz-check input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--accent); flex: none; }
.dz-check b { display: block; font-size: 13.5px; }
.dz-check small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.dz-item { border: 1.5px solid var(--line); background: var(--surface-2); border-radius: 16px; padding: 14px 16px 16px; }
.dz-item + .dz-item { margin-top: 12px; }
.dz-item-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.dz-item-h b { flex: 1; min-width: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dz-item-a { display: flex; gap: 4px; }
.icon-btn.sm { width: 32px; height: 32px; }
.icon-btn.del:hover { background: var(--danger-soft); color: var(--danger); }
.dz-none { border: 1.5px dashed var(--line-2); border-radius: 14px; padding: 18px; text-align: center; color: var(--muted); font-size: 14px; }
.dz-route { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: end; background: var(--surface); border-radius: 14px; padding: 12px; box-shadow: inset 0 0 0 1px var(--line); }
.dz-arrow { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-bottom: 5px; }
.dz-arrow .ico { transform: rotate(45deg); }
.dz-pt .dz-f { grid-column: span var(--s); }
.dz-quick { display: flex; gap: 6px; flex-wrap: wrap; margin: -4px 0 14px; }
.dz-quick button { display: inline-flex; align-items: center; gap: 5px; border: 0; cursor: pointer; padding: 7px 11px; border-radius: 999px; background: var(--bg); color: var(--ink-2); font: 700 12.5px var(--font); }
.dz-quick button:hover { background: var(--accent-soft); color: var(--accent); }
.dz-warn { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--danger-soft); color: var(--danger); font-size: 13px; font-weight: 600; }
.dz-filled .input, .dz-filled.dz-check { border-color: var(--teal) !important; background: var(--teal-soft) !important; box-shadow: 0 0 0 3px rgba(14,159,142,.12); transition: background 2s, border-color 2s, box-shadow 2s; }
.dz-filled.fade .input, .dz-filled.fade.dz-check { background: var(--field) !important; border-color: var(--line) !important; box-shadow: none; }

/* AI-автозаполнение */
.dz-ai { padding: 20px 22px; background: linear-gradient(135deg, var(--accent-soft), var(--surface) 55%); box-shadow: inset 0 0 0 1.5px var(--accent-soft-2), var(--shadow); }
.dz-ai-h { display: flex; gap: 14px; align-items: flex-start; }
.dz-ai-h h3 { font-size: 18px; }
.dz-ai-h p { color: var(--ink-2); font-size: 14px; margin-top: 4px; }
.dz-ai-ic { flex: none; width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #FF8A3D, #FF5A36); box-shadow: 0 8px 18px rgba(255,90,54,.28); }
.dz-drop { margin-top: 16px; border: 2px dashed var(--line-2); border-radius: 16px; background: var(--surface); padding: 18px; cursor: pointer; transition: border-color .15s, background .15s; outline: none; }
.dz-drop:hover, .dz-drop:focus-visible, .dz-drop.over { border-color: var(--accent); background: var(--sel-bg); }
.dz-drop-t { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; color: var(--ink-2); }
.dz-drop-t .ico { color: var(--accent); margin-bottom: 2px; }
.dz-drop-t span { font-size: 13px; color: var(--muted); }
.dz-drop.has .dz-drop-t { flex-direction: row; justify-content: center; gap: 8px; margin-top: 12px; }
.dz-drop.has .dz-drop-t span { display: none; }
.dz-drop.has .dz-drop-t b::after { content: " — добавить ещё"; font-weight: 600; color: var(--muted); }
.dz-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.dz-files:empty { display: none; }
.dz-file { position: relative; border-radius: 12px; overflow: hidden; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); cursor: default; }
.dz-file img, .dz-pdf { width: 100%; height: 78px; object-fit: cover; display: block; }
.dz-pdf { display: grid; place-items: center; font: 800 15px var(--font); color: #fff; background: #D92D20; }
.dz-file span { display: block; font-size: 11px; padding: 5px 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); }
.dz-file button { position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(11,31,58,.7); color: #fff; display: grid; place-items: center; cursor: pointer; }
.dz-ai-f { display: flex; gap: 10px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.dz-ai-f .input { flex: 1 1 280px; padding: 11px 14px; font-size: 14px; }
.dz-sw { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink-2); cursor: pointer; user-select: none; }
.dz-sw input { width: 18px; height: 18px; accent-color: var(--accent); }
.dz-ai.busy .dz-drop { opacity: .6; pointer-events: none; }
.dz-ai-mini { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; border: 0; cursor: pointer; padding: 12px 16px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--accent-soft-2), var(--shadow); color: var(--ink); font: inherit; }
.dz-ai-mini > span:nth-child(2) { flex: 1; }
.dz-ai-mini b { display: block; font-size: 14.5px; }
.dz-ai-mini small { display: block; font-size: 12.5px; color: var(--muted); }
.dz-ai-mini .dz-ai-ic { width: 34px; height: 34px; border-radius: 11px; }

/* правая панель */
.dz-docs { padding: 18px; }
.dz-docs h3 { font-size: 16px; margin-bottom: 10px; }
.dz-docs > p { margin-top: 10px; }
.dz-doc { width: 100%; display: flex; align-items: center; gap: 11px; text-align: left; border: 0; cursor: pointer; padding: 10px; border-radius: 14px; background: transparent; color: var(--ink); font: inherit; }
.dz-doc + .dz-doc { margin-top: 4px; }
.dz-doc:hover { background: var(--bg); }
.dz-doc-ic { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--bg); color: var(--ink-3); }
.dz-doc.ok .dz-doc-ic { background: var(--teal-soft); color: var(--teal-ink); }
.dz-doc-t { flex: 1; min-width: 0; }
.dz-doc-t b { display: block; font-size: 14px; }
.dz-doc-t small { display: block; font-size: 12px; color: var(--muted); }
.dz-doc.ok .dz-doc-t small { color: var(--teal-ink); font-weight: 700; }
.dz-doc-st { color: var(--teal); }
.dz-sum { padding: 6px 18px; }
.dz-sum div { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; font-size: 13.5px; }
.dz-sum div + div { border-top: 1px solid var(--line); }
.dz-sum span { color: var(--muted); }
.dz-sum b.due { color: var(--accent); } .dz-sum b.paid { color: var(--teal-ink); }
.dz-mbar { display: none; }

/* реквизиты */
.modal.dz-pmodal { max-width: 640px; }
.dz-pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dz-pgrid .dz-full { grid-column: 1 / -1; }
.dz-pgrid .field span em { font-weight: 600; color: var(--muted); font-style: normal; }
.dz-logo-row { display: flex; gap: 14px; align-items: center; padding: 12px; border-radius: 14px; background: var(--bg); margin-bottom: 16px; }
.dz-logo-pv { width: 72px; height: 48px; border-radius: 10px; background: #fff; display: grid; place-items: center; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.dz-logo-pv img { max-width: 64px; max-height: 40px; object-fit: contain; }

/* страница печати */
.dp-tabs { display: flex; gap: 4px; background: var(--surface); box-shadow: var(--shadow); padding: 4px; border-radius: 999px; }
.dp-tabs a { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 999px; color: var(--ink-2); font-weight: 700; font-size: 14px; text-decoration: none !important; }
.dp-tabs a.on { background: var(--navy); color: #fff; }
html[data-theme="dark"] .dp-tabs a.on { background: var(--seg-on); }
.dp-top .dz-top-r { margin-left: auto; }
.dp-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 20px; align-items: start; }
.dp-side { position: sticky; top: 84px; padding: 18px; display: grid; gap: 18px; max-height: calc(100vh - 100px); overflow-y: auto; }
.dp-blk h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 10px; }
.dp-blk small { display: block; margin-top: 7px; font-size: 12px; }
.dp-miss { display: flex; gap: 8px; align-items: flex-start; padding: 11px 12px; border-radius: 12px; background: #FFF4E0; color: #8A4B00; font-size: 13px; }
html[data-theme="dark"] .dp-miss { background: rgba(245,165,36,.14); color: #F5C46B; }
.dp-tpls { display: grid; gap: 8px; }
.dp-tpl { display: flex; gap: 12px; align-items: center; text-align: left; border: 0; cursor: pointer; padding: 8px; border-radius: 14px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); color: var(--ink); font: inherit; }
.dp-tpl.on { box-shadow: inset 0 0 0 2px var(--accent); background: var(--sel-bg); }
.dp-tpl-t b { display: block; font-size: 14px; }
.dp-tpl-t small { display: block; font-size: 12px; color: var(--muted); margin: 0; }
.dp-mini { flex: none; width: 46px; height: 60px; border-radius: 5px; background: #fff; box-shadow: 0 1px 4px rgba(11,31,58,.18); position: relative; overflow: hidden; display: block; }
.dp-mini i { position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--c); }
.dp-mini b { position: absolute; left: 6px; top: 10px; width: 22px; height: 4px; border-radius: 2px; background: var(--c); }
.dp-mini em { position: absolute; left: 6px; right: 6px; height: 3px; border-radius: 2px; background: #E2E6EE; }
.dp-mini em:nth-of-type(1) { top: 22px; } .dp-mini em:nth-of-type(2) { top: 30px; right: 14px; } .dp-mini em:nth-of-type(3) { top: 38px; }
.dp-mini.m-premium i { height: 18px; background: #0F1729; border-bottom: 3px solid var(--c); }
.dp-mini.m-premium b { top: 7px; background: #fff; }
.dp-mini.m-minimal i { display: none; }
.dp-mini.m-minimal b { top: 12px; height: 2px; width: 28px; background: #172033; }
.dp-mini.m-minimal em { height: 1px; background: #C4CAD6; }
.dp-seg { width: 100%; }
.dp-seg button { flex: 1; }
.dp-sw { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.dp-sw button { width: 25px; height: 25px; border-radius: 50%; border: 0; cursor: pointer; background: var(--c); box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); }
.dp-sw button.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--c); }
.dp-sw-c { position: relative; width: 25px; height: 25px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); color: var(--ink-3); cursor: pointer; overflow: hidden; }
.dp-sw-c input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dp-opt { display: flex; gap: 9px; align-items: center; font-size: 14px; font-weight: 600; padding: 5px 0; cursor: pointer; }
.dp-opt input { width: 18px; height: 18px; accent-color: var(--accent); }
.dp-opt2 { align-items: flex-start; padding: 7px 0; }
.dp-opt2 input { flex: none; margin-top: 1px; }
.dp-opt2 > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dp-opt2 b { font-weight: 600; }
.dp-blk .dp-opt2 small { margin-top: 0; font-size: 12px; font-weight: 500; color: var(--muted); line-height: 1.4; }
.dp-opt2 small a { color: var(--accent); font-weight: 600; }
.dp-opt2.off { cursor: default; }
.dp-opt2.off b { color: var(--muted); }
.dp-qrto { margin: 2px 0 6px 27px; padding: 10px; border-radius: 12px; background: var(--bg); }
.dp-qrto > span { display: block; font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 7px; }
.dp-qrto .dp-seg button { font-size: 12.5px; padding-left: 6px; padding-right: 6px; }
.dp-blk .dp-qrto small { margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-qrto.one { padding: 6px 10px; } .dp-blk .dp-qrto.one small { margin-top: 0; }
.dp-agency { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 14px; background: var(--bg); }
.dp-ag-logo { flex: none; width: 52px; height: 36px; border-radius: 8px; background: #fff; display: grid; place-items: center; overflow: hidden; color: var(--muted); }
.dp-ag-logo img { max-width: 46px; max-height: 30px; object-fit: contain; }
.dp-ag-t { flex: 1; min-width: 0; font-size: 13px; }
.dp-ag-t b, .dp-ag-t span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-ag-t span { color: var(--muted); }
.dp-hint { margin-top: -8px; }
.dp-stage { background: var(--bg-2); border-radius: 20px; padding: 0; overflow: hidden; display: flex; justify-content: center; min-height: 400px; }
.dp-paper { position: relative; overflow: hidden; }
.dp-paper iframe { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; background: transparent; }

@media (max-width: 1180px) {
  .dz-layout { grid-template-columns: minmax(0, 1fr); }
  .dz-side { position: static; grid-template-columns: 1fr 1fr; }
  .dp-layout { grid-template-columns: 280px minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .dz-top { top: 0; padding: 10px 0; }
  .dz-top { flex-wrap: nowrap; gap: 8px; }
  .dz-back span { display: none; }
  .dz-title { min-width: 0; flex-direction: column; gap: 0; }
  .dz-title h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  #dzSave, #dzDocs { display: none; }
  .dp-top { flex-wrap: wrap; }
  .dp-top .dz-back span { display: inline; }
  .dp-top .dz-top-r .btn span { display: none; }
  .dp-top .dz-top-r .btn { padding: 11px 13px; }
  .dz-nav { top: 62px; }
  .dz-side { grid-template-columns: 1fr; }
  .dz-mbar { display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 35; padding: 10px 12px; background: var(--surface); border-top: 1px solid var(--line); }
  .dz-mbar .btn { flex: 1; }
  .dz-page { padding-bottom: 170px; }
  .dp-layout { grid-template-columns: minmax(0, 1fr); }
  .dp-side { position: static; max-height: none; }
  .dp-top .dp-tabs { order: 3; width: 100%; }
  .dp-tabs a { flex: 1; justify-content: center; padding: 9px 8px; font-size: 13px; }
  .dz-row { flex-wrap: wrap; }
  .dz-acts { width: 100%; justify-content: flex-start; }
  .dz-steps3 { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .dz-f, .dz-check, .dz-money { grid-column: span 12; }
  .dz-f[style*="--s:1;"], .dz-f[style*="--s:2;"], .dz-f[style*="--s:3;"] { grid-column: span 6; }
  .dz-pt .dz-f { grid-column: span 12; }
  .dz-pt .dz-f[style*="--s:3;"] { grid-column: span 6; }
  .dz-route { grid-template-columns: 1fr; }
  .dz-arrow { margin: 0 auto; transform: rotate(90deg); }
  .dz-sec { padding: 16px; }
  .dz-pgrid { grid-template-columns: 1fr; }
  .dz-num { width: 48px; height: 48px; font-size: 16px; }
}
@media (max-width: 420px) {
  .mnav a { font-size: 10px; }
}

/* =========================================================
   Договоры и оплата (docs.js + contracts.js)
   ========================================================= */
.dz-lnk { font-weight: 700; font-size: 12px; margin-left: 6px; }
.dz-more { grid-column: 1 / -1; border-top: 1px dashed var(--line); padding-top: 10px; }
.dz-more summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--ink-3); list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.dz-more summary::before { content: "+"; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 6px; background: var(--bg); font-weight: 800; }
.dz-more[open] summary::before { content: "−"; }
.dz-more summary::-webkit-details-marker { display: none; }
.dz-more > .dz-grid { margin-top: 12px; }
.dz-paidbox { width: 100%; display: flex; align-items: center; gap: 8px; text-align: left; border: 1.5px dashed var(--line-2); border-radius: var(--radius-sm); background: var(--surface-2); padding: 10px 12px; min-height: 46px; cursor: pointer; font: 600 14px var(--font); color: var(--ink); }
.dz-paidbox:hover { border-color: var(--accent); }
.dz-paidbox b { white-space: nowrap; }
.dz-paidbox span { flex: 1; font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dz-paidbox span.due { color: var(--accent); } .dz-paidbox span.ok { color: var(--teal-ink); }
.dz-paidbox .ico { color: var(--muted); flex: none; }
.dc-intro { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.dc-intro h3 { font-size: 17px; }
.dc-intro p { color: var(--ink-2); font-size: 14px; margin-top: 3px; }
.dc-ic { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.dc-new { font-style: normal; font-size: 13px; font-weight: 600; color: var(--muted); margin-left: 4px; }
.dc-sub { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 6px; margin-top: 4px; border-top: 1px solid var(--line); grid-column: span 12; }
.dc-sub b { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; }
.dc-sub b .ico { color: var(--accent); }
.dc-from { font-size: 13px; color: var(--ink-3); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.dc-from select { border: 1.5px solid var(--line); border-radius: 10px; padding: 6px 8px; background: var(--field); color: var(--ink); font: 600 13px var(--font); max-width: 220px; }
.dc-note { grid-column: span 12; font-size: 12.5px; color: var(--muted); margin-top: -4px; }
.dc-modes { grid-column: span 12; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dc-modes button { text-align: left; border: 0; cursor: pointer; padding: 11px 13px; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line); color: var(--ink); font: inherit; }
.dc-modes button.on { box-shadow: inset 0 0 0 2px var(--accent); background: var(--sel-bg); }
.dc-modes b { display: block; font-size: 14px; }
.dc-modes small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.dc-inline { display: flex; gap: 6px; align-items: center; }
.dc-inline .input { flex: 1; min-width: 0; }
.dc-pp { display: flex; gap: 4px; }
.dc-pp button { border: 0; cursor: pointer; padding: 8px 9px; border-radius: 10px; background: var(--bg); color: var(--ink-2); font: 700 12.5px var(--font); }
.dc-pp button:hover { background: var(--accent-soft); color: var(--accent); }
.dc-pvbox { grid-column: span 12; }
.dc-pv { border-radius: 14px; padding: 12px 14px; background: var(--teal-soft); color: var(--ink); font-size: 13.5px; line-height: 1.5; }
.dc-pv small { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--teal-ink); margin-bottom: 4px; }
.dc-pv p + p { margin-top: 4px; }
.dc-pv.warn { background: #FFF4E0; color: #8A4B00; display: flex; gap: 8px; align-items: center; font-weight: 600; }
html[data-theme="dark"] .dc-pv.warn { background: rgba(245,165,36,.14); color: #F5C46B; }

/* блок «Оплата» */
.pay-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px; border-radius: 16px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.pay-sum > div > span { display: block; font-size: 12px; color: var(--muted); font-weight: 700; }
.pay-sum > div > b { display: block; font: 700 18px/1.3 var(--display); margin-top: 2px; }
.pay-sum > div > small { display: block; font-size: 12px; color: var(--muted); }
.pay-sum b.ok { color: var(--teal-ink); } .pay-sum b.due { color: var(--accent); }
.pay-sum.over { box-shadow: inset 0 0 0 1.5px var(--danger); }
.pay-sum.over b.due { color: var(--danger); }
.pay-bar { grid-column: 1 / -1; position: relative; height: 10px; border-radius: 10px; background: var(--bg-2); overflow: hidden; }
.pay-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, var(--teal), #3DDC97); border-radius: 10px; transition: width .3s; }
.pay-bar em { position: absolute; right: 6px; top: -2px; font: 800 9px/14px var(--font); color: var(--ink-3); font-style: normal; display: none; }
.pay-bar.sm { height: 6px; width: 120px; }
.pay-plan { display: grid; gap: 6px; margin-top: 12px; }
.pay-plan > div { display: flex; align-items: center; gap: 10px; font-size: 13.5px; padding: 8px 12px; border-radius: 12px; background: var(--bg); }
.pay-plan i { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 800 12px var(--font); font-style: normal; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line-2); color: var(--ink-3); }
.pay-plan .ok i { background: var(--teal); color: #fff; box-shadow: none; }
.pay-plan .bad i { background: var(--danger); color: #fff; box-shadow: none; }
.pay-plan b { flex: 1; }
.pay-plan span { color: var(--ink-3); font-weight: 600; }
.pay-plan .bad span { color: var(--danger); } .pay-plan .ok span { color: var(--teal-ink); }
.pay-list { display: grid; gap: 8px; margin-top: 14px; }
.pay-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); background: var(--surface); }
.pay-row .grow { min-width: 0; }
.pay-row b { font-size: 15px; }
.pay-row small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.pay-m { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--teal-soft); color: var(--teal-ink); }
.pay-m.card, .pay-m.terminal { background: rgba(110,160,240,.15); color: #2F5FB3; }
.pay-m.transfer { background: var(--accent-soft); color: var(--accent); }
html[data-theme="dark"] .pay-m.card, html[data-theme="dark"] .pay-m.terminal { color: #9CC0F7; }

/* окно «Принять оплату» */
.modal.pm-modal { max-width: 500px; }
.pm-head { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--bg); margin-bottom: 16px; }
.pm-head span { display: block; font-size: 12px; color: var(--muted); font-weight: 700; }
.pm-head b { font-size: 15px; }
.pm-cur { width: 100%; margin-bottom: 12px; }
.pm-cur button, .pm-meth button { flex: 1; }
.pm-meth { width: 100%; }
.pm-amt-in { position: relative; }
.pm-amt-in .input { font: 700 26px/1.2 var(--display); padding: 14px 70px 14px 16px; }
.pm-amt-in em { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font: 700 15px var(--font); font-style: normal; color: var(--muted); }
.pm-quick { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 14px; }
.pm-quick:empty { margin: 0 0 10px; }
.pm-quick button { border: 0; cursor: pointer; padding: 7px 11px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font: 700 12.5px var(--font); }
.pm-rate { margin-bottom: 14px; }
.pm-modal .field + .field, .pm-modal .pm-two { margin-top: 14px; }
.pm-two { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.pm-res { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.pm-res:empty { display: none; }
.pm-res > div { padding: 10px 12px; border-radius: 12px; background: var(--teal-soft); }
.pm-res span { display: block; font-size: 12px; color: var(--muted); font-weight: 700; }
.pm-res b { font-size: 16px; } .pm-res b.due { color: var(--accent); } .pm-res b.ok { color: var(--teal-ink); }
.pm-res .warn { grid-column: 1 / -1; background: #FFF4E0; color: #8A4B00; font-weight: 600; font-size: 13.5px; }
.pm-done { text-align: center; padding: 16px 0 6px; }
.pm-ok { width: 60px; height: 60px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--teal); color: #fff; margin-bottom: 12px; box-shadow: 0 10px 24px rgba(14,159,142,.3); }
.pm-done h3 { font-size: 18px; }
.pm-done p { color: var(--ink-2); margin-top: 6px; }
.dz-psub { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 4px; }
.dz-psub b { display: block; font-size: 15px; }
.dz-psub span { font-size: 12.5px; color: var(--muted); }
.dp-note { font-size: 13px; padding: 10px 12px; border-radius: 12px; background: var(--bg); color: var(--ink-2); }

/* список договоров */
.ct-kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.ct-kpi > div { background: var(--surface); border-radius: 16px; box-shadow: var(--shadow); padding: 14px 16px; min-width: 0; }
.ct-kpi span { display: block; font-size: 12px; color: var(--muted); font-weight: 700; }
.ct-kpi b { display: block; font: 700 18px/1.3 var(--display); margin-top: 4px; overflow-wrap: anywhere; }
.ct-kpi b.ok { color: var(--teal-ink); } .ct-kpi b.due { color: var(--accent); }
.ct-kpi small { display: block; font-size: 12px; color: var(--danger); font-weight: 700; margin-top: 2px; }
.ct-kpi .hot { box-shadow: inset 0 0 0 1.5px var(--accent-soft-2), var(--shadow); }
.ct-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.ct-bar .dz-search { flex: 1; min-width: 240px; margin: 0; }
.ct-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.ct-tabs button { border: 0; cursor: pointer; padding: 9px 14px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow); font: 800 13px var(--font); color: var(--ink-2); display: inline-flex; gap: 7px; align-items: center; }
.ct-tabs button.on { background: var(--navy); color: #fff; }
html[data-theme="dark"] .ct-tabs button.on { background: var(--seg-on); }
.ct-tabs em { font-style: normal; font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--bg-2); color: var(--ink-2); }
.ct-tabs button.on em { background: rgba(255,255,255,.18); color: #fff; }
.ct-tabs em.hot { background: var(--danger); color: #fff; }
.ct-num { width: auto; min-width: 74px; padding: 0 10px; font-size: 14px; }
.ct-money { flex: none; text-align: right; display: grid; justify-items: end; gap: 6px; }
.ct-sum b { display: block; font-size: 15px; white-space: nowrap; }
.ct-sum span { display: block; font-size: 12.5px; color: var(--accent); font-weight: 700; white-space: nowrap; }
.dz-m b.due { color: var(--danger); }

/* шаблоны договоров */
.tp-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.tp-list { padding: 14px; position: sticky; top: 84px; display: grid; gap: 6px; }
.tp-list h4 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 6px 4px 2px; }
.tp-it { text-align: left; border: 0; cursor: pointer; padding: 10px 12px; border-radius: 12px; background: transparent; color: var(--ink); font: inherit; }
.tp-it:hover { background: var(--bg); }
.tp-it.on { background: var(--sel-bg); box-shadow: inset 0 0 0 2px var(--accent); }
.tp-it b { display: block; font-size: 13.5px; line-height: 1.3; }
.tp-it small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.tp-it em { font-style: normal; color: var(--accent); font-weight: 700; }
.tp-list .btn { margin-top: 8px; }
.tp-ed { padding: 18px; display: grid; gap: 14px; }
.tp-sample { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 12px 14px; border-radius: 14px; background: #FFF8E8; box-shadow: inset 0 0 0 1.5px #F5D68A; font-size: 13.5px; }
html[data-theme="dark"] .tp-sample { background: rgba(245,165,36,.1); box-shadow: inset 0 0 0 1.5px rgba(245,165,36,.35); }
.tp-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.tp-row .grow { min-width: 220px; }
.tp-fields { display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-start; }
.tp-fl { font-size: 12.5px; font-weight: 700; color: var(--muted); padding: 7px 2px; }
.tp-g { border-radius: 12px; background: var(--bg); }
.tp-g summary { cursor: pointer; padding: 7px 11px; font: 700 12.5px var(--font); color: var(--ink-2); list-style: none; }
.tp-g summary::-webkit-details-marker { display: none; }
.tp-g[open] { flex-basis: 100%; }
.tp-g[open] summary { color: var(--accent); }
.tp-g > div { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 8px 9px; }
.tp-g button { border: 0; cursor: pointer; padding: 5px 9px; border-radius: 8px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font: 600 12px var(--font); }
.tp-g button:hover { box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--accent); }
textarea.input.tp-body { min-height: 560px; font: 500 13px/1.6 ui-monospace, "SF Mono", Menlo, Consolas, monospace; tab-size: 2; }
.tp-help { font-size: 12.5px; color: var(--ink-3); line-height: 1.7; }
.tp-help code { font-size: 12px; background: var(--bg); padding: 1px 5px; border-radius: 5px; color: var(--ink); }
.tp-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tp-pv { position: sticky; top: 84px; }
.tp-pv-h { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.tp-pv-h i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin: 0 3px 0 8px; vertical-align: -1px; }
.lg-ok { background: rgba(14,159,142,.3); } .lg-empty { background: #FFE2A8; } .lg-bad { background: #F8C4C4; }
.tp-pv .dp-stage { max-height: calc(100vh - 140px); overflow-y: auto; }

/* меню «Ещё» на телефоне */
.modal.more-modal { max-width: 420px; }
.more-nav { display: grid; gap: 4px; }
.more-nav a { display: flex; align-items: center; gap: 12px; padding: 13px 12px; border-radius: 12px; color: var(--ink); font-weight: 700; text-decoration: none !important; }
.more-nav a:hover, .more-nav a.on { background: var(--bg); }
.more-nav a span { flex: 1; }
.more-nav a .ico:first-child { color: var(--accent); }

@media (max-width: 1280px) {
  .tp-layout { grid-template-columns: 230px minmax(0, 1fr); }
  .tp-pv { grid-column: 2; position: static; }
}
@media (max-width: 980px) {
  .ct-kpi { grid-template-columns: 1fr 1fr; }
  .tp-layout { grid-template-columns: minmax(0, 1fr); }
  .tp-list { position: static; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .tp-list h4 { grid-column: 1 / -1; }
  .tp-pv { grid-column: auto; }
}
@media (max-width: 760px) {
  .dc-modes { grid-template-columns: 1fr; }
  .pay-sum { grid-template-columns: 1fr 1fr; }
  .pay-sum > div:nth-child(3) { grid-column: 1 / -1; }
  .pay-row { flex-wrap: wrap; }
  .pay-row .grow { flex: 1 1 0; min-width: 0; }
  .pay-row { flex-wrap: wrap; row-gap: 8px; }
  .pay-row .btn { margin-left: 48px; }
  .ct-money { width: 100%; justify-items: start; text-align: left; }
  .pay-bar.sm { width: 100%; }
  .pm-two { grid-template-columns: 1fr; }
  textarea.input.tp-body { min-height: 380px; }
}

/* ---------- Тариф: функции, пакеты, продление ---------- */
.plan ul li.off { color: var(--muted); }
.plan ul li.off::before { content: "✕  "; color: var(--muted); }
.pf-off { color: var(--muted); }
.bill-frz { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.1); color: #E4ECF8; font-size: 13.5px; font-weight: 600; max-width: 520px; }
.pk-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--teal-soft); color: var(--teal-ink); font-size: 14px; margin: -4px 0 12px; }
.pk-note .ic { flex: none; margin-top: 2px; }
.pk-note.lock { background: #FFF4E0; color: #8A4B00; }
.packs.is-locked .pack { opacity: .62; }
.packs.is-locked .btn[disabled] { cursor: not-allowed; }
.u-frz { margin-top: 8px; font-size: 12px; font-weight: 600; color: #BFD3F2; line-height: 1.35; }
.rn-box p { margin: 0 0 12px; }
.rn-list { margin: 0 0 12px; padding-left: 18px; display: grid; gap: 6px; color: var(--ink-2); }
.rn-list li.warn { color: #A15C00; }
.rn-tip { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--teal-soft); color: var(--teal-ink); font-size: 14px; }
.rn-tip .ic { flex: none; margin-top: 2px; }
.lockcard { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 16px 18px; border-radius: 18px; background: #FFF4E0; border: 1.5px solid #F5D68A; color: #6B3A00; margin-bottom: 18px; }
.lockcard .ic { flex: none; width: 22px; height: 22px; }
.lockcard .grow { min-width: 220px; }
.lockcard b { color: #4A2800; }
.btn.is-locked { opacity: .78; }
.dp-lock { max-width: 720px; margin: 24px auto; }
.dz-col > .lockcard { margin-bottom: 0; }

/* =========================================================
   Ваучеры: «загрузил → нажал → готово» и страница готовых документов
   ========================================================= */
.vz-hero { max-width: 760px; margin: 8px auto 0; padding: 28px; background: linear-gradient(160deg, var(--accent-soft), var(--surface) 46%); box-shadow: inset 0 0 0 1.5px var(--accent-soft-2), var(--shadow); }
.vz-hero-h { display: flex; gap: 16px; align-items: flex-start; }
.vz-hero-h h3 { font-size: 21px; }
.vz-hero-h p { color: var(--ink-2); font-size: 14.5px; margin-top: 6px; max-width: 560px; }
.vz-hero-h .dz-ai-ic { width: 50px; height: 50px; border-radius: 16px; }
.vz-drop { margin-top: 20px; padding: 34px 18px; min-height: 190px; display: grid; align-content: center; }
.vz-drop .dz-drop-t b { font-size: 16px; }
.vz-drop.has { padding: 16px; min-height: 0; }
.vz-kinds { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 12px; }
.vz-kinds span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 12.5px; font-weight: 700; color: var(--ink-3); }
.vz-kinds .ico { color: var(--accent); }
.vz-hint { margin-top: 14px; }
.vz-hint summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--ink-3); list-style: none; display: inline-flex; gap: 6px; align-items: center; }
.vz-hint summary::-webkit-details-marker { display: none; }
.vz-hint summary::before { content: "+"; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 6px; background: var(--bg); font-weight: 800; }
.vz-hint[open] summary::before { content: "−"; }
.vz-hint summary em { font-style: normal; font-weight: 600; color: var(--muted); }
.vz-hint .input { margin-top: 10px; }
.vz-go { margin-top: 18px; }
.vz-go:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; transform: none; }
.vz-hero.busy .vz-drop, .vz-hero.busy .vz-kinds, .vz-hero.busy .vz-hint { display: none; }
.vz-busy { list-style: none; margin: 18px 0 0; padding: 16px 18px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 10px; }
.vz-busy li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--ink-4); transition: color .3s; }
.vz-busy li::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line-2); }
.vz-busy li.on { color: var(--ink); }
.vz-busy li.on::before { box-shadow: none; border: 2.5px solid var(--accent-soft-2); border-top-color: var(--accent); animation: spin .8s linear infinite; width: 15px; height: 15px; margin: 0 2.5px; }
.vz-busy li.done { color: var(--teal-ink); }
.vz-busy li.done::before { box-shadow: none; background: var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; }
/* @keyframes spin — уже есть выше */
.vz-manual { text-align: center; margin: 16px auto 40px; font-size: 14px; color: var(--muted); }
.vz-manual a { font-weight: 700; }

.vz-num { font-size: 13px; font-weight: 700; color: var(--muted); }
.vz-done { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 14px 18px; border-radius: 18px; background: var(--teal-soft); color: var(--ink); margin: 4px 0 16px; animation: vzIn .4s ease; }
.vz-done > .ico { flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: var(--teal); color: #fff; }
.vz-done .grow { min-width: 220px; }
.vz-done b { display: block; font-size: 15.5px; }
.vz-done span { display: block; font-size: 13.5px; color: var(--ink-2); margin-top: 2px; }
@keyframes vzIn { from { opacity: 0; transform: translateY(-6px); } }
.vz-cnote { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line); color: var(--ink-2); font-size: 13.5px; font-weight: 600; margin-bottom: 14px; text-decoration: none !important; }
.vz-cnote > .ico:first-child { color: var(--accent); flex: none; }
.vz-cnote span { flex: 1; }
.vz-cnote:hover { box-shadow: inset 0 0 0 1.5px var(--accent-soft-2); color: var(--ink); }
.dz-col > .vz-cnote { margin: 0 0 14px; }
.vz-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.vz-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.vz-doc { background: var(--surface); border-radius: 20px; box-shadow: var(--shadow); padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.vz-thumb { display: block; position: relative; aspect-ratio: 210 / 297; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 6px 16px rgba(11,31,58,.08); transition: transform .2s, box-shadow .2s; }
.vz-thumb:hover { transform: translateY(-2px); box-shadow: 0 0 0 2px var(--accent-soft-2), 0 12px 28px rgba(11,31,58,.14); }
.vz-thumb iframe { position: absolute; left: 0; top: 0; width: 794px; height: 1123px; border: 0; transform-origin: 0 0; pointer-events: none; background: #fff; }
.vz-ph { display: grid; place-items: center; align-content: center; gap: 10px; text-align: center; padding: 18px; background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--line); border: 0; color: var(--ink-4); text-decoration: none !important; }
html[data-theme="dark"] .vz-ph { background: var(--bg); }
.vz-ph span { font-size: 13px; font-weight: 600; color: var(--muted); max-width: 170px; }
.vz-doc-f { display: flex; flex-direction: column; gap: 10px; padding: 0 4px 2px; flex: 1; }
.vz-doc-f .btn { justify-content: center; margin-top: auto; }
.vz-doc-f .grow { min-width: 0; }
.vz-doc-f b { display: flex; align-items: center; gap: 6px; font-size: 15px; }
.vz-doc.ok .vz-doc-f b .ico { color: var(--teal); }
.vz-doc.miss .vz-doc-f b { color: var(--ink-3); }
.vz-doc-f small { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }
.vz-doc.ok .vz-doc-f small { color: var(--teal-ink); font-weight: 700; }
.vz-side { position: sticky; top: 84px; display: grid; gap: 14px; }
.vz-side h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.vz-side h4 .ico { color: var(--accent); }
.vz-sum { padding: 18px; }
.vz-fact { display: flex; gap: 11px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.vz-fact:first-of-type { border-top: 0; }
.vz-fact > .ico { flex: none; color: var(--ink-4); margin-top: 2px; }
.vz-fact span { display: block; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.vz-fact b { display: block; font-weight: 700; line-height: 1.45; word-break: break-word; }
.vz-fact b small { display: block; font-weight: 600; color: var(--muted); font-size: 12px; }
.vz-sum .btn { margin-top: 10px; }
.vz-add { padding: 18px; }
.vz-add .dz-drop { margin-top: 10px; padding: 14px; }
.vz-add .dz-drop-t { flex-direction: row; gap: 8px; justify-content: center; }
.vz-add .dz-drop-t span { display: none; }
.vz-add .dz-files { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
.vz-add .btn { margin-top: 10px; }
.vz-add.busy .dz-drop { opacity: .6; pointer-events: none; }

/* =========================================================
   Договор — лёгкая форма на одной странице
   ========================================================= */
.ct-sub { margin: -6px 0 14px; font-size: 14px; color: var(--muted); }
.ct-sub b { color: var(--ink); font-family: var(--display); font-weight: 600; }
.ct-done { background: var(--teal-soft); }
.ct-done .row { gap: 8px; }
.ct-layout { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 20px; align-items: start; }
.ct-col { min-width: 0; display: grid; gap: 16px; }
.ct-col > .dz-sec { margin-top: 0; }
.ct-side { position: sticky; top: 84px; }
.ct-card, .ct-fin { padding: 22px 24px 24px; }
.ct-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.ct-h h3 { display: flex; align-items: center; gap: 9px; font-size: 17px; }
.ct-h h3 .ico { color: var(--accent); }
.ct-subh { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 22px 0 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.ct-subh b { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; }
.ct-subh b .ico { color: var(--accent); }
.ct-card .dc-note { margin-top: 10px; }
.dz-f.bad .input { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(217,45,32,.1); }
.dz-f.bad > span { color: var(--danger); }
.ct-err { display: block; font-size: 12px !important; color: var(--danger) !important; font-weight: 700; margin-top: 5px; }

.ct-tl { margin-top: 20px; border-radius: 18px; padding: 16px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.ct-tl-h { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.ct-tl-h b { display: block; font-size: 14.5px; }
.ct-tl-h small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.ct-tl-h .row { gap: 6px; }
.ct-tt { display: grid; gap: 6px; }
.ct-tr { display: grid; grid-template-columns: 130px minmax(0, 1.6fr) 150px minmax(0, 1fr) 40px; gap: 8px; align-items: center; }
.ct-tr .input { padding: 9px 11px; font-size: 14px; }
.ct-tr select.input { padding-right: 26px; }
.ct-th { font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: 0 4px 2px; }
.ct-main { background: var(--surface); border-radius: 12px; padding: 10px 12px; box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; min-height: 44px; }
.ct-main > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-main.off > span { opacity: .45; }
.ct-role { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--accent); font-size: 13px; }
.ct-mn { font-weight: 700; }
.ct-mn em { font-style: normal; font-weight: 600; color: var(--muted); }
.ct-goes { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--ink-3); cursor: pointer; justify-self: end; }
.ct-goes input { width: 16px; height: 16px; accent-color: var(--accent); }
.ct-texts { margin-top: 20px; }
.ct-texts textarea.input { resize: vertical; min-height: 120px; }

.ct-fin-g { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.ct-fin-g > * { grid-column: 1 / -1; min-width: 0; }
.ct-fin-g > .dz-f > span { white-space: normal; }
.ct-amt { display: flex; gap: 6px; }
.ct-amt .input:first-child { flex: 1; min-width: 0; font: 700 18px var(--font); }
.ct-amt .input:first-child::placeholder { font-weight: 500; }
.ct-amt select.input { width: 104px; flex: none; padding-left: 14px; padding-right: 28px; }
.dz-f.bad .ct-amt select.input { border-color: var(--line); box-shadow: none; }
.ct-seg { display: flex; width: 100%; }
.ct-seg button { flex: 1; padding-left: 6px; padding-right: 6px; }
.ct-fin .dc-inline .dc-pp button { padding: 8px 7px; }
.ct-fin-n { text-align: center; margin-top: -4px; }

/* Выбор туриста из списка */
.modal.tpk-modal { max-width: 520px; }
.tpk-s { max-width: none; }
.tpk-list { display: grid; gap: 4px; max-height: min(56vh, 460px); overflow-y: auto; margin: 0 -6px; padding: 0 6px; }
.tpk-it { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0; cursor: pointer; padding: 10px; border-radius: 14px; background: transparent; color: var(--ink); font: inherit; }
.tpk-it:hover, .tpk-it:focus-visible { background: var(--bg); outline: none; }
.tpk-it .grow { min-width: 0; }
.tpk-it b { display: block; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpk-it small { display: block; font-size: 12.5px; color: var(--muted); }
.tpk-it > .ico { color: var(--ink-4); flex: none; }
.tpk-av { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font: 700 15px var(--display); text-transform: uppercase; }
.tpk-empty { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 30px 10px; color: var(--muted); font-size: 13.5px; }
.tpk-empty .ico { color: var(--ink-4); }
.tpk-empty b { color: var(--ink); font-size: 15px; }

/* Средние экраны: строка туриста в две линии — ФИО целиком, ниже роль, дата и паспорт */
@media (max-width: 1340px) {
  .ct-layout { grid-template-columns: minmax(0, 1fr) 330px; }
  .ct-tt .ct-th { display: none; }
  .ct-tr:not(.ct-main) { grid-template-columns: 140px minmax(0, 1fr) minmax(0, 1fr) 34px; padding: 8px; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
  .ct-tr:not(.ct-main) [data-t="name"] { grid-column: 1 / 4; grid-row: 1; }
  .ct-tr:not(.ct-main) .del { grid-column: 4; grid-row: 1; }
  .ct-tr:not(.ct-main) [data-t="type"] { grid-column: 1; grid-row: 2; }
  .ct-tr:not(.ct-main) [data-t="birth"] { grid-column: 2; grid-row: 2; }
  .ct-tr:not(.ct-main) [data-t="passport"] { grid-column: 3 / 5; grid-row: 2; }
  .ct-main { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 2px; }
  .ct-main .ct-mn { grid-column: 2; }
  .ct-main [data-show="birth"], .ct-main [data-show="passport"] { display: none; }
}
@media (max-width: 1180px) {
  .vz-layout { grid-template-columns: minmax(0, 1fr); }
  .vz-side { position: static; grid-template-columns: 1fr 1fr; align-items: start; }
  .ct-layout { grid-template-columns: minmax(0, 1fr) 320px; }
}
@media (max-width: 980px) {
  .ct-layout { grid-template-columns: minmax(0, 1fr); }
  .ct-side { position: static; }
}
@media (max-width: 860px) {
  .vz-hero { padding: 20px 16px; }
  .vz-hero-h .dz-ai-ic { display: none; }
  .vz-drop { min-height: 150px; padding: 24px 14px; }
  .vz-side { grid-template-columns: 1fr; }
  .vz-docs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .vz-doc { padding: 8px; border-radius: 16px; }
  .vz-doc-f { gap: 8px; padding: 0 2px 2px; }
  .dz-top-r .btn.ghost span, .vz-num { display: none; }
  .dz-top-r .btn { padding: 11px 13px; }
  .ct-top-b { display: none; }
  .ct-card, .ct-fin { padding: 18px 16px 20px; }
  .ct-tl { padding: 12px; }
  .ct-th { display: none; }
  .ct-tr:not(.ct-main) { grid-template-columns: 1fr 1fr 36px; padding: 10px; }
  .ct-tr:not(.ct-main) [data-t="name"] { grid-column: 1 / 3; grid-row: 1; }
  .ct-tr:not(.ct-main) .del { grid-column: 3; grid-row: 1; }
  .ct-tr:not(.ct-main) [data-t="type"] { grid-column: 1 / -1; grid-row: 2; }
  .ct-tr:not(.ct-main) [data-t="birth"] { grid-column: 1; grid-row: 3; }
  .ct-tr:not(.ct-main) [data-t="passport"] { grid-column: 2 / -1; grid-row: 3; }
  .ct-amt .input:first-child { font-size: 17px; }
}
@media (max-width: 520px) {
  .vz-docs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .vz-doc-f b { font-size: 13.5px; }
}

/* Договор: прибыль под полем «Нетто» */
.ct-profit { display: block; font-size: 12.5px; margin-top: 6px; font-weight: 600; }
.ct-profit.ok { color: var(--teal-ink); } .ct-profit.bad { color: var(--danger); }
.ct-profit b { font-weight: 800; }

/* =========================================================
   Зарплата сотрудников
   ========================================================= */
.sl-head .row { gap: 8px; }
.sl-mnav { display: inline-flex; align-items: center; gap: 2px; background: var(--surface); box-shadow: var(--shadow); border-radius: 999px; padding: 4px; }
.sl-mnav b { min-width: 132px; text-align: center; font-size: 14px; padding: 0 6px; white-space: nowrap; }
.sl-mbtn { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-2); text-decoration: none !important; }
.sl-mbtn:hover { background: var(--bg); color: var(--accent); }
.sl-mbtn.off { opacity: .3; pointer-events: none; }
.sl-closed { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 16px; background: var(--teal-soft); color: var(--ink-2); font-size: 13.5px; margin-bottom: 14px; }
.sl-closed > .ico { color: var(--teal-ink); flex: none; }
.sl-kpi { margin-bottom: 12px; }
.sl-rule { width: 100%; display: flex; align-items: center; gap: 8px 22px; flex-wrap: wrap; text-align: left; border: 0; cursor: pointer; padding: 11px 16px; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-3); font: 600 13px var(--font); margin-bottom: 14px; }
.sl-rule > span { display: inline-flex; align-items: center; gap: 7px; }
.sl-rule b { color: var(--ink); }
.sl-rule .ico { color: var(--accent); }
.sl-rule em { margin-left: auto; font-style: normal; color: var(--accent); font-weight: 800; }
.sl-rule:hover { box-shadow: inset 0 0 0 1.5px var(--accent-soft-2); }
.sl-warn { display: flex; gap: 9px; align-items: flex-start; padding: 11px 14px; border-radius: 14px; background: #FFF4E0; color: #8A4B00; font-size: 13px; margin-bottom: 12px; }
html[data-theme="dark"] .sl-warn { background: rgba(245,165,36,.14); color: #F5C46B; }
.sl-warn .ico { flex: none; margin-top: 2px; }
.sl-warn a { font-weight: 800; }
#slList { display: grid; gap: 10px; }
.sl-row { position: relative; display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 2.6fr) auto 18px; gap: 18px; align-items: center; background: var(--surface); border-radius: 18px; box-shadow: var(--shadow); padding: 16px 18px; cursor: pointer; outline: none; transition: box-shadow .15s; }
.sl-row:hover, .sl-row:focus-visible { box-shadow: 0 0 0 2px var(--accent-soft-2), var(--shadow); }
.sl-row.off { opacity: .75; }
.sl-who { display: flex; gap: 12px; align-items: center; min-width: 0; }
.sl-who .grow { min-width: 0; }
.sl-who b { font-size: 15.5px; }
.sl-who small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.sl-norule { color: #A15C00; font-weight: 700; }
.sl-ava { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font: 700 15px var(--display); }
.sl-ava.lg { width: 54px; height: 54px; border-radius: 17px; font-size: 18px; }
.sl-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.3fr); gap: 12px; align-items: end; }
.sl-nums > div > span { display: block; font-size: 11.5px; color: var(--muted); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-nums > div > b { display: block; font: 700 15px/1.3 var(--font); white-space: nowrap; margin-top: 2px; }
.sl-nums > div > small { display: block; font-size: 11.5px; color: var(--muted); }
.sl-nums { align-items: start; }
.sl-who .dz-st { vertical-align: 2px; margin-left: 4px; }
.sl-nums b.ok { color: var(--teal-ink); } .sl-nums b.due { color: var(--accent); } .sl-nums b.neg { color: var(--danger); }
.sl-due b { font: 700 18px/1.25 var(--display) !important; }
.sl-due span i { font-style: normal; font-size: 10.5px; padding: 1px 7px; vertical-align: 1px; margin-left: 4px; }
.sl-due .pay-bar.sm { width: 100%; height: 5px; margin-top: 6px; }
.sl-empty-n { display: block; }
.sl-acts { display: flex; gap: 6px; }
.sl-go { color: var(--ink-4); }

.sl-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.sl-col { display: grid; gap: 16px; min-width: 0; }
.sl-side { position: sticky; top: 84px; display: grid; gap: 14px; }
.sl-sheet { padding: 0; overflow: hidden; }
.sl-sheet-h { display: flex; gap: 14px; align-items: center; padding: 20px 22px; background: linear-gradient(135deg, var(--accent-soft), var(--surface) 70%); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.sl-sheet-h .grow { min-width: 140px; }
.sl-sheet-h b { font: 600 18px var(--display); }
.sl-sheet-h small { display: block; color: var(--muted); font-size: 13px; }
.sl-big { text-align: right; }
.sl-big span { display: block; font-size: 12px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.sl-big b { font: 700 28px/1.15 var(--display) !important; }
.sl-big b.due { color: var(--accent); } .sl-big b.ok { color: var(--teal-ink); } .sl-big b.neg { color: var(--danger); }
.sl-lines { padding: 8px 22px 6px; }
.sl-ln { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 11px 0; border-bottom: 1px dashed var(--line); font-size: 14.5px; }
.sl-ln span small { display: block; font-size: 12px; color: var(--muted); }
.sl-ln b { white-space: nowrap; font-weight: 700; }
.sl-ln.plus b { color: var(--teal-ink); } .sl-ln.minus b { color: var(--danger); }
.sl-ln.sum { border-bottom: 1.5px solid var(--ink); font-weight: 800; }
.sl-ln.sum b { font-weight: 800; }
.sl-ln.total { border-bottom: 0; padding: 14px 0 10px; }
.sl-ln.total span { font-weight: 800; font-size: 15px; }
.sl-ln.total b { font: 700 20px var(--display); color: var(--accent); }
.sl-words { padding: 0 22px 18px; margin-top: -4px; font-size: 13px; color: var(--ink-3); font-style: italic; }
.sl-card { padding: 20px 22px; }
.sl-addbar { gap: 6px; }
.sl-tw { overflow-x: auto; margin: 0 -6px; }
.sl-tb { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.sl-tb th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 800; padding: 8px 6px; border-bottom: 1px solid var(--line); }
.sl-tb td { padding: 10px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.sl-tb td small { display: block; color: var(--muted); font-size: 12px; }
.sl-tb td a { color: var(--ink); }
.sl-tb .r { text-align: right; } .sl-tb .nw { white-space: nowrap; }
.sl-tb tfoot td { border-bottom: 0; font-weight: 800; padding-top: 12px; }
.sl-tb tr.warn td { background: rgba(245,165,36,.07); }
.sl-fix { color: #A15C00 !important; font-weight: 800; font-size: 12.5px; }
html[data-theme="dark"] .sl-fix { color: #F5C46B !important; }
.sl-ents { display: grid; gap: 8px; }
.sl-ent { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); }
.sl-ent .grow { min-width: 0; }
.sl-ent b { font-size: 14px; }
.sl-ent small { display: block; color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }
.sl-ent-ic { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--bg); color: var(--ink-3); }
.k-bonus .sl-ent-ic { background: var(--teal-soft); color: var(--teal-ink); }
.k-fine .sl-ent-ic { background: var(--danger-soft); color: var(--danger); }
.k-advance .sl-ent-ic, .k-payout .sl-ent-ic { background: var(--accent-soft); color: var(--accent); }
.sl-ent-a { white-space: nowrap; font-size: 15px !important; }
.sl-ent-a.bonus { color: var(--teal-ink); } .sl-ent-a.fine { color: var(--danger); }
.sl-rulec { padding: 18px; }
.sl-rulec h4, .sl-side h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 8px; }
.sl-rl { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.sl-rl:first-of-type { border-top: 0; }
.sl-rl span { color: var(--muted); } .sl-rl b { text-align: right; }
.sl-rulec .btn { margin-top: 10px; }
.sl-tip { display: flex; gap: 10px; padding: 14px 16px; font-size: 13px; color: var(--ink-2); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.sl-tip > .ico { flex: none; color: var(--accent); margin-top: 2px; }

/* окна зарплаты */
.modal.sl-modal { max-width: 560px; }
.sl-f { display: grid; gap: 18px; }
.sl-cur { flex: none; }
.sl-cur button { padding-left: 12px; padding-right: 12px; }
.sl-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sl-modes button { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; text-align: left; border: 0; cursor: pointer; padding: 12px 13px; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line); color: var(--ink); font: inherit; }
.sl-modes button .ico { grid-row: span 2; color: var(--ink-4); }
.sl-modes button b { font-size: 14px; } .sl-modes button small { font-size: 12px; color: var(--muted); }
.sl-modes button.on { box-shadow: inset 0 0 0 2px var(--accent); background: var(--sel-bg); }
.sl-modes button.on .ico { color: var(--accent); }
.sl-pct { display: flex; align-items: center; gap: 8px; }
.sl-pct .input { flex: 1; font: 700 18px var(--font); }
.sl-pct em { font-style: normal; font-weight: 800; color: var(--ink-3); min-width: 30px; }
.sl-quick { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.sl-quick button { border: 0; cursor: pointer; padding: 7px 11px; border-radius: 10px; background: var(--bg); color: var(--ink-2); font: 700 12.5px var(--font); }
.sl-quick button:hover { background: var(--accent-soft); color: var(--accent); }
.sl-ex { display: grid; gap: 6px; padding: 12px 14px; border-radius: 14px; background: var(--teal-soft); font-size: 13px; color: var(--ink-2); }
.sl-ex > div { display: flex; gap: 8px; align-items: flex-start; }
.sl-ex .ico { flex: none; color: var(--teal-ink); margin-top: 2px; }
.sl-ex b { color: var(--ink); }
.sl-when { display: grid; gap: 8px; }
.sl-when label { display: flex; gap: 11px; align-items: flex-start; padding: 12px 13px; border-radius: 14px; box-shadow: inset 0 0 0 1.5px var(--line); cursor: pointer; }
.sl-when label.on { box-shadow: inset 0 0 0 2px var(--accent); background: var(--sel-bg); }
.sl-when input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); flex: none; }
.sl-when b { display: block; font-size: 14px; } .sl-when small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.sl-rates { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sl-rates label { display: flex; align-items: center; gap: 6px; flex: 1 1 180px; }
.sl-rates em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--ink-3); white-space: nowrap; }
.sl-rates .input { min-width: 0; }
.sl-kinds { width: 100%; margin-bottom: 6px; }
.sl-kinds button { flex: 1; }
.sl-khint { font-size: 12.5px; color: var(--muted); margin: 0 0 12px; }

@media (max-width: 1180px) {
  .sl-row { grid-template-columns: minmax(0, 1fr) auto 18px; }
  .sl-nums { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sl-due { grid-column: span 3; }
  .sl-layout { grid-template-columns: minmax(0, 1fr); }
  .sl-side { position: static; grid-template-columns: 1fr 1fr; align-items: start; }
}
@media (max-width: 860px) {
  .sl-head .row { width: 100%; }
  .sl-mnav { flex: 1 1 100%; justify-content: space-between; }
  .sl-row { padding: 14px; gap: 12px; }
  .sl-go { display: none; }
  .sl-row { grid-template-columns: minmax(0, 1fr) auto; }
  .sl-nums { grid-template-columns: 1fr 1fr; }
  .sl-due { grid-column: span 2; }
  .sl-side { grid-template-columns: 1fr; }
  .sl-sheet-h { padding: 16px; }
  .sl-big { text-align: left; width: 100%; }
  .sl-lines { padding: 6px 16px; } .sl-words { padding: 0 16px 16px; }
  .sl-card { padding: 16px; }
  .sl-modes { grid-template-columns: 1fr; }
  .sl-rule em { margin-left: 0; }
}
.sl-emodal .pm-two { align-items: end; }

.sl-col, .ct-col { grid-template-columns: minmax(0, 1fr); }
.sl-card .ct-h { flex-wrap: wrap; }
@media (max-width: 860px) {
  .sl-top { flex-wrap: wrap !important; }
  .sl-top .dz-title { flex: 1 1 0; }
  .sl-top .dz-top-r { order: 3; width: 100%; }
  .sl-top .sl-mnav { flex: 1; }
  .sl-top .dz-top-r .btn span { display: inline; }
  .sl-tb { min-width: 560px; }
  .sl-addbar { width: 100%; display: grid !important; grid-template-columns: 1fr 1fr; }
  .sl-addbar .btn { justify-content: center; }
  .sl-ln { font-size: 14px; }
  .sl-ent { flex-wrap: wrap; }
  .sl-ent .grow { flex: 1 1 150px; }
}

/* Пробный доступ: сколько бесплатных ваучеров/договоров осталось */
.trial-chip { display: inline-flex; align-items: center; gap: 7px; margin: -4px 0 14px; padding: 7px 13px; border-radius: 999px; background: var(--teal-soft); color: var(--teal-ink); font-size: 13px; font-weight: 700; }
.trial-chip.off { background: #FFF4E0; color: #8A4B00; }
html[data-theme="dark"] .trial-chip.off { background: rgba(245,165,36,.14); color: #F5C46B; }

/* Ссылка подборки: создаётся и сохраняется сама */
.col-st { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 12.5px; color: var(--ink-3); min-height: 18px; }
.col-st .ico { color: var(--teal-ink); flex: none; }
.col-st .spinner { width: 12px; height: 12px; }
.col-st.err { color: var(--danger); } .col-st.err .ico { color: var(--danger); }
.col-views { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--surface); font-size: 12px; font-weight: 800; color: var(--teal-ink); vertical-align: 1px; }
.share-done.col-mk { display: flex; gap: 12px; align-items: center; }
.share-done.col-mk > .spinner { color: var(--teal-ink); width: 22px; height: 22px; flex: none; }
.ct-need .spinner { width: 13px; height: 13px; vertical-align: -2px; }
.hx-badge.quiet { background: var(--bg); color: var(--ink-2); }

/* Раздел не входит в тариф */
.snav a.is-locked { opacity: .72; }
.nav-lock { margin-left: auto; display: inline-flex; color: #F5C46B; }
.more-nav .nav-lock { margin-left: auto; margin-right: 6px; color: #A15C00; }
.mod-lock { max-width: 560px; margin: 48px auto; text-align: center; background: var(--surface); border-radius: 24px; box-shadow: var(--shadow); padding: 36px 28px; }
.mod-lock-ic { position: relative; display: inline-grid; place-items: center; width: 72px; height: 72px; border-radius: 22px; background: var(--accent-soft); color: var(--accent); }
.mod-lock-ic i { position: absolute; right: -6px; bottom: -6px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #FFF4E0; color: #A15C00; box-shadow: 0 0 0 3px var(--surface); font-style: normal; }
.mod-lock h2 { margin: 16px 0 8px; }
.mod-lock-about { color: var(--ink-2); margin: 0 auto 14px; max-width: 440px; }
.mod-lock-why { margin: 0 auto 20px; padding: 12px 14px; border-radius: 14px; background: #FFF4E0; color: #6B3A00; font-size: 14px; max-width: 460px; }
html[data-theme="dark"] .mod-lock-why { background: rgba(245,165,36,.14); color: #F5C46B; }
@media (max-width: 560px) { .mod-lock { margin: 20px 0; padding: 28px 18px; } }

/* Установка как приложение (PWA) */
.snav-inst .ti { display: inline-flex; color: #FF8A3D; }
.app.sb-mini .snav-inst { width: 46px; justify-content: center; padding: 0; margin: 0 auto; }
.inst-bar { display: none; }
@media (max-width: 860px) {
  .inst-bar:not([hidden]) { display: flex; align-items: center; gap: 10px; margin: 10px 12px 0; padding: 10px 8px 10px 10px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
  .inst-bar .inst-ic img { display: block; width: 36px; height: 36px; border-radius: 10px; }
  .inst-bar .grow { min-width: 0; }
  .inst-bar b { display: block; font-size: 14px; }
  .inst-bar small { display: block; font-size: 12px; color: var(--muted); }
  .inst-bar .btn { flex: none; }
  .inst-x { flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-3); cursor: pointer; font-size: 14px; }
}
.ios-steps { margin: 0; padding-left: 22px; display: grid; gap: 10px; font-size: 15px; }
.ios-steps .ios-share { vertical-align: -3px; color: #2563EB; }

/* Новый договор через AI */
.ct-ai-money { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 12px; margin-top: 18px; text-align: left; }
.ct-ai-money .field span em { font-style: normal; font-weight: 600; color: var(--muted); }
.ct-ai-money .ct-amt { display: flex; gap: 6px; }
.ct-ai-money .ct-amt .input:first-child { flex: 1; min-width: 0; }
.ct-ai-money .ct-amt select.input { width: auto; flex: none; }
.vz-hero.busy .ct-ai-money { display: none; }
.ct-ainote { display: flex; gap: 12px; align-items: flex-start; padding: 13px 16px; margin-bottom: 14px; border-radius: 16px; background: var(--accent-soft); color: var(--ink); }
.ct-ainote > .ico { color: var(--accent); flex: none; margin-top: 2px; }
.ct-ainote b { display: block; }
.ct-ainote span { display: block; font-size: 13.5px; color: var(--ink-2); }
@media (max-width: 640px) { .ct-ai-money { grid-template-columns: minmax(0, 1fr); } }


/* ---------- Подборка: наценка или скидка ---------- */
.ws-bar .mk-ctl { flex-wrap: wrap; }
.ws-bar .mk-dir .seg button { font-weight: 800; letter-spacing: .02em; }
.mk-minus { font-weight: 800; font-size: 15px; line-height: 1; }
.ws-bar .mk-ctl.is-disc .mk-dir .seg button.on { background: #0B7A6C; color: #fff; }
.ws-bar .mk-ctl:not(.is-disc) .mk-dir .seg button.on { background: var(--accent); color: #fff; }
.ws-bar .mk-ctl .mk-dir .seg button.on .ico { color: #fff; }
.ws-bar .mk-ctl.is-disc #mkVal { border-color: var(--teal); color: var(--teal-ink); }
.ws-bar .mk-ctl.is-disc #mkVal:focus { box-shadow: 0 0 0 4px rgba(14,159,142,.15); }

/* =========================================================
   Озвучка видео своим голосом (voice.js)
   ========================================================= */
/* Карточка в панели «Видео» */
.mv-voice {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 0; border-radius: 14px; text-align: left;
  background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--line); color: var(--ink); cursor: pointer; font: inherit;
  transition: box-shadow .15s, background .15s, transform .12s;
}
button.mv-voice:hover { box-shadow: inset 0 0 0 1.5px var(--accent); background: var(--sel-bg); transform: translateY(-1px); }
button.mv-voice:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mv-voice-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.mv-voice-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.mv-voice-t b { font-size: 14px; font-weight: 800; }
.mv-voice-t small { font-size: 12.5px; color: var(--ink-3); line-height: 1.35; }
.mv-voice em { flex: none; font-style: normal; font-size: 11px; font-weight: 800; color: #fff; background: var(--accent); border-radius: 999px; padding: 3px 8px; }
.mv-voice.on { cursor: default; background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent-soft-2); animation: pop .25s ease; }
.mv-voice.on .mv-voice-ic { background: var(--accent); color: #fff; }
.mv-voice .btn { flex: none; }
.mv-voice-x { flex: none; }
@container (max-width: 400px) { .mv-voice.on { flex-wrap: wrap; } .mv-voice.on .mv-voice-t { flex-basis: calc(100% - 100px); } }

/* Окно записи */
.modal.vrm { max-width: 900px; }
.vr { --vr-wave: var(--accent); --vr-wave-2: var(--line-2); display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); gap: 22px; align-items: start; }
.vr-stage { position: sticky; top: 0; display: grid; gap: 8px; }
.vr-pv { position: relative; border-radius: 16px; overflow: hidden; background: #0B1F3A; display: grid; place-items: center; }
.vr-pv canvas { display: block; width: 100%; height: auto; max-height: 52vh; object-fit: contain; }
.vr-cd {
  position: absolute; inset: 0; display: grid; place-items: center; background: rgba(11,31,58,.55);
  color: #fff; font: 800 96px/1 var(--display); text-shadow: 0 6px 30px rgba(0,0,0,.4);
}
.vr-cd.pop { animation: vrcd .8s ease; }
@keyframes vrcd { from { transform: scale(1.35); opacity: 0; } 30% { opacity: 1; } to { transform: scale(1); } }
.vr-live {
  position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px;
  background: rgba(217,45,32,.92); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .02em;
}
.vr-live i { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: vrblink 1s infinite; }
@keyframes vrblink { 50% { opacity: .25; } }
.vr-bar { position: relative; height: 8px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.vr-bar > i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--accent); border-radius: 999px; z-index: 2; transition: width .1s linear; }
.vr-bar > i.over { background: var(--gold); }
.vr-bar > b { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--surface); z-index: 3; opacity: .9; }
.vr-bar > em { position: absolute; top: 2px; bottom: 2px; border-radius: 999px; background: var(--accent-soft-2); z-index: 1; }
.vr-time { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.vr-side { display: grid; gap: 12px; min-width: 0; }
.vr-lang { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--bg-2); justify-self: start; }
.vr-lang button, .vr-seg button {
  border: 0; background: none; padding: 8px 14px; border-radius: 9px; font: 700 13.5px var(--font); color: var(--ink-2); cursor: pointer;
}
.vr-lang button.on, .vr-seg button.on { background: var(--seg-on); color: var(--ink); box-shadow: 0 1px 3px rgba(11,31,58,.12); }
.vr-lang button:focus-visible, .vr-seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.vr-txt-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: -6px; }
.vr-txt-h b { font-size: 13.5px; font-weight: 800; }
.vr-txt-h .lnk { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.vr-txt { font-size: 18px; line-height: 1.55; font-weight: 600; resize: vertical; min-height: 150px; }
.vr.recording .vr-txt { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(255,90,54,.12); background: var(--sel-bg); }
.vr-est { font-size: 12.5px; color: var(--ink-3); margin-top: -6px; }
.vr-est .warm { color: var(--accent-ink); font-weight: 700; }

.vr-rec { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--line); }
.vr-btn {
  position: relative; flex: none; width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
  background: #fff; box-shadow: 0 0 0 4px var(--danger-soft), 0 4px 14px rgba(217,45,32,.25); transition: transform .12s, box-shadow .2s;
}
html[data-theme="dark"] .vr-btn { background: #1B2D4D; }
.vr-btn span { width: 24px; height: 24px; border-radius: 50%; background: var(--danger); transition: border-radius .2s, width .2s, height .2s; }
.vr-btn:hover:not(:disabled) { transform: scale(1.05); }
.vr-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.vr-btn:disabled { cursor: default; opacity: .55; }
.vr-btn.rec { animation: vrpulse 1.4s infinite; }
.vr-btn.rec span { width: 20px; height: 20px; border-radius: 5px; }
.vr-btn.busy span { width: 24px; height: 24px; border-radius: 50%; background: transparent; border: 3px solid var(--danger); border-right-color: transparent; animation: libspin .8s linear infinite; }
@keyframes vrpulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(217,45,32,.25); } 50% { box-shadow: 0 0 0 12px rgba(217,45,32,.08); } }
.vr-rec[data-s="countdown"] .vr-btn span { border-radius: 5px; background: var(--ink-3); width: 18px; height: 18px; }
.vr-rec-t { flex: 1; min-width: 0; display: grid; gap: 3px; }
.vr-rec-t b { font-size: 14.5px; font-weight: 800; }
.vr-rec-t small { font-size: 12.5px; color: var(--ink-3); line-height: 1.35; }
.vr-meter { height: 6px; border-radius: 999px; background: var(--bg-2); overflow: hidden; margin-top: 4px; }
.vr-meter i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--teal), #7BD88F 70%, var(--gold)); transition: width .06s linear; }
.vr-meter i.hot { background: var(--danger); }
.vr-rec:not([data-s="countdown"]):not([data-s="rec"]) .vr-meter { display: none; }

.vr-res { display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent-soft-2); animation: pop .25s ease; }
.vr-wave { height: 64px; border-radius: 10px; background: var(--surface); overflow: hidden; }
.vr-wave canvas { display: block; width: 100%; height: 64px; }
.vr-res-i { display: grid; gap: 2px; font-size: 12.5px; color: var(--ink-2); line-height: 1.4; }
.vr-res-i b { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; color: var(--ink); }
.vr-res-i b .ico { color: var(--teal); }
.vr-res-b { display: flex; gap: 8px; flex-wrap: wrap; }
.vr-res-b .btn { gap: 6px; }
.vr-duck { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.vr-seg { display: inline-flex; gap: 3px; padding: 3px; border-radius: 11px; background: var(--surface); }
.vr-seg button { padding: 6px 12px; font-size: 12.5px; }
.vr-warn { display: grid; gap: 6px; }
.vr-warn p { margin: 0; padding: 8px 10px; border-radius: 10px; background: rgba(245,165,36,.16); color: var(--ink); font-size: 12.5px; line-height: 1.4; }

.vr-tips { font-size: 13px; color: var(--ink-2); }
.vr-tips summary { cursor: pointer; font-weight: 700; color: var(--ink); }
.vr-tips ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; line-height: 1.45; }
.vr-file {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; cursor: pointer;
  border: 1.5px dashed var(--line-2); color: var(--ink-2); transition: border-color .15s, background .15s;
}
.vr-file:hover { border-color: var(--accent); background: var(--sel-bg); }
.vr-file:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.vr-file span { display: grid; gap: 1px; }
.vr-file b { font-size: 13.5px; color: var(--ink); }
.vr-file small { font-size: 12px; color: var(--ink-3); }
.vr-file.off { opacity: .5; pointer-events: none; }

@media (max-width: 720px) {
  .vr { grid-template-columns: 1fr; gap: 14px; }
  .vr-stage { position: static; grid-template-columns: 110px 1fr; align-items: center; gap: 6px 12px; }
  .vr-pv { grid-row: span 2; }
  .vr-pv canvas { max-height: 200px; }
  .vr-cd { font-size: 54px; }
  .vr-txt { font-size: 17px; min-height: 130px; }
}

/* ИИ-монтаж под голос */
#mvVoiceBox { display: grid; gap: 8px; }
#mvVoiceBox:empty { display: none; }
.mv-mont {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px;
  background: var(--teal-soft); color: var(--ink); animation: pop .25s ease;
}
.mv-mont > .ico { flex: none; color: var(--teal-ink); }
.mv-mont-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.mv-mont-t b { font-size: 13.5px; font-weight: 800; }
.mv-mont-t small { font-size: 12.5px; color: var(--ink-2); line-height: 1.35; }
.mv-mont-a { flex: none; display: flex; gap: 10px; }
.mv-mont-a .lnk { font-size: 13px; padding: 2px 0; }
.mv-mont-a .lnk:disabled { opacity: .6; cursor: progress; }
.mv-mont-btn small { white-space: normal; line-height: 1.35; }
@container (max-width: 400px) { .mv-mont { flex-wrap: wrap; } .mv-mont-a { width: 100%; justify-content: flex-end; } }

/* Озвучка: четыре варианта текста */
.vr-txt-h span { font-size: 12.5px; color: var(--ink-3); }
.vr-vars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.vr-var {
  display: grid; gap: 4px; padding: 10px 12px; border: 0; border-radius: 12px; text-align: left; cursor: pointer; font: inherit; color: var(--ink);
  background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--line); transition: box-shadow .15s, background .15s, transform .12s;
}
.vr-var:hover { box-shadow: inset 0 0 0 1.5px var(--line-2); transform: translateY(-1px); }
.vr-var:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vr-var.on { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.vr-var-h { display: flex; align-items: center; gap: 6px; min-width: 0; }
.vr-var-h i { font-style: normal; font-size: 15px; flex: none; }
.vr-var-h b { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vr-var-h em { flex: none; font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--ink-3); }
.vr-var.on .vr-var-h em { color: var(--accent-ink); }
.vr-var small {
  font-size: 12px; color: var(--ink-3); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vr.recording .vr-vars, .vr.recording .vr-txt-h span { display: none; }
@media (max-width: 420px) { .vr-vars { grid-template-columns: 1fr; } }

/* Окно озвучки: скрытые элементы действительно скрыты (их display в стилях иначе перебивает атрибут hidden) */
.vr [hidden], .vrm [hidden] { display: none !important; }
.vrm .mf .vr-okai { gap: 8px; }
@media (max-width: 560px) { .vrm .mf .btn { flex: 1 1 100%; } }

/* =========================================================
   Экскурсионный тур: шапка, выезды, программа, редактор, панели
   ========================================================= */
.xbadge { display: inline-flex; align-items: center; gap: 5px; margin-left: 10px; vertical-align: middle; font: 800 11px var(--font); letter-spacing: .04em; text-transform: uppercase; color: #FFD79A; background: rgba(255,170,80,.16); border-radius: 999px; padding: 4px 10px; }
.ws-meta .xroute { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ws-meta .xroute i { font-style: normal; opacity: .5; margin: 0 4px; }

/* выезды: дата, возвращение, места, цена */
.xrow .tr-name { font-size: 16px; }
.xrow .xwd { font: 700 12px var(--font); color: var(--muted); margin-left: 4px; text-transform: lowercase; }
.xseat { display: inline-block; font-size: 12.5px; font-weight: 800; color: var(--teal-ink); background: var(--teal-soft); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.xseat.few { color: var(--accent-ink); background: var(--accent-soft); }
.xrow .tr-main, .xrow-head { grid-template-columns: 24px minmax(0, 1fr) auto !important; }
.xrow .tr-tags .xseat, .xrow .tr-tags .tag { font-size: 11.5px; padding: 2px 8px; }
.xrow .tag.xtier { background: var(--teal-soft); color: var(--teal-ink); font-weight: 800; }
@media (max-width: 680px) { .xrow-head { display: none; } }

/* карточка «Программа тура» */
.xp { background: var(--surface); border-radius: 18px; box-shadow: var(--shadow); margin-bottom: 12px; overflow: hidden; }
.xp-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; }
.xp-tg { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; border: 0; background: none; padding: 4px; text-align: left; cursor: pointer; color: var(--ink); font: inherit; border-radius: 12px; }
.xp-tg:hover { background: var(--surface-2); }
.xp-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, #13284A, #0B1F3A); color: #E8C47E; }
.xp-t { flex: 1; min-width: 0; display: grid; gap: 1px; }
.xp-t b { font-size: 15px; font-weight: 800; }
.xp-t small { font-size: 13px; color: var(--muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp-chev { color: var(--ink-3); font-size: 13px; }
.xp.empty .xp-ic { background: var(--accent-soft); color: var(--accent); }
.xp-body { padding: 4px 18px 18px; border-top: 1px solid var(--line); }
.xp-route { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 14px 0 6px; }
.xp-route span { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 13.5px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); border-radius: 999px; padding: 4px 12px 4px 4px; }
.xp-route span b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: #E8C47E; font-size: 11.5px; }
.xp-route i { font-style: normal; color: var(--ink-4); }
.xp-days { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 2px; }
.xp-days li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.xp-days li:last-child { border-bottom: 0; }
.xp-n { font: 800 22px/1 "Playfair Display", Georgia, serif; color: var(--teal-ink); padding-top: 2px; }
.xp-days b { font-size: 14.5px; }
.xp-city { margin-left: 8px; font-size: 12px; font-weight: 700; color: var(--muted); }
.xp-sights { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.xp-sights span { font-size: 12px; font-weight: 700; color: var(--teal-ink); background: var(--teal-soft); border-radius: 999px; padding: 2px 9px; }
.xp-items { margin-top: 5px; font-size: 13px; color: var(--ink-3); line-height: 1.45; }
.xp-paid { margin-top: 4px; font-size: 12.5px; color: var(--accent-ink); font-weight: 600; }
.xp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin-top: 12px; }
.xp-box { background: var(--surface-2); border-radius: 14px; padding: 12px 14px; box-shadow: inset 0 0 0 1px var(--line); }
.xp-box b { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.xp-box ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.xp-fee { position: relative; display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--accent-soft); cursor: pointer; }
.xp-fee input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.xp-fee .sw { flex: none; position: relative; width: 34px; height: 20px; margin-top: 1px; border-radius: 20px; background: var(--line-2); transition: background .15s; }
.xp-fee .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.xp-fee input:checked + .sw { background: var(--teal); }
.xp-fee input:checked + .sw::after { transform: translateX(14px); }
.xp-fee input:focus-visible + .sw { outline: 2px solid var(--accent); outline-offset: 2px; }
.xp-fee b { display: block; font-size: 13.5px; }
.xp-fee small { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 2px; line-height: 1.4; }

/* редактор программы */
.modal.xe-modal { max-width: 940px; }
.xe { display: grid; gap: 12px; }
.xe .field em { font-style: normal; font-weight: 600; color: var(--muted); font-size: 12px; margin-left: 4px; }
.xe-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.xe-g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.xe-sec { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.xe-sec b { font-size: 15px; }
.xe-day { background: var(--surface-2); border-radius: 14px; padding: 12px; box-shadow: inset 0 0 0 1px var(--line); }
.xe-day + .xe-day { margin-top: 10px; }
.xe-dh { display: grid; grid-template-columns: 36px minmax(0, 1fr) 180px 34px; gap: 8px; align-items: center; }
.xe-dg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.xe-dg label { display: grid; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.xe-dg textarea { font-size: 13px; resize: vertical; }
.xe-money { display: grid; grid-template-columns: 1fr 74px; gap: 6px; }
@media (max-width: 720px) {
  .xe-g2, .xe-g3, .xe-dg { grid-template-columns: 1fr; }
  .xe-dh { grid-template-columns: 32px minmax(0, 1fr) 34px; }
  .xe-dh .xe-city { grid-column: 2; }
}

/* подсказка вверху панелей */
.xtip { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; background: linear-gradient(135deg, rgba(19,40,74,.06), rgba(217,180,108,.14)); color: var(--ink-2); font-size: 13px; line-height: 1.4; }
.xtip .ico { flex: none; color: #B58A3C; margin-top: 1px; }
.xtip b { display: block; color: var(--ink); font-size: 13.5px; }
.mv-voice.xcity { cursor: pointer; }
.mv-voice.xcity:hover { box-shadow: inset 0 0 0 1.5px var(--accent); background: var(--sel-bg); }
.mv-voice.xcity.on { cursor: pointer; }
.mv-voice.xcity.busy { opacity: .7; pointer-events: none; }
.ws-head, .ws-hero { min-width: 0; }
@media (max-width: 680px) {
  .xbadge { display: none; }
  .ws-meta .xroute { white-space: normal; height: auto; min-height: 26px; padding: 4px 10px; flex-wrap: wrap; row-gap: 2px; }
}

/* ===== Язык интерфейса: переключатель RU / UZ ===== */
.lang-sw { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(11,31,58,.07); flex: none; }
.lang-sw button {
  min-width: 34px; height: 26px; padding: 0 9px; border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  font: 800 12px/26px var(--font); letter-spacing: .04em; color: var(--muted); transition: background .15s, color .15s;
}
.lang-sw button:hover { color: var(--ink); }
.lang-sw button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(11,31,58,.18); }
.lang-sw button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* меню кабинета (тёмное) */
.snav-lang { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 6px 0 12px; color: #B8C3D6; font: 700 14px var(--font); }
.snav-lang .t { flex: 1; }
.snav-lang .lang-sw, .mtop-lang.lang-sw { background: rgba(255,255,255,.1); }
.snav-lang .lang-sw button, .mtop-lang.lang-sw button { color: #B8C3D6; }
.snav-lang .lang-sw button:hover, .mtop-lang.lang-sw button:hover { color: #fff; }
.snav-lang .lang-sw button.on, .mtop-lang.lang-sw button.on { background: #fff; color: #0B1F3A; }
.app.sb-mini .snav-lang { padding: 0; justify-content: center; }
.app.sb-mini .snav-lang .ti { display: none; }
.app.sb-mini .snav-lang .lang-sw button { min-width: 26px; padding: 0 5px; font-size: 11px; }
.mtop-lang.lang-sw button { min-width: 30px; height: 28px; line-height: 28px; padding: 0 7px; }
/* страницы входа */
.auth .card { position: relative; }
.auth-lang { position: absolute; top: -46px; right: 0; }
html[data-theme="dark"] .lang-sw:not(.mtop-lang) { background: rgba(255,255,255,.08); }
html[data-theme="dark"] .lang-sw button.on { background: #E8EEF8; color: #0B1F3A; }
/* русские подписи в CSS → узбекские */
html[lang="uz"] .dz-drop.has .dz-drop-t b::after { content: " — yana qo‘shish"; }