/* easy-barber.com — стиль «Кобальт». Токены из docs/design/tokens.json */

@font-face{font-family:'Rubik';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/rubik-cyrillic-400-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Rubik';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/rubik-cyrillic-500-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Rubik';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/rubik-cyrillic-600-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Rubik';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/rubik-cyrillic-700-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Rubik';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/rubik-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Rubik';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/rubik-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Rubik';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/rubik-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Rubik';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/rubik-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --bg:#EEF1F7; --surface:#FFFFFF; --surface-2:#F5F7FB; --ink:#121A2E; --muted:#5A6480; --line:#E1E5EE;
  --sidebar-muted:#C3CADB; --tab-muted:#AEB6CC; --disabled:#A0A7BA;
  --brand:#0054FB; /* цвет логотипа */
  --accent:#2E48D4; --on-accent:#FFFFFF; --accent-soft:#E7ECFC; --accent-soft-ink:#2437A8;
  --secondary:#FFB38A; --on-secondary:#3A1A06; --secondary-soft:#FFE8DB; --secondary-soft-ink:#7A3410;
  --success:#1E7A4C; --success-soft:#E3F4EA; --danger:#B42318; --danger-soft:#FDECEA;
  --shadow-card:0 1px 2px rgba(18,26,46,.04),0 8px 24px rgba(18,26,46,.06);
  --shadow-float:0 30px 60px rgba(18,26,46,.18);
  --shadow-tab:0 12px 32px rgba(18,26,46,.28);
  --r-card:24px; --r-card-lg:28px; --r-hero:40px; --r-input:14px;
  --font:'Rubik','Helvetica Neue',sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:15px;line-height:1.45;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:var(--accent)} a:hover{color:var(--ink)}
h1,h2,h3{font-weight:600;letter-spacing:-.025em;line-height:1.08;margin:0}
h1{font-size:36px} h2{font-size:20px} h3{font-size:17px}
p{margin:0}
.muted{color:var(--muted)}
.small{font-size:13px}
.num{font-weight:600;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
svg{flex-shrink:0}

/* ---------- Кнопки ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border-radius:999px;border:1px solid transparent;font:600 15px/1 var(--font);cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .15s,transform .05s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:var(--on-accent)} .btn-primary:hover{background:#2439B0;color:#fff}
.btn-secondary{background:var(--surface);color:var(--ink);border-color:var(--line)} .btn-secondary:hover{background:var(--surface-2);color:var(--ink)}
.btn-ghost{background:transparent;color:var(--accent);padding:0 12px} .btn-ghost:hover{background:var(--accent-soft)}
.btn-danger{background:var(--surface);color:var(--danger);border-color:#F3C7C2} .btn-danger:hover{background:var(--danger-soft);color:var(--danger)}
.btn-block{width:100%} .btn-lg{height:56px;font-size:16px} .btn-sm{height:40px;padding:0 16px;font-size:14px}
.btn[disabled]{opacity:.6;cursor:progress}
.icon-btn{width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--line);color:var(--ink);cursor:pointer}

/* ---------- Поля ---------- */
.field{display:flex;flex-direction:column;gap:6px}
.field label,.label{font-size:13px;font-weight:500;color:var(--muted)}
.input{width:100%;height:52px;padding:0 16px;border-radius:var(--r-input);border:1px solid var(--line);background:var(--surface-2);font:400 16px var(--font);color:var(--ink);transition:border-color .15s,background .15s}
.input::placeholder{color:var(--disabled)}
.input:focus{outline:none;border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 4px var(--accent-soft)}
.field.has-error .input{border-color:var(--danger);background:#FFF8F7}
.field-error{font-size:13px;color:var(--danger)}
.field-hint{font-size:12px;color:var(--muted)}
.input-wrap{position:relative}
.input-wrap .input{padding-right:52px}
.input-wrap .toggle-pass{position:absolute;right:6px;top:4px;width:44px;height:44px;border:0;background:transparent;color:var(--muted);border-radius:12px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.input-wrap .toggle-pass:hover{color:var(--ink);background:var(--line)}
.input-code{text-align:center;font-size:24px;letter-spacing:.3em;font-weight:600}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--muted);cursor:pointer}
.check input{width:20px;height:20px;margin:0;accent-color:var(--accent);flex-shrink:0}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

.pw-meter{display:flex;gap:6px;margin-top:4px}
.pw-meter span{flex:1;height:4px;border-radius:999px;background:var(--line);transition:background .2s}
.pw-meter[data-level="1"] span:nth-child(-n+1){background:#E5484D}
.pw-meter[data-level="2"] span:nth-child(-n+2){background:var(--secondary)}
.pw-meter[data-level="3"] span:nth-child(-n+3){background:var(--accent)}
.pw-meter[data-level="4"] span{background:var(--success)}

/* Сегмент-контрол (выбор роли) */
fieldset{margin:0;min-width:0;border:0}
.segmented{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line)}
.segmented input{position:absolute;opacity:0;pointer-events:none}
.segmented label{height:44px;border-radius:999px;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:14px;color:var(--muted);cursor:pointer;transition:background .15s,color .15s}
.segmented input:checked+label{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(18,26,46,.08),0 2px 8px rgba(18,26,46,.06)}
.segmented input:focus-visible+label{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- Сообщения ---------- */
.alert{display:flex;gap:10px;align-items:flex-start;padding:14px 16px;border-radius:16px;font-size:14px;line-height:1.4;word-break:break-word}
.alert svg{margin-top:1px}
.alert-error{background:var(--danger-soft);color:var(--danger)}
.alert-success{background:var(--success-soft);color:var(--success)}
.alert-info{background:var(--accent-soft);color:var(--accent-soft-ink)}
.alert-warning{background:var(--secondary-soft);color:var(--secondary-soft-ink)}
.flashes{display:flex;flex-direction:column;gap:8px}

/* ---------- Карточки, чипы ---------- */
.card{background:var(--surface);border-radius:var(--r-card);box-shadow:var(--shadow-card);padding:24px}
.chip{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.chip-online{background:var(--accent-soft);color:var(--accent-soft-ink)}
.chip-sub{background:var(--secondary-soft);color:var(--secondary-soft-ink)}
.chip-outline{border:1px solid var(--line);color:var(--muted)}
.chip-success{background:var(--success-soft);color:var(--success)}
.chip-danger{background:var(--danger-soft);color:var(--danger)}
.avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;font-weight:600;color:var(--ink);flex-shrink:0}

/* ==================== AUTH (макет docs/design-login, вариант B) ==================== */
.auth-body{background:var(--accent)}
.auth{position:relative;min-height:100vh;overflow:hidden;background:var(--accent);display:flex;flex-direction:column}
.auth-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.auth-scissors{position:absolute;right:-60px;top:-120px;width:760px;height:760px;color:rgba(255,255,255,.08);transform:rotate(-18deg)}
.auth-scissors svg{width:100%;height:100%;stroke-width:.9}
.auth-ring{position:absolute;left:-140px;top:420px;width:520px;height:520px;border-radius:50%;border:80px solid rgba(255,255,255,.05)}
.auth-top{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:36px 48px 0}
.auth-main{position:relative;z-index:2;flex:1;display:flex;align-items:center;justify-content:center;padding:32px 24px 56px}
.auth-card{width:520px;max-width:100%;border-radius:36px;background:var(--bg);padding:44px 50px;box-shadow:0 40px 90px rgba(8,16,60,.45);display:flex;flex-direction:column;gap:28px;align-items:center}
.auth-card-body{width:100%;display:flex;flex-direction:column;gap:24px}
.auth-head{display:flex;flex-direction:column;gap:10px}
.auth-head h1{font-size:34px;letter-spacing:-.035em}
.auth-head p{font-size:16px;line-height:1.5;color:var(--muted)}
.auth-form{display:flex;flex-direction:column;gap:24px}
.auth-fields{display:flex;flex-direction:column;gap:16px}
.auth-forgot{align-self:flex-end;font-size:14px;font-weight:600;text-decoration:none;margin-top:-4px}
.auth-foot{text-align:center;font-size:15px;color:var(--muted);margin:0}
.auth-foot a{font-weight:600;text-decoration:none}
.auth .field{gap:8px}
.auth .field label{font-size:14px;font-weight:500;color:var(--ink)}
.auth .input{height:56px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.auth .input:focus{border:2px solid var(--accent);padding:0 15px;box-shadow:0 0 0 4px var(--accent-soft)}
.auth .input-wrap .input:focus{padding-right:51px}
.auth .input-wrap .toggle-pass{top:6px}
.auth .field.has-error .input{border:2px solid #C2362B;background:var(--surface);padding:0 15px}
.auth .field-error{color:#C2362B}
.auth .segmented{background:var(--surface-2)}
.auth .segmented label{height:40px;font-size:15px}
.auth .field label.check{color:var(--muted);font-weight:400}
.auth .alert-error{background:#FCEBE9;color:#C2362B}

/* Логотип */
.logo{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:22px;letter-spacing:-.03em;line-height:1;text-decoration:none;white-space:nowrap;color:var(--ink)}
.logo:hover{color:inherit}
.logo-mark{width:40px;height:37px;flex-shrink:0;color:var(--brand)}
.logo-tld{font-weight:600;color:var(--muted)}
.logo-on-accent{color:#fff}.logo-on-accent:hover{color:#fff}
.logo-on-accent .logo-mark{color:#fff}
.logo-on-accent .logo-tld{color:rgba(255,255,255,.6)}
.logo-on-ink{color:#fff}.logo-on-ink:hover{color:#fff}
.logo-on-ink .logo-tld{color:rgba(255,255,255,.6)}
.logo-on-ink .logo-mark{color:#fff}
.auth-card-logo .logo{font-size:20px}
.auth-card-logo .logo-mark{width:38px;height:35px}

/* Плавающие карточки продукта (декор) */
.float-card{position:absolute;border-radius:24px;display:flex;flex-direction:column;box-shadow:0 24px 50px rgba(10,20,70,.35)}
.fc-booking{width:320px;left:6.25vw;top:110px;background:#fff;color:var(--ink);padding:18px;gap:14px;transform:rotate(-5deg);opacity:.96}
.fc-eyebrow{font-size:12px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.06em}
.fc-person{display:flex;align-items:center;gap:12px}
.fc-person .t{display:flex;flex-direction:column;gap:2px}
.fc-person b{font-size:16px;font-weight:600}
.fc-person .t span{font-size:13px;color:var(--muted)}
.fc-av{width:44px;height:44px;border-radius:15px;background:#BFD0FF;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:16px}
.fc-sub{width:230px;left:10.4vw;bottom:190px;background:var(--secondary);color:var(--on-secondary);padding:18px 20px;gap:6px;transform:rotate(3deg);box-shadow:0 24px 50px rgba(10,20,70,.3)}
.fc-label{font-size:13px;font-weight:600}
.fc-title{font-size:26px;font-weight:600;letter-spacing:-.025em;line-height:1.08}
.fc-small{font-size:13px;white-space:nowrap}
.fc-payout{width:290px;right:7.6vw;bottom:240px;background:var(--ink);color:#fff;padding:18px 20px;gap:10px;transform:rotate(5deg)}
.fc-muted{font-size:13px;color:var(--tab-muted)}
.fc-xs{font-size:12px}
.fc-money{font-size:32px;font-weight:600;letter-spacing:-.02em;line-height:1}

/* Мобильная шапка */
.auth-mhero{display:none}

.big-icon{width:72px;height:72px;border-radius:24px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:12px}
.link-sm{font-size:14px;font-weight:500;text-decoration:none}

/* Кнопка в процессе отправки — спиннер вместо текста */
.btn.is-loading{position:relative;color:transparent!important;opacity:1}
.btn.is-loading::after{content:"";position:absolute;width:22px;height:22px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .7s linear infinite}
.btn-secondary.is-loading::after{border-color:var(--line);border-top-color:var(--accent)}
@keyframes spin{to{transform:rotate(360deg)}}

@media (min-width:1024px) and (max-height:819px){
  .auth-main{align-items:flex-start;padding-top:96px}
  .auth-top{position:absolute;left:0;right:0;top:0}
}
@media (min-width:1024px){ .auth-top{position:absolute;left:0;right:0;top:0} .auth-main{min-height:100vh} }
@media (min-width:1024px) and (max-width:1279px){
  .fc-sub{display:none}
  .fc-booking{transform:rotate(-5deg) scale(.85);transform-origin:left top;left:24px;top:130px}
  .fc-payout{transform:rotate(5deg) scale(.85);transform-origin:right bottom;right:24px}
}
@media (max-width:1023px){
  .float-card{display:none}
  .auth-top{padding:28px 24px 0}
  .auth-card{width:100%;max-width:560px;padding:40px 32px}
}
@media (max-width:639px){
  .auth-top,.auth-card-logo,.auth-bg{display:none}
  .auth{background:var(--bg)}
  .auth-body{background:var(--bg)}
  .auth-mhero{display:flex;position:relative;overflow:hidden;height:380px;flex-direction:column;justify-content:space-between;background:var(--accent);color:#fff;padding:60px 24px 56px}
  .auth-mscissors{position:absolute;right:-90px;top:30px;width:320px;height:320px;color:rgba(255,255,255,.12);transform:rotate(-18deg);pointer-events:none}
  .auth-mscissors svg{width:100%;height:100%;stroke-width:1.1}
  .auth-mhero .logo{position:relative;font-size:20px}
  .auth-mhero .logo-mark{width:38px;height:35px}
  .auth-mhero-text{position:relative;display:flex;flex-direction:column;gap:10px}
  .auth-mhero-title{font-size:40px;font-weight:600;letter-spacing:-.04em;line-height:1}
  .auth-mhero-sub{font-size:15px;color:#D3DAFB}
  .auth-main{margin-top:-28px;padding:0;align-items:stretch}
  .auth-card{border-radius:28px 28px 0 0;box-shadow:none;padding:28px 20px 40px;max-width:none;min-height:calc(100vh - 352px)}
  .auth-card-body{gap:18px}
  .auth-form{gap:18px}
  .auth-head h1{font-size:30px}
}

/* ==================== CRM ==================== */
.crm{min-height:100vh}
.sidebar{position:fixed;left:16px;top:16px;bottom:16px;width:240px;border-radius:var(--r-card-lg);background:var(--ink);color:#fff;padding:28px 16px 16px;display:flex;flex-direction:column;gap:28px;overflow-y:auto;z-index:20}
.sidebar .logo{padding:0 6px;font-size:19px;gap:8px}
.sidebar .logo-mark{width:34px;height:32px}
.shop-switch{display:flex;align-items:center;gap:12px;width:100%;padding:10px;border-radius:18px;background:rgba(255,255,255,.06);color:#fff}
.shop-switch .mark{width:36px;height:36px;border-radius:12px;background:#fff;color:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;flex-shrink:0}
.shop-switch .t{display:flex;flex-direction:column;gap:2px;min-width:0}
.shop-switch .t b{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shop-switch .t span{font-size:12px;color:var(--tab-muted)}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{height:46px;padding:0 14px;border-radius:999px;color:var(--sidebar-muted);display:flex;align-items:center;gap:12px;text-decoration:none;font-size:15px;font-weight:500}
.nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.nav a.active{background:var(--accent);color:#fff;font-weight:600}
.nav a[aria-disabled="true"]{opacity:.55;cursor:default}
.nav a[aria-disabled="true"]:hover{background:none;color:var(--sidebar-muted)}
.nav .soon{margin-left:auto;font-size:11px;font-weight:600;color:var(--tab-muted);background:rgba(255,255,255,.08);padding:3px 8px;border-radius:999px}
.plan-card{margin-top:auto;padding:16px;border-radius:20px;background:rgba(255,255,255,.06);display:flex;flex-direction:column;gap:10px}
.plan-card .bar{height:6px;border-radius:999px;background:rgba(255,255,255,.14)}
.plan-card .bar i{display:block;height:6px;border-radius:999px;background:var(--secondary)}
.plan-card a{font-size:13px;font-weight:500;color:#fff}
.side-user{display:flex;align-items:center;gap:10px;padding:0 6px}
.side-user .t{flex:1;min-width:0;display:flex;flex-direction:column}
.side-user .t b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-user .t span{font-size:12px;color:var(--tab-muted)}
.side-user button{width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.06);color:var(--sidebar-muted);cursor:pointer;display:flex;align-items:center;justify-content:center}
.side-user button:hover{color:#fff;background:rgba(255,255,255,.12)}

.crm-main{margin-left:280px;padding:32px 32px 24px 8px;display:flex;flex-direction:column;gap:24px;min-height:100vh}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.page-head .hello{font-size:14px;font-weight:500;color:var(--muted);margin-bottom:6px}
.summary{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px}
.summary-hero{position:relative;overflow:hidden;border-radius:var(--r-card);background:var(--accent);color:#fff;padding:28px 32px;display:flex;gap:40px;align-items:flex-end}
.summary-hero .num{font-size:44px}
.summary-hero .lbl{font-size:15px;color:rgba(255,255,255,.8);margin-top:8px}
.deco-circle{position:absolute;border-radius:50%;background:rgba(255,255,255,.07);pointer-events:none}
.summary-hero .deco-circle{width:260px;height:260px;right:-60px;top:-80px}
.stat .lbl{font-size:15px;color:var(--muted)}
.stat .num{font-size:44px;margin-top:14px}
.grid-2{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;align-items:start}
.section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.steps{display:flex;flex-direction:column}
.step{display:flex;gap:16px;align-items:center;padding:16px 0;border-top:1px solid var(--line)}
.step:first-child{border-top:0;padding-top:0}
.step .ico{width:48px;height:48px;border-radius:16px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center}
.step .t{flex:1;min-width:0}
.step .t b{display:block;font-weight:600;font-size:16px}
.step .t span{font-size:14px;color:var(--muted)}
.step.done .ico{background:var(--success-soft);color:var(--success)}

/* Сегодня: календарь дня на всю высоту + правая колонка */
.today-grid{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,420px);gap:16px;min-height:520px}
.today-side{display:flex;flex-direction:column;gap:16px;min-height:0}
.next-card{flex:1;display:flex;flex-direction:column}
.next-card .empty{flex:1;justify-content:center}
.day-cal{display:flex;flex-direction:column;padding:0;overflow:hidden}
.day-cal-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 24px;border-bottom:1px solid var(--line)}
.day-cal-body{position:relative;flex:1;display:grid;grid-template-rows:repeat(10,minmax(44px,1fr));padding:18px 24px 16px}
.day-cal-row{display:flex;align-items:flex-start;gap:14px}
.day-cal-time{width:44px;flex-shrink:0;font-size:13px;color:var(--muted);transform:translateY(-8px);font-variant-numeric:tabular-nums}
.day-cal-line{flex:1;border-top:1px solid var(--line)}
.day-cal-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;pointer-events:none}
.day-cal-empty-box{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;background:var(--surface);padding:20px 28px;border-radius:24px;box-shadow:0 0 0 12px var(--surface)}
.day-cal-empty b{font-size:17px}
.day-cal-empty p{max-width:320px}
.segmented-sm{display:inline-flex;grid-template-columns:none;padding:3px}
.segmented-sm span{height:34px;padding:0 16px;border-radius:999px;display:flex;align-items:center;font-size:14px;font-weight:600;color:var(--muted)}
.segmented-sm .on{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(18,26,46,.08),0 2px 8px rgba(18,26,46,.06)}

/* Меню: группы и счётчики */
.nav-group{padding:10px 14px 4px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--tab-muted);opacity:.7}
.sidebar{gap:20px}
.nav-badge{margin-left:auto;min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:var(--secondary);color:var(--on-secondary);font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.grow-card{flex:1}

/* Тикеты */
.ticket-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start;flex:1}
.ticket-form{max-width:760px}
.thread{display:flex;flex-direction:column;gap:14px}
.msg{max-width:82%;padding:14px 18px;border-radius:20px;background:var(--surface-2);border:1px solid var(--line)}
.msg header{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:6px}
.msg header b{font-size:14px}
.msg header span{font-size:12px;color:var(--muted)}
.msg-body{font-size:15px;line-height:1.55;overflow-wrap:anywhere}
.msg-mine{align-self:flex-end;background:var(--accent-soft);border-color:transparent}
.msg-staff header b{color:var(--accent-soft-ink)}
.reply-form{margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.list-link{text-decoration:none;color:inherit;border-radius:12px}
.list-link:hover{background:var(--surface-2)}
.list-row .mono{flex-shrink:0}
.row-link a{color:inherit;text-decoration:none}
.row-link a:hover{color:var(--accent)}

/* Таблицы / списки */
.list{display:flex;flex-direction:column}
.list-row{display:flex;gap:14px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
.list-row:first-child{border-top:0}
.list-row .t{flex:1;min-width:0}
.list-row .t b{display:block;font-weight:600;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list-row .t span{font-size:13px;color:var(--muted)}
.table-wrap{overflow-x:auto}
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th{text-align:left;font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;padding:0 12px 12px}
.table td{padding:12px;border-top:1px solid var(--line);vertical-align:top}
.table td:first-child,.table th:first-child{padding-left:0}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
.secret-box{padding:16px;border-radius:16px;background:var(--surface-2);border:1px dashed var(--line);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:16px;letter-spacing:.08em;word-break:break-all;user-select:all}
.codes{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.codes span{padding:10px;border-radius:12px;background:var(--surface-2);text-align:center;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px}
.stack{display:flex;flex-direction:column;gap:16px}
.stack-sm{display:flex;flex-direction:column;gap:10px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* Утилиты вместо inline-стилей (CSP запрещает style="") */
.av-0{background:#FFB38A}.av-1{background:#BFD0FF}.av-2{background:#FFD98A}.av-3{background:#BFE6CF}
.av-36{width:36px;height:36px;font-size:14px}.av-56{width:56px;height:56px;font-size:20px;border-radius:36%}
.plan-muted{color:var(--tab-muted)}
.pct-0{width:0%}.pct-10{width:10%}.pct-20{width:20%}.pct-30{width:30%}.pct-40{width:40%}.pct-50{width:50%}.pct-60{width:60%}.pct-70{width:70%}.pct-80{width:80%}.pct-90{width:90%}.pct-100{width:100%}
.top-actions{display:flex;gap:8px;align-items:center}
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.center{text-align:center}.items-center{align-items:center}
.wrap{flex-wrap:wrap}.gap-8{gap:8px}.flex{display:flex}

/* Плавающий таб-бар (мобайл) */
.tabbar{display:none}

/* ==================== CLIENT ==================== */
.client-top{max-width:760px;margin:0 auto;padding:24px 20px 0;display:flex;justify-content:space-between;align-items:center}
.client-main{max-width:760px;margin:0 auto;padding:20px 20px 120px;display:flex;flex-direction:column;gap:16px}
.client-hero{position:relative;overflow:hidden;border-radius:var(--r-card-lg);background:var(--accent);color:#fff;padding:28px}
.client-hero h1{font-size:34px;position:relative}
.client-hero p{position:relative;color:rgba(255,255,255,.82);margin-top:8px}
.client-hero .deco-circle{width:240px;height:240px;right:-60px;top:-90px}
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:12px 0}
.empty .big-icon{width:56px;height:56px;border-radius:18px}

/* ==================== ERRORS ==================== */
.auth-body .error-page{background:var(--bg)}
.error-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.error-page .card{max-width:480px;text-align:center;display:flex;flex-direction:column;gap:16px;align-items:center;padding:40px 32px}
.error-page .code{font-size:96px;font-weight:700;letter-spacing:-.04em;color:var(--accent);line-height:1}
.debug{max-width:100%;overflow:auto;text-align:left;font-size:12px;background:var(--surface-2);padding:12px;border-radius:12px;white-space:pre-wrap}

/* ==================== LEGAL ==================== */
.legal-body{background:var(--bg)}
.legal-top{max-width:880px;margin:0 auto;padding:32px 20px 0}
.legal-main{max-width:880px;margin:0 auto;padding:20px 20px 48px;display:flex;flex-direction:column;gap:20px}
.legal{padding:40px 48px;line-height:1.6;overflow-wrap:anywhere}
.legal h1{font-size:36px;margin-bottom:24px}
.legal h2{font-size:20px;margin:28px 0 10px}
.legal h3{font-size:17px;margin:20px 0 8px}
.legal p{margin:0 0 12px}
.legal ul{margin:0 0 12px;padding-left:22px}
mark{background:var(--secondary-soft);color:var(--secondary-soft-ink);border-radius:6px;padding:0 4px}
.legal-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 20px;font-size:13px}
.legal-links a{text-decoration:none;font-weight:500}
.legal-links-muted a{color:var(--muted)} .legal-links-muted a:hover{color:var(--ink)}
.legal-links-auth{position:relative;z-index:2;padding:0 24px 24px}
.legal-links-auth a{color:rgba(255,255,255,.75)} .legal-links-auth a:hover{color:#fff}
.textarea{height:auto;min-height:96px;padding:12px 16px;line-height:1.5;resize:vertical;font:inherit;font-size:15px}
.textarea-lg{min-height:520px;font-size:13px}
.span-2{grid-column:1/-1}
.crm-main .legal-links{margin-top:auto;padding-top:8px}

/* ==================== RESPONSIVE ==================== */
@media (max-width:1180px){
  .summary{grid-template-columns:1fr 1fr}
  .summary-hero{grid-column:1/-1}
  .grid-2{grid-template-columns:1fr}
  .today-grid{grid-template-columns:1fr}
  .ticket-layout{grid-template-columns:1fr}
  .msg{max-width:100%}
  .day-cal-body{min-height:480px}
}
@media (max-width:960px){
  .sidebar{display:none}
  .crm-main{margin-left:0;padding:24px 20px 120px}
  h1{font-size:30px}
  .tabbar{display:flex;position:fixed;left:16px;right:16px;bottom:24px;height:64px;border-radius:999px;background:var(--ink);box-shadow:var(--shadow-tab);padding:8px;gap:4px;justify-content:space-between;z-index:30}
  .tabbar a{flex:0 0 auto;height:48px;min-width:48px;border-radius:999px;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--tab-muted);text-decoration:none;font-size:14px;font-weight:600}
  .tabbar a span{display:none}
  .tabbar a.active{background:var(--accent);color:#fff;padding:0 16px}
  .tabbar a.active span{display:inline}
  .mobile-only{display:initial}
}
@media (min-width:961px){.mobile-only{display:none!important}}
@media (max-width:640px){
  .summary{grid-template-columns:1fr}
  .summary-hero{flex-wrap:wrap;gap:20px 28px;padding:24px}
  .summary-hero .num,.stat .num{font-size:34px}
  .form-grid{grid-template-columns:1fr}
  .card{padding:20px}
  .page-head .btn{width:100%}
  .table .hide-sm{display:none}
}
.big-icon.av-small{width:44px;height:44px;border-radius:14px}
details summary{cursor:pointer;color:var(--accent);list-style:none}
details summary::-webkit-details-marker{display:none}
ol.stack-sm{margin:0;padding-left:20px}
@media (max-width:639px){
  .legal-links-auth{background:var(--bg);padding:0 20px 32px}
  .legal-links-auth a{color:var(--muted)}
  .legal{padding:28px 20px}
  .legal h1{font-size:28px}
}
@media (min-width:1024px){
  .legal-links-auth{position:absolute;left:0;right:0;bottom:0}
}
.nav .soon{flex-shrink:0;font-size:10px;padding:2px 7px}
.sidebar > .side-user{margin-top:auto}
.plan-card + .side-user{margin-top:0}

/* Таблицы-списки: полосы, разделители, кликабельная строка целиком */
.table-rows{border-collapse:separate;border-spacing:0}
.table-rows td{vertical-align:middle;padding:14px 12px;border-top:1px solid var(--line)}
.table-rows tbody tr:nth-child(even) td{background:var(--surface-2)}
.table-rows tbody tr:last-child td{border-bottom:1px solid var(--line)}
.table-rows td:first-child{padding-left:14px}
.table-rows th:first-child{padding-left:14px}
.row-link{cursor:pointer}
.row-link:hover td{background:var(--accent-soft)!important}
.row-link:focus-within td{background:var(--accent-soft)!important}
.nowrap{white-space:nowrap}