: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)}
.brand__phone{display:none; font-size:12px; line-height:1.2; color:var(--muted); text-decoration:none;}
.brand__phone:hover{color:var(--dark);}

.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__content{display:inline-block; min-width:0;}
.pill__content .math-inline{display:inline; vertical-align:baseline;}
.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-flex; align-items:baseline; vertical-align:middle; margin:0; }
.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; line-height:1.05; }
.math.frac .den{ padding:2px 4px 0; font-size:.95em; line-height:1.05; }

.math-var{ font-style:italic; }

.math.sqrt{ display:inline-flex; align-items:flex-start; line-height:1; margin:0 2px; }
.math.sqrt .rad{ font-weight:700; font-size:1.28em; line-height:.86; margin-right:-1px; transform:translateY(1px) scaleY(1.08); transform-origin:bottom left; }
.math.sqrt .over{ display:inline-block; border-top:1.6px solid rgba(45,40,31,.72); padding:.12em .22em 0 .14em; margin-top:.05em; }

.math.stretchy{ display:inline-flex; align-items:stretch; vertical-align:middle; margin:0 1px; }
.math.stretchy .body{ display:inline-flex; align-items:center; }
.math.stretchy .delim{ display:inline-flex; align-items:center; justify-content:center; line-height:1; padding:0 .03em; transform-origin:center; }
.math.stretchy.is-tall .delim{ font-size:1.45em; transform:scaleY(1.55); }

nobr{ white-space:nowrap; }

/* 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, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 1200px){ .social-grid{grid-template-columns: repeat(3, minmax(0, 1fr));} }
@media (max-width: 650px){ .social-grid{grid-template-columns: repeat(2, minmax(0, 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);
}

.contact-spotlight .social-grid{
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (max-width: 1200px){
  .contact-spotlight .social-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 650px){
  .contact-spotlight .social-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@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;}
}
@media (max-width: 900px){
  .portrait-hero__copy > h1,
  .portrait-hero__copy > .pill--long,
  .portrait-hero__copy > .hero__chips,
  .portrait-hero__copy > .hero__cta,
  .portrait-hero__copy > .hr,
  .portrait-hero__copy > .notice{
    margin-left: 0;
    margin-right: 0;
  }
}

.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: url("/assets/hero-1.jpg") center/cover no-repeat;
  background-image: -webkit-image-set(
    url("/assets/hero-1.webp") type("image/webp") 1x,
    url("/assets/hero-1.jpg") type("image/jpeg") 1x
  );
  background-image: image-set(
    url("/assets/hero-1.webp") type("image/webp") 1x,
    url("/assets/hero-1.jpg") type("image/jpeg") 1x
  );
}
.portrait-hero__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  z-index:0;
}
.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);
}

.hero-intro-pill{
  align-items: center;
  flex-wrap: wrap;
  row-gap: 4px;
}
.hero-intro-pill strong,
.hero-intro-pill small{
  display: inline;
}
.portrait-hero__copy > h1,
.portrait-hero__copy > .pill--long,
.portrait-hero__copy > .hero__chips,
.portrait-hero__copy > .hero__cta,
.portrait-hero__copy > .hr,
.portrait-hero__copy > .notice{
  margin-left: 14px;
  margin-right: 14px;
}

.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; } }

.materials-panel--page-editor{ grid-column: 1 / -1; }
.materials-panel--page-editor .latexbox{ width:100%; }
.materials-panel--page-editor .latexbox__area{ min-height: 560px; width:100%; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
.materials-panel--page-editor .cms-actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

.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,
  .brand__phone{
    white-space:normal;
  }
  .brand__phone{display:block;}
  .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;
  }
}


.topbar__phone{display:none !important; align-items:center; justify-content:center; padding:10px 14px; border-radius:999px; border:1px solid rgba(203,191,152,.95); background:rgba(255,255,255,.7); font-weight:800;}
.price-carousel{position:relative; display:flex; align-items:center; gap:14px; isolation:isolate;}
.carousel__btn{position:relative; z-index:3; flex:0 0 auto; width:54px; height:54px; padding:0; border-radius:999px; border:1px solid rgba(195,169,92,.72); background:linear-gradient(180deg,#fffdf7,#f1e6bf); color:#3b3429; box-shadow:0 12px 28px rgba(59,52,41,.14), inset 0 1px 0 rgba(255,255,255,.9); cursor:pointer; font-size:0; display:flex; align-items:center; justify-content:center; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;}
.carousel__btn::before{content:""; width:12px; height:12px; border-top:2.5px solid currentColor; border-right:2.5px solid currentColor; display:block; transform-origin:center center; margin:0 auto;}
.carousel__btn--left::before{transform:rotate(-135deg);}
.carousel__btn--right::before{transform:rotate(45deg);}
.carousel__btn:hover{transform:translateY(-1px) scale(1.03); box-shadow:0 16px 34px rgba(59,52,41,.18), inset 0 1px 0 rgba(255,255,255,.95); border-color:rgba(195,169,92,.96);}
.carousel__btn:active{transform:translateY(0) scale(.98);}
.price-grid{display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x proximity; scroll-behavior:smooth; scrollbar-width:thin; padding:2px 18px 12px; -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);}
.price-grid .price-card{min-width:min(320px, 84vw); scroll-snap-align:start; border-top-right-radius:28px; border-bottom-right-radius:28px;}
@media (min-width:1100px){ .price-grid .price-card{min-width:360px;} }
.about-block--dark{background:linear-gradient(180deg, #424242, #353535); color:#fff;}
.notice-overlay{position:fixed; inset:0; background:rgba(24,24,24,.46); display:grid; place-items:center; z-index:120; padding:18px;}
.notice-modal{max-width:460px; width:min(100%,460px); background:#fff; border-radius:24px; padding:24px; box-shadow:0 20px 60px rgba(0,0,0,.25); text-align:center; position:relative;}
.notice-modal__close{position:absolute; right:14px; top:14px; border:0; background:transparent; font-size:24px; cursor:pointer;}
.notice-modal__icon{width:64px; height:64px; border-radius:50%; display:grid; place-items:center; margin:0 auto 12px; font-size:30px; background:rgba(226,183,62,.18);}
.notice-modal--booking{max-width:520px; width:min(100%,520px); padding:30px 28px 26px; border:1px solid rgba(226,183,62,.35); box-shadow:0 28px 80px rgba(0,0,0,.28);}
.notice-modal--booking h3{margin:0 0 10px; font-size:32px; line-height:1.1; color:var(--dark);}
.notice-modal--booking p{margin:0; font-size:17px; line-height:1.55; color:#3f3a2f;}
.notice-modal__actions{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:18px;}
.notice-modal__actions .btn{min-width:210px;}
@media (max-width: 640px){ .notice-modal--booking h3{font-size:26px;} .notice-modal__actions .btn{width:100%; min-width:0;} }
.badge--ok{background:rgba(64,170,87,.12); border-color:rgba(64,170,87,.36);}
.profile-form{display:grid; gap:12px;}
@media (max-width:980px){
  .topbar__inner{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px;}
  .topbar__phone{display:none !important;}
  .actions{order:1; margin-left:auto;}
  .brand{min-width:0; align-items:flex-start;}
  .brand__text span,
  .brand__phone{font-size:11px;}
  .brand__phone{display:block;}
  .nav{position:absolute; left:12px; right:12px; top:100%; background:rgba(255,255,255,.96); padding:14px; border-radius:22px; box-shadow:var(--shadow-2); display:none; flex-direction:column; gap:10px; max-height:70vh; overflow:auto;}
  .nav.open{display:flex;}
  .nav a,.nav button{width:100%; text-align:left; justify-content:flex-start;}
  .portrait-hero__grid{grid-template-columns:1fr;}
  .portrait-hero__photo{min-height:360px;}
  .portrait-hero__img{object-fit:contain; object-position:center top; background:linear-gradient(180deg,#efe7d1,#f8f4ea);}
  .price-carousel{display:block;}
    .carousel__btn{display:none;}
  .price-grid{display:grid; grid-template-columns:1fr; gap:14px; overflow:visible; padding:2px 0 0; -webkit-mask-image:none; mask-image:none;}
  .price-grid .price-card{min-width:0; width:100%;}
  .section__head{padding:14px;}
  .card.block, .about-block, .contact-spotlight{border-radius:22px;}
  .social-grid{grid-template-columns:1fr 1fr;}
}

/* === v26 hero/reviews/about alignment polish === */
.portrait-hero__copy > .pill--long,
.portrait-hero__copy > .hero__chips,
.portrait-hero__copy > .hero__cta,
.portrait-hero__copy > .hr,
.portrait-hero__copy > .notice{
  margin-left: 0;
  margin-right: 0;
}

.portrait-hero__copy > .hero__cta .btn{
  padding-left: 14px;
  padding-right: 14px;
}

.portrait-hero__reviews-head{
  align-items: center;
  margin-bottom: 12px;
}

.portrait-hero__reviews-head > div{
  padding-left: 14px;
  margin-top: -2px;
}

.portrait-hero__reviews-head > div b,
.portrait-hero__reviews-head > div .small{
  display: block;
}

.about-block--dark{
  background: linear-gradient(135deg, rgba(232,235,239,.98), rgba(211,217,224,.96));
  border-color: rgba(146,154,164,.30);
  color: #1f2328;
}
.about-block--dark .hr{ background: rgba(84,92,101,.18); }
.about-block--dark .small,
.about-block--dark .about-rich,
.about-block--dark .about-split__meta{ color: rgba(31,35,40,.82); }
.about-block--dark b,
.about-block--dark .about-block__title{ color: #111418; }
.about-block--dark .about-eyebrow{
  color: #1f2328;
  background: rgba(255,255,255,.46);
  border-color: rgba(128,136,145,.3);
}

.about-split__text,
.about-split__media,
.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(239,242,246,.99), rgba(220,226,233,.97));
  border: 1px solid rgba(146,154,164,.24);
  color: #1f2328;
  box-shadow: 0 18px 40px rgba(70,78,88,.08);
}

.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(31,35,40,.94);
}

.about-split__text .hr,
.about-split__media .hr{ background: rgba(84,92,101,.16); }

.about-split__text .about-eyebrow,
.about-split__media .about-eyebrow{
  color: #1f2328;
  background: rgba(255,255,255,.52);
  border-color: rgba(128,136,145,.28);
}


.material-page-shell{background:transparent;border:none;box-shadow:none;padding:0}
.material-page-shell .section__title[hidden],
.material-page-shell .section__subtitle[hidden],
.material-page-shell #pageMetaDivider[hidden]{display:none}
.content-page{display:block;line-height:1.6}
.content-page img{max-width:100%;height:auto;border-radius:16px}
.content-page table{width:100%;border-collapse:collapse}
.content-page td,.content-page th{border:1px solid rgba(0,0,0,.12);padding:8px}
.content-page pre{white-space:pre-wrap;background:#f4f4f4;padding:12px;border-radius:12px}
.content-page .material-article{max-width:860px;margin:0 auto;padding:12px clamp(0px,1.5vw,8px) 32px;color:#111;font-family:"Times New Roman", Georgia, serif;font-size:18px;line-height:1.5;background:transparent;overflow-wrap:anywhere}
.content-page .material-article h1,.content-page .material-article h2,.content-page .material-article h3{text-align:center;line-height:1.22;font-weight:700;margin-left:auto;margin-right:auto}
.content-page .material-article h1{font-size:clamp(30px,4.4vw,34px);margin:0 0 20px}
.content-page .material-article h2{font-size:clamp(24px,3.8vw,28px);margin:28px 0 14px}
.content-page .material-article h3{font-size:clamp(21px,3.2vw,24px);margin:20px 0 10px}
.content-page .material-article p,.content-page .material-article ul,.content-page .material-article ol{margin:8px 0}
.content-page .material-article li{margin:4px 0}
.content-page .material-article ul,.content-page .material-article ol{padding-left:24px}
.content-page .material-center{text-align:center !important;text-indent:0 !important}
.content-page .formula-block{text-align:center;margin:10px 0;font-size:1.08em;line-height:1.25}
.content-page .formula-block + .formula-block{margin-top:4px}
.content-page .math-inline{display:inline;vertical-align:baseline;line-height:1;margin:0;padding:0;font-size:1em}
.content-page .theory-box,.content-page .note-box,.content-page .solution-box,.content-page .tasks-box{border:1px solid rgba(0,0,0,.12);border-radius:14px;padding:18px 22px;background:#fafafa;margin:20px 0}
.content-page .divider{width:140px;height:1px;background:#ccc;margin:28px auto}
.content-page .subtitle{text-align:center !important;text-indent:0 !important;font-style:italic;color:#555;margin-top:-10px;margin-bottom:24px}
.content-page mjx-container{max-width:100%;overflow-x:auto;overflow-y:hidden;padding:.12em 0;color:inherit !important}
.content-page mjx-container[display="true"]{margin:1em 0 !important;text-align:center}
.content-page mjx-container[jax="SVG"]{font-size:1.08em}
.content-page mjx-container svg{max-width:100%;height:auto;vertical-align:middle}
.content-page mjx-container[display="true"] svg{margin:0 auto}

.math-rich{color:inherit;line-height:1.5;overflow-wrap:anywhere}
.math-rich--block{display:block}
.math-rich--inline{display:inline;vertical-align:baseline}
.math-rich--inline mjx-container{display:inline-block !important;vertical-align:middle;margin:0 .04em !important}
.math-rich--block > :first-child{margin-top:0}
.math-rich--block > :last-child{margin-bottom:0}
.math-rich mjx-container{max-width:100%;overflow-x:auto;overflow-y:hidden;padding:.14em 0;color:inherit !important}
.math-rich mjx-container[display="true"]{margin:.85em 0 !important;text-align:center}
.math-rich mjx-container[jax="SVG"]{font-size:1.08em}
.math-rich mjx-container svg{max-width:100%;height:auto;vertical-align:middle}
.test-question-prompt{font-weight:700;margin-top:6px}
.test-solution-rich{margin-top:10px;line-height:1.65}
.test-run-result-shell .test-solution-rich{font-size:17px}
@media (min-width: 1024px){
  .test-run-result-shell .test-solution-rich{font-size:18px}
}
@media (max-width: 640px){
  .content-page .material-article{font-size:17px;padding:8px 0 22px}
  .math-rich mjx-container[jax="SVG"],.content-page mjx-container[jax="SVG"]{font-size:1.02em}
}


.test-run-layout{display:flex;flex-direction:column;gap:18px}
.test-run-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.test-run-timer{display:flex;flex-direction:column;align-items:flex-end;gap:4px;padding:12px 16px;border:1px solid rgba(203,191,152,.9);border-radius:18px;background:rgba(255,255,255,.72);min-width:140px}
.test-run-timer b{font-size:22px;line-height:1}
.test-run-head{display:flex;flex-direction:column;gap:6px}
.test-run-actions{display:flex;justify-content:flex-end;position:sticky;bottom:16px;padding-top:8px}
.test-run-result-shell{display:flex;flex-direction:column;gap:14px}
.test-run-result-head{display:flex;justify-content:space-between;align-items:stretch;gap:16px;flex-wrap:wrap;margin-bottom:6px;padding:18px;border-radius:22px;background:linear-gradient(135deg, rgba(255,188,70,.22), rgba(255,255,255,.92));border:1px solid rgba(255,188,70,.5);box-shadow:0 16px 34px rgba(32,24,8,.08)}
.test-run-result-summary{display:flex;flex-direction:column;gap:4px}
.test-run-result-title{font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#8a6112}
.test-run-result-score{font-size:clamp(38px,6vw,54px);line-height:1;font-weight:800;color:#24190a}
.test-run-result-score span{font-size:.54em;font-weight:700;color:#6c5734}
.test-run-result-score-caption{font-size:15px;color:#6c5734}
.test-run-result-side{display:flex;flex-direction:column;gap:10px;align-items:flex-end;justify-content:center}
.test-run-result-badge{padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.9);border:1px solid rgba(203,191,152,.95);font-size:15px;color:#2b220f}
.test-issue-cta{margin-top:6px}
.test-issue-wrap{padding:16px 18px;border:1px dashed rgba(203,191,152,.95);border-radius:18px;background:rgba(255,255,255,.58)}
.test-issue-actions{display:flex;justify-content:flex-end}
.test-issue-admin-card + .test-issue-admin-card{margin-top:12px}
.test-issue-admin-card__head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.test-issue-admin-card__meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.test-issue-admin-card__comment{margin-top:12px;white-space:pre-wrap;line-height:1.55}
@media (max-width: 720px){
  .test-run-result-head{padding:16px}
  .test-run-result-side{align-items:flex-start;width:100%}
  .test-issue-actions .btn{width:100%}

  .test-run-toolbar{align-items:stretch}
  .test-run-timer{align-items:flex-start;width:100%}
  .test-run-actions{justify-content:stretch}
  .test-run-actions .btn{width:100%}
}


/* === Reviews gallery === */
.review-card{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.review-gallery{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:2px;
}
.review-gallery--compact{
  margin-top:12px;
}
.review-gallery__item{
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  display:block;
  position:relative;
  overflow:hidden;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.26);
  background:rgba(15,23,42,.04);
  box-shadow:0 12px 34px rgba(15,23,42,.08);
  width:136px;
  min-width:136px;
  height:136px;
  padding:0;
}
.review-gallery--compact .review-gallery__item{
  width:112px;
  min-width:112px;
  height:112px;
}
.review-gallery__item::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(15,23,42,0) 30%, rgba(15,23,42,.14) 100%);
  opacity:.82;
  transition:opacity .24s ease;
  pointer-events:none;
}
.review-gallery__item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .28s ease, filter .28s ease;
}
.review-gallery__item:hover img,
.review-gallery__item:focus-visible img{
  transform:scale(1.04);
  filter:saturate(1.04);
}
.review-gallery__item:hover::after,
.review-gallery__item:focus-visible::after{
  opacity:1;
}
.review-gallery__item:focus-visible{
  outline:2px solid rgba(99,102,241,.5);
  outline-offset:2px;
}
.review-card .review__text{
  margin-bottom:0;
}
.review-lightbox{
  position:fixed;
  inset:0;
  z-index:1300;
  display:none;
  align-items:center;
  justify-content:center;
  padding:28px;
  background:rgba(2,6,23,.76);
  backdrop-filter:blur(8px);
}
.review-lightbox.is-open{
  display:flex;
}
.review-lightbox__dialog{
  width:min(980px, 100%);
  max-height:min(90vh, 900px);
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:18px;
  border-radius:28px;
  padding:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96));
  box-shadow:0 32px 80px rgba(15,23,42,.32);
}
.review-lightbox__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.review-lightbox__title{
  margin:0;
  font-size:18px;
  font-weight:800;
}
.review-lightbox__counter{
  color:var(--muted);
  font-size:13px;
  font-weight:700;
}
.review-lightbox__close{
  flex:0 0 auto;
}
.review-lightbox__stage{
  min-height:0;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
}
.review-lightbox__nav{
  width:48px;
  height:48px;
  border-radius:999px;
  padding:0;
  font-size:24px;
}
.review-lightbox__figure{
  margin:0;
  min-height:0;
  border-radius:24px;
  overflow:hidden;
  background:rgba(226,232,240,.75);
  display:flex;
  align-items:center;
  justify-content:center;
}
.review-lightbox__img{
  width:100%;
  max-height:min(68vh, 720px);
  object-fit:contain;
  display:block;
  background:#fff;
}
.review-lightbox__thumbs{
  display:flex;
  gap:10px;
  overflow:auto;
  padding-bottom:2px;
}
.review-lightbox__thumb{
  flex:0 0 auto;
  width:72px;
  height:72px;
  border-radius:16px;
  overflow:hidden;
  padding:0;
  border:2px solid transparent;
  background:#fff;
}
.review-lightbox__thumb.is-active{
  border-color:rgba(99,102,241,.72);
  box-shadow:0 10px 24px rgba(99,102,241,.18);
}
.review-lightbox__thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
@media (max-width: 700px){
  .review-gallery__item{
    width:104px;
    min-width:104px;
    height:104px;
  }
  .review-gallery--compact .review-gallery__item{
    width:92px;
    min-width:92px;
    height:92px;
  }
  .review-lightbox{
    padding:12px;
  }
  .review-lightbox__dialog{
    border-radius:22px;
    padding:14px;
    gap:12px;
  }
  .review-lightbox__stage{
    grid-template-columns:1fr;
  }
  .review-lightbox__figure{
    order:1;
  }
  .review-lightbox__nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:2;
    background:rgba(255,255,255,.94);
  }
  .review-lightbox__stage{ position:relative; }
  .review-lightbox__nav--prev{ left:8px; }
  .review-lightbox__nav--next{ right:8px; }
  .review-lightbox__img{
    max-height:60vh;
  }
  .review-lightbox__thumb{
    width:60px;
    height:60px;
  }
}

.hw-admin-card,
.hw-user-card{
  padding: 16px;
  border: 1px solid rgba(203,191,152,.9);
  border-radius: 22px;
  background: rgba(255,255,255,.88);
  box-shadow: var(--shadow);
}
.hw-admin-card + .hw-admin-card,
.hw-user-card + .hw-user-card{ margin-top: 12px; }
.hw-admin-card__head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  flex-wrap:wrap;
}
.hw-meta-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap:10px;
}
.hw-meta-grid > div{
  padding:10px 12px;
  border-radius: 16px;
  background: rgba(246,239,219,.7);
  border: 1px solid rgba(203,191,152,.55);
}
.hw-meta-grid .small{ display:block; margin-bottom:4px; }
.hw-panel{
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(203,191,152,.6);
}
.hw-prewrap{
  margin-top:6px;
  white-space:pre-wrap;
  line-height:1.6;
}
.hw-submit-form{ margin-top: 8px; }

.badge--warn{background:rgba(226,183,62,.14); border-color:rgba(226,183,62,.45);}
.badge--clickable{cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background .18s ease;}
.badge--clickable.is-active{background:rgba(226,183,62,.22); box-shadow:0 8px 18px rgba(45,40,31,.08); transform:translateY(-1px);}

.student-row{
  flex-direction:column;
  align-items:stretch;
  cursor:default;
}
.student-row__main{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:0;
  background:transparent;
  padding:0;
  text-align:left;
  cursor:pointer;
}
.student-row__folder{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  margin-top:10px;
}
.hw-folder-panel{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.hw-folder-create{
  display:grid;
  grid-template-columns:minmax(0,1fr) 110px auto;
  gap:10px;
}
.hw-folder-create__sort{min-width:0;}
.hw-folder-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:6px;
}
.hw-student-group + .hw-student-group{margin-top:14px;}
.hw-section-title{
  margin:0 0 12px;
  font-size:18px;
  font-weight:900;
  color:var(--dark);
}
.hw-collapsible{
  margin-top:12px;
  padding:14px 16px;
  border-radius:20px;
  border:1px solid rgba(203,191,152,.75);
  background:rgba(255,255,255,.7);
}
.hw-collapsible summary{
  cursor:pointer;
  font-weight:800;
  color:var(--dark);
}
.hw-attachments-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:12px;
  margin-top:10px;
}
.hw-image-thumb{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:stretch;
  border:1px solid rgba(203,191,152,.85);
  background:rgba(255,255,255,.92);
  border-radius:18px;
  padding:10px;
  text-decoration:none;
  color:var(--dark);
  box-shadow:var(--shadow);
  cursor:pointer;
}
.hw-image-thumb img{
  width:100%;
  height:160px;
  object-fit:cover;
  border-radius:14px;
  background:rgba(246,239,219,.6);
}
.hw-image-thumb span{
  font-size:13px;
  font-weight:800;
  line-height:1.35;
}
.hw-review-lightbox__dialog{max-width:min(1120px, 96vw);}
.hw-review-lightbox__figure{
  overflow:auto;
  align-items:flex-start;
}
.hw-review-lightbox__img{
  transform-origin:center center;
  transition:transform .18s ease;
  max-width:none;
  max-height:none;
  width:auto;
  height:auto;
  min-width:min(100%, 420px);
}
@media (max-width: 780px){
  .hw-folder-create{grid-template-columns:1fr;}
  .student-row__folder{grid-template-columns:1fr;}
  .hw-image-thumb img{height:120px;}
}

/* === price cards: keep price line and CTA aligned regardless of text length === */
.price-grid{
  align-items:stretch;
}
.price-grid .price-card,
.price-card{
  display:flex;
  flex-direction:column;
  height:auto;
}
.price-card__body{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
}
.price-points{
  flex:1 1 auto;
  margin:0;
}
.price-line{
  margin-top:auto;
}
.price-card__cta{
  margin-top:auto;
}


.search-box{ position:relative; }
.search-box__label{ display:block; margin-bottom:8px; color:var(--dark); font-weight:800; }
.search-results{
  position:absolute;
  z-index:30;
  top:100%; left:0; right:0;
  margin-top:8px;
  background:rgba(255,255,255,.98);
  border:1px solid rgba(203,191,152,.95);
  border-radius:18px;
  box-shadow: var(--shadow);
  padding:8px;
  display:grid;
  gap:8px;
  max-height:min(360px, 55vh);
  overflow:auto;
}
.search-result{
  width:100%;
  border:1px solid rgba(203,191,152,.9);
  border-radius:14px;
  padding:12px 14px;
  background:rgba(255,255,255,.86);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  text-align:left;
  cursor:pointer;
}
.search-result:hover{ background:rgba(244,221,160,.35); border-color: rgba(226,183,62,.95); }
.search-result b{ display:block; color:var(--dark); }
.search-result span{ display:block; color:var(--muted); font-size:12px; font-weight:800; }
.search-result__tag{ flex:0 0 auto; color:var(--olive); font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.04em; }
.search-empty{ padding:10px 12px; color:var(--muted); font-weight:800; }
.content-card.is-highlight,
.search-highlight-card{
  border-color: rgba(226,183,62,.98) !important;
  box-shadow: 0 0 0 3px rgba(226,183,62,.18), var(--shadow);
}
.attempt-modal{ width:min(980px, 96vw); max-height:min(88vh, 980px); display:flex; flex-direction:column; }
.attempt-modal__body{ padding:0 16px 18px; overflow:auto; }


.table-wrap--y-scroll{
  max-height: 560px;
  overflow: auto;
  padding-right: 4px;
}
.table-wrap--y-scroll thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--paper);
}

/* Admin test stats tree */
.stats-root-block{display:grid; gap:12px; margin-bottom:14px}
.stats-folder{border:1px solid rgba(78,87,32,.16); border-radius:18px; background:rgba(255,255,255,.5); margin-bottom:12px; overflow:hidden}
.stats-folder__summary{display:flex; justify-content:space-between; align-items:center; gap:12px; cursor:pointer; list-style:none; padding:14px 16px; font-weight:900; color:var(--dark); background:rgba(255,248,231,.82)}
.stats-folder__summary::-webkit-details-marker{display:none}
.stats-folder__summary::after{content:'▾'; margin-left:auto; color:var(--olive); font-size:14px}
.stats-folder:not([open]) .stats-folder__summary::after{content:'▸'}
.stats-folder__body{padding:12px; display:grid; gap:12px}
.test-stats-card{display:grid; gap:12px}
.test-stats-card__head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap}
.test-stats-card__controls{display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; justify-content:flex-end}
.test-stats-card__period{display:grid; gap:6px; color:var(--muted); font-size:12px; font-weight:800; min-width:150px}
@media (max-width: 720px){
  .stats-folder__summary{padding:12px 14px; font-size:14px}
  .stats-folder__body{padding:10px}
  .test-stats-card__head{align-items:stretch}
  .test-stats-card__controls{width:100%}
  .test-stats-card__period{min-width:100%}
}