/* ============================================================
   makes. ID — те же токены и тот же Liquid Glass, что у сайта
   (--fg, --bg, --glass*, аврора), но с цветом сервисов: вход —
   это первое, что человек видит утром, пусть будет приятно.
   ============================================================ */

:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);

  --bg: #f4f4f7;
  --fg: #1d1d1f;
  --fg-2: #6e6e73;
  --fg-3: #8e8e93;
  --line: rgba(0,0,0,.09);
  --field: rgba(255,255,255,.7);
  --field-brd: rgba(0,0,0,.12);

  --glass: rgba(255,255,255,.62);
  --glass-brd: rgba(255,255,255,.9);
  --glass-hair: rgba(0,0,0,.06);
  --glass-spec: rgba(255,255,255,.95);
  --glass-shadow: 0 30px 80px -30px rgba(20,20,40,.28), 0 6px 22px -10px rgba(20,20,40,.14);

  --primary: #1d1d1f;
  --on-primary: #fff;
  --ring: rgba(88,101,242,.35);
  --bad: #d0443a;
  --bad-bg: rgba(208,68,58,.09);

  --mail: #3b82f6;  --mail-2: #6366f1;
  --crm: #8b5cf6;   --crm-2: #ec4899;
  --uptime: #10b981; --uptime-2: #14b8a6;

  --aur-1: rgba(99,102,241,.34);
  --aur-2: rgba(236,72,153,.22);
  --aur-3: rgba(16,185,129,.24);

  --radius: 22px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #050507;
    --fg: #f5f5f7;
    --fg-2: #a1a1a6;
    --fg-3: #7c7c82;
    --line: rgba(255,255,255,.10);
    --field: rgba(255,255,255,.05);
    --field-brd: rgba(255,255,255,.14);

    --glass: rgba(28,28,32,.55);
    --glass-brd: rgba(255,255,255,.12);
    --glass-hair: rgba(255,255,255,.04);
    --glass-spec: rgba(255,255,255,.14);
    --glass-shadow: 0 30px 90px -30px rgba(0,0,0,.8), 0 6px 22px -10px rgba(0,0,0,.6);

    --primary: #f5f5f7;
    --on-primary: #0a0a0c;
    --ring: rgba(129,140,248,.45);
    --bad: #ff8a80;
    --bad-bg: rgba(255,138,128,.10);

    --aur-1: rgba(99,102,241,.30);
    --aur-2: rgba(236,72,153,.16);
    --aur-3: rgba(16,185,129,.16);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  color: var(--fg);
  font: 16px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
h1 { margin: 0; font-size: clamp(28px, 4.6vw, 40px); line-height: 1.1; letter-spacing: -.03em; font-weight: 700; }
h2 { margin: 0 0 6px; font-size: 20px; letter-spacing: -.02em; }
.lead { margin: 10px 0 0; color: var(--fg-2); font-size: 16px; }
.lead b { color: var(--fg); font-weight: 600; }

/* ---------- Аврора: мягкие пятна цвета за стеклом ---------- */
.aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.aurora span {
  position: absolute; border-radius: 50%;
  background: radial-gradient(closest-side, var(--blob), transparent);
  filter: blur(20px);
  animation: drift var(--d) var(--ease) infinite alternate;
}
.aurora .b1 { --blob: var(--aur-1); --d: 24s; width: 62vmax; height: 62vmax; top: -18vmax; left: -14vmax; }
.aurora .b2 { --blob: var(--aur-2); --d: 30s; width: 50vmax; height: 50vmax; top: 10vmax; right: -16vmax; animation-delay: -8s; }
.aurora .b3 { --blob: var(--aur-3); --d: 36s; width: 48vmax; height: 48vmax; bottom: -20vmax; left: 20vmax; animation-delay: -14s; }
@keyframes drift {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(4vmax, 3vmax, 0) scale(1.08); }
}

/* ---------- Стекло ---------- */
.card {
  position: relative;
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-spec), inset 0 -1px 0 var(--glass-hair);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
  backdrop-filter: blur(28px) saturate(170%);
}

.logo { display: inline-block; font-weight: 800; font-size: 22px; letter-spacing: -.04em; text-decoration: none; }
.logo__dot { color: var(--crm); }

/* ---------- Вход: карточка ровно по центру ---------- */
.center {
  min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center;
  padding: 24px 16px;
}
.card--login {
  width: 100%; max-width: 420px;
  padding: 36px 32px 28px;
  animation: rise .6s var(--ease) both;
}
.card--login .logo { margin-bottom: 28px; }
.card--login h1 { font-size: 30px; }
.card--login .lead { margin-bottom: 24px; }
.card--error { animation: rise .6s var(--ease) both, shake .45s .1s both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px) scale(.985); } }
@keyframes shake {
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

.alert {
  margin: -8px 0 18px; padding: 11px 14px;
  color: var(--bad); background: var(--bad-bg);
  border-radius: 12px; font-size: 14px;
}

.field { display: block; margin-bottom: 16px; }
.field__label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 500; color: var(--fg-2); }
.field input {
  display: block; width: 100%; height: 50px; padding: 0 16px;
  font: inherit; font-size: 16px; color: var(--fg);
  background: var(--field); border: 1px solid var(--field-brd); border-radius: 14px;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.field input::placeholder { color: var(--fg-3); }
.field input:focus { outline: none; border-color: var(--crm); box-shadow: 0 0 0 4px var(--ring); }
.field__pw { position: relative; display: block; }
.field__pw input { padding-right: 52px; }
.eye {
  position: absolute; top: 5px; right: 5px; width: 40px; height: 40px;
  display: grid; place-items: center; padding: 0;
  color: var(--fg-3); background: none; border: 0; border-radius: 10px; cursor: pointer;
}
.eye svg { width: 20px; height: 20px; }
.eye:hover, .eye.is-on { color: var(--fg); }
.eye:focus-visible { outline: 2px solid var(--crm); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 50px; padding: 0 22px;
  font: inherit; font-size: 16px; font-weight: 600; text-decoration: none;
  border: 0; border-radius: 999px; cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s, opacity .2s;
}
.btn svg { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.btn--primary { width: 100%; margin-top: 8px; color: var(--on-primary); background: var(--primary);
  box-shadow: 0 10px 24px -12px rgba(0,0,0,.5); }
.btn--primary:hover { transform: translateY(-1px); }
.btn--primary:hover svg { transform: translateX(3px); }
.btn--primary:active { transform: translateY(0) scale(.99); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--ring); }
.btn.is-busy { opacity: .7; cursor: progress; }
.btn--ghost { height: 36px; padding: 0 14px; font-size: 14px; font-weight: 500;
  color: var(--fg); background: transparent; border: 1px solid var(--line); }
.btn--ghost:hover { background: var(--glass); }

.hint { margin: 20px 0 0; text-align: center; font-size: 13px; color: var(--fg-3); }

.lock {
  width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: 18px;
  color: #fff; border-radius: 18px;
  background: linear-gradient(135deg, var(--crm), var(--crm-2));
}
.lock svg { width: 28px; height: 28px; }

/* ---------- Стартовая ---------- */
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: 960px; margin: 0 auto; padding: 22px 20px;
}
.me { display: flex; align-items: center; gap: 12px; }
.me form { margin: 0 0 0 4px; }
.avatar {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  font-size: 14px; font-weight: 700; color: #fff; letter-spacing: .02em;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--mail-2), var(--crm-2));
}
.me__text { display: grid; line-height: 1.25; }
.me__text b { font-size: 14px; font-weight: 600; }
.me__text span { font-size: 12px; color: var(--fg-2); }

.home { max-width: 960px; margin: 0 auto; padding: 48px 20px 80px; animation: rise .6s var(--ease) both; }
.date { margin: 0 0 8px; font-size: 14px; font-weight: 500; color: var(--fg-2); }
.home > .lead { margin-bottom: 32px; font-size: 18px; }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.tile {
  --c1: var(--fg); --c2: var(--fg);
  position: relative;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px;
  padding: 22px;
  text-decoration: none;
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-spec);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  backdrop-filter: blur(24px) saturate(170%);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  animation: rise .6s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 70ms + 120ms);
}
.tile--mail { --c1: var(--mail); --c2: var(--mail-2); }
.tile--crm { --c1: var(--crm); --c2: var(--crm-2); }
.tile--uptime { --c1: var(--uptime); --c2: var(--uptime-2); }
.tile:hover { transform: translateY(-3px); box-shadow: var(--glass-shadow), 0 18px 40px -20px var(--c1), inset 0 1px 0 var(--glass-spec); }
.tile:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--ring), var(--glass-shadow); }
.tile__icon {
  width: 52px; height: 52px; display: grid; place-items: center;
  color: #fff; border-radius: 16px;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  box-shadow: 0 10px 20px -10px var(--c1), inset 0 1px 0 rgba(255,255,255,.35);
}
.tile__icon svg { width: 26px; height: 26px; }
.tile__text { display: grid; gap: 2px; min-width: 0; }
.tile__name { font-size: 18px; font-weight: 650; letter-spacing: -.01em; }
.tile__about { font-size: 14px; color: var(--fg-2); }
.tile__go { color: var(--fg-3); transition: transform .3s var(--ease), color .3s; }
.tile__go svg { width: 20px; height: 20px; display: block; }
.tile:hover .tile__go { color: var(--c1); transform: translateX(3px); }

.empty { padding: 28px; max-width: 520px; }

@media (max-width: 560px) {
  .card--login { padding: 28px 22px 22px; }
  .me__text { display: none; }
  .home { padding-top: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}