@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('/fonts/inter.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('/fonts/inter-cyr.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
/* SEBE Бронирование · общий дизайн-слой — iOS 26 / Liquid Glass.
   Системный шрифт (SF на Apple, Inter — фолбэк), стеклянные материалы,
   мягкие тени, крупные скругления, пружинное движение. */
:root{
  --accent:#6366f1; --accent-ink:#4f46e5; --accent-2:#818cf8; --online:#06b6d4;
  --ink:#0f1722; --soft:#5d6a78; --mute:#8a96a4;
  --line:#e7edf3; --bg:#eef2f7; --white:#fff; --track:#eef2f6;
  --ok:#1e9e6a; --danger:#e5484d;
  /* скругления (iOS «continuous» ощущение — крупнее) */
  --r-sm:12px; --r:16px; --r-lg:22px; --r-xl:28px;
  /* тени — мягкие, многослойные, низкоконтрастные */
  --sh-sm:0 1px 2px rgba(15,23,34,.04), 0 2px 8px -3px rgba(15,23,34,.07);
  --sh-md:0 10px 30px -12px rgba(15,23,34,.16), 0 2px 8px -4px rgba(15,23,34,.08);
  --sh-lg:0 40px 90px -32px rgba(15,23,34,.32), 0 12px 30px -18px rgba(15,23,34,.18);
  /* стекло */
  --glass-bg:rgba(255,255,255,.72); --glass-line:rgba(255,255,255,.55);
  --glass-blur:saturate(180%) blur(20px);
  /* движение */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);
  --dur-fast:150ms; --dur:220ms; --dur-slow:420ms;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter","Segoe UI",Roboto,Arial,sans-serif;
  color:var(--ink);background:var(--canvas,#f6f7f9);line-height:1.5;letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
svg.ic{width:20px;height:20px;display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sebe-logo{height:28px;width:auto;display:block;flex:none}

/* ---- кнопки: пресс-фидбек + лёгкий подъём на точных указателях ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-weight:600;font-size:15px;line-height:1;
  padding:12px 18px;border-radius:13px;border:1px solid transparent;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out), background-color var(--dur) ease, color var(--dur) ease, border-color var(--dur) ease}
.btn:active{transform:scale(.97)}
.btn--p{background:linear-gradient(180deg,var(--accent-2),var(--accent));color:#fff;
  box-shadow:0 1px 1px rgba(99,102,241,.4), 0 8px 20px -8px rgba(99,102,241,.55)}
.btn--g{background:#fff;color:var(--ink);border-color:var(--line);box-shadow:var(--sh-sm)}
.btn--ghost{background:transparent;color:var(--soft);border-color:var(--line)}
.btn--ghost:hover{color:var(--ink)}
.btn--sm{padding:9px 13px;font-size:13.5px;border-radius:10px}
.btn--lg{padding:15px 24px;font-size:16px;border-radius:15px}
.btn--block{width:100%}
@media (hover:hover) and (pointer:fine){
  .btn--p:hover{box-shadow:0 2px 3px rgba(99,102,241,.4), 0 14px 28px -10px rgba(99,102,241,.6);transform:translateY(-1px)}
  .btn--p:active{transform:scale(.97)}
  .btn--g:hover{border-color:#d3dce4;box-shadow:var(--sh-md)}
}

/* ---- поля ввода: iOS-стиль, 16px (без зума на фокус в iOS) ---- */
label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin:14px 0 6px}
input:not([type=checkbox]):not([type=radio]),select,textarea{
  width:100%;font-family:inherit;font-size:16px;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:12px;padding:12px 14px;
  transition:border-color var(--dur) ease, box-shadow var(--dur) ease, background-color var(--dur) ease}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 4px rgba(99,102,241,.15)}

/* ---- поверхности ---- */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm)}
.glass{background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-line);box-shadow:var(--sh-md)}
.err{display:none;background:#fef2f2;color:#b42318;border:1px solid #fecdca;border-radius:12px;padding:10px 12px;font-size:13.5px;margin-top:14px}
.err.on{display:block}
.muted{color:var(--soft)}

/* ---- Safari: гасим backdrop-filter ----
   Несколько блюр-слоёв (.top + .sidebar + .glass) + живой iframe-предпросмотр
   (у него внутри свои блюры) уводят компоновщик Safari в бесконечную перерисовку —
   раздел «Страница брони»/«Меню» зависает. В Chrome/Firefox/Edge всё ок, их не трогаем.
   @supports(-webkit-named-image) матчит ТОЛЬКО Safari (macOS+iOS). Фон делаем плотным —
   вид почти неотличим от «жидкого стекла». */
@supports (background:-webkit-named-image(i)){
  :root{--glass-bg:rgba(255,255,255,.97)}
  .glass,.top,.sidebar,.bar,.obj__busy{-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
  .top{background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.95)) !important}
  .sidebar{background:linear-gradient(180deg,#ffffff,#f7f8fb) !important}
}

/* ---- пресс-фидбек для любых нажимаемых поверхностей ---- */
.press{transition:transform var(--dur-fast) var(--ease-out)}
.press:active{transform:scale(.97)}

/* ---- reveal при загрузке (fade + подъём), стаггер через --i ---- */
@keyframes ui-reveal{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes ui-pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@keyframes ui-fade{from{opacity:0}to{opacity:1}}
.ui-reveal{opacity:0;animation:ui-reveal var(--dur-slow) var(--ease-out) forwards;animation-delay:calc(var(--i,0)*60ms)}
.ui-pop{opacity:0;animation:ui-pop var(--dur) var(--ease-out) forwards;animation-delay:calc(var(--i,0)*50ms)}

@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto!important}
  .btn:active,.press:active,.btn--p:hover{transform:none}
  .ui-reveal,.ui-pop{animation:ui-fade var(--dur) ease forwards}
}

/* ============================================================
   SEBE Liquid Glass — unified material + motion (v2 redesign)
   All additive. Existing rules above untouched except .btn/.btn--p
   gain position/overflow/gradient for the sheen pseudo.
   ============================================================ */

/* --- 1. Token layer: accent gradient system, tints, elevation --- */
:root{
  --accent-grad:linear-gradient(135deg,var(--accent-2),var(--accent));
  --accent-grad-soft:linear-gradient(135deg,rgba(129,140,248,.14),rgba(99,102,241,.12));
  --tint-8:rgba(99,102,241,.08); --tint-12:rgba(99,102,241,.12); --tint-16:rgba(99,102,241,.16);
  --ring:0 0 0 4px rgba(99,102,241,.15); --ring-tight:0 0 0 3px rgba(99,102,241,.14);
  --surface:#fff; --surface-2:#f7f8fa; --r-card:16px;
  --glass-tint:rgba(99,102,241,.05);
  --glass-edge:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.22));
  --glass-blur:saturate(190%) blur(20px);
  /* карточки — плоские, с чёткой кромкой (Stripe/Linear): hairline + шёпот тени, без тяжёлого подъёма */
  --elev-1:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.05);
  --elev-2:0 8px 28px -12px rgba(15,23,34,.22),inset 0 1px 0 rgba(255,255,255,.7);
  --elev-3:0 30px 70px -28px rgba(15,23,34,.4),0 10px 30px -18px rgba(15,23,34,.2),inset 0 1px 0 rgba(255,255,255,.65);
}

/* --- 2. Ambient canvas: спокойный почти-белый холст (Linear/Stripe/Vercel), акцент — только у элементов.
   Меш успокоен до шёпота у верхних углов (было плотное индиго-полотно, читалось «дёшево»). --- */
:root{--canvas:#f5f6f8}
body{position:relative}
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(70vw 42vh at 8% -8%,rgba(99,102,241,.05),transparent 62%),
    radial-gradient(60vw 40vh at 100% -6%,rgba(129,140,248,.045),transparent 60%);}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.02;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* --- 3. True layered glass material (upgrades .glass; .top/.sidebar opt in per-file) --- */
.glass{position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.66)),var(--glass-tint);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid transparent;box-shadow:var(--elev-2)}
/* rim-псевдо только на НЕскроллящихся поверхностях (.glass); у .drawer/.modal__card
   inset:0 в скролл-контейнере уезжал бы вместе с контентом — там кромка рисуется
   через border-box-градиент прямо на элементе (см. их стили в app/admin). */
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;
  padding:1px;background:var(--glass-edge);pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;}

/* --- 4. Accent unification: primary button + sheen --- */
.btn{position:relative;overflow:hidden}
.btn--p{background:var(--accent-grad);
  box-shadow:0 1px 1px rgba(99,102,241,.4),0 8px 20px -8px rgba(99,102,241,.55),inset 0 1px 0 rgba(255,255,255,.4)}
.btn--p::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.35) 50%,transparent 60%);
  transform:translateX(-120%);opacity:0}
@media (hover:hover) and (pointer:fine){
  .btn--p:hover::after{animation:btn-sheen 600ms var(--ease-out)}
}
@keyframes btn-sheen{from{transform:translateX(-120%);opacity:1}to{transform:translateX(120%);opacity:1}}

/* --- 5. Numerics: tabular figures on every metric value --- */
.num,.kpi .v,.stat .v,.dash-card .dc-v,.tn__meta b,.paysum__row b,.guest-row__v b,.tcol__h .n,.km-row b,.stat .v small{
  font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1,'cv11' 1;letter-spacing:-.02em}

/* --- 6. Unified keyboard focus ring (specificity 0, never fights inline styles) --- */
:where(.btn,.tbtn,.sb-link,.dash-card,.guest-row,.seg__b,.segbtn,.cell,.tn,.obj-card,[data-manage]):focus-visible{
  outline:none;box-shadow:var(--ring-tight)}

/* --- 7. Shared motion grammar --- */
@keyframes ui-valueIn{from{opacity:0;transform:translateY(6px);filter:blur(4px)}60%{filter:blur(0)}to{opacity:1;transform:none}}
.ui-value{animation:ui-valueIn .34s var(--ease-out) both;animation-delay:80ms}
@keyframes ui-section{from{opacity:0;transform:translateY(8px) scale(.994)}to{opacity:1;transform:none}}
@keyframes ui-dot{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.35);opacity:.5}}
@keyframes ui-shimmer{to{transform:translateX(100%)}}
.sk{position:relative;overflow:hidden;background:var(--track);border-radius:12px}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);animation:ui-shimmer 1.25s linear infinite}
.sk--kpi{height:76px}.sk--row{height:64px;margin-bottom:12px}

/* --- 8. Card material: resting bevel + hover lift, shared across both panels --- */
:where(.kpi,.tn,.stat,.tcol,.dash-card,.panel,.guest-row,.ctask,.obj-card){box-shadow:var(--elev-1)}
:where(.kpi,.tn,.stat,.dash-card,.guest-row){position:relative}
:where(.kpi,.dash-card,.tn)::after{content:"";position:absolute;inset:0 0 auto 0;height:2px;
  border-radius:var(--r-card) var(--r-card) 0 0;background:var(--accent-grad);opacity:0;
  transition:opacity var(--dur) var(--ease-out);pointer-events:none}
@media (hover:hover) and (pointer:fine){
  :where(.kpi,.dash-card,.tn):hover::after{opacity:.9}
  .kpi:hover,.tn:hover,.stat:hover{transform:translateY(-1px);box-shadow:var(--elev-2)}
  .tn,.kpi,.stat{transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur) var(--ease-out)}
}

/* --- 9. Dark mode: token-only flip, scaffolded as OPT-IN (set <html data-theme=dark>).
   Not auto-activated on prefers-color-scheme yet — several app.html surfaces still use
   literal whites; enable auto-dark only after a full surface audit. --- */
:root[data-theme=dark]{
  --ink:#e8edf3;--soft:#9aa7b5;--mute:#6b7885;--line:#232c38;
  --bg:#0c1420;--surface:#151c26;--surface-2:#1a222e;--white:#151c26;--track:#1a222e;
  --glass-bg:rgba(21,28,38,.62);--glass-line:rgba(255,255,255,.07);--glass-tint:rgba(129,140,248,.08);
  --glass-edge:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.04));
  --sh-sm:0 1px 2px rgba(0,0,0,.4),0 2px 8px -3px rgba(0,0,0,.5);
  --elev-1:0 1px 2px rgba(0,0,0,.5),0 4px 12px -6px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08);
  --elev-2:0 8px 28px -12px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.1);
  --elev-3:0 30px 70px -28px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.09);
}
:root[data-theme=dark] body::after{mix-blend-mode:screen;opacity:.05}

/* --- 11. Ритм-утилиты v3: единый словарь для всех страниц ---
   .eyebrow      — подпись секции (один стиль на весь продукт)
   .empty-mini   — пустое состояние: точка + приглушённый текст, не «голая» строка
   .iconbtn      — утилитарная икон-кнопка (↑ ↓ ✕ ✎ − ×): один размер, ghost, пресс
   .row-h        — ховер-подсветка строки списка/таблицы */
.eyebrow{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--mute)}
.empty-mini{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:26px 16px;color:var(--mute);font-size:13px;text-align:center}
.empty-mini::before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor;opacity:.35}
.iconbtn{width:32px;height:32px;flex:none;display:inline-flex;align-items:center;justify-content:center;
  border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--soft);cursor:pointer;
  font-size:14px;line-height:1;padding:0;
  transition:background-color 150ms ease,color 150ms ease,border-color 150ms ease,transform 150ms var(--ease-out)}
.iconbtn:hover{background:var(--surface-2);color:var(--ink)}
.iconbtn:active{transform:scale(.92)}
.iconbtn:focus-visible{outline:none;box-shadow:var(--ring-tight)}
.iconbtn--danger:hover{background:#fef2f2;border-color:#fecdca;color:#b42318}
.iconbtn[disabled]{opacity:.4;cursor:default;pointer-events:none}
.row-h{transition:background-color 150ms ease}
.row-h:hover{background:var(--surface-2)}

/* --- 10. Reduced-motion: neutralize all new motion, keep only fades --- */
@media (prefers-reduced-motion:reduce){
  .ui-value,.sk::after,.btn--p::after{animation:none!important}
  .ui-value{opacity:1;transform:none;filter:none}
  .btn--p:hover::after{animation:none}
  .view,.panel{animation:ui-fade var(--dur) ease both!important}
  .kpi:hover,.tn:hover,.stat:hover,.dash-card:hover{transform:none}
  .iconbtn:active{transform:none}
}