:root{
  --bg: #f3f1ea;
  --surface: #ffffff;
  --surface-2: #f8f1dc;
  --text: #1b1b1b;
  --muted: #6b6b6b;

  --dark: #2d281f;
  --olive: #6a5a2f;
  --gold: #e2b73e;
  --gold-2: #f4dda0;
  --border: #cbbf98;

  --shadow: 0 14px 40px rgba(45,40,31,.10);
  --shadow-2: 0 10px 26px rgba(45,40,31,.14);

  --r: 18px;
  --r2: 26px;

  --page-pad: clamp(14px, 3vw, 28px);
  --container-max: 100%;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}

html{
  background:
    radial-gradient(1100px 600px at 18% 0%, rgba(226,183,62,.18), transparent 60%),
    radial-gradient(1100px 600px at 82% 10%, rgba(45,40,31,.08), transparent 55%),
    var(--bg);
  background-attachment: fixed;
  overflow-y: scroll;
}

body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  position:relative;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue";
  color:var(--text);
  background:transparent;
}

main{ flex:1; }
a{color:inherit;text-decoration:none}

.hidden{display:none !important;}

.container{
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
}
main.container{ padding-bottom: 32px; }

.topbar{
  position: sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(243,241,234,.78);
  border-bottom: 1px solid rgba(203,191,152,.6);
}
.topbar__inner{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  padding-top: 14px;
  padding-bottom: 14px;
  gap:14px;
}
.topbar__inner > .brand{ justify-self:start; }
.topbar__inner > .nav{ justify-self:center; }
.topbar__inner > .actions{ justify-self:end; }
@media (max-width: 980px){
  .topbar__inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:10px;
  }
  .topbar__inner > .brand, .topbar__inner > .nav, .topbar__inner > .actions{ justify-self:auto; }
}

.brand{ display:flex; align-items:center; gap:10px; }
.brand__logo{
  width:38px;height:38px;border-radius:12px;
  background: linear-gradient(135deg, rgba(226,183,62,.92), rgba(45,40,31,.92));
  box-shadow: var(--shadow-2);
  border: 2px solid rgba(255,255,255,.7);
}
.brand__text b{display:block; font-size:14px; letter-spacing:.2px}
.brand__text span{display:block; font-size:12px; color:var(--muted)}

.nav{
  display:flex;
  flex-wrap:nowrap;
  gap:10px;
  justify-content:center;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.nav::-webkit-scrollbar{ display:none; }
.nav a{
  flex:0 0 auto;
  white-space:nowrap;
  padding:10px 12px;
  border-radius: 999px;
  border:1px solid rgba(203,191,152,.9);
  background: rgba(255,255,255,.6);
  transition:.15s transform, .15s background, .15s border, .15s box-shadow;
}
.nav a:hover{
  transform: translateY(-1px);
  background: rgba(244,221,160,.55);
  border-color: rgba(226,183,62,.9);
}
.nav a[aria-current="page"]{
  background: rgba(244,221,160,.75);
  border-color: rgba(226,183,62,.95);
  box-shadow: inset 0 0 0 1px rgba(45,40,31,.12);
}

.actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding: 12px 14px;
  border-radius: 14px;
  border:2px solid var(--dark);
  background: var(--surface);
  box-shadow: var(--shadow);
  cursor:pointer;
  transition: .15s transform, .15s box-shadow, .15s background;
  font-weight: 800;
}
.btn:hover{transform: translateY(-1px); box-shadow: var(--shadow-2)}
.btn:active{transform: translateY(0px); box-shadow: var(--shadow)}
.btn--primary{
  background: linear-gradient(135deg, var(--gold), #ffd768);
  border-color: var(--dark);
  color: var(--dark);
}
.btn--ghost{
  background: rgba(255,255,255,.55);
  border-color: rgba(45,40,31,.55);
}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  border:1px dashed rgba(45,40,31,.35);
  padding:8px 10px;border-radius:999px;
  background: rgba(255,255,255,.55);
  color: var(--dark);
  font-weight: 800;
  font-size: 12px;
}

.card{
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(203,191,152,.9);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
.block{padding: 16px}

.hero{
  position:relative;
  margin: 18px 0 26px;
  border-radius: var(--r2);
  overflow:hidden;
  box-shadow: var(--shadow);
  border: 1px solid rgba(203,191,152,.9);
  background: var(--surface);
}
.hero__bg{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 480px at 15% 20%, rgba(226,183,62,.22), transparent 60%),
    radial-gradient(900px 480px at 85% 10%, rgba(244,221,160,.18), transparent 55%),
    linear-gradient(90deg, rgba(45,40,31,.85), rgba(45,40,31,.22) 55%, rgba(45,40,31,.78)),
    url("/assets/hero-1.jpg") left center/cover no-repeat,
    url("/assets/hero-2.jpg") right center/cover no-repeat;
  filter: saturate(1.05) contrast(1.05);
  transform: scale(1.02);
}
.hero__grid{
  position:relative;
  padding: clamp(18px, 2.4vw, 34px);
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 20px;
  min-height: 420px;
}
@media (max-width: 900px){
  .hero__grid{grid-template-columns:1fr; min-height:auto;}
}
.hero__left{padding:18px}
.hero h1{
  margin: 0 0 10px;
  font-size: clamp(26px, 2.8vw, 44px);
  line-height: 1.05;
  color: var(--dark);
}
.hero p{margin:0 0 14px; color:#2d2b25; font-size:15px; line-height:1.5}
.hero__chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px}

.pill{
  display:flex; gap:10px; align-items:flex-start;
  padding:12px 14px;
  border-radius: 999px;
  background: rgba(248,241,220,.95);
  border: 1px solid rgba(203,191,152,.95);
  color: var(--dark);
  font-weight: 800;
}
.pill small{font-weight:700; color: rgba(45,40,31,.8)}
.pill strong{display:block}
.pill--dark{
  background: rgba(45,40,31,.92);
  color: #fff;
  border-color: rgba(255,255,255,.18);
}
.pill--dark small{color: rgba(255,255,255,.75)}

/* Long pill for a full sentence (hero guarantee line) */
.pill--long{
  display:block;
  font-weight: 750;
  font-size: 13.5px;
  line-height: 1.35;
  margin-top: 12px;
}

/* Emphasis variant for the guarantee line on the hero */
.pill--emphasis{
  border-color: rgba(226,183,62,.92);
  border-width: 2px;
  background: rgba(244,221,160,.88);
  box-shadow: 0 10px 24px rgba(226,183,62,.14);
}
.pill--long.pill--emphasis{
  font-size: 15px;
  line-height: 1.4;
}

.section{margin: 22px 0}
.section__head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:12px;
  margin-bottom:14px;
  padding: 14px 16px;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(203,191,152,.95);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
.section__title{font-size: 22px; margin:0; color: var(--dark)}
.section__subtitle{margin:0; color: var(--muted); font-size: 13px}

.grid-3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 900px){ .grid-3{grid-template-columns:1fr} }

.split{display:grid; grid-template-columns: 1fr 1fr; gap:12px}
@media (max-width: 900px){ .split{grid-template-columns:1fr} }

/* Photo collage */
.collage{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.collage__img{
  width:100%;
  height: 190px;
  border-radius: 16px;
  border: 1px solid rgba(203,191,152,.9);
  box-shadow: var(--shadow);
  background-size: cover;
  background-position: center;
  transition: transform .25s ease, filter .25s ease;
}
.collage__img:hover{ transform: translateY(-2px) scale(1.01); filter: saturate(1.05); }
.collage img{
  width:100%; height: 190px;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid rgba(203,191,152,.9);
  box-shadow: var(--shadow);
}
@media (max-width: 900px){
  .collage img{ height: 160px; }
  .collage__img{ height: 160px; }
}

.form{display:grid; gap:10px}
.field{display:grid; gap:6px}
.field label{font-size:12px; color: var(--muted); font-weight:800}

.input, .select, .textarea{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 2px solid rgba(45,40,31,.35);
  background: rgba(255,255,255,.9);
  outline:none;
  transition:.15s border, .15s box-shadow;
}
.input:focus, .select:focus, .textarea:focus{
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(226,183,62,.18);
}
.textarea{min-height:110px; resize: vertical}

.hr{height:1px; background: rgba(203,191,152,.7); margin: 12px 0}

.notice{
  padding: 12px 14px;
  border-radius: var(--r);
  border: 1px solid rgba(203,191,152,.9);
  background: rgba(255,255,255,.7);
}

.small{font-size:12px;color:var(--muted)}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New";}

/* Решения в тесте — читаемый размер */
.solution-text{
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(45,40,31,.86);
}

/* Readable math (no LaTeX rendering, but human-friendly fractions/roots) */
.math{ display:inline-block; vertical-align:middle; }
.math.frac{ display:inline-grid; grid-template-rows:auto auto; align-items:center; justify-items:center; line-height:1; margin: 0 1px; }
.math.frac .num{ padding: 0 4px 2px; border-bottom: 1px solid rgba(45,40,31,.55); font-size: .95em; }
.math.frac .den{ padding: 2px 4px 0; font-size: .95em; }

.math.sqrt{ display:inline-flex; align-items:flex-end; line-height:1; margin: 0 1px; }
.math.sqrt .rad{ font-weight: 800; margin-right: 2px; }
.math.sqrt .over{ border-top: 1px solid rgba(45,40,31,.55); padding: 2px 2px 0; }

/* PRICES (carousel cards) */
.price-grid{
  display:flex;
  gap:12px;
  overflow:auto;
  scroll-snap-type: x mandatory;
  padding: 10px 6px 12px;
  scroll-padding-left: 10px;
  scroll-padding-right: 10px;
}
.price-grid > *{scroll-snap-align:start;}
.price-grid::-webkit-scrollbar{height:8px}
.price-grid::-webkit-scrollbar-thumb{background: rgba(203,191,152,.8); border-radius:999px}
.price-card{min-width: min(420px, 86vw); overflow:hidden; position:relative;}
@media (min-width: 1100px){ .price-card{ min-width: 520px; } }
.price-card__head{
  padding: 16px;
  background:
    radial-gradient(500px 180px at 20% 0%, rgba(226,183,62,.30), transparent 60%),
    linear-gradient(135deg, rgba(248,241,220,.92), rgba(255,255,255,.88));
  border-bottom: 1px solid rgba(203,191,152,.7);
}
.price-card__head b{display:block; font-size: 18px; color: var(--dark);}
.price-card__head span{display:block; margin-top:6px; font-size: 12px; color: var(--muted); font-weight:800;}
.price-card__body{ padding: 16px; display:grid; gap:10px; }
.price-line{display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding-top: 6px;}
.price-line .big{font-size: 26px; font-weight: 950; color: var(--dark); letter-spacing:.2px;}
.price-line .per{font-size: 12px; color: var(--muted); font-weight: 900;}
.price-card__cta{padding: 16px; border-top: 1px solid rgba(203,191,152,.7); display:flex; gap:10px; align-items:center; justify-content:space-between;}

/* SOCIAL */
.social-grid{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
@media (max-width: 1100px){ .social-grid{grid-template-columns: repeat(3, 1fr);} }
@media (max-width: 650px){ .social-grid{grid-template-columns: repeat(2, 1fr);} }
.social-link{
  display:flex; flex-direction:column; gap:6px;
  padding: 14px;
  border-radius: 16px;
  border: 2px solid rgba(45,40,31,.22);
  background: rgba(255,255,255,.70);
  transition: .15s transform, .15s border, .15s background;
  min-height: 86px;
}
.social-link:hover{transform: translateY(-1px); border-color: rgba(226,183,62,.9); background: rgba(244,221,160,.45);}
.social-link b{color: var(--dark); font-size: 14px;}
.social-link span{color: var(--muted); font-size: 12px; font-weight:800;}
.social-link .ico{font-size: 18px;}


/* CONTACT SPOTLIGHT (Где меня найти) */
.contact-spotlight{
  position: relative;
  padding: 16px 16px 14px;
  border-radius: var(--r2);
  border: 2px solid rgba(226,183,62,.55);
  background:
    radial-gradient(900px 420px at 0% 0%, rgba(226,183,62,.26), transparent 60%),
    radial-gradient(900px 420px at 100% 0%, rgba(244,221,160,.38), transparent 60%),
    rgba(255,255,255,.70);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow-2);
}



.contact-spotlight .section__head{
  margin: 0 0 12px 0;
  padding: 0 0 0 14px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.contact-spotlight .section__title{
  margin: 0;
  font-size: 22px;
}

.contact-spotlight .section__subtitle{
  margin: 4px 0 0;
}

.contact-spotlight .social-link{
  background: rgba(255,255,255,.82);
  border-color: rgba(45,40,31,.18);
  box-shadow: 0 10px 22px rgba(45,40,31,.08);
}

.contact-spotlight .social-link:hover{
  background: rgba(244,221,160,.55);
  border-color: rgba(226,183,62,.95);
}

@media (max-width: 980px){
  .contact-spotlight{ padding: 14px; }
  .contact-spotlight::before{ left:10px; }
  .contact-spotlight .section__head{ padding-left: 12px; }
}

/* CAROUSEL */
.carousel{ position:relative; padding: 0 8px; }
.carousel__track{
  display:flex; gap:12px; overflow:auto;
  scroll-snap-type: x mandatory;
  padding: 10px 6px 14px;
  scroll-padding-left: 10px;
  scroll-padding-right: 10px;
}
.carousel__track::-webkit-scrollbar{height:8px}
.carousel__track::-webkit-scrollbar-thumb{background: rgba(203,191,152,.8); border-radius:999px;}
.carousel__item{ flex: 0 0 min(420px, 86vw); scroll-snap-align: start; }
@media (min-width: 1100px){ .carousel__item{ flex-basis: 520px; } }
.review-card{ padding: 14px; }
.review-card__top{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.stars{font-weight: 950; letter-spacing:.6px}
.review__meta{color: var(--muted); font-size: 12px; font-weight:800}
.review__text{margin: 10px 0 0; color: #2b2b2b; line-height:1.55}

/* Reviews page list */
.reviews-list{display:grid; gap:12px}

/* ==========================
   ✅ CABINET (dashboard)
   ========================== */
.dash{
  display:grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 12px;
}
@media (max-width: 980px){
  .dash{grid-template-columns: 1fr;}
}

.profile-head{display:flex; align-items:center; gap:12px;}
.avatar{
  width: 44px; height: 44px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(226,183,62,.9), rgba(45,40,31,.9));
  border: 2px solid rgba(255,255,255,.7);
  box-shadow: var(--shadow);
}
.profile-head b{display:block; color:var(--dark)}
.profile-head span{display:block; color:var(--muted); font-size:12px; font-weight:900}

.quick{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (max-width: 520px){
  .quick{grid-template-columns: 1fr;}
}

.module-title{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.progress{
  height: 10px;
  border-radius: 999px;
  background: rgba(45,40,31,.10);
  overflow:hidden;
  border: 1px solid rgba(203,191,152,.8);
}
.progress > i{
  display:block;
  height:100%;
  width: 35%;
  background: linear-gradient(90deg, rgba(226,183,62,.95), rgba(106,90,47,.85));
}

/* ==========================
   ✅ MATERIALS
   ========================== */
.materials-grid{display:grid; grid-template-columns: 1fr; gap: 12px;}
.material-item{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  padding: 14px;
}
.material-item b{color: var(--dark)}
.material-item .meta{color:var(--muted); font-size:12px; font-weight:900; margin-top:4px;}
.material-item .desc{color:#2b2b2b; margin-top:8px; line-height:1.5; font-size: 14px;}
.material-actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
@media (max-width: 700px){
  .material-item{flex-direction:column; align-items:stretch;}
  .material-actions{width:100%;}
  .material-actions .btn{width:100%;}
}

@media (max-width: 720px){
  .material-item{flex-direction:column; align-items:stretch;}
  .material-actions{justify-content:flex-start;}
  .material-actions .btn{width:100%;}
}

.video-embed{
  width: min(560px, 100%);
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  border: 1px solid rgba(203,191,152,.9);
  overflow:hidden;
  background: rgba(255,255,255,.7);
}
.video-embed iframe{width:100%; height:100%; border:0;}

/* TABLES (admin/user) */
.table-wrap{overflow:auto; border-radius: var(--r); border:1px solid rgba(203,191,152,.9); box-shadow: var(--shadow); background: rgba(255,255,255,.86);}
table{width:100%; border-collapse:collapse;}
th,td{padding:12px 12px; border-bottom:1px solid rgba(203,191,152,.6); text-align:left; vertical-align:top;}
th{font-size:12px; color: var(--muted); font-weight:900; background: rgba(248,241,220,.65);}
tr:last-child td{border-bottom:0}
.help{color: var(--muted); font-weight:800; font-size:12px;}
.badge.ok{border-style:solid; border-color: rgba(106,90,47,.35);}
.badge.warn{border-style:solid; border-color: rgba(226,183,62,.55);}
.badge.bad{border-style:solid; border-color: rgba(200,80,60,.55);}

/* ==========================
   ✅ TOASTS (Option A: dynamic stack)
   ========================== */
.toast-wrap{
  position: fixed;
  bottom: 18px;
  right: 18px;
  z-index: 1000;
  width: min(420px, 92vw);
  display:flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.toast{
  pointer-events: auto;
  padding: 12px 14px;
  border-radius: 16px;
  border: 2px solid rgba(45,40,31,.55);
  background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(248,241,220,.94));
  box-shadow: var(--shadow-2);
  opacity: 1;
  transform: translateY(0);
  transition: opacity .35s ease, transform .35s ease;
}
.toast b{color: var(--dark)}
.toast p{margin:6px 0 0; color: var(--muted); font-size: 13px; line-height:1.4}

.toast.toast--ok{ border-color: rgba(34,197,94,.38); }
.toast.toast--danger{ border-color: rgba(239,68,68,.38); }
.toast.toast--info{ border-color: rgba(226,183,62,.55); }

/* Old single-toast placeholder (kept in HTML) — hide it */
#toast{ display:none !important; }

/* ==========================
   ✅ NAV (mobile toggle)
   ========================== */
.nav-toggle{ display:none; }
@media (max-width: 980px){
  .nav-toggle{ display:inline-flex; }
  .nav{
    display:none;
    width:100%;
    order:3;
    justify-content:flex-start;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(203,191,152,.9);
    border-radius: 18px;
    padding: 10px;
    box-shadow: var(--shadow);
  }
  .nav.open{ display:flex; }
  .nav a{ flex: 1 1 auto; text-align:center; }
}

/* ==========================
   ✅ EXTRA UI polish (same palette)
   ========================== */
.btn:focus-visible, .nav a:focus-visible, .input:focus-visible, .select:focus-visible, .textarea:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(226,183,62,.22);
  border-color: rgba(226,183,62,.95);
}

.prices-head{ align-items:center; }
.discount-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(226,183,62,.75);
  background: rgba(244,221,160,.45);
  font-weight: 950;
  color: var(--dark);
  box-shadow: 0 10px 20px rgba(45,40,31,.08);
}
.discount-chip b{ font-weight: 1000; }

.price-points{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap: 8px;
}
.price-points li{
  position:relative;
  padding-left: 22px;
  color:#2b2b2b;
  font-weight: 850;
  font-size: 13px;
  line-height: 1.35;
}
.price-points li::before{
  content: "✓";
  position:absolute;
  left:0;
  top:0;
  font-weight: 1000;
  color: var(--olive);
}

.hero__cta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}

.cardtitle{
  margin:0 0 10px;
  color: var(--dark);
}

/* Reviews blocks on home pages */
.review-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 900px){ .review-grid{ grid-template-columns: 1fr; } }
.review-card--home{ height:100%; display:flex; flex-direction:column; }
.review-card--home .review__text{ flex:1; }


/* ==========================
   ✅ About blocks (CMS)
   ========================== */
.about-block{ margin-bottom: 12px; }
.about-block{ position: relative; overflow:hidden; }
.about-block::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(600px 220px at 20% 0%, rgba(226,183,62,.22), transparent 55%),
              radial-gradient(520px 260px at 80% 100%, rgba(45,40,31,.10), transparent 60%);
  pointer-events:none;
}
.about-block > *{ position: relative; }
.about-block__title{ margin: 0 0 10px; }
.about-block--light{ }
.about-block--dark{
  background: linear-gradient(135deg, rgba(45,40,31,.92), rgba(45,40,31,.76));
  border-color: rgba(244,221,160,.22);
  color: rgba(255,255,255,.92);
}
.about-block--dark .hr{ background: rgba(244,221,160,.18); }
.about-block--dark .small{ color: rgba(255,255,255,.78); }
.about-block--dark b{ color: rgba(255,255,255,.96); }
.about-block--gold{
  background: linear-gradient(135deg, rgba(244,221,160,.55), rgba(255,255,255,.96));
  border-color: rgba(226,183,62,.65);
}
.about-rich p{ color: inherit; }
.about-files{ display:grid; gap: 8px; }
.about-stat{ min-height: 92px; }


.about-page{ display:grid; gap: 18px; }
.about-block{ margin-bottom: 0; }
.about-block__title{ margin: 0 0 12px; font-size: clamp(24px, 3vw, 36px); line-height: 1.12; letter-spacing: -.02em; }
.about-block__title--xl{ font-size: clamp(30px, 4.2vw, 48px); }
.about-rich{ font-size: clamp(17px, 1.4vw, 20px); line-height: 1.8; color: #2c2a26; }
.about-rich--large{ font-size: clamp(18px, 1.6vw, 21px); }
.about-rich p{ margin: 0 0 16px; }
.about-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
  padding: 8px 12px;
  border-radius: 999px;
  border:1px solid rgba(226,183,62,.55);
  background: rgba(244,221,160,.32);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--olive);
}
.about-split{
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}
.about-split__text,
.about-split__media{
  min-height: 100%;
  padding: clamp(22px, 2.4vw, 34px);
  border-radius: 28px;
}
.about-split__meta{
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
  font-weight: 700;
}
.about-split__actions{ margin-top: 18px; }
.about-split--no-media{ grid-template-columns: minmax(0, 1fr); }
.about-split--no-media .about-split__text{ max-width: 100%; }
.about-media-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}
.about-media-grid--single{ grid-template-columns: 1fr; }
.about-media-grid--collage4{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.about-media-grid--collage4 .about-media-card{
  aspect-ratio: 4 / 3;
  min-height: 0;
}
.about-media-card{
  background: rgba(255,255,255,.72);
  border:1px solid rgba(203,191,152,.85);
  border-radius: 22px;
  overflow:hidden;
  min-height: 280px;
  box-shadow: var(--shadow);
  display:flex;
  align-items:center;
  justify-content:center;
  isolation:isolate;
}
.about-media-card img{
  display:block;
  width:100%;
  height:100%;
  min-height: 280px;
  object-fit: cover;
  transform: scale(var(--media-scale, 1)) rotate(var(--media-rotate, 0deg));
  transform-origin: center center;
  border-radius: 22px;
}
.about-media-grid--collage4 .about-media-card img{
  min-height: 0;
}
.about-media-card--portrait{
  aspect-ratio: 3 / 5;
}
.about-media-card--landscape{
  aspect-ratio: 16 / 10;
}
.about-media-card--pdf{ display:flex; flex-direction:column; }
.about-pdf__frame{ min-height: 340px; background: #f8f6f0; }
.about-pdf__frame iframe{ width:100%; height:100%; min-height: 340px; border:0; background:#fff; }
.about-media-card--pdf .file{ margin: 12px; }
.about-files .file,
.about-media-card .file{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 12px 14px;
  border-radius: 16px;
  border:1px solid rgba(203,191,152,.95);
  background: rgba(255,255,255,.86);
  font-weight: 800;
}
.about-files .file:hover,
.about-media-card .file:hover{ border-color: rgba(226,183,62,.9); }
.about-stat{
  min-height: 130px;
  padding: 20px;
  background: rgba(255,255,255,.92);
}
.about-stat b{ display:block; font-size: 19px; line-height:1.3; }
.about-stat .small{ font-size: 15px; line-height: 1.6; }
.about-block .hr{ margin: 16px 0 18px; }
.about-block--dark .about-rich,
.about-block--dark .about-split__meta{ color: rgba(255,255,255,.92); }
.about-block--dark .about-eyebrow{ color: #fff3c0; background: rgba(244,221,160,.14); border-color: rgba(244,221,160,.28); }
@media (max-width: 980px){
  .about-split{ grid-template-columns: 1fr; }
  .about-media-grid,
  .about-media-grid--collage4{ grid-template-columns: 1fr; }
  .about-media-card,
  .about-media-grid--collage4 .about-media-card{ aspect-ratio: 16 / 10; }
  .about-media-card img,
  .about-pdf__frame,
  .about-pdf__frame iframe{ min-height: 300px; }
}

/* subtle entrance animation */
@keyframes fadeUp{
  from{ opacity:0; transform: translateY(10px); }
  to{ opacity:1; transform: translateY(0); }
}
.about-block{ animation: fadeUp .35s ease both; }
@media (prefers-reduced-motion: reduce){
  .about-block{ animation: none; }
  .collage__img{ transition:none; }
}


/* ==========================
   ✅ CMS editor (admin)
   ========================== */
.cms-grid{ display:grid; grid-template-columns: 320px 1fr; gap:12px; align-items:start; }
@media (max-width: 980px){ .cms-grid{ grid-template-columns: 1fr; } }
.cms-list{ display:grid; gap:8px; }
.cms-item{
  display:flex;
  gap:10px;
  align-items:center;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(203,191,152,.65);
  background: rgba(255,255,255,.65);
  cursor:pointer;
}
.cms-item:hover{ background: rgba(255,255,255,.78); }
.cms-item[aria-selected="true"]{ border-color: rgba(226,183,62,.9); box-shadow: 0 10px 24px rgba(45,40,31,.10); }
.cms-item__type{ font-size: 11px; font-weight: 950; padding:4px 8px; border-radius:999px; background: rgba(244,221,160,.55); border:1px solid rgba(226,183,62,.55); }
.cms-item__title{ font-weight: 950; color: var(--dark); }
.cms-item__sub{ font-size: 12px; color: var(--muted); }

.cms-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.cms-preview{ margin-top: 12px; }


/* ========== AUTH MODAL ========== */
.modal-overlay{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(20,17,12,.55);
  /* ВАЖНО: blur даёт артефакты (чёрные полосы) на некоторых браузерах/драйверах.
     Поэтому оставляем только затемнение. */
  z-index: 2000;
}
.modal-overlay.is-open{ display:flex; }

/* Блокируем скролл страницы при открытой модалке без «дёргания» фона */
body.modal-open{ overflow: hidden; }

.modal{
  width: min(560px, 100%);
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(203,191,152,.85);
  border-radius: 22px;
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  overflow:hidden;
}

.modal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 16px 16px 10px 16px;
}
.modal__title{ margin:0; font-size: 18px; color: var(--dark); }
.modal__close{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(45,40,31,.18);
  background: rgba(255,255,255,.7);
  box-shadow: var(--shadow);
  cursor:pointer;
  font-weight: 900;
}

.modal__tabs{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 16px 14px 16px;
}
.modal__tab{
  padding: 11px 12px;
  border-radius: 16px;
  border: 1px solid rgba(203,191,152,.95);
  background: rgba(255,255,255,.65);
  cursor:pointer;
  font-weight: 900;
}
.modal__tab.is-active{
  background: rgba(244,221,160,.65);
  border-color: rgba(226,183,62,.85);
}

.modal__body{ padding: 0 16px 16px 16px; }
.auth-form{ display:none; gap: 12px; }
.auth-form.is-active{ display:grid; }

.auth-form label{ font-size: 12px; color: var(--muted); font-weight: 900; }
.auth-form input{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(203,191,152,.95);
  background: rgba(255,255,255,.75);
  outline:none;
}
.auth-form input:focus{
  border-color: rgba(226,183,62,.95);
  box-shadow: 0 0 0 4px rgba(226,183,62,.18);
}

.modal__hint{ margin-top: 10px; font-size: 12px; color: var(--muted); font-weight: 800; }

@media (max-width: 520px){
  .modal{ border-radius: 18px; }
}

/* ========== USER CHIP MENU ========== */
.userchip{ position: relative; }
.userchip__btn{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(203,191,152,.95);
  background: rgba(255,255,255,.55);
  box-shadow: var(--shadow);
  cursor:pointer;
  font-weight: 900;
}
.userchip__avatar{
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(135deg, rgba(226,183,62,.92), rgba(45,40,31,.92));
  color: #fff;
  border: 2px solid rgba(255,255,255,.75);
  box-shadow: var(--shadow-2);
  font-size: 13px;
}
.userchip__name{
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  color: var(--dark);
}
.userchip__chev{ opacity: .8; }

.userchip__panel{
  position:absolute;
  right:0;
  top: calc(100% + 10px);
  width: 260px;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid rgba(203,191,152,.95);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  display:none;
  z-index: 1400;
}
.userchip.is-open .userchip__panel{ display:block; }

.userchip__item{
  display:block;
  width:100%;
  text-align:left;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: transparent;
  cursor:pointer;
  text-decoration:none;
  color: var(--dark);
  font-weight: 900;
}
.userchip__item:hover{
  background: rgba(244,221,160,.55);
  border-color: rgba(226,183,62,.65);
}
.userchip__sep{ height:1px; margin: 8px 0; background: rgba(203,191,152,.8); }
.userchip__danger:hover{
  background: rgba(200,80,60,.14);
  border-color: rgba(200,80,60,.25);
}

/* ===== Extra UI (admin slots + homework attachments) ===== */
.row{display:flex; align-items:center;}
.nowrap{white-space:nowrap;}

.input--sm, .select--sm{padding:10px 12px; font-size:14px;}

.vlist{display:flex; flex-direction:column; gap:10px;}
.student-row{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-radius: var(--r);
  border: 1px solid rgba(203,191,152,.9);
  background: rgba(255,255,255,.86);
  box-shadow: var(--shadow);
  cursor:pointer;
  text-align:left;
}
.student-row small{display:block; opacity:.75; margin-top:2px;}
.student-row.is-active{outline: 2px solid rgba(203,191,152,.95);}

.files{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;}
.file-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(203,191,152,.9);
  background: rgba(255,255,255,.86);
  text-decoration:none;
  color: inherit;
  font-weight:700;
  font-size: 13px;
}
.file-chip:hover{transform: translateY(-1px);}


/* ========== NOTES SVG BACKGROUND OVERLAY ==========
   Put your own SVG at: /public/assets/img/notes.svg
   This overlay sits above the existing page background, but below all UI blocks.
   If your SVG looks too faint, tweak opacity + filter below.
*/
html{ scrollbar-gutter: stable; }

body{ position: relative; }

body::before{
  content:"";
  position:fixed;
  inset:0;
  background-image:url("../img/notes.svg");
  background-repeat: repeat;
  background-position: center center;
  opacity: 0.10;
  background-size: 1100px auto; /* fixed size across all pages */
  filter: grayscale(1) contrast(1.12) brightness(.92);
  mix-blend-mode: multiply;
  pointer-events:none;
  z-index:0;
}

/* keep all page blocks above the overlay */
header, main, footer{
  position:relative;
  z-index:1;
}

/* ===== Landing (photo + reviews) ===== */
.trap-line{margin:0 0 14px;}
.trap-underline{
  font-weight: 900;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  background: linear-gradient(transparent 58%, rgba(226,183,62,.35) 58%);
  padding: 0 .12em;
  border-radius: 6px;
}


.portrait-hero{
  margin: 18px 0 26px;
  border-radius: var(--r2);
  box-shadow: var(--shadow);
  border: 1px solid rgba(203,191,152,.9);
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: clamp(14px, 2vw, 18px);
}

.portrait-hero__grid{
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 14px;
  align-items: stretch;
}

@media (max-width: 900px){
  .portrait-hero{padding: 14px;}
  .portrait-hero__grid{grid-template-columns: 1fr;}
  .portrait-hero__photo{min-height: 320px;}
}

.portrait-hero__photo{
  /* smaller, card-like photo block with rounded corners */
  position: relative;
  border-radius: var(--r2);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid rgba(203,191,152,.9);
  height: 100%;
  min-height: 420px;
  background:
    image-set(
      url("/assets/hero-1.webp") type("image/webp"),
      url("/assets/hero-1.jpg") type("image/jpeg")
    ) center/cover no-repeat;
}
.portrait-hero__photo::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(45,40,31,.04), rgba(45,40,31,.16));
}

.portrait-hero__right{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.portrait-hero__copy h1{
  margin: 12px 0 10px;
  font-size: clamp(24px, 2.6vw, 38px);
  line-height: 1.05;
  color: var(--dark);
}

.portrait-hero__reviews-head{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 10px;
}

.hero-reviews-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.review-mini{
  padding: 12px 14px;
  border-radius: var(--r);
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(203,191,152,.9);
  box-shadow: var(--shadow);
}
.review-mini__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.review-mini__text{
  margin: 8px 0 0;
  color: #2d2b25;
  font-size: 14px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.portrait-hero__badge{
  position: absolute;
  left: 16px;
  bottom: 16px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(45,40,31,.86);
  border: 1px solid rgba(255,255,255,.16);
  color: #fff;
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  max-width: min(320px, 90%);
}
.portrait-hero__badge span{
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: rgba(255,255,255,.78);
  font-weight: 700;
}

/* ===== Booking: auth gate + contact block ===== */
.booking-form-card{ position: relative; }
.gate-card{ position: relative; }
.booking-side{ display: flex; flex-direction: column; gap: 12px; }

.auth-gate{
  position: absolute;
  inset: 0;
  padding: 18px;
  border-radius: var(--r);
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: none;
  z-index: 2;
}
.auth-gate.is-active{ display: flex; align-items: center; justify-content: center; }
.auth-gate__inner{ max-width: 520px; }
.auth-gate__actions{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }

.contact-card{
  background:
    radial-gradient(600px 180px at 20% 0%, rgba(226,183,62,.20), transparent 60%),
    radial-gradient(520px 160px at 80% 10%, rgba(244,221,160,.18), transparent 55%),
    rgba(255,255,255,.86);
}
.contact-card__top{ display:flex; flex-direction: column; gap: 6px; }
.contact-card__rows{ display:flex; flex-direction: column; gap: 10px; }
.contact-card__row{ display:flex; gap: 12px; align-items: flex-start; }
.contact-card__row .ico{ width: 36px; height: 36px; border-radius: 12px; display:flex; align-items:center; justify-content:center; background: rgba(248,241,220,.95); border: 1px solid rgba(203,191,152,.95); }
.contact-card__value a{ color: inherit; text-decoration: none; }
.contact-card__value a:hover{ text-decoration: underline; }

@media (max-width: 900px){
  .auth-gate{ padding: 14px; }
  .auth-gate__inner{ max-width: 100%; }
}



.booking-form-card--gate{
  min-height: 0;
}
.booking-form-card--gate .auth-gate{
  position: relative;
  inset: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  padding: 22px;
  border: 1px solid rgba(203,191,152,.72);
  background: rgba(255,255,255,.94);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.booking-form-card--gate .auth-gate__inner{
  width: 100%;
}
@media (max-width: 900px){
  .booking-form-card--gate .auth-gate{
    min-height: 0;
    padding: 18px;
    align-items: flex-start;
  }
  .booking-form-card--gate .auth-gate__actions{
    flex-direction: column;
  }
  .booking-form-card--gate .auth-gate__actions .btn{
    width: 100%;
  }
}

/* Booking page readability */
.booking-split .card{
  background: rgba(255,255,255,.94);
}
.booking-split .block{
  padding: 22px;
}
.booking-split .field label,
.booking-split .small,
.booking-split .notice{
  font-size: 14px;
  line-height: 1.5;
}
.booking-split .field label{
  color: #3a3428;
  font-weight: 900;
}
.booking-split .input,
.booking-split .select,
.booking-split .textarea{
  font-size: 16px;
  color: #1f1b15;
  background: #fff;
  border-color: rgba(45,40,31,.45);
}
.booking-split .input::placeholder,
.booking-split .textarea::placeholder{
  color: #6c6558;
}
.booking-split .btn{
  font-size: 17px;
}
.booking-split .notice{
  color: #3f392d;
  background: rgba(255,255,255,.95);
}
.contact-card{
  background:
    radial-gradient(600px 180px at 20% 0%, rgba(226,183,62,.22), transparent 60%),
    radial-gradient(520px 160px at 80% 10%, rgba(244,221,160,.16), transparent 55%),
    rgba(255,255,255,.95);
}
.contact-card__title{
  display:block;
  font-size: 28px;
  line-height: 1.15;
  color: #241f18;
}
.contact-card__top .small{
  font-size: 17px;
  color: #51493c;
}
.contact-card__rows{
  gap: 14px;
}
.contact-card__row{
  gap: 14px;
}
.contact-card__row .ico{
  width: 44px;
  height: 44px;
  font-size: 20px;
  border-radius: 14px;
}
.contact-card__row .small{
  font-size: 15px;
  color: #5b5242;
}
.contact-card__value,
.contact-card__value b,
.contact-card__value a{
  font-size: 30px;
  line-height: 1.15;
  color: #1f1a14;
}
.booking-side .card > b,
.booking-side .card .section__title,
.section .section__title{
  color: #241f18;
}
.section .section__title{
  font-size: 30px;
}
.section .section__subtitle{
  font-size: 16px;
  color: #4e4638;
}
.table-wrap th,
.table-wrap td{
  font-size: 15px;
}
@media (max-width: 900px){
  .contact-card__title{ font-size: 23px; }
  .contact-card__value,
  .contact-card__value b,
  .contact-card__value a{ font-size: 23px; }
  .section .section__title{ font-size: 25px; }
}


/* === LaTeX editor (admin/tests) === */
.latexbox{ border:1px solid rgba(15,23,42,.12); border-radius:14px; overflow:hidden; background:#fff; }
.latexbox__toolbar{ display:flex; flex-wrap:wrap; gap:6px; padding:10px; background:rgba(2,6,23,.03); border-bottom:1px solid rgba(15,23,42,.08); }
.latexbtn{ font: inherit; font-size:12px; padding:6px 10px; border-radius:10px; border:1px solid rgba(15,23,42,.12); background:#fff; cursor:pointer; }
.latexbtn:hover{ filter:brightness(.98); }
.latexbox__area{ border:0; border-radius:0; resize:vertical; margin:0; }


/* about page readability fixes */
.about-split__text,
.about-split__media{
  background: linear-gradient(135deg, rgba(28,30,36,.96), rgba(40,44,52,.94));
  border: 1px solid rgba(244,221,160,.16);
  color: #fff;
  box-shadow: 0 18px 40px rgba(15,17,22,.16);
}
.about-split__text .about-block__title,
.about-split__media .about-block__title,
.about-split__text .about-rich,
.about-split__text .about-split__meta,
.about-split__text .small,
.about-split__media .small{ color: rgba(255,255,255,.95); }
.about-split__text .hr,
.about-split__media .hr{ background: rgba(244,221,160,.16); }
.about-split__text .about-eyebrow,
.about-split__media .about-eyebrow{
  color: #fff2b2;
  background: rgba(244,221,160,.12);
  border-color: rgba(244,221,160,.22);
}
.about-split.about-block--gold .about-split__text,
.about-split.about-block--gold .about-split__media,
.about-split.about-block--light .about-split__text,
.about-split.about-block--light .about-split__media,
.about-split.about-block--dark .about-split__text,
.about-split.about-block--dark .about-split__media{
  background: linear-gradient(135deg, rgba(28,30,36,.96), rgba(40,44,52,.94));
}

/* === Top navigation refresh inspired by modern cloud docs header === */
.topbar{
  background: transparent;
  border-bottom: 0;
  padding: 14px 0 10px;
}
.topbar__inner{
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  padding: 14px 18px;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(203,191,152,.65);
  border-radius: 24px;
  box-shadow: 0 16px 34px rgba(29,31,36,.08);
}
.brand{ gap: 12px; }
.brand__logo{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(226,183,62,.95), rgba(45,40,31,.98));
}
.brand__text b{ font-size: 16px; }
.brand__text span{ font-size: 12px; }
.nav{
  gap: 4px;
  justify-content: flex-start;
  overflow: visible;
}
.nav a{
  padding: 12px 14px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #2f332f;
  font-weight: 500;
  box-shadow: none;
}
.nav a:hover{
  transform: none;
  background: rgba(45,40,31,.05);
  border-color: transparent;
}
.nav a[aria-current="page"]{
  background: rgba(226,183,62,.14);
  color: var(--dark);
  box-shadow: inset 0 -2px 0 rgba(226,183,62,.75);
}
.actions{ gap: 12px; }
.actions .btn{
  padding: 11px 16px;
  border-radius: 14px;
  box-shadow: none;
}
.actions .btn--ghost{
  background: rgba(45,40,31,.04);
  border-color: rgba(45,40,31,.12);
}
.actions .btn--primary{
  background: linear-gradient(135deg, rgba(226,183,62,.95), rgba(255,222,122,.98));
}
@media (max-width: 980px){
  .topbar{ padding-top: 10px; }
  .topbar__inner{
    border-radius: 20px;
    padding: 12px 14px;
  }
  .nav{
    display: none;
    width: 100%;
    order: 4;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 4px;
  }
  .nav.open{ display: flex; }
  .nav a{
    flex: 1 1 calc(50% - 8px);
    text-align: center;
    background: rgba(45,40,31,.04);
  }
}

/* === About page media previews and modal viewer === */
.about-media-card--clickable,
.about-doc-preview,
.file--button{
  cursor: pointer;
}
.about-media-card--clickable{ margin: 0; }
.about-media-card--clickable:focus-visible,
.about-doc-preview:focus-visible,
.file--button:focus-visible{
  outline: 3px solid rgba(226,183,62,.55);
  outline-offset: 2px;
}
.about-doc-preview{
  position: relative;
  width: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
  border-radius: 22px;
  background: rgba(255,255,255,.06);
}
.about-doc-preview img{
  width: 100%;
  min-height: 340px;
  max-height: 440px;
  object-fit: cover;
  display: block;
}
.about-doc-preview::after{
  content: "Нажмите для просмотра";
  position: absolute;
  left: 16px;
  bottom: 16px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(20,22,28,.72);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
}
.about-doc-preview__badge{
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  color: #111;
  font-size: 12px;
  font-weight: 900;
}
.file--button{
  width: calc(100% - 24px);
  text-align: left;
  background: rgba(255,255,255,.08);
  font: inherit;
  color: inherit;
}
.about-viewer{
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
}
.about-viewer.is-open{ display: block; }
.about-viewer__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(9,11,15,.68);
  backdrop-filter: blur(10px);
}
.about-viewer__dialog{
  position: relative;
  z-index: 1;
  width: min(1120px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  margin: 16px auto;
  display: flex;
  flex-direction: column;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,244,236,.98));
  border: 1px solid rgba(203,191,152,.85);
  box-shadow: 0 28px 80px rgba(0,0,0,.25);
  overflow: hidden;
}
.about-viewer__head{
  padding: 20px 72px 12px 24px;
  border-bottom: 1px solid rgba(203,191,152,.55);
}
.about-viewer__title{
  font-size: 20px;
  font-weight: 800;
  color: var(--dark);
}
.about-viewer__close{
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(45,40,31,.16);
  background: rgba(45,40,31,.06);
  cursor: pointer;
  font-size: 18px;
}
.about-viewer__body{
  padding: 18px 24px 24px;
  overflow: auto;
}
.about-viewer__image img,
.about-viewer__doc img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
  border: 1px solid rgba(203,191,152,.72);
  box-shadow: 0 16px 40px rgba(23,25,31,.12);
  background: #fff;
}
.about-viewer__actions{
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}
@media (max-width: 900px){
  .about-doc-preview img{ min-height: 240px; max-height: 320px; }
  .about-viewer__dialog{ width: min(100vw - 16px, 1120px); margin: 8px auto; max-height: calc(100vh - 16px); border-radius: 22px; }
  .about-viewer__head{ padding: 16px 62px 10px 16px; }
  .about-viewer__body{ padding: 14px 16px 16px; }
}


/* === v4 polish: sticky full-width topbar, better active state, readable diploma buttons === */
html{
  scrollbar-gutter: stable;
}
body{
  padding-top: 86px;
}
.topbar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 80;
  padding: 0;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid rgba(33,37,41,.08);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 24px rgba(22,24,29,.06);
}
.topbar__inner{
  width: 100%;
  max-width: none;
  margin: 0;
  min-height: 86px;
  padding: 0 var(--page-pad);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  grid-template-columns: auto 1fr auto;
}
.brand__logo{
  border-radius: 10px;
}
.nav{
  align-self: stretch;
  gap: 22px;
  height: 100%;
  align-items: center;
  flex-wrap: nowrap;
}
.nav a{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 86px;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #22272b;
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
  white-space: nowrap;
  transition: color .18s ease;
}
.nav a::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: transparent;
  transform: scaleX(.35);
  opacity: 0;
  transition: transform .18s ease, opacity .18s ease, background .18s ease;
}
.nav a:hover{
  background: transparent;
  color: #1f1a12;
}
.nav a[aria-current="page"]{
  background: transparent;
  color: #8f6d12;
  box-shadow: none;
}
.nav a[aria-current="page"]::after{
  background: #caa432;
  opacity: 1;
  transform: scaleX(1);
}
.file--button{
  width: calc(100% - 24px);
  margin: 12px;
  background: rgba(255,255,255,.90);
  color: var(--dark);
  border: 1px solid rgba(203,191,152,.92);
  box-shadow: 0 10px 20px rgba(0,0,0,.10);
}
.file--button:hover{
  background: rgba(248,241,220,.98);
}
.file--button .dot{
  background: var(--dark);
}
.file--button.is-active{
  background: rgba(20,22,28,.92);
  color: #fff;
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 10px 20px rgba(0,0,0,.16);
}
.file--button.is-active:hover{
  background: rgba(28,31,39,.98);
}
.file--button.is-active .dot{
  background: rgba(255,255,255,.92);
}
.about-doc-preview::after{
  background: rgba(20,22,28,.82);
}
@media (max-width: 980px){
  body{ padding-top: 74px; }
  .topbar__inner{
    min-height: 74px;
    max-width: 100%;
    padding: 10px var(--page-pad);
    gap: 10px;
  }
  .nav{
    display: none;
    height: auto;
    width: 100%;
    order: 4;
    gap: 12px;
    padding: 6px 0 10px;
    flex-wrap: wrap;
    background: transparent;
  }
  .nav.open{ display:flex; }
  .nav a{
    height: auto;
    min-height: 0;
    padding: 8px 0;
    flex: 0 0 auto;
    font-size: 17px;
  }
  .nav a::after{
    bottom: -2px;
  }
}


/* === v8 stability + about split cleanup === */
@media (min-width: 981px){
  .topbar__inner{
    grid-template-columns: minmax(250px, 320px) minmax(0, 1fr) minmax(250px, 320px);
    column-gap: 18px;
  }
  .topbar__inner > .brand{
    min-width: 0;
  }
  .actions{
    min-width: 250px;
    justify-content: flex-end;
    flex-wrap: nowrap;
  }
  .userchip{
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
  .userchip__btn{
    width: 220px;
    justify-content: space-between;
  }
}
.nav{
  justify-content: center;
}
.nav a{
  font-size: 19px;
  font-weight: 700;
  color: #2b2417;
}
.nav a:hover{
  color: #5a4310;
}
.nav a[aria-current="page"]{
  color: #6c4f08;
  background: transparent;
  box-shadow: none;
}
.nav a[aria-current="page"]::after{
  background: #d1aa37;
}

.about-split.about-block--light,
.about-split.about-block--dark,
.about-split.about-block--gold{
  background: transparent;
  border: 0;
  box-shadow: none;
  color: inherit;
}
.about-split.about-block--light::before,
.about-split.about-block--dark::before,
.about-split.about-block--gold::before{
  content: none;
}

/* ==========================
   ✅ Materials folders UI
   ========================== */
.materials-welcome{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}
@media (max-width: 760px){ .materials-welcome{flex-direction:column; align-items:flex-start;} }

.materials-workspace{
  display:grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 16px;
  align-items:start;
}
.materials-workspace--admin{ grid-template-columns: 320px minmax(0, 1fr); }
@media (max-width: 980px){ .materials-workspace, .materials-workspace--admin{ grid-template-columns: 1fr; } }

.materials-sidebar{
  position: sticky;
  top: 88px;
}
@media (max-width: 980px){ .materials-sidebar{ position: static; } }
.materials-sidebar__head,
.materials-panel__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.materials-panel__title{
  margin:0;
  color:var(--dark);
  font-size: 22px;
}
.materials-mini-btn{ padding:10px 12px; min-width:auto; box-shadow:none; }
.materials-main{ display:grid; gap:16px; }
.materials-admin-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:16px;
}
@media (max-width: 1200px){ .materials-admin-grid{ grid-template-columns: 1fr; } }

.folder-tree{ display:grid; gap:8px; }
.folder-tree__group{ display:grid; gap:8px; padding-left:16px; border-left: 1px dashed rgba(203,191,152,.9); }
.folder-tree__item{
  width:100%;
  text-align:left;
  border:1px solid rgba(203,191,152,.9);
  background: rgba(255,255,255,.82);
  color: var(--dark);
  border-radius: 14px;
  padding: 11px 12px;
  font-weight: 800;
  cursor:pointer;
  transition: .15s background, .15s border, .15s transform;
}
.folder-tree__item:hover{ background: rgba(244,221,160,.45); border-color: rgba(226,183,62,.95); transform: translateY(-1px); }
.folder-tree__item.is-active{ background: linear-gradient(135deg, rgba(45,40,31,.92), rgba(106,90,47,.92)); color:#fff; border-color: rgba(226,183,62,.85); }

.materials-breadcrumb{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:10px;
}
.crumb{
  border:0;
  background:transparent;
  padding:0;
  color: var(--olive);
  font-weight: 900;
  cursor:pointer;
  font-size: 13px;
}
.crumb.is-current{ color: var(--dark); }
.crumb-sep{ color: var(--muted); font-size: 12px; }

.materials-content-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 900px){ .materials-content-grid{ grid-template-columns: 1fr; } }
.content-card{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:16px;
  border:1px solid rgba(203,191,152,.92);
  border-radius: 18px;
  background: rgba(255,255,255,.9);
  box-shadow: var(--shadow);
}
button.content-card{ width:100%; text-align:left; cursor:pointer; }
.content-card--folder{
  background: linear-gradient(135deg, rgba(244,221,160,.65), rgba(255,255,255,.96));
}
.content-card__icon{
  flex:0 0 52px;
  width:52px; height:52px;
  border-radius: 16px;
  display:grid; place-items:center;
  background: rgba(45,40,31,.92);
  color:#fff;
  font-size: 24px;
}
.content-card--folder .content-card__icon{ background: linear-gradient(135deg, rgba(226,183,62,.96), rgba(106,90,47,.96)); }
.content-card__body{ min-width:0; flex:1; display:grid; gap:6px; }
.content-card__body b{ color: var(--dark); font-size: 18px; line-height:1.3; }
.content-card__body span{ color: var(--muted); font-size: 13px; font-weight: 800; }
.content-card__body p{ margin:0; color:#2b2b2b; line-height:1.55; font-size: 15px; }
.content-card__actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
@media (max-width: 720px){ .content-card{ flex-direction:column; } .content-card__actions{ width:100%; } .content-card__actions .btn{ width:100%; } }

.materials-toolbar{ display:flex; gap:10px; flex-wrap:wrap; }


.materials-preview-modal{
  width: min(1080px, 100%);
}
.materials-preview-modal__body{
  padding: 0 16px 16px;
}
.materials-preview-modal__body iframe{
  width: 100%;
  height: min(78vh, 900px);
  border: 1px solid rgba(203,191,152,.9);
  border-radius: 18px;
  background: #fff;
}
.materials-preview-modal__actions{
  display:flex;
  justify-content:flex-end;
  gap:12px;
  padding: 0 16px 18px;
  flex-wrap: wrap;
}
@media (max-width: 720px){
  .materials-preview-modal__actions .btn{ width:100%; }
  .materials-preview-modal__body iframe{ height: 68vh; }
}


/* about viewer = materials PDF modal */
.about-viewer.materials-modal{ display:none; }
.about-viewer.materials-modal.is-open{ display:grid; }
.about-viewer.materials-modal .about-viewer__dialog{
  margin: 18px auto;
  max-height: calc(100vh - 36px);
}
.about-viewer.materials-modal .about-viewer__body{
  padding: 0 16px 16px;
}
.about-viewer.materials-modal .about-viewer__actions{
  padding: 0 16px 18px;
  margin-top: 0;
}
.about-media-card--contain{
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.about-media-card--contain .about-doc-preview,
.about-media-card--contain img{
  background: transparent;
}
.about-media-card--contain img{
  padding: 0;
  object-fit: contain;
  border-radius: 22px;
}
.range{
  width: 100%;
}
.about-viewer__image{
  display:flex;
  justify-content:center;
}
.about-viewer__image img{
  max-width: 100%;
  max-height: min(78vh, 900px);
  width: auto;
}


.about-viewer.materials-modal .about-viewer__dialog--pdf{
  width: min(1460px, 96vw);
}
.about-viewer.materials-modal .about-viewer__body--pdf{
  padding: 0 18px 18px;
}
.about-viewer.materials-modal .pdf-preview__frame--about{
  width: 100%;
  height: min(84vh, 1100px);
  border: 1px solid rgba(203,191,152,.9);
  border-radius: 18px;
  background: #fff;
}
@media (max-width: 980px){
  .about-viewer.materials-modal .about-viewer__dialog--pdf{
    width: min(100%, 100vw);
  }
}
@media (max-width: 720px){
  .about-viewer.materials-modal .pdf-preview__frame--about{
    height: 72vh;
  }
}


/* === v10 mobile polish + stable about viewer === */
.about-viewer__backdrop{
  background: rgba(9,11,15,.74);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.modal-open{
  overflow: hidden;
  touch-action: none;
}
.about-viewer__dialog{
  overscroll-behavior: contain;
}
.about-viewer__body{
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 980px){
  body{ padding-top: 78px; }
  .topbar{
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(243,241,234,.96);
  }
  .topbar__inner{
    gap: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
    align-items: center;
  }
  .brand{
    min-width: 0;
    flex: 1 1 auto;
  }
  .brand__logo{
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }
  .brand__text b{
    font-size: 13px;
  }
  .brand__text span{
    font-size: 11px;
  }
  .actions{
    margin-left: auto;
    gap: 8px;
    justify-content: flex-end;
  }
  .actions .btn,
  .userchip__btn{
    min-height: 42px;
    padding: 10px 12px;
    font-size: 14px;
  }
  .nav{
    width: 100%;
    order: 3;
    padding: 10px;
    gap: 8px;
    border-radius: 20px;
    background: rgba(255,255,255,.92);
  }
  .nav.open{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .nav a{
    width: 100%;
    min-height: 46px;
    padding: 12px 10px;
    text-align: center;
    font-size: 15px;
  }
  .hero__cta .btn,
  .content-card__actions .btn,
  .materials-preview-modal__actions .btn,
  .auth-gate__actions .btn{
    min-height: 46px;
  }
  .portrait-hero{
    border-radius: 24px;
    padding: 12px;
  }
  .portrait-hero__grid{
    gap: 12px;
  }
  .portrait-hero__photo{
    min-height: 340px;
  }
  .portrait-hero__copy,
  .portrait-hero__reviews,
  .contact-spotlight,
  .section .card,
  .about-block,
  .content-card{
    border-radius: 20px;
  }
  .price-grid{
    display: grid;
    grid-template-columns: 1fr;
    overflow: visible;
    padding: 0;
  }
  .price-card{
    min-width: 0;
  }
  .price-card__cta{
    flex-wrap: wrap;
  }
  .price-card__cta .btn{
    width: 100%;
  }
  .social-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .social-link{
    min-height: 92px;
    padding: 14px;
  }
  .about-viewer__dialog{
    width: min(100vw - 12px, 1120px);
    margin: 6px auto;
    max-height: calc(100vh - 12px);
    border-radius: 20px;
  }
  .about-viewer__head{
    padding: 14px 58px 10px 14px;
  }
  .about-viewer__close{
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 640px){
  :root{
    --page-pad: 12px;
    --r: 16px;
    --r2: 22px;
  }
  body{ padding-top: 74px; }
  main.container{ padding-bottom: 22px; }
  .topbar__inner{
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
  }
  .actions{
    flex-wrap: nowrap;
  }
  .actions .btn--ghost,
  .actions .btn--primary{
    display: none;
  }
  .nav.open{
    grid-template-columns: 1fr 1fr;
  }
  .section{
    margin-top: 18px;
  }
  .section__head{
    gap: 10px;
    margin-bottom: 12px;
  }
  .section__title,
  .contact-card__title,
  .section .section__title{
    font-size: 22px;
    line-height: 1.15;
  }
  .section__subtitle,
  .contact-card__top .small,
  .small{
    font-size: 14px;
  }
  .portrait-hero__photo{
    min-height: 280px;
  }
  .portrait-hero__badge{
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: none;
    padding: 10px 12px;
  }
  .portrait-hero__copy h1{
    font-size: 28px;
    line-height: 1.08;
  }
  .hero__chips,
  .hero__cta{
    display: grid;
    grid-template-columns: 1fr;
  }
  .hero__cta .btn,
  .booking-side .btn,
  .content-card__actions .btn,
  .materials-preview-modal__actions .btn{
    width: 100%;
  }
  .pill{
    border-radius: 18px;
    padding: 12px 13px;
  }
  .price-card__head,
  .price-card__body,
  .price-card__cta,
  .block{
    padding: 14px;
  }
  .social-grid{
    grid-template-columns: 1fr;
  }
  .social-link{
    min-height: 0;
  }
  .content-card{
    padding: 14px;
  }
  .content-card__icon{
    width: 46px;
    height: 46px;
    border-radius: 14px;
  }
  .materials-workspace,
  .materials-workspace--admin,
  .booking-split,
  .dashboard-grid,
  .review-grid,
  .materials-admin-grid{
    grid-template-columns: 1fr !important;
  }
  .table-wrap{
    overflow-x: auto;
  }
  .about-viewer__dialog{
    width: calc(100vw - 8px);
    margin: 4px auto;
    max-height: calc(100vh - 8px);
    border-radius: 18px;
  }
  .about-viewer__head{
    padding: 12px 52px 10px 12px;
  }
  .about-viewer__title{
    font-size: 17px;
  }
  .about-viewer__body,
  .about-viewer.materials-modal .about-viewer__body,
  .about-viewer.materials-modal .about-viewer__body--pdf{
    padding: 0 10px 10px;
  }
  .about-viewer__image img,
  .about-viewer.materials-modal .pdf-preview__frame--about{
    max-height: 72vh;
    border-radius: 14px;
  }
  .about-doc-preview img{
    min-height: 200px;
    max-height: 240px;
  }
}

/* === v11 stable about modal + redesigned mobile header === */
html.modal-open,
body.modal-open{
  overflow: hidden;
}
body.modal-open{
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  top: calc(var(--scroll-lock-y, 0) * -1px);
  touch-action: none;
}
.about-viewer.materials-modal{
  place-items: center;
  align-items: center;
  padding: 12px;
  background: rgba(8,10,14,.72);
}
.about-viewer.materials-modal .about-viewer__dialog{
  margin: 0;
}
.about-viewer__close{
  z-index: 2;
}
.about-viewer__image{
  min-height: 0;
}
.about-viewer__image img,
.about-viewer.materials-modal .pdf-preview__frame--about{
  max-width: 100%;
  max-height: min(80vh, 960px);
}
.about-rich,
.about-rich p,
.section__subtitle,
.content-card p,
.price-card__body,
.review-card,
.contact-card,
.booking-card,
.file,
.userchip__name,
.nav a{
  overflow-wrap: anywhere;
  word-break: normal;
}

@media (max-width: 980px){
  body{ padding-top: 86px; }
  .topbar{
    position: sticky;
    top: 0;
    background: rgba(247,244,236,.98);
    border-bottom: 1px solid rgba(203,191,152,.7);
    box-shadow: 0 10px 24px rgba(45,40,31,.08);
  }
  .topbar__inner{
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    grid-template-areas:
      'brand actions'
      'nav nav';
    gap: 10px;
    align-items: center;
    padding: 12px 0;
  }
  .topbar__inner > .brand{ grid-area: brand; min-width: 0; }
  .topbar__inner > .actions{ grid-area: actions; margin-left: 0; min-width: 0; }
  .topbar__inner > .nav{ grid-area: nav; }
  .brand{
    min-width: 0;
    gap: 10px;
    align-items: center;
  }
  .brand__logo{
    width: 40px;
    height: 40px;
    border-radius: 14px;
    flex: 0 0 auto;
  }
  .brand__text{
    min-width: 0;
  }
  .brand__text b{
    font-size: 15px;
    line-height: 1.15;
  }
  .brand__text span{
    font-size: 12px;
    line-height: 1.2;
  }
  .actions{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: nowrap;
  }
  .nav-toggle{
    display: inline-flex;
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: 14px;
    font-size: 20px;
    box-shadow: none;
    background: #fff;
  }
  .actions > .btn--ghost:not(.nav-toggle),
  .actions > .btn--primary{
    display: none;
  }
  .userchip{
    width: auto;
    min-width: 0;
  }
  .userchip__btn{
    width: auto;
    min-width: 0;
    max-width: min(56vw, 240px);
    min-height: 44px;
    padding: 8px 12px;
    border-radius: 14px;
    background: #fff;
    box-shadow: none;
  }
  .userchip__avatar{
    width: 32px;
    height: 32px;
    font-size: 13px;
  }
  .userchip__name{
    max-width: 120px;
    font-size: 13px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .nav{
    display: none;
    width: 100%;
    order: initial;
    padding: 10px;
    gap: 8px;
    border-radius: 20px;
    border: 1px solid rgba(203,191,152,.85);
    background: #fff;
    box-shadow: 0 12px 24px rgba(45,40,31,.08);
    overflow: visible;
  }
  .nav.open{
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .nav a{
    min-width: 0;
    min-height: 46px;
    padding: 12px 10px;
    border-radius: 14px;
    border: 1px solid rgba(203,191,152,.8);
    background: rgba(248,241,220,.55);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
  }
  .nav a[aria-current="page"]{
    background: linear-gradient(135deg, rgba(244,221,160,.9), rgba(255,246,214,.95));
    color: var(--dark);
    box-shadow: inset 0 0 0 1px rgba(45,40,31,.08);
  }
  .section,
  .hero,
  .portrait-hero,
  .card,
  .content-card,
  .about-block,
  .price-card,
  .contact-card,
  .review-card,
  .materials-tree,
  .materials-preview-modal,
  .materials-sidebar,
  .materials-list{
    border-radius: 20px;
  }
  .block,
  .content-card,
  .price-card__head,
  .price-card__body,
  .price-card__cta,
  .contact-card,
  .review-card,
  .about-block,
  .materials-sidebar,
  .materials-list{
    padding: 16px;
  }
  .section__title,
  .section .section__title,
  .contact-card__title{
    font-size: 24px;
    line-height: 1.15;
  }
  .section__subtitle,
  .small,
  .about-rich,
  .about-rich p,
  .content-card p,
  .contact-card p,
  .price-card li,
  .review-card p{
    font-size: 15px;
    line-height: 1.5;
  }
  .about-block__title,
  .about-block__title--xl,
  .content-card__title,
  .price-card__title{
    line-height: 1.2;
  }
  .hero__cta,
  .content-card__actions,
  .materials-preview-modal__actions,
  .auth-gate__actions,
  .price-card__cta{
    gap: 10px;
  }
  .hero__cta .btn,
  .content-card__actions .btn,
  .materials-preview-modal__actions .btn,
  .auth-gate__actions .btn,
  .price-card__cta .btn,
  .booking-side .btn{
    width: 100%;
    min-height: 46px;
  }
  .about-split,
  .booking-split,
  .dashboard-grid,
  .review-grid,
  .materials-admin-grid,
  .materials-workspace,
  .materials-workspace--admin{
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px){
  :root{
    --page-pad: 12px;
    --r: 16px;
    --r2: 20px;
  }
  body{ padding-top: 82px; }
  .topbar__inner{
    gap: 8px;
  }
  .brand__text b{
    font-size: 14px;
  }
  .brand__text span{
    font-size: 11px;
  }
  .userchip__btn{
    max-width: 148px;
    padding: 6px 10px;
  }
  .userchip__name{
    max-width: 78px;
    font-size: 12px;
  }
  .nav.open{
    grid-template-columns: 1fr 1fr;
  }
  .nav a{
    min-height: 44px;
    padding: 10px 8px;
    font-size: 13px;
  }
  .portrait-hero__copy h1,
  .hero h1{
    font-size: 28px;
    line-height: 1.08;
  }
  .portrait-hero__photo{
    min-height: 260px;
  }
  .about-doc-preview img{
    min-height: 190px;
    max-height: 230px;
  }
  .about-viewer.materials-modal{
    padding: 6px;
  }
  .about-viewer__dialog{
    width: calc(100vw - 12px);
    max-height: calc(100vh - 12px);
    border-radius: 18px;
  }
  .about-viewer__head{
    padding: 12px 50px 10px 12px;
  }
  .about-viewer__title{
    font-size: 17px;
    line-height: 1.2;
  }
  .about-viewer__body,
  .about-viewer.materials-modal .about-viewer__body,
  .about-viewer.materials-modal .about-viewer__body--pdf{
    padding: 0 10px 10px;
  }
  .about-viewer__image img,
  .about-viewer.materials-modal .pdf-preview__frame--about{
    max-height: 70vh;
    border-radius: 14px;
  }
}


/* === v12 modal stability + modern mobile navigation === */
html.modal-open,
body.modal-open{
  overflow: hidden !important;
  overscroll-behavior: none;
}
body.modal-open{
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: auto !important;
  touch-action: auto !important;
}
#aboutMediaModal.about-viewer.materials-modal{
  position: fixed !important;
  inset: 0 !important;
  z-index: 1500;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(10px, 2vw, 18px);
  background: rgba(10, 12, 18, .78);
}
#aboutMediaModal.about-viewer.materials-modal.is-open{
  display: flex !important;
}
#aboutMediaModal .about-viewer__dialog{
  width: min(1120px, calc(100vw - 20px));
  max-height: calc(100vh - 20px);
  margin: 0 !important;
}
#aboutMediaModal .about-viewer__body{
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
#aboutMediaModal .about-viewer__image{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
#aboutMediaModal .about-viewer__image img,
#aboutMediaModal .pdf-preview__frame--about{
  display: block;
  max-width: 100%;
  max-height: min(78vh, 980px);
}
#aboutMediaModal .about-viewer__dialog--pdf{
  width: min(1380px, calc(100vw - 20px));
}

@media (max-width: 980px){
  body{
    padding-top: 84px;
  }
  .topbar{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1200;
    background: rgba(250,248,242,.98);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(203,191,152,.72);
    box-shadow: 0 10px 28px rgba(24, 26, 32, .08);
  }
  .topbar__inner{
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'brand actions';
    min-height: 84px;
    gap: 10px;
    padding: 10px var(--page-pad);
    align-items: center;
  }
  .topbar__inner > .nav{
    grid-area: unset;
  }
  .brand{
    min-width: 0;
    gap: 10px;
  }
  .brand__logo{
    width: 42px;
    height: 42px;
    border-radius: 14px;
  }
  .brand__text b{
    font-size: 14px;
    line-height: 1.15;
  }
  .brand__text span{
    font-size: 11px;
    line-height: 1.2;
  }
  .actions{
    gap: 8px;
    margin-left: auto;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
  }
  .actions > .btn--ghost:not(.nav-toggle),
  .actions > .btn--primary{
    display: none !important;
  }
  .userchip{
    position: relative;
    order: 1;
    flex: 0 1 auto;
    min-width: 0;
  }
  .userchip__btn{
    min-height: 44px;
    max-width: min(48vw, 220px);
    padding: 6px 10px;
    border-radius: 14px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 6px 18px rgba(24, 26, 32, .08);
  }
  .userchip__avatar{
    width: 30px;
    height: 30px;
  }
  .userchip__name{
    max-width: 92px;
    font-size: 12px;
  }
  .userchip__panel{
    position: fixed;
    top: 88px;
    right: 12px;
    left: auto;
    width: min(320px, calc(100vw - 24px));
    max-height: calc(100vh - 104px);
    overflow: auto;
    border-radius: 18px;
    z-index: 1400;
    background: rgba(255,255,255,.98);
  }
  .nav-toggle{
    order: 2;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: 14px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 6px 18px rgba(24, 26, 32, .08);
    font-size: 20px;
    flex: 0 0 44px;
  }
  .nav{
    position: fixed;
    top: 88px;
    left: 12px;
    right: 12px;
    display: none;
    padding: 12px;
    border-radius: 20px;
    border: 1px solid rgba(203,191,152,.82);
    background: rgba(255,255,255,.98);
    box-shadow: 0 18px 40px rgba(24, 26, 32, .12);
    max-height: calc(100vh - 104px);
    overflow: auto;
    gap: 10px;
    z-index: 1350;
  }
  .nav.open{
    display: grid !important;
    grid-template-columns: 1fr;
  }
  .nav a{
    min-height: 48px;
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(203,191,152,.72);
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,244,236,.98));
    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;
    white-space: normal;
    min-width: 0;
  }
  .nav a::after{
    display: none;
  }
  .nav a[aria-current="page"]{
    background: linear-gradient(135deg, rgba(244,221,160,.92), rgba(255,248,226,.98));
    color: #2a2418;
    box-shadow: inset 0 0 0 1px rgba(45,40,31,.08);
  }
  .section,
  .hero,
  .portrait-hero,
  .card,
  .content-card,
  .about-block,
  .price-card,
  .contact-card,
  .review-card,
  .materials-tree,
  .materials-preview-modal,
  .materials-sidebar,
  .materials-list,
  .booking-card{
    border-radius: 20px;
  }
  .block,
  .content-card,
  .about-block,
  .price-card__head,
  .price-card__body,
  .price-card__cta,
  .review-card,
  .contact-card,
  .booking-card,
  .materials-sidebar,
  .materials-list{
    padding: 16px;
  }
  .section__title,
  .section .section__title,
  .about-block__title,
  .about-block__title--xl,
  .content-card__title,
  .price-card__title,
  .contact-card__title{
    font-size: clamp(22px, 5.5vw, 28px);
    line-height: 1.15;
  }
  .section__subtitle,
  .small,
  .about-rich,
  .about-rich p,
  .content-card p,
  .contact-card p,
  .price-card li,
  .review-card p,
  .booking-card p,
  .file,
  .content-card__body span{
    font-size: 15px;
    line-height: 1.55;
  }
  .content-card__body b{
    font-size: 17px;
    line-height: 1.3;
  }
  .hero__cta,
  .content-card__actions,
  .materials-preview-modal__actions,
  .auth-gate__actions,
  .price-card__cta{
    gap: 10px;
  }
  .hero__cta .btn,
  .content-card__actions .btn,
  .materials-preview-modal__actions .btn,
  .auth-gate__actions .btn,
  .price-card__cta .btn,
  .booking-side .btn{
    width: 100%;
    min-height: 46px;
  }
  .about-split,
  .booking-split,
  .dashboard-grid,
  .review-grid,
  .materials-admin-grid,
  .materials-workspace,
  .materials-workspace--admin,
  .portrait-hero__grid{
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px){
  :root{
    --page-pad: 12px;
    --r: 16px;
    --r2: 20px;
  }
  body{ padding-top: 80px; }
  .topbar__inner{ min-height: 80px; }
  .userchip__btn{ max-width: 138px; }
  .userchip__name{ max-width: 68px; }
  .nav,
  .userchip__panel{
    top: 82px;
    max-height: calc(100vh - 94px);
  }
  #aboutMediaModal.about-viewer.materials-modal{
    padding: 6px;
  }
  #aboutMediaModal .about-viewer__dialog,
  #aboutMediaModal .about-viewer__dialog--pdf{
    width: calc(100vw - 12px);
    max-height: calc(100vh - 12px);
    border-radius: 18px;
  }
  #aboutMediaModal .about-viewer__head{
    padding: 12px 52px 10px 12px;
  }
  #aboutMediaModal .about-viewer__title{
    font-size: 17px;
    line-height: 1.2;
  }
  #aboutMediaModal .about-viewer__body,
  #aboutMediaModal .about-viewer__body--pdf{
    padding: 0 10px 10px;
  }
  #aboutMediaModal .about-viewer__image img,
  #aboutMediaModal .pdf-preview__frame--about{
    max-height: 70vh;
    border-radius: 14px;
  }
}

/* === v13 mobile navigation + booking page fixes === */
.nav__mobile-auth{
  display:none;
}

@media (max-width: 900px){
  .nav{
    align-items: stretch;
  }
  .nav__mobile-auth{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:48px;
    padding:12px 14px;
    border-radius:16px;
    border:1px solid rgba(203,191,152,.95);
    background: rgba(255,255,255,.96);
    color: var(--dark);
    font-weight:900;
    font-size:15px;
    text-decoration:none;
    box-sizing:border-box;
  }
  .nav__mobile-auth--primary{
    background: linear-gradient(135deg, var(--gold), #ffd768);
    border-color: rgba(45,40,31,.6);
  }
  .nav__mobile-auth--danger{
    background: rgba(80,22,22,.08);
    color:#6f1f1f;
    border-color: rgba(140,49,49,.22);
    font: inherit;
    cursor:pointer;
  }

  .booking-split{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .booking-form-card,
  .booking-side,
  .booking-side .card,
  .booking-form-card .card,
  .contact-card{
    min-width:0;
  }
  .booking-form-card .split,
  form#bookForm .split{
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  .booking-form-card .field,
  .booking-form-card .field label,
  .booking-form-card .small,
  .booking-side .small,
  .contact-card__value,
  .contact-card__value b,
  .contact-card__value a,
  .contact-card__title,
  .section__subtitle{
    overflow-wrap:anywhere;
    word-break:break-word;
  }
  .booking-split .block{
    padding:16px;
  }
  .booking-split .btn,
  .booking-split .input,
  .booking-split .select,
  .booking-split .textarea{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
  }
  #slots.grid-3{
    grid-template-columns: 1fr;
  }
  .table-wrap{
    overflow-x:auto;
  }
}

@media (max-width: 640px){
  .topbar__inner{
    grid-template-columns: minmax(0,1fr) auto;
    gap:10px;
    align-items:center;
  }
  .brand{
    min-width:0;
    max-width:100%;
  }
  .brand__text{ min-width:0; }
  .brand__text b,
  .brand__text span{
    white-space:normal;
  }
  .actions{
    justify-self:end;
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
  }
  .actions .btn--primary,
  .actions > .btn--ghost[data-auth-open="login"],
  .actions > .btn--ghost[data-auth-open="register"]{
    display:none;
  }
  .nav{
    padding:14px;
    gap:10px;
  }
  .nav a,
  .nav__mobile-auth{
    min-height:46px;
    font-size:15px;
    line-height:1.2;
    padding:12px 14px;
  }
  .userchip__btn{
    min-height:44px;
  }
}

/* === v16 desktop nav cleanup === */
@media (min-width: 901px){
  .nav .nav__mobile-auth,
  .nav .nav__mobile-auth--primary,
  .nav .nav__mobile-auth--danger,
  .nav button.nav__mobile-auth{
    display:none !important;
  }
}