/* ============================================================
   Амперсанд · Центр бронирований — brand system
   Токены взяты 1:1 из брендбука АМПЕРСАНД (Markov.Branding):
   персик #FFBB8D, кремовый #FBF3E6, тёплый коричневый #56423F.
   Шрифты: Sofia Sans Condensed (заголовки) + Manrope (текст).
   Характер — «больше любви, заботы, внимания».
   ============================================================ */
:root{
  --paper:#FBF3E6;        /* фон, кремовый (из брендбука) */
  --paper-2:#F6ECDC;      /* поверхность карточек */
  --paper-3:#EAD9C7;      /* светлый песок (доп. цвет брендбука) */
  --ink:#56423F;          /* основной коричневый текст (из брендбука) */
  --ink-strong:#4A3534;   /* самый тёмный коричневый: wordmark/заголовки */
  --ink-soft:#8A7A72;     /* вторичный текст (производный) */
  --ink-faint:#B3A69C;    /* приглушённый (производный) */
  --line:#E7D6C2;         /* волосяная граница на кремовом */
  --line-strong:#D8C3AC;
  --accent:#FFBB8D;       /* персик — основной акцент (из брендбука) */
  --accent-deep:#F0A06E;  /* ховер (сверено пипеткой) */
  --accent-tint:#FCE2CE;  /* мягкая заливка акцента */
  --pink:#FCC0C1;         /* розовый доп. акцент (из брендбука) */
  --err-bg:#FBE7E4; --err-line:#EDB1AB; --err-ink:#8F3A32;

  --radius:16px;
  --radius-sm:10px;
  --shadow-sm:0 1px 2px rgba(74,53,52,.06);
  --shadow:0 2px 4px rgba(74,53,52,.06), 0 18px 40px -22px rgba(74,53,52,.38);
  --maxw:1080px;

  --f-display:"Sofia Sans Condensed","Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--f-body);
  font-size:15px;
  line-height:1.55;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
code{
  font-family:var(--f-mono);
  font-size:.86em;
  background:var(--paper-3);
  border:1px solid var(--line);
  padding:.08em .4em;
  border-radius:6px;
}

/* ---------- top bar ---------- */
.topbar{
  display:flex;align-items:center;gap:28px;flex-wrap:wrap;
  padding:16px 28px;
  background:var(--paper);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20;
}
.brand{display:flex;align-items:baseline;gap:8px;line-height:1}
.brand__amp{
  font-family:var(--f-display);font-weight:900;font-size:26px;
  color:var(--accent-deep);
}
.brand__mark{
  font-family:var(--f-display);font-weight:900;font-size:24px;
  letter-spacing:.01em;color:var(--ink-strong);
}
.brand__sub{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);
  align-self:center;
}
.nav{display:flex;gap:6px;flex-wrap:wrap;margin-right:auto}
.nav__item{
  font-weight:500;font-size:14px;color:var(--ink-soft);
  padding:8px 14px;border-radius:999px;
  transition:background .15s,color .15s;
}
.nav__item:hover{background:var(--paper-3);color:var(--ink)}
.nav__item.is-active{background:var(--ink-strong);color:var(--paper)}
.logout{
  font-size:13px;font-weight:500;color:var(--ink-soft);
  padding:8px 14px;border:1px solid var(--line-strong);border-radius:999px;
  transition:border-color .15s,color .15s;
}
.logout:hover{border-color:var(--ink);color:var(--ink)}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:44px 28px 64px}

/* ---------- hero (главная) ---------- */
.hero{margin-bottom:36px;max-width:60ch}
.hero__title{
  font-family:var(--f-display);font-weight:900;font-size:40px;line-height:1.04;
  letter-spacing:0;margin:0 0 12px;color:var(--ink-strong);
}
.hero__sub{margin:0;font-size:16px;color:var(--ink-soft)}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.card{
  display:flex;flex-direction:column;gap:10px;
  background:var(--paper-2);border:1px solid var(--line);
  border-radius:var(--radius);padding:26px 26px 22px;
  box-shadow:var(--shadow-sm);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line-strong)}
.card__eyebrow{
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent-deep);
}
.card__title{
  font-family:var(--f-display);font-weight:800;font-size:24px;margin:0;color:var(--ink-strong);
}
.card__text{margin:0;color:var(--ink-soft);font-size:14.5px;flex:1}
.card__go{margin-top:6px;font-weight:600;font-size:14px;color:var(--ink)}
.card:hover .card__go{color:var(--accent-deep)}

/* ---------- page head (разделы) ---------- */
.page-head{margin-bottom:28px;max-width:64ch}
.page-head__eyebrow{
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent-deep);
}
.page-head__title{
  font-family:var(--f-display);font-weight:900;font-size:32px;
  letter-spacing:0;margin:6px 0 8px;color:var(--ink-strong);
}
.page-head__sub{margin:0;color:var(--ink-soft);font-size:15.5px}

/* ---------- placeholder ---------- */
.placeholder{
  background:var(--paper-2);border:1px dashed var(--line-strong);
  border-radius:var(--radius);padding:30px;
}
.placeholder__badge{
  display:inline-block;font-size:12px;font-weight:600;letter-spacing:.04em;
  color:var(--ink-strong);background:var(--accent-tint);
  padding:5px 12px;border-radius:999px;margin-bottom:14px;
}
.placeholder__text{margin:0 0 14px;color:var(--ink-soft);max-width:72ch}
.placeholder__list{margin:0;padding-left:20px;color:var(--ink-soft);display:grid;gap:6px}

/* ---------- footer ---------- */
.foot{
  max-width:var(--maxw);margin:0 auto;padding:22px 28px 40px;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  border-top:1px solid var(--line);
  font-size:12.5px;color:var(--ink-faint);
}
.foot__phrase{font-family:var(--f-display);font-weight:700;font-size:14px;letter-spacing:.01em}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--f-body);font-weight:600;font-size:15px;
  padding:12px 20px;border-radius:12px;border:1px solid transparent;
  cursor:pointer;transition:background .15s,color .15s,transform .05s;
}
.btn:active{transform:translateY(1px)}
.btn--accent{background:var(--accent);color:var(--ink-strong)}
.btn--accent:hover{background:var(--accent-deep);color:var(--ink-strong)}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* ---------- login ---------- */
.login-body{
  min-height:100vh;margin:0;
  background:
    radial-gradient(120% 80% at 50% -10%, var(--accent-tint) 0%, rgba(252,226,206,0) 46%),
    var(--paper);
}
.login{
  min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;padding:24px;
}
.login__card{
  width:100%;max-width:380px;
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:38px 34px 32px;
  box-shadow:var(--shadow);position:relative;overflow:hidden;
}
.login__card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent);
}
.login__brand{display:flex;align-items:baseline;gap:8px;margin-bottom:6px}
.login__amp{font-family:var(--f-display);font-weight:900;font-size:34px;color:var(--accent-deep)}
.login__mark{
  font-family:var(--f-display);font-weight:900;font-size:32px;
  letter-spacing:.01em;color:var(--ink-strong);
}
.login__descriptor{
  font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:16px;
}
.login__lead{margin:0 0 22px;color:var(--ink-soft);font-size:14px}
.login__form{display:grid;gap:16px}
.login__foot{
  font-family:var(--f-display);font-weight:700;color:var(--ink-faint);
  font-size:14px;letter-spacing:.01em;
}

/* ---------- fields ---------- */
.field{display:grid;gap:7px}
.field__label{font-size:13px;font-weight:500;color:var(--ink-soft)}
.field__input{
  font-family:var(--f-body);font-size:15px;color:var(--ink);
  padding:12px 14px;border:1px solid var(--line-strong);border-radius:12px;
  background:var(--paper-2);
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.field__input:focus{
  outline:none;border-color:var(--accent-deep);background:#fff;
  box-shadow:0 0 0 3px var(--accent-tint);
}

/* ---------- alert ---------- */
.alert{
  background:var(--err-bg);border:1px solid var(--err-line);color:var(--err-ink);
  padding:11px 14px;border-radius:10px;font-size:13.5px;margin-bottom:16px;
}

/* ---------- a11y ---------- */
:focus-visible{outline:2px solid var(--accent-deep);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}

/* ---------- responsive ---------- */
@media (max-width:720px){
  .topbar{gap:14px;padding:14px 18px}
  .nav{order:3;width:100%;margin-right:0}
  .logout{order:2;margin-left:auto}
  .wrap{padding:30px 18px 48px}
  .cards{grid-template-columns:1fr}
  .hero__title{font-size:32px}
}