/* ============================================================
   FORMA AI — общий стиль экранов входа и авторизации
   Токены и компоненты переиспользуют язык продукта (index.html,
   dashboard.html, catalog-mockup.html). Тёмная тема.
   ============================================================ */

@font-face{font-family:"Gilroy";font-weight:400;src:url("fonts/Gilroy-Regular.ttf") format("truetype");font-display:swap;}
@font-face{font-family:"Gilroy";font-weight:500;src:url("fonts/Gilroy-Medium.ttf") format("truetype");font-display:swap;}
@font-face{font-family:"Gilroy";font-weight:600;src:url("fonts/Gilroy-SemiBold.ttf") format("truetype");font-display:swap;}
@font-face{font-family:"Gilroy";font-weight:700;src:url("fonts/Gilroy-Bold.ttf") format("truetype");font-display:swap;}
@font-face{font-family:"Gilroy";font-weight:800;src:url("fonts/Gilroy-ExtraBold.ttf") format("truetype");font-display:swap;}
@font-face{font-family:"Gilroy";font-weight:900;src:url("fonts/Gilroy-Black.ttf") format("truetype");font-display:swap;}

:root{
  --yellow:#FFB800; --yellow-deep:#E6A600;
  --bg:#0C0C0C; --rail:#0E0E0E; --surface:#1A1A1A; --surface-2:#222; --surface-3:#2A2A2A;
  --stage:#070707; --border:#2A2A2A; --border-soft:#1F1F1F;
  --fg:#F2F2F2; --fg-strong:#FFF; --fg-muted:#9A9A9A; --fg-dim:#6A6A6A;
  --green:#34C77B; --green-bg:rgba(52,199,123,.14); --red:#F0726A; --red-bg:rgba(240,114,106,.14);
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  --ring:0 0 0 3px rgba(255,184,0,.5);
  --sh-2:0 8px 24px rgba(0,0,0,.55); --sh-3:0 22px 60px rgba(0,0,0,.7);
  --ease:cubic-bezier(.22,1,.36,1); --fast:120ms; --base:200ms;
  --font:"Gilroy","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{margin:0;font-family:var(--font);background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased;}
button,input,select,textarea{font-family:inherit;}
[hidden]{display:none !important;}
::selection{background:rgba(255,184,0,.32);}
a{color:inherit;}

/* yellow dot accent used after titles across the product */
.dot{display:inline-block;width:.32em;height:.32em;margin-left:.12em;border-radius:50%;background:var(--yellow);vertical-align:baseline;transform:translateY(.02em);}

/* ---------- brand mark (white rounded square + icon) ---------- */
.mark{background:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 auto;box-shadow:0 2px 8px rgba(0,0,0,.4);}
.mark img{display:block;}

/* ---------- focus ring (keyboard) ---------- */
:focus-visible{outline:none;box-shadow:var(--ring);}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:46px;padding:0 18px;
  border-radius:var(--r-sm);border:1.5px solid var(--border);background:var(--surface);color:var(--fg);
  font-size:13.5px;font-weight:700;cursor:pointer;
  transition:border-color var(--base) var(--ease),background var(--fast) var(--ease),color var(--fast) var(--ease),transform var(--fast) var(--ease),box-shadow var(--base) var(--ease);}
.btn svg{width:17px;height:17px;}
.btn:hover{border-color:var(--fg-dim);background:var(--surface-2);color:var(--fg-strong);}
.btn:active{transform:scale(.98);}
.btn:disabled{opacity:.45;cursor:not-allowed;}

.btn.solid{background:var(--yellow);border-color:var(--yellow);color:#000;font-weight:800;}
.btn.solid:hover{background:var(--yellow-deep);border-color:var(--yellow-deep);color:#000;box-shadow:0 8px 22px rgba(255,184,0,.22);}

.btn.block{width:100%;}
.btn.lg{height:52px;font-size:15px;}

/* Yandex ID button — оригинальная кнопка FORMA.
   ВАЖНО (handoff): по гайдлайнам Яндекса в проде здесь должна стоять
   ФИРМЕННАЯ кнопка Yandex ID. Слот .ya-mark — место под официальный знак. */
.btn.yandex{background:#fff;border-color:#fff;color:#1A1A1A;font-weight:800;font-size:15px;height:56px;letter-spacing:.005em;}
.btn.yandex:hover{background:#F0F0F0;border-color:#F0F0F0;color:#000;box-shadow:0 10px 28px rgba(0,0,0,.45);}
.btn.yandex .ya-mark{width:24px;height:24px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.btn.yandex .ya-mark svg{width:100%;height:100%;display:block;}
.btn.yandex.is-loading{color:transparent;}
.btn.yandex.is-loading .ya-mark{opacity:0;}

/* spinner that can live inside a button */
.btn .spin,.spin{width:20px;height:20px;border-radius:50%;border:2.5px solid rgba(0,0,0,.25);border-top-color:#000;animation:fa-spin .7s linear infinite;}
.btn .spin{position:absolute;}
.btn.is-loading{position:relative;pointer-events:none;}
.btn.solid.is-loading,.btn.yandex.is-loading{color:transparent;}
.btn.solid.is-loading .spin{border-color:rgba(0,0,0,.25);border-top-color:#000;}

/* secondary / ghost link button */
.linkbtn{background:transparent;border:0;color:var(--fg-muted);font-weight:700;font-size:13px;cursor:pointer;padding:6px 4px;border-radius:6px;
  transition:color var(--fast) var(--ease);}
.linkbtn:hover{color:var(--fg-strong);}

/* ============================================================
   SPINNERS
   ============================================================ */
@keyframes fa-spin{to{transform:rotate(360deg);}}
.ring{width:38px;height:38px;border-radius:50%;border:3px solid #222;border-top-color:var(--yellow);animation:fa-spin .8s linear infinite;}
.ring.sm{width:18px;height:18px;border-width:2px;}

/* ============================================================
   AUTH CARD + CENTERED STAGE (screens A–E)
   ============================================================ */
.auth-stage{min-height:100%;display:flex;align-items:center;justify-content:center;padding:32px 20px;position:relative;overflow:hidden;}
.auth-stage::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 32%,#181818 0%,#070707 70%);z-index:0;}
.auth-stage > *{position:relative;z-index:1;}

.auth-card{width:100%;max-width:432px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--sh-3);padding:40px 36px 30px;text-align:center;animation:fcatUp .42s var(--ease);}
.auth-icon{display:flex;justify-content:center;margin-bottom:22px;}
.auth-icon .mark{width:60px;height:60px;border-radius:15px;}
.auth-icon .mark img{width:38px;height:38px;}
.auth-title{font-size:30px;font-weight:900;letter-spacing:.01em;color:var(--fg-strong);line-height:1.05;}
.auth-sub{font-size:14px;color:var(--fg-muted);margin-top:13px;line-height:1.55;max-width:32ch;margin-left:auto;margin-right:auto;}

.auth-actions{margin-top:28px;display:flex;flex-direction:column;gap:14px;}
.auth-foot{margin-top:18px;font-size:12px;color:var(--fg-dim);line-height:1.5;}
.auth-foot a{color:var(--fg-muted);text-decoration:none;border-bottom:1px solid var(--border);}
.auth-foot a:hover{color:var(--yellow);border-color:var(--yellow);}

/* state icon disc (D / E) */
.state-ico{width:62px;height:62px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 4px;}
.state-ico svg{width:30px;height:30px;}
.state-ico.neutral{background:var(--surface-3);color:var(--fg-muted);}
.state-ico.warn{background:rgba(255,184,0,.12);color:var(--yellow);}
.state-ico.err{background:var(--red-bg);color:var(--red);}

/* account chip shown on the "no access" screen */
.acct{display:inline-flex;align-items:center;gap:11px;margin:6px auto 2px;padding:8px 14px 8px 8px;border:1px solid var(--border);
  border-radius:var(--r-pill);background:var(--bg);max-width:100%;}
.acct .av{width:32px;height:32px;border-radius:50%;flex:0 0 auto;background:var(--yellow);color:#000;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;overflow:hidden;}
.acct .av img{width:100%;height:100%;object-fit:cover;}
.acct .em{font-size:13px;font-weight:700;color:var(--fg-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* splash (B) */
.splash{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;position:relative;background:radial-gradient(circle at 50% 42%,#141414 0%,#070707 70%);}
.splash .mark{width:60px;height:60px;border-radius:15px;}
.splash .mark img{width:38px;height:38px;}
.splash .lbl{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-dim);}

/* ============================================================
   MODAL OVERLAY (F session expired, admin confirmations)
   ============================================================ */
.overlay{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(0,0,0,.62);backdrop-filter:blur(3px);}
.modal{width:100%;max-width:440px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--sh-3);padding:30px 30px 26px;animation:fcatUp .26s var(--ease);}
.modal.wide{max-width:520px;}
.modal-ico{margin-bottom:18px;}
.modal h2{margin:0;font-size:21px;font-weight:800;color:var(--fg-strong);letter-spacing:.01em;}
.modal p{margin:12px 0 0;font-size:14px;color:var(--fg-muted);line-height:1.55;}
.modal .big-email{margin:18px 0 4px;padding:14px 16px;border-radius:var(--r-sm);background:var(--bg);border:1px solid var(--border);
  font-size:17px;font-weight:800;color:var(--fg-strong);word-break:break-all;text-align:center;}
.modal-actions{margin-top:24px;display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;}
.modal-actions.stretch .btn{flex:1;}

@keyframes fcatFade{from{opacity:0;}to{opacity:1;}}
@keyframes fcatUp{from{transform:translateY(10px);}to{transform:translateY(0);}}

/* ============================================================
   INPUTS / SELECTS / FIELDS
   ============================================================ */
.field{display:flex;flex-direction:column;gap:8px;text-align:left;}
.field + .field{margin-top:16px;}
.flabel{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--fg-muted);}
.flabel .opt{font-weight:500;text-transform:none;letter-spacing:0;color:var(--fg-dim);}
.inp,.sel{width:100%;height:46px;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-sm);
  color:var(--fg);font-size:14px;font-weight:500;padding:0 13px;
  transition:border-color var(--base) var(--ease),box-shadow var(--base) var(--ease);}
.inp::placeholder{color:var(--fg-dim);}
.inp:hover,.sel:hover{border-color:var(--fg-dim);}
.inp:focus,.sel:focus{outline:none;border-color:var(--yellow);box-shadow:var(--ring);}
.inp.invalid{border-color:var(--red);}
.selwrap{position:relative;}
.selwrap .sel{appearance:none;padding-right:36px;cursor:pointer;}
.selwrap .chev{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--fg-muted);pointer-events:none;}
.field .err-msg{font-size:11.5px;color:var(--red);font-weight:600;display:none;}
.field.has-error .err-msg{display:block;}

/* ============================================================
   APP SHELL (rail + topbar) — reused for G / F / I
   ============================================================ */
.app{display:grid;grid-template-columns:74px 1fr;height:100vh;min-height:100%;}
.rail{background:var(--rail);border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:center;padding:16px 0 14px;gap:8px;}
.rail .mark{width:42px;height:42px;border-radius:11px;margin-bottom:14px;}
.rail .mark img{width:27px;height:27px;}
.rnav{display:flex;flex-direction:column;gap:6px;width:100%;align-items:center;}
.rbtn{position:relative;width:46px;height:46px;border-radius:12px;border:0;background:transparent;color:var(--fg-muted);
  display:flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none;
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease);}
.rbtn svg{width:21px;height:21px;}
.rbtn:hover{background:var(--surface-2);color:var(--fg);}
.rbtn.active{background:var(--surface-2);color:var(--yellow);}
.rbtn.active::before{content:"";position:absolute;left:-16px;top:50%;transform:translateY(-50%);width:3px;height:22px;border-radius:0 3px 3px 0;background:var(--yellow);}
.rail .spacer{flex:1;}

/* ---- user chip at bottom of rail (G) ---- */
.userchip{position:relative;width:46px;height:46px;border-radius:50%;border:1.5px solid var(--border);background:var(--surface-2);padding:0;
  cursor:pointer;display:flex;align-items:center;justify-content:center;overflow:hidden;flex:0 0 auto;
  transition:border-color var(--base) var(--ease),transform var(--fast) var(--ease);}
.userchip:hover{border-color:var(--yellow);}
.userchip:active{transform:scale(.96);}
.userchip .av{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--yellow);color:#000;font-weight:800;font-size:15px;}
.userchip .av img{width:100%;height:100%;object-fit:cover;}

/* popover */
.popover{position:absolute;left:62px;bottom:0;width:264px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md);box-shadow:var(--sh-3);padding:7px;z-index:40;animation:popIn .18s var(--ease);}
@keyframes popIn{from{transform:translateY(8px) scale(.98);}to{transform:translateY(0) scale(1);}}
.popover .pp-head{display:flex;align-items:center;gap:11px;padding:11px 11px 13px;}
.popover .pp-av{width:42px;height:42px;border-radius:50%;flex:0 0 auto;background:var(--yellow);color:#000;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;overflow:hidden;}
.popover .pp-av img{width:100%;height:100%;object-fit:cover;}
.popover .pp-id{min-width:0;}
.popover .pp-name{font-size:14px;font-weight:800;color:var(--fg-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.popover .pp-meta{font-size:11.5px;color:var(--fg-muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.popover .pp-role{display:inline-flex;align-items:center;gap:5px;margin-top:9px;height:21px;padding:0 9px;border-radius:var(--r-pill);
  font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:var(--surface-3);color:var(--fg-muted);}
.popover .pp-role.admin{background:rgba(255,184,0,.13);color:var(--yellow);}
.popover .pp-div{height:1px;background:var(--border);margin:4px 0;}
.popover .pp-item{display:flex;align-items:center;gap:11px;width:100%;border:0;background:transparent;color:var(--fg);
  font-size:13.5px;font-weight:700;padding:11px;border-radius:var(--r-sm);cursor:pointer;text-align:left;
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease);}
.popover .pp-item svg{width:17px;height:17px;color:var(--fg-muted);}
.popover .pp-item:hover{background:var(--surface-2);}
.popover .pp-item.danger:hover{color:var(--red);}
.popover .pp-item.danger:hover svg{color:var(--red);}

/* topbar */
.ws{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 22px;border-bottom:1px solid var(--border);background:var(--bg);flex:0 0 auto;}
.crumbs{display:flex;align-items:center;gap:10px;min-width:0;}
.crumbs .ttl{font-size:16px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;color:var(--fg-strong);}
.crumbs .sb{font-size:13px;font-weight:600;color:var(--fg-muted);}
.tb-right{display:flex;align-items:center;gap:10px;flex:0 0 auto;}
.balance{display:inline-flex;align-items:center;gap:9px;height:34px;padding:0 13px;border:1px solid var(--border);border-radius:var(--r-pill);font-size:13px;color:var(--fg-muted);}
.balance b{color:var(--fg-strong);font-weight:800;font-variant-numeric:tabular-nums;}
.balance .d{width:6px;height:6px;border-radius:50%;background:#1E8C5A;}

/* generic dimmed app placeholder used behind F */
.app-dim{filter:saturate(.5) brightness(.62);pointer-events:none;}

/* ---- status badges (Приглашён / Активен / Заблокирован) ---- */
.badge{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 11px;border-radius:var(--r-pill);font-size:11.5px;font-weight:700;white-space:nowrap;}
.badge i{width:7px;height:7px;border-radius:50%;flex:0 0 auto;}
.badge.active{background:var(--green-bg);color:var(--green);}.badge.active i{background:var(--green);}
.badge.invited{background:rgba(255,184,0,.13);color:var(--yellow);}.badge.invited i{background:var(--yellow);}
.badge.blocked{background:var(--surface-3);color:var(--fg-dim);}.badge.blocked i{background:var(--fg-dim);}

/* small avatar/initials used in tables */
.av-sm{width:34px;height:34px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:13px;background:var(--surface-3);color:var(--fg);overflow:hidden;}
.av-sm img{width:100%;height:100%;object-fit:cover;}
.av-sm.gold{background:var(--yellow);color:#000;}

/* sr-only */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;}
}