
:root{--ink:#242236;--muted:#79758a;--purple:#7454d4;--lime:#d8f58c;--line:#e6e2ed;--paper:#faf9fc;--red:#aa3350}*{box-sizing:border-box}body{margin:0;font:15px/1.55 'Segoe UI',Arial,sans-serif;background:var(--paper);color:var(--ink)}button,input,select,textarea{font:inherit}button,a,input,select,textarea{outline-offset:4px}button,a{touch-action:manipulation}button{cursor:pointer}button:disabled{opacity:.55;cursor:wait}a{color:var(--purple);text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3,p{margin-top:0}h1{font-size:56px;line-height:1.12;letter-spacing:-2px;font-weight:650}h2{font-size:23px;letter-spacing:-.6px;line-height:1.3}h3{font-size:18px}em{font-style:normal;color:var(--purple)}.topbar{height:90px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 6vw;gap:20px}.brand{display:flex;gap:14px;align-items:center;font-size:39px;font-weight:800;font-style:italic;letter-spacing:-5px;color:var(--ink)}.brand span{font-size:12px;letter-spacing:2px;font-style:normal}.topbar nav{display:flex;align-items:center;gap:25px;font-size:13px}.pill{background:#eeebf6;color:#685889;border:1px solid #e0d9ef;border-radius:30px;padding:6px 13px;font-size:12px}.demo-layout{max-width:1200px;margin:0 auto;padding:66px 36px 45px;display:grid;grid-template-columns:1.1fr 1fr;gap:70px;align-items:start}.intro{padding-top:50px;position:sticky;top:30px}.eyebrow{font-size:11px;font-weight:700;letter-spacing:2.1px;color:var(--purple);display:block;margin-bottom:23px}.intro p{color:var(--muted);font-size:17px;line-height:1.7}.facts{display:flex;gap:60px;margin:38px 0}.facts strong{display:block;font-size:36px;font-weight:500}.facts span{font-size:12px;color:var(--muted)}.note{display:flex;gap:12px;align-items:start;border-top:1px solid var(--line);padding-top:25px}.note p{font-size:12px;line-height:1.8}.dot{height:8px;width:8px;background:var(--purple);border-radius:50%;margin-top:7px;flex-shrink:0}.quiet{font-size:12px;color:var(--muted)}.phone{border:1px solid #dcd6e9;border-radius:26px;overflow:hidden;background:#eee9f5;box-shadow:0 20px 70px #4e326211;min-height:620px}.chat-head{background:white;padding:19px 23px;display:flex;align-items:center;gap:13px;border-bottom:1px solid var(--line)}.avatar{width:43px;height:43px;border-radius:14px;background:var(--purple);color:white;display:grid;place-items:center;font-size:27px;font-weight:700;font-style:italic}.chat-head strong{font-size:16px}.chat-head small{display:block;font-size:11px;color:var(--muted)}.icon{margin-left:auto;background:none;border:0;color:var(--purple);font-size:28px}.chat-body{padding:22px;min-height:490px;background:radial-gradient(ellipse at top right,#e4def3,transparent 60%)}.date-chip{text-align:center;font-size:9px;color:#8b829d;letter-spacing:1.5px;margin-bottom:22px}.bubble{background:white;border:1px solid #e3ddeb;border-radius:4px 17px 17px 17px;padding:19px 20px;margin-bottom:12px}.bubble h2{font-size:19px;margin-bottom:10px}.bubble p{white-space:pre-line;font-size:13px;line-height:1.75;margin-bottom:0;color:#676176}.chat-buttons{display:grid;gap:7px}.chat-buttons button,.chat-buttons a{display:block;text-align:center;background:#fbfaff;border:1px solid #ded6ee;border-radius:10px;padding:12px 14px;font-size:13px;color:#594779;line-height:1.4}.chat-buttons .featured{background:var(--purple);color:white;border-color:var(--purple);font-weight:600}.chat-buttons .subtle{background:transparent;border-style:dashed;color:var(--muted)}.chat-buttons button:hover,.chat-buttons a:hover{filter:brightness(.97);text-decoration:none}.chat-footer{text-align:center;padding:16px;background:#f9f7fc;color:#94899f;font-size:10px}.site-footer{max-width:1200px;margin:0 auto;padding:24px 36px;border-top:1px solid var(--line);font-size:10px;letter-spacing:1.6px;color:#8d849b;display:flex;justify-content:space-between}.error{border:1px solid #f1c9d0;background:#fff1f3;color:var(--red);padding:12px;border-radius:10px;white-space:pre-line}.primary{border:0;background:var(--purple);color:white;padding:13px 19px;border-radius:10px;font-weight:600}.secondary{border:1px solid var(--line);background:white;color:var(--ink);padding:10px 16px;border-radius:9px}.danger{color:var(--red);background:#fff1f3;border:1px solid #efcbd2;border-radius:8px;padding:8px 12px}.small{padding:7px 10px;font-size:12px}.input-form label{font-size:13px}label{display:block;color:#625b72;font-size:13px}input,select,textarea{display:block;width:100%;margin-top:6px;padding:10px 12px;background:white;border:1px solid #d9d3e2;border-radius:8px;color:var(--ink)}textarea{min-height:90px;resize:vertical}.input-form button{width:100%;margin-top:13px}.payment{max-width:520px;margin:70px auto;padding:40px;text-align:center;background:white;border:1px solid var(--line);border-radius:24px}.payment h1{font-size:36px}.payment .eyebrow{margin:28px 0 15px}.payment #amount{font-size:39px;font-weight:600}.payment a{display:block;margin-top:26px;font-size:14px}.pay-symbol{height:80px;width:80px;background:var(--lime);border-radius:50%;display:grid;place-items:center;font-size:42px;margin:0 auto}.admin-main{max-width:1260px;margin:38px auto;padding:0 35px 50px}.admin-title{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:26px}.admin-title h1{font-size:36px;letter-spacing:-1px;margin-bottom:5px}.admin-title p{color:var(--muted);font-size:13px}.tabs{display:flex;gap:7px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:17px;margin:24px 0}.tabs button{background:transparent;border:0;border-radius:9px;padding:10px 18px;color:#7d728e}.tabs button.active{background:var(--ink);color:white}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.stat{background:white;border:1px solid var(--line);padding:20px 24px;border-radius:14px}.stat strong{font-size:29px;display:block}.stat span{font-size:12px;color:var(--muted)}.panel{background:white;border:1px solid var(--line);border-radius:15px;padding:25px;margin-bottom:18px}.toolbar{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:20px}.table-wrap{overflow:auto}table{border-collapse:collapse;width:100%;font-size:13px}th{text-align:left;font-size:10px;color:var(--muted);letter-spacing:1px;text-transform:uppercase;padding:13px 10px;border-bottom:1px solid var(--line)}td{padding:16px 10px;border-bottom:1px solid #f0edf4;vertical-align:middle}td small{display:block;color:var(--muted)}td .actions{display:flex;gap:6px;flex-wrap:wrap}.badge{font-size:11px;border-radius:6px;padding:4px 7px;background:#eeeaf8;color:#6c54a0;white-space:nowrap}.badge.green{background:#eaf3d8;color:#4f6c28}.badge.grey{background:#eee;color:#777}.grid{display:grid;grid-template-columns:1fr 1fr;gap:17px}.grid .wide{grid-column:1/-1}.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:23px}.login{max-width:450px;margin:70px auto}.login button{width:100%;margin-top:20px}.muted{font-size:12px;color:var(--muted)}.notice{padding:12px 16px;background:#f3f0fa;border-radius:9px;font-size:12px;color:#716180;margin-bottom:20px}.success{color:#386225;background:#ecf6df;padding:13px;border-radius:10px}dialog{border:1px solid var(--line);border-radius:20px;padding:28px;width:min(680px,94vw);max-height:90vh;overflow:auto;color:var(--ink)}dialog::backdrop{background:#21153066}dialog h2{margin-bottom:22px}.empty{text-align:center;padding:40px;color:var(--muted)}.settings-table input{min-width:85px;margin:0}.settings-table td:first-child{min-width:190px}.spacer{margin-top:22px}[hidden]{display:none!important}@media(max-width:850px){h1{font-size:42px}.demo-layout{gap:30px;padding:36px 22px;grid-template-columns:1fr 1fr}.intro{padding-top:28px}.topbar{padding:0 24px}.topbar nav{gap:12px}.facts{gap:32px}.admin-main{padding:0 16px}.grid{gap:12px}}@media(max-width:650px){.topbar{height:72px;padding:0 18px}.brand{font-size:32px}.brand span{font-size:9px;letter-spacing:1px}.topbar nav .pill{display:none}.demo-layout{display:flex;flex-direction:column;padding:25px 15px;gap:25px}.intro{position:static;padding:0}.intro h1{font-size:34px;letter-spacing:-1px;line-height:1.2;margin:14px 0}.intro h1 br{display:none}.intro .eyebrow{margin-bottom:0;font-size:9px}.intro>p,.intro .facts,.intro .note,.intro .quiet{display:none}.phone{width:100%;min-height:560px}.chat-body{padding:16px;min-height:435px}.site-footer{font-size:8px;padding:20px 17px}.payment{margin:30px 15px;padding:25px}.stats{gap:7px}.stat{padding:12px}.stat strong{font-size:24px}.admin-title{align-items:start}.admin-title h1{font-size:28px}.admin-title .primary{font-size:12px}.grid{grid-template-columns:1fr}.grid .wide{grid-column:auto}.panel{padding:16px}.tabs{gap:3px}.tabs button{padding:8px 12px;font-size:12px}}

/* Фирменная тема: графит, фуксия и тёплые оттенки с сайта ФИТНЕС ПАТИ. */
:root {
  color-scheme: dark;
  --ink: #fff9fc;
  --muted: #b9bdc9;
  --purple: #ff45bf;
  --lime: #ffb9e5;
  --line: #48505e;
  --paper: #202733;
  --red: #ffacc3;
}
body {
  background: radial-gradient(ellipse at 12% 25%, #354153 0, transparent 52%),
              radial-gradient(ellipse at 95% 2%, #62495766 0, transparent 38%), #202733;
  min-height: 100vh;
}
a { color: #ff8ed9; }
.topbar {
  margin: 14px 24px 0;
  padding: 0 30px;
  height: 98px;
  border: 1px solid #88818a55;
  border-radius: 60px;
  background: linear-gradient(105deg, #565b66 5%, #9d7c6c 58%, #535864 100%);
}
.brand, .brand:hover { text-decoration: none; }
.brand span {
  color: #fc32bb;
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: 52px;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 1px;
  line-height: 1.05;
  -webkit-text-stroke: 1px #231f2a;
  text-shadow: 1px 2px 0 #24202a;
}
.topbar nav a { color: #fff; }
.pill { background: #262b3866; color: #fff1fa; border-color: #ffffff30; }
.intro { isolation: isolate; }
.intro::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  width: 325px; height: 325px; right: -22px; top: 35px;
  border: 37px solid #edbd9a; border-radius: 50%; opacity: .075;
  transform: rotate(-25deg) scaleX(.8);
}
.intro h1 { font-weight: 550; letter-spacing: -1.8px; }
.intro em { color: #ff72d0; }
.eyebrow { color: #ff89d7; }
.facts strong { color: #f7d8bf; }
.phone {
  border-color: #626173;
  background: #252c38;
  box-shadow: 0 22px 80px #090d1855, 0 0 70px #eb3abb0a;
}
.chat-head { background: #393c49; border-color: #5d5668; }
.avatar { background: linear-gradient(135deg, #c23cbb, #ff57c7); color: #fff; font-size: 19px; font-style: normal; }
.chat-body { background: radial-gradient(ellipse at top right, #62364e55, transparent 65%); }
.date-chip { color: #bec0cd; }
.bubble { background: #363e4c; border-color: #515969; }
.bubble p { color: #e0dce6; }
.chat-buttons button, .chat-buttons a { background: #3b3447; border-color: #8c577d; color: #fff1fa; border-radius: 22px; }
.chat-buttons .featured, .primary {
  background: linear-gradient(105deg, #c742bd, #ff59c8);
  border-color: #ff71d1;
  color: white;
  border-radius: 28px;
  text-shadow: 0 1px 2px #71305b;
}
.chat-buttons .subtle { background: transparent; border-color: #727080; color: #d2c9d8; }
.chat-buttons button:hover, .chat-buttons a:hover, .primary:hover { filter: brightness(1.1); }
.chat-footer { background: #2b303d; color: #c0b6c8; }
.site-footer { color: #b6adbf; }
.site-footer::first-letter { color: #ff5bc9; }
.panel, .stat, .payment, dialog { background: #2d3542; border-color: #4d5564; }
.secondary { background: #3c4250; border-color: #626879; color: #fff6fb; }
.secondary:hover { background: #504657; }
label { color: #ded6e3; }
input, select, textarea { background: #222b38; color: #fff6fa; border-color: #657080; }
input::placeholder, textarea::placeholder { color: #a9a2b3; }
input:focus, select:focus, textarea:focus { border-color: #ff66ce; outline-color: #ff66ce; }
input[readonly] { background: #343b48; color: #c9c0d0; }
td { border-color: #454d5b; }
.tabs button { color: #d2c5d6; }
.tabs button.active { background: linear-gradient(105deg, #bd3db4, #ef51bd); color: #fff; }
.badge { background: #5c3655; color: #ffd1ef; }
.badge.green { background: #334b43; color: #c6efda; }
.badge.grey { background: #424855; color: #d4d4de; }
.notice { background: #48394c; color: #f4d6eb; }
.success { color: #d0f5df; background: #30483e; }
.error, .danger { color: #ffd3e1; background: #573343; border-color: #a6647c; }
.pay-symbol { background: linear-gradient(135deg, #ffd9b9, #ff96d6); color: #582445; }
dialog::backdrop { background: #10141dc9; }
@media(max-width:850px) {
  .topbar { padding: 0 22px; margin: 12px 18px 0; height: 86px; }
  .brand span { font-size: 42px; }
}
@media(max-width:650px) {
  .topbar { margin: 10px 10px 0; padding: 0 16px; height: 74px; gap: 10px; }
  .brand span { font-size: 32px; letter-spacing: .2px; }
  .topbar nav { font-size: 11px; }
  .topbar > .pill { font-size: 10px; padding: 5px 8px; }
  .intro::before { display: none; }
  .intro h1 { font-weight: 550; }
}
.admin-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px}.order-card{margin:0}.order-card h3{margin:0}.wide{grid-column:1/-1}.tabs{flex-wrap:wrap}.table-wrap{overflow:auto}td{overflow-wrap:anywhere}dialog{max-height:90vh;overflow:auto}dialog .form-error:empty{display:none}

/* Единый интерфейс оплаты и панели: мобильная версия является основной. */
.payment-page .topbar,.admin-page .topbar{box-shadow:0 14px 40px #0c111b33}
.payment{box-shadow:0 18px 60px #0b101a42;background:linear-gradient(145deg,#363e4c,#2d3542)}
.payment #description{color:var(--muted);line-height:1.65}
.payment label{text-align:left;margin:24px 0 14px}
.payment .primary,.payment .secondary{display:block;width:100%;min-height:50px;margin-top:12px}
.payment #bank-link{display:flex;align-items:center;justify-content:center}
.admin-page .admin-main{padding-bottom:110px}
.admin-page .toolbar .secondary{min-height:42px}
.admin-page summary{cursor:pointer;font-weight:700}
.admin-page .actions{display:flex;gap:8px;flex-wrap:wrap}

@media(max-width:720px){
  body.admin-page,body.payment-page{background:radial-gradient(ellipse at 15% 12%,#354153 0,transparent 48%),radial-gradient(circle at 95% 0,#6b405677,transparent 34%),#202733}
  .admin-page .topbar,.payment-page .topbar{position:sticky;top:8px;z-index:8;width:calc(100% - 16px);height:66px;min-height:66px;margin:8px auto 0;padding:8px 15px;border-radius:38px}
  .admin-page .brand span,.payment-page .brand span{font-size:28px;white-space:nowrap}
  .admin-page .topbar nav a{display:none}
  .admin-page .topbar .pill,.payment-page .topbar .pill{max-width:42vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}
  .admin-main{width:100%;margin:0 auto;padding:24px 12px calc(110px + env(safe-area-inset-bottom))}
  .admin-title{align-items:flex-start;margin-bottom:16px}
  .admin-title h1{font-size:29px;line-height:1.08;margin-bottom:8px}
  .admin-title p{font-size:12px;line-height:1.45}
  .admin-title .secondary{min-width:70px;min-height:42px}
  .stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .stat{min-width:0;padding:12px 9px;border-radius:14px;text-align:center}
  .stat strong{font-size:25px}
  .stat span{display:block;font-size:9px;line-height:1.25}
  .tabs{position:sticky;top:82px;z-index:7;display:flex;flex-wrap:nowrap;gap:7px;margin:16px -12px 18px;padding:10px 12px;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x proximity;background:#202733ee;border-block:1px solid #ffffff16;backdrop-filter:blur(16px);scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{flex:0 0 auto;min-height:44px;padding:10px 15px;border:1px solid #ffffff12;border-radius:23px;background:#303746;scroll-snap-align:start;white-space:nowrap}
  .tabs button.active{border-color:#ff77d1;background:linear-gradient(105deg,#bd3db4,#ef51bd)}
  .panel{padding:16px;border-radius:18px}
  .toolbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:16px}
  .toolbar>button,.toolbar>.secondary{width:100%;min-height:46px;margin:0}
  .toolbar>label{grid-column:1/-1}
  .admin-cards{grid-template-columns:1fr;gap:10px}
  .order-card .toolbar{display:flex;align-items:center}
  .order-card .toolbar .badge{width:auto}
  .admin-page .actions button{flex:1 1 145px;min-height:44px}
  .table-wrap{padding:0;border:0;background:transparent;overflow:visible}
  .table-wrap table,.table-wrap tbody,.table-wrap tr,.table-wrap td{display:block;width:100%}
  .table-wrap thead{display:none}
  .table-wrap tr{margin-bottom:11px;padding:6px 14px;background:linear-gradient(145deg,#363e4c,#2d3542);border:1px solid var(--line);border-radius:18px;box-shadow:0 10px 24px #0c111b20}
  .table-wrap td{display:grid;grid-template-columns:minmax(92px,34%) minmax(0,1fr);gap:10px;align-items:start;padding:11px 0;border-bottom:1px solid #48505e;overflow-wrap:anywhere}
  .table-wrap td::before{content:attr(data-label);color:#ff94d9;font-size:9px;font-weight:700;letter-spacing:.7px;text-transform:uppercase}
  .table-wrap td:last-child{border-bottom:0;padding-bottom:10px}
  .table-wrap td[colspan]{display:block;text-align:center;color:var(--muted);padding:28px 10px}
  .table-wrap td[colspan]::before{display:none}
  .table-wrap td>.secondary,.table-wrap td>.danger,.table-wrap td>.primary,.table-wrap td .actions button{width:100%;min-height:44px;margin:3px 0}
  .table-wrap td small{margin-top:3px}
  input,select,textarea{min-height:48px;font-size:16px;border-radius:12px}
  textarea{min-height:110px}
  dialog{inset:0;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:22px 16px calc(18px + env(safe-area-inset-bottom));border:0;border-radius:0;background:#202733;overscroll-behavior:contain}
  dialog h2{font-size:25px;padding-right:10px}
  dialog .form-grid{display:grid;grid-template-columns:1fr;gap:15px}
  dialog .wide{grid-column:auto}
  .form-actions{position:sticky;bottom:0;z-index:2;display:grid;grid-template-columns:1fr 1fr;margin:24px -16px -22px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:#202733ee;border-top:1px solid #ffffff1c;backdrop-filter:blur(15px)}
  .form-actions button{min-height:50px}
  .login{margin:10vh auto 0;padding:22px}
  .login h1{font-size:31px}
  .payment{width:auto;max-width:520px;margin:24px 12px;padding:28px 18px;border-radius:22px}
  .payment h1{font-size:29px;line-height:1.15}
  .payment #amount{font-size:36px}
  .pay-symbol{width:70px;height:70px;font-size:35px}
}

/* Палитра основного сайта. Фиксированный слой не меняется при смене раздела. */
:root{--site-bg:#172131;--site-card:#293544;--site-card-strong:#344252;--site-pink:#ff43be;--site-warm:#f6d7c1}
body{position:relative;background:var(--site-bg);isolation:isolate}
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(ellipse at 8% 18%,#2c3c50 0,transparent 48%),radial-gradient(circle at 92% 3%,#6f4a5d66 0,transparent 34%),var(--site-bg)}
.topbar{background:linear-gradient(105deg,#565f6c 4%,#bd9680 56%,#545c68 100%)}
.panel,.stat,.payment,dialog{background:linear-gradient(145deg,var(--site-card-strong),var(--site-card));border-color:#536174}
.primary,.tabs button.active{background:linear-gradient(105deg,#c63fba,var(--site-pink));border-color:#ff75d0}
.pay-symbol{background:linear-gradient(135deg,var(--site-warm),#ff95d5)}
.admin-page #dashboard,.admin-page #view{background:transparent}
@media(max-width:720px){body.admin-page,body.payment-page{background:var(--site-bg)}.tabs{background:#172131f2}.table-wrap tr{background:linear-gradient(145deg,var(--site-card-strong),var(--site-card))}dialog,.form-actions{background:#172131f2}}
