.mgr { position: relative; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(330px, .65fr); gap: 18px; font-family: "Helvetica Neue", Arial, sans-serif; }
.mgr-calendar-card, .mgr-panel { position: relative; background: #fff; border: 1px solid #d9d3c7; box-shadow: 0 28px 70px rgba(33,25,14,.12); }
.mgr-calendar-card { padding: clamp(22px, 4vw, 50px); }
.mgr-toolbar { display: grid; grid-template-columns: 54px 1fr 54px; align-items: center; gap: 18px; margin-bottom: 28px; }
.mgr-toolbar > div { text-align: center; }
.mgr-toolbar h3 { margin: 4px 0 0; color: #0a0a0a; font-size: clamp(1.8rem, 3vw, 3rem); font-weight: 900; letter-spacing: -.045em; }
.mgr-caption { color: #a20e17; font-size: .67rem; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
.mgr-arrow, .mgr-close { appearance: none; border: 1px solid #d8d2c5; border-radius: 50%; background: transparent; color: #111; cursor: pointer; transition: .2s; }
.mgr-arrow { width: 54px; height: 54px; font-size: 1.25rem; }
.mgr-arrow:hover { color: #fff; background: #111; border-color: #111; }
.mgr-arrow:disabled { opacity: .25; cursor: default; }
.mgr-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 22px; padding: 13px; margin-bottom: 22px; background: #f7f4ed; color: #605c55; font-size: .72rem; }
.mgr-legend span { display: flex; align-items: center; gap: 7px; }
.mgr-legend i { width: 8px; height: 8px; border-radius: 50%; background: #1f8a50; }
.mgr-legend i.is-limited { background: #e49d17; }
.mgr-legend i.is-full { background: #b9b5ad; }
.mgr-weekdays, .mgr-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.mgr-weekdays span { padding: 10px 4px; text-align: center; color: #8c877e; font-size: .65rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.mgr-day { position: relative; min-height: 106px; padding: 10px; border-top: 1px solid #e3ded4; border-left: 1px solid #e3ded4; background: #fff; color: #111; }
.mgr-day:nth-child(7n), .mgr-day:last-child { border-right: 1px solid #e3ded4; }
.mgr-day:nth-last-child(-n+7) { border-bottom: 1px solid #e3ded4; }
.mgr-day.is-empty { background: #f7f4ed; }
.mgr-day.is-past { color: #b1ada5; background: #f5f2eb; }
.mgr-date { display: flex; justify-content: space-between; align-items: center; font-size: .88rem; font-weight: 900; }
.mgr-date small { width: 7px; height: 7px; border-radius: 50%; background: #238e54; }
.mgr-date small.is-limited { background: #e49d17; }
.mgr-date small.is-full { background: #b9b5ad; }
.mgr-periods { display: grid; gap: 5px; margin-top: 11px; }
.mgr-slot { padding: 7px 4px; border: 1px solid #dad5cb; border-radius: 4px; background: #fff; color: #28251f; cursor: pointer; font-size: .63rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.mgr-slot:hover, .mgr-slot:focus-visible { color: #fff; background: #a20e17; border-color: #a20e17; outline: none; }
.mgr-slot:disabled { color: #aaa69e; background: #efede7; border-color: transparent; cursor: default; text-decoration: line-through; }
.mgr-day.is-today .mgr-date span { display: grid; place-items: center; width: 28px; height: 28px; margin: -5px; color: #000; background: #d8ff36; border-radius: 50%; }
.mgr-panel { overflow: hidden; min-height: 600px; color: #fff; background: #0a0a0a; }
.mgr-panel::after { content: ""; position: absolute; width: 320px; height: 320px; right: -180px; bottom: -180px; border: 55px solid rgba(216,255,54,.08); border-radius: 50%; pointer-events: none; }
.mgr-panel-idle, .mgr-panel-flow { position: relative; z-index: 1; padding: clamp(28px, 4vw, 52px); }
.mgr-panel-idle { min-height: 600px; display: flex; flex-direction: column; justify-content: flex-end; }
.mgr-panel-number { color: #d8ff36; font-size: .7rem; font-weight: 900; letter-spacing: .2em; }
.mgr-panel h3 { margin: 10px 0 12px; font-size: clamp(2.2rem, 4vw, 4.7rem); line-height: .88; letter-spacing: -.06em; text-transform: uppercase; }
.mgr-panel p { color: #aaa; }
.mgr-close { position: absolute; right: 18px; top: 18px; z-index: 4; width: 40px; height: 40px; color: #fff; border-color: #444; font-size: 1.4rem; }
.mgr-selection { padding-bottom: 22px; margin: 18px 0 22px; border-bottom: 1px solid #333; }
.mgr-selection strong { display: block; font-size: 1.45rem; }
.mgr-selection span { color: #d8ff36; }
.mgr-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: 20px 0; padding: 4px; background: #1c1c1c; border-radius: 999px; }
.mgr-auth-gate { margin: 20px 0; padding: 17px 18px; color: #080808; background: #d8ff36; border-left: 5px solid #ef2b2d; }
.mgr-auth-gate strong, .mgr-auth-gate span { display: block; }
.mgr-auth-gate strong { font-size: .94rem; line-height: 1.25; }
.mgr-auth-gate span { margin-top: 6px; color: #3e450e; font-size: .78rem; line-height: 1.4; }
.mgr-tab { padding: 10px; border: 0; border-radius: 999px; color: #aaa; background: transparent; cursor: pointer; font-weight: 800; }
.mgr-tab.is-active { color: #000; background: #d8ff36; }
.mgr-form { display: grid; gap: 12px; }
.mgr-form label { display: grid; gap: 6px; color: #c6c2ba; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.mgr-form input, .mgr-form select, .mgr-form textarea { width: 100%; padding: 13px 14px; border: 1px solid #3b3b3b; border-radius: 5px; color: #fff; background: #161616; outline: none; }
.mgr-form input:focus, .mgr-form select:focus, .mgr-form textarea:focus { border-color: #d8ff36; box-shadow: 0 0 0 2px rgba(216,255,54,.12); }
.mgr-form select { color-scheme: dark; }
.mgr-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mgr-submit { padding: 15px 20px; margin-top: 6px; border: 0; border-radius: 999px; color: #000; background: #d8ff36; cursor: pointer; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.mgr-submit:disabled { opacity: .5; cursor: wait; }
.mgr-secondary { padding: 0; border: 0; color: #d8ff36; background: transparent; cursor: pointer; text-decoration: underline; }
.mgr-message { margin-top: 15px; color: #f5b8b8; font-size: .9rem; }
.mgr-message.is-success { color: #d8ff36; }
.mgr-success { position: relative; z-index: 2; }
.mgr-success-kicker { display: block; margin: 18px 0 3px; color: #d8ff36; font-size: .68rem; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
.mgr-success-mark { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; color: #000; background: #d8ff36; font-size: 1.6rem; }
.mgr-success-details { display: grid; gap: 1px; margin: 20px 0; background: #333; }
.mgr-success-details span { padding: 11px 13px; color: #eee; background: #171717; }
.mgr-reference { padding: 20px; margin: 24px 0; color: #000; background: #d8ff36; }
.mgr-reference small { display: block; font-size: .65rem; font-weight: 900; letter-spacing: .17em; }
.mgr-reference strong { display: block; margin-top: 3px; font-size: clamp(1.35rem, 3vw, 2rem); letter-spacing: .04em; word-break: break-all; }
.mgr-notice { padding: 14px; margin: 15px 0; color: #eee; background: #201f1d; border-left: 3px solid #d8ff36; }
.mgr-loading { grid-column: 1 / -1; padding: 80px 20px; text-align: center; }
.mgr-step-head { margin: 24px 0; }
.mgr-step-head > span { color: #d8ff36; font-size: .65rem; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
.mgr-step-head h3 { margin-top: 8px; }
.mgr-step-head p { margin-bottom: 0; }
.mgr-services { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mgr-service { min-height: 184px; padding: 18px; position: relative; border: 1px solid #353535; color: #fff; background: #151515; text-align: left; cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.mgr-service:hover, .mgr-service:focus-visible { border-color: #d8ff36; background: #202020; transform: translateY(-2px); outline: none; }
.mgr-service small { display: block; margin-bottom: 25px; color: #d8ff36; font-size: .58rem; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.mgr-service strong { display: block; max-width: 90%; font-size: 1.05rem; line-height: 1.08; }
.mgr-service p { margin: 9px 0 0; color: #979797; font-size: .76rem; line-height: 1.35; }
.mgr-service em { display: block; margin-top: 10px; color: #f0b241; font-size: .65rem; font-style: normal; font-weight: 800; }
.mgr-service-arrow { position: absolute; right: 15px; top: 12px; color: #d8ff36; font-size: 1.1rem; }
.mgr-back { padding: 0 0 7px; border: 0; border-bottom: 1px solid #777; color: #ccc; background: transparent; cursor: pointer; font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.mgr-service-notice { padding: 12px 14px; margin-top: 16px; color: #f5d58f; background: #2c2415; border-left: 3px solid #f0b241; font-size: .78rem; font-weight: 800; }
.mgr-fixed-price { padding: 17px; background: #d8ff36; color: #080808; }
.mgr-fixed-price small, .mgr-fixed-price span { display: block; }
.mgr-fixed-price small { font-size: .62rem; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.mgr-fixed-price strong { display: block; font-size: 1.75rem; }
.mgr-fixed-price span { color: #3d4600; font-size: .75rem; }

@media (max-width: 980px) {
  .mgr { grid-template-columns: 1fr; }
  .mgr-panel, .mgr-panel-idle { min-height: 420px; }
}
@media (max-width: 620px) {
  .mgr-calendar-card { padding: 17px 10px; }
  .mgr-toolbar { grid-template-columns: 44px 1fr 44px; gap: 6px; }
  .mgr-arrow { width: 44px; height: 44px; }
  .mgr-legend { gap: 7px 14px; }
  .mgr-weekdays span { font-size: .54rem; }
  .mgr-day { min-height: 81px; padding: 6px 3px; }
  .mgr-date { padding: 0 4px; font-size: .74rem; }
  .mgr-date small { display: none; }
  .mgr-periods { gap: 3px; margin-top: 7px; }
  .mgr-slot { overflow: hidden; padding: 6px 1px; font-size: 0; }
  .mgr-slot[data-period="morning"]::after { content: "AM"; font-size: .58rem; }
  .mgr-slot[data-period="evening"]::after { content: "PM"; font-size: .58rem; }
  .mgr-form-row { grid-template-columns: 1fr; }
  .mgr-services { grid-template-columns: 1fr; }
  .mgr-service { min-height: 155px; }
}