/* ============================================================================
   Система «ВЕКТОР» — МД «ЭТО МОЁ ДЕЛО»
   Тёмная тема, акцент #00e0c6, Manrope + Unbounded.
   ============================================================================ */

:root{
  --bg:         #08080a;
  --bg-soft:    #0c0c0f;
  --surface:    #111115;
  --surface-2:  #17171c;
  --surface-3:  #1e1e24;
  --border:     #232329;
  --border-2:   #31313a;
  --text:       #f3f3f5;
  --text-dim:   #c8c8d0;
  --muted:      #96969f;
  --faint:      #686871;
  --accent:     #00e0c6;
  --accent-ink: #03100d;
  --accent-soft:rgba(0,224,198,.10);
  --warn:       #ff7a6b;
  --warn-soft:  rgba(255,122,107,.12);
  --ok:         #5fe06b;
  --violet:     #9b8cff;
  --orange:     #ff9a3d;
  --font-body:  'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display:'Unbounded', var(--font-body);
  --radius:     16px;
  --radius-sm:  10px;
  --shadow:     0 22px 60px rgba(0,0,0,.5);
  --shadow-sm:  0 8px 24px rgba(0,0,0,.35);
  --sidebar-w:  264px;
  --topbar-h:   72px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--topbar-h) + 18px); }

body{
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.6;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

::selection{ background:var(--accent); color:var(--accent-ink); }

a{ color:var(--text); text-decoration:none; transition:color .16s; }
a:hover{ color:var(--accent); }
img{ max-width:100%; display:block; }
ul,ol{ list-style:none; }
button{ font:inherit; color:inherit; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.16;
  letter-spacing:-.01em;
}

:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ---------- Иконки ---------- */
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.ico{
  width:20px; height:20px; flex-shrink:0;
  fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
.ico-sm{ width:16px; height:16px; stroke-width:1.8; }
.ico-xs{ width:13px; height:13px; stroke-width:1.9; }

/* ---------- Общие элементы ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display);
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted);
}
.eyebrow i{ width:22px; height:1px; background:var(--accent); display:block; }
.eyebrow-plain{ color:var(--faint); }
.accent{ color:var(--accent); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-body); font-weight:700; font-size:14px;
  padding:12px 20px; border-radius:var(--radius-sm);
  border:1px solid transparent; cursor:pointer;
  transition:background .16s, color .16s, border-color .16s, transform .16s;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--accent); color:var(--accent-ink); }
.btn-primary:hover{ background:#5cf3e0; color:var(--accent-ink); }
.btn-ghost{ background:transparent; color:var(--text-dim); border-color:var(--border-2); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }
.btn-done{ background:var(--accent-soft); color:var(--accent); border-color:rgba(0,224,198,.35); }
.btn-done:hover{ background:rgba(0,224,198,.18); color:var(--accent); }
.btn-xs{ font-size:12.5px; padding:6px 11px; border-radius:8px; gap:5px; }
.btn-block{ width:100%; }

.chip{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11.5px; font-weight:600; letter-spacing:.01em;
  padding:3px 8px; border-radius:7px;
  background:var(--surface-2); border:1px solid var(--border);
  color:var(--text-dim); white-space:nowrap;
}
.chip-dir{
  color:var(--dir, var(--accent));
  border-color:var(--dir, var(--accent));
  background:transparent;
}
.chip-dir::before{
  content:''; width:5px; height:5px; border-radius:50%;
  background:var(--dir, var(--accent)); display:block;
}
.chip-rank{ color:var(--muted); }
.chip-date{ color:var(--muted); background:transparent; }
.chip-date.is-overdue{ color:var(--warn); border-color:rgba(255,122,107,.35); background:var(--warn-soft); }
.chip-points{ color:var(--accent); border-color:rgba(0,224,198,.28); background:var(--accent-soft); }
.chip-format{ color:var(--muted); background:transparent; font-weight:600; }

.badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:24px; padding:2px 8px; border-radius:99px;
  font-size:11px; font-weight:700; letter-spacing:.02em;
  background:var(--surface-2); color:var(--muted); border:1px solid var(--border);
}
.badge-warn{ color:var(--warn); background:var(--warn-soft); border-color:rgba(255,122,107,.3); }
.badge-accent{ color:var(--accent); background:var(--accent-soft); border-color:rgba(0,224,198,.3); }

.avatar{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; flex-shrink:0;
  border-radius:11px;
  background:var(--surface-3); border:1px solid var(--border-2);
  font-family:var(--font-display); font-size:12px; font-weight:700;
  color:var(--accent); letter-spacing:.02em;
}
.avatar-sm{ width:30px; height:30px; border-radius:9px; font-size:10.5px; }

.alert{
  display:flex; align-items:flex-start; gap:10px;
  padding:11px 14px; border-radius:var(--radius-sm);
  font-size:13.5px; line-height:1.5;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text-dim);
  margin-bottom:18px;
}
.alert .ico{ margin-top:1px; }
.alert-success{ border-color:rgba(95,224,107,.3); background:rgba(95,224,107,.08); color:#c9f5cf; }
.alert-error{ border-color:rgba(255,122,107,.32); background:var(--warn-soft); color:#ffd7d1; }
.alert-info{ border-color:rgba(0,224,198,.25); background:var(--accent-soft); color:#c6f8f1; }

.empty{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:26px 16px; text-align:center;
  border:1px dashed var(--border); border-radius:var(--radius-sm);
  background:rgba(255,255,255,.012);
}
.empty-ico{ width:26px; height:26px; color:var(--faint); margin-bottom:4px; }
.empty p{ font-size:14px; font-weight:600; color:var(--text-dim); }
.empty span{ font-size:12.5px; color:var(--faint); max-width:280px; }

/* ============================================================================
   СТРАНИЦА ВХОДА
   ============================================================================ */
.auth-body{ background:var(--bg); }

.auth{
  display:grid;
  grid-template-columns:1.02fr .98fr;
  min-height:100vh;
}

/* Левая половина — бренд */
.auth-brand{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:38px clamp(28px,4vw,56px) 34px;
  background:
    radial-gradient(70% 60% at 18% 12%, rgba(0,224,198,.14), transparent 62%),
    radial-gradient(80% 70% at 82% 96%, rgba(77,163,255,.10), transparent 60%),
    linear-gradient(180deg,#0b0b0e 0%, #08080a 100%);
  border-right:1px solid var(--border);
  isolation:isolate;
}
.auth-brand::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(80% 70% at 40% 40%, #000 20%, transparent 85%);
  -webkit-mask-image:radial-gradient(80% 70% at 40% 40%, #000 20%, transparent 85%);
}
.auth-figure{
  position:absolute; z-index:-1; right:-140px; bottom:-120px;
  width:520px; height:520px; border-radius:50%;
  border:1px solid rgba(0,224,198,.18);
  box-shadow:0 0 0 60px rgba(0,224,198,.03), 0 0 0 140px rgba(0,224,198,.015);
}
.auth-figure::before,
.auth-figure::after{
  content:''; position:absolute; background:var(--accent); opacity:.35;
}
.auth-figure::before{ width:1px; height:760px; left:50%; top:-120px; transform:rotate(38deg); }
.auth-figure::after{ width:1px; height:760px; left:50%; top:-120px; transform:rotate(-38deg); }

.auth-brand-top{ position:relative; z-index:1; }
.auth-logo{ display:inline-flex; align-items:center; gap:11px; }
.auth-logo img{ width:42px; height:42px; object-fit:cover; border-radius:11px; }
.auth-logo span{ display:flex; flex-direction:column; line-height:1.15; }
.auth-logo strong{ font-family:var(--font-display); font-size:12.5px; font-weight:700; letter-spacing:.01em; }
.auth-logo small{ font-size:10.5px; color:var(--muted); letter-spacing:.04em; }

.auth-brand-main{ position:relative; z-index:1; padding:40px 0 30px; }
.auth-word{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(54px, 8.4vw, 108px);
  line-height:.95;
  letter-spacing:-.015em;
  margin:22px 0 18px;
  color:var(--text);
}
.auth-word::after{ content:'.'; color:var(--accent); }
.auth-lead{
  max-width:400px;
  font-size:clamp(15px,1.5vw,17.5px);
  line-height:1.55;
  color:var(--text-dim);
}
.auth-points{
  display:grid; gap:12px; margin-top:34px; max-width:430px;
}
.auth-points li{
  display:flex; align-items:flex-start; gap:11px;
  font-size:13.5px; color:var(--muted); line-height:1.5;
}
.auth-points .ico{
  color:var(--accent);
  background:var(--accent-soft);
  border:1px solid rgba(0,224,198,.22);
  border-radius:9px;
  padding:7px; width:30px; height:30px;
  margin-top:1px;
}
.auth-brand-foot{
  position:relative; z-index:1;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:11.5px; color:var(--faint); letter-spacing:.02em;
}

/* Правая половина — форма */
.auth-panel{
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap:18px;
  padding:40px clamp(20px,4vw,56px);
  background:var(--bg);
}
.auth-card{
  width:100%; max-width:412px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:20px;
  padding:34px 32px 30px;
  box-shadow:var(--shadow);
}
.auth-card h2{
  font-size:26px; margin:12px 0 6px;
}
.auth-note{ font-size:13px; color:var(--muted); line-height:1.55; margin-bottom:22px; }
.auth-form{ display:grid; gap:16px; }

.field{ display:block; }
.field-label{
  display:block; margin-bottom:7px;
  font-size:12px; font-weight:600; letter-spacing:.02em;
  color:var(--text-dim);
}
.field-control{ position:relative; display:flex; align-items:center; }
.field-ico{ position:absolute; left:13px; color:var(--faint); pointer-events:none; }
.field-control input{
  width:100%; height:46px;
  padding:0 44px 0 40px;
  font-family:var(--font-body); font-size:14.5px; color:var(--text);
  background:var(--bg-soft);
  border:1px solid var(--border-2);
  border-radius:var(--radius-sm);
  transition:border-color .16s, background .16s, box-shadow .16s;
}
.field-control input::placeholder{ color:var(--faint); }
.field-control input:hover{ border-color:#3d3d47; }
.field-control input:focus{
  outline:none; border-color:var(--accent);
  background:#0e0e12;
  box-shadow:0 0 0 3px rgba(0,224,198,.12);
}
.field-btn{
  position:absolute; right:8px;
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border:0; border-radius:8px;
  background:transparent; color:var(--faint); cursor:pointer;
  transition:color .16s, background .16s;
}
.field-btn:hover{ color:var(--accent); background:var(--surface-2); }

.auth-submit{ height:48px; margin-top:4px; font-size:15px; }
.auth-help{ margin-top:22px; padding-top:18px; border-top:1px solid var(--border); }
.auth-help p{ font-size:12.5px; color:var(--faint); line-height:1.55; }
.auth-site-link{
  display:inline-flex; align-items:center; gap:5px; margin-top:9px;
  font-size:12.5px; font-weight:600; color:var(--accent);
}
.auth-site-link:hover{ gap:9px; }
.auth-legal{ font-size:11px; color:var(--faint); text-align:center; max-width:360px; line-height:1.5; }

/* ============================================================================
   КАРКАС СИСТЕМЫ
   ============================================================================ */
.app-body{
  background:
    radial-gradient(60% 50% at 12% 0%, rgba(0,224,198,.05), transparent 60%),
    var(--bg);
  min-height:100vh;
}

.shell{
  display:grid;
  grid-template-columns:var(--sidebar-w) minmax(0,1fr);
  min-height:100vh;
}

/* ---------- Боковое меню ---------- */
.sidebar{
  position:sticky; top:0; height:100vh; z-index:60;
  display:flex; flex-direction:column; gap:22px;
  padding:22px 16px 16px;
  background:#0a0a0d;
  border-right:1px solid var(--border);
}
.side-brand{ display:flex; align-items:center; gap:10px; padding:0 6px; }
.side-logo{ width:38px; height:38px; border-radius:10px; object-fit:cover; }
.side-brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.side-brand-text strong{
  font-family:var(--font-display); font-size:14px; font-weight:700;
  letter-spacing:.06em;
}
.side-brand-text small{ font-size:10px; color:var(--muted); letter-spacing:.03em; margin-top:2px; }

.side-nav{ display:flex; flex-direction:column; gap:2px; overflow-y:auto; flex:1; }
.side-group{
  font-family:var(--font-display);
  font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--faint);
  padding:14px 10px 7px;
}
.side-link{
  position:relative;
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; border-radius:9px;
  font-size:13.5px; font-weight:500; color:var(--muted);
  transition:background .15s, color .15s;
}
.side-link .ico{ width:17px; height:17px; color:var(--faint); transition:color .15s; }
.side-link:hover{ background:var(--surface); color:var(--text); }
.side-link:hover .ico{ color:var(--text-dim); }
.side-link.is-active{
  background:linear-gradient(90deg, rgba(0,224,198,.12), rgba(0,224,198,.03));
  color:var(--text);
}
.side-link.is-active .ico{ color:var(--accent); }
.side-link.is-active::before{
  content:''; position:absolute; left:-16px; top:7px; bottom:7px;
  width:2px; background:var(--accent); border-radius:2px;
}
.side-dot{ margin-left:auto; width:5px; height:5px; border-radius:50%; background:var(--accent); }
.side-link.is-soon{ color:var(--faint); cursor:default; }
.side-link.is-soon:hover{ background:transparent; color:var(--faint); }
.side-link.is-soon:hover .ico{ color:var(--faint); }
.soon{
  margin-left:auto;
  font-size:9px; font-style:normal; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  padding:2px 5px; border-radius:5px;
  background:var(--surface-2); color:var(--faint); border:1px solid var(--border);
}

.side-foot{ display:flex; flex-direction:column; gap:10px; padding-top:12px; border-top:1px solid var(--border); }
.side-ext{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:8px 10px; border-radius:9px;
  font-size:12px; color:var(--faint);
}
.side-ext:hover{ color:var(--accent); background:var(--surface); }
.side-user{ display:flex; align-items:center; gap:9px; padding:6px 6px 4px; }
.side-user-txt{ display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.side-user-txt b{ font-size:12.5px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.side-user-txt small{ font-size:10.5px; color:var(--faint); }
.side-logout{
  margin-left:auto; display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:8px; color:var(--faint);
}
.side-logout:hover{ color:var(--warn); background:var(--warn-soft); }

/* ---------- Контент ---------- */
.content{ display:flex; flex-direction:column; min-width:0; }

.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:16px;
  min-height:var(--topbar-h);
  padding:12px clamp(18px,2.4vw,32px);
  background:rgba(8,8,10,.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.topbar-head{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.crumb{
  font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--faint); font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.topbar-head h1{ font-size:20px; font-weight:600; }
.topbar-sub{ font-size:12px; color:var(--faint); }

.topbar-actions{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:10px;
  background:transparent; border:1px solid transparent;
  color:var(--muted); cursor:pointer;
  transition:background .15s, color .15s, border-color .15s;
}
.icon-btn:hover{ background:var(--surface-2); color:var(--text); border-color:var(--border); }
.menu-btn{ display:none; }

.bell{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:10px;
  border:1px solid var(--border); background:var(--surface);
  color:var(--text-dim);
}
.bell:hover{ color:var(--accent); border-color:rgba(0,224,198,.35); }
.bell-badge{
  position:absolute; top:-5px; right:-5px;
  min-width:17px; height:17px; padding:0 4px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:9px;
  background:var(--accent); color:var(--accent-ink);
  font-size:9.5px; font-weight:800; letter-spacing:0;
  border:2px solid var(--bg);
}

.user-menu{ position:relative; }
.user-menu summary{
  display:flex; align-items:center; gap:8px;
  padding:4px 8px 4px 4px; border-radius:11px;
  border:1px solid var(--border); background:var(--surface);
  cursor:pointer; list-style:none;
  transition:border-color .15s, background .15s;
}
.user-menu summary::-webkit-details-marker{ display:none; }
.user-menu summary:hover{ border-color:var(--border-2); background:var(--surface-2); }
.um-name{ font-size:12.5px; font-weight:600; color:var(--text-dim); }
.um-chevron{ color:var(--faint); transition:transform .18s; }
.user-menu[open] .um-chevron{ transform:rotate(180deg); }

.user-pop{
  position:absolute; right:0; top:calc(100% + 10px); z-index:50;
  width:232px; padding:8px;
  background:var(--surface); border:1px solid var(--border-2);
  border-radius:14px; box-shadow:var(--shadow);
}
.user-pop-head{
  display:flex; flex-direction:column; gap:2px;
  padding:8px 10px 11px; margin-bottom:6px;
  border-bottom:1px solid var(--border);
}
.user-pop-head b{ font-size:13px; }
.user-pop-head small{ font-size:11px; color:var(--faint); overflow:hidden; text-overflow:ellipsis; }
.user-pop-link{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:8px;
  font-size:12.5px; color:var(--text-dim);
}
.user-pop-link:hover{ background:var(--surface-2); color:var(--accent); }

.main{
  flex:1; width:100%; max-width:1400px;
  padding:24px clamp(18px,2.4vw,32px) 34px;
  display:flex; flex-direction:column; gap:18px;
}
.main > .alert{ margin-bottom:0; }
.app-foot{
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:16px clamp(18px,2.4vw,32px) 22px;
  border-top:1px solid var(--border);
  font-size:11.5px; color:var(--faint);
}
.app-foot-meta{ color:var(--faint); opacity:.8; }

.scrim{
  position:fixed; inset:0; z-index:55;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(2px);
}
.scrim[hidden]{ display:none; }

/* ============================================================================
   ДАШБОРД
   ============================================================================ */

/* ---------- Приветствие ---------- */
.hero{
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:space-between; gap:28px;
  padding:26px 30px;
  border:1px solid var(--border);
  border-radius:20px;
  background:
    radial-gradient(90% 130% at 4% 0%, rgba(0,224,198,.12), transparent 58%),
    linear-gradient(120deg, #111116 0%, #0d0d11 60%, #0b0b0f 100%);
}
.hero::after{
  content:''; position:absolute; right:-60px; top:-90px;
  width:320px; height:320px; border-radius:50%;
  border:1px solid rgba(0,224,198,.14);
  box-shadow:0 0 0 46px rgba(0,224,198,.03), 0 0 0 108px rgba(0,224,198,.015);
  pointer-events:none;
}
.hero-main{ position:relative; z-index:1; min-width:0; }
.hero-title{ font-size:clamp(24px,3vw,32px); margin:10px 0 8px; }
.hero-lead{ color:var(--text-dim); font-size:14px; max-width:560px; }
.hero-tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:16px; }

.hero-level{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  flex-shrink:0;
}
.ring-wrap{ position:relative; width:124px; height:124px; }
.ring{ width:124px; height:124px; transform:rotate(-90deg); }
.ring-bg{
  fill:none; stroke:rgba(255,255,255,.07); stroke-width:8;
}
.ring-fg{
  fill:none; stroke:var(--accent); stroke-width:8; stroke-linecap:round;
  transition:stroke-dashoffset .6s ease;
  filter:drop-shadow(0 0 6px rgba(0,224,198,.35));
}
.ring-label{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1px;
}
.ring-label span{
  font-size:9px; text-transform:uppercase; letter-spacing:.14em; color:var(--faint);
}
.ring-label strong{ font-family:var(--font-display); font-size:28px; line-height:1.1; }
.ring-note{ font-size:11px; color:var(--muted); text-align:center; max-width:150px; }

/* ---------- KPI ---------- */
.kpi-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:14px;
}
.kpi{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:4px;
  padding:16px 18px 17px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  transition:border-color .18s, transform .18s;
}
.kpi:hover{ border-color:var(--border-2); transform:translateY(-1px); }
.kpi::after{
  content:''; position:absolute; right:-40px; top:-40px;
  width:120px; height:120px; border-radius:50%;
  background:radial-gradient(circle, rgba(0,224,198,.10), transparent 70%);
  pointer-events:none;
}
.kpi-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.kpi-label{
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--faint);
}
.kpi-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:8px;
  background:var(--surface-2); border:1px solid var(--border);
  color:var(--muted);
}
.kpi-val{
  font-family:var(--font-display); font-size:29px; font-weight:600;
  line-height:1.15; letter-spacing:-.02em; margin-top:2px;
}
.kpi-hint{ font-size:11.5px; color:var(--muted); line-height:1.45; }
.kpi-hint.is-warn{ color:var(--warn); }

/* ---------- Сетка карточек ---------- */
.dash-grid{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:18px;
  align-items:start;
}
.dash-col{ display:grid; gap:18px; align-content:start; min-width:0; }

.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px 20px 20px;
}
.card-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  padding-bottom:14px; margin-bottom:14px;
  border-bottom:1px solid var(--border);
}
.card-title{ font-size:15.5px; font-weight:600; letter-spacing:.005em; }
.card-sub{ font-size:11.5px; color:var(--faint); margin-top:3px; }
.card-tools{ display:flex; align-items:center; gap:6px; flex-shrink:0; }

/* ---------- Задания ---------- */
.task-list{ display:flex; flex-direction:column; }
.task{
  display:flex; align-items:flex-start; gap:12px;
  padding:12px 2px;
  border-top:1px solid var(--border);
}
.task:first-child{ border-top:0; padding-top:2px; }
.task-form{ display:flex; flex-shrink:0; }
.task-check{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; margin-top:1px;
  border-radius:50%; cursor:pointer;
  background:transparent; border:1.5px solid var(--border-2);
  color:transparent;
  transition:border-color .16s, background .16s, color .16s;
}
.task-check .ico{ width:12px; height:12px; stroke-width:2.4; }
.task-check:hover{
  border-color:var(--accent); background:var(--accent-soft); color:var(--accent);
}
.task-check.is-progress{ border-color:var(--accent); color:var(--accent); }
.task-check.is-open{
  border-style:dashed; color:var(--faint);
}
.task-check.is-open:hover{ color:var(--accent); }

.task-body{ min-width:0; flex:1; }
.task-line{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.task-title{ font-size:13.5px; font-weight:600; color:var(--text); line-height:1.45; }
.prio{
  font-size:9.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  padding:2px 6px; border-radius:5px; white-space:nowrap;
}
.prio-high{ color:var(--warn); background:var(--warn-soft); }
.prio-normal{ color:var(--muted); background:var(--surface-2); }
.prio-low{ color:var(--faint); background:var(--surface-2); }
.task-meta{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:7px; }
.task-meta .chip{ font-size:10.5px; padding:2px 7px; }
.task-note{ font-size:10.5px; color:var(--faint); }
.task.is-overdue .task-title{ color:#ffd7d1; }

/* ---------- Мероприятия ---------- */
.event-list{ display:flex; flex-direction:column; gap:12px; }
.event{
  display:flex; gap:14px;
  padding:13px;
  background:var(--bg-soft);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  transition:border-color .16s;
}
.event:hover{ border-color:var(--border-2); }
.event-date{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:52px; flex-shrink:0;
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:10px;
}
.event-date b{ font-family:var(--font-display); font-size:19px; line-height:1.2; }
.event-date span{ font-size:9.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.event-body{ min-width:0; flex:1; }
.event-line{ display:flex; align-items:flex-start; gap:8px; flex-wrap:wrap; }
.event-title{ font-size:13.5px; font-weight:600; line-height:1.4; flex:1; min-width:0; }
.event-meta{
  display:flex; align-items:center; gap:5px; flex-wrap:wrap;
  font-size:11px; color:var(--faint); margin-top:6px;
}
.event-meta .ico{ color:var(--faint); }
.dot-sep{ width:3px; height:3px; border-radius:50%; background:var(--border-2); display:inline-block; margin:0 3px; }
.event-foot{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:10px;
}
.event-going{ display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--muted); }
.event-form{ display:flex; }

/* ---------- Активность ---------- */
.feed{ display:flex; flex-direction:column; gap:2px; }
.feed-item{
  position:relative;
  display:flex; gap:11px;
  padding:9px 0 calc(9px + 8px);
}
.feed-item:not(:last-child)::after{
  content:''; position:absolute; left:14px; top:36px; bottom:0;
  width:1px; background:var(--border);
}
.feed-dot{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; flex-shrink:0;
  border-radius:8px;
  background:var(--surface-2); border:1px solid var(--border);
  color:var(--muted);
}
.kind-task .feed-dot{ color:var(--accent); border-color:rgba(0,224,198,.28); background:var(--accent-soft); }
.kind-event .feed-dot{ color:var(--orange); border-color:rgba(255,154,61,.28); background:rgba(255,154,61,.1); }
.kind-direction .feed-dot{ color:var(--violet); border-color:rgba(155,140,255,.28); background:rgba(155,140,255,.1); }
.kind-system .feed-dot{ color:#4da3ff; border-color:rgba(77,163,255,.28); background:rgba(77,163,255,.1); }
.feed-body{ min-width:0; padding-top:2px; }
.feed-body p{ font-size:12.5px; color:var(--text-dim); line-height:1.5; }
.feed-body small{ display:block; margin-top:2px; font-size:10.5px; color:var(--faint); }

/* ---------- Прогресс ---------- */
.progress-list{ display:flex; flex-direction:column; gap:13px; }
.prog{ min-width:0; }
.prog-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:6px; }
.prog-head span{ font-size:12.5px; color:var(--text-dim); }
.prog-head b{ font-family:var(--font-display); font-size:11.5px; color:var(--muted); font-weight:600; }
.track{
  height:6px; border-radius:99px; overflow:hidden;
  background:var(--surface-3);
}
.track span{
  display:block; height:100%; border-radius:99px;
  background:var(--dir, var(--accent));
  background:linear-gradient(90deg, var(--dir, var(--accent)), color-mix(in srgb, var(--dir, var(--accent)) 55%, #ffffff));
  transition:width .5s ease;
}
.progress-foot{
  display:flex; align-items:flex-start; gap:8px;
  margin-top:16px; padding-top:13px;
  border-top:1px solid var(--border);
  font-size:11px; color:var(--faint); line-height:1.5;
}
.progress-foot .ico{ color:var(--accent); margin-top:1px; }

/* ---------- Рейтинг ---------- */
.rating{ display:flex; flex-direction:column; gap:4px; }
.rating-row{
  display:flex; align-items:center; gap:9px;
  padding:7px 8px; border-radius:9px;
  border:1px solid transparent;
}
.rating-row.is-me{ background:var(--accent-soft); border-color:rgba(0,224,198,.22); }
.rank{
  width:16px; flex-shrink:0; text-align:center;
  font-family:var(--font-display); font-size:11px; color:var(--faint);
}
.rating-row:nth-child(1) .rank{ color:var(--accent); }
.rating-name{ display:flex; flex-direction:column; min-width:0; line-height:1.25; }
.rating-name b{ font-size:12.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rating-name b em{
  font-style:normal; font-size:9px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent-ink); background:var(--accent);
  padding:1px 4px; border-radius:4px; margin-left:4px; vertical-align:1px;
}
.rating-name small{ font-size:10px; color:var(--faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rating-points{
  margin-left:auto; font-family:var(--font-display); font-size:12px;
  color:var(--text-dim); font-weight:600;
}

/* ---------- Уведомления ---------- */
.notes-form{ flex-shrink:0; }
.link-btn{
  background:none; border:0; cursor:pointer;
  font-size:11.5px; font-weight:600; color:var(--accent);
  padding:4px 0;
}
.link-btn:hover{ text-decoration:underline; }
.notes{ display:flex; flex-direction:column; gap:2px; }
.note{
  position:relative;
  display:flex; gap:9px;
  padding:9px 8px 9px 8px;
  border-radius:9px;
  border:1px solid transparent;
}
.note.is-unread{ background:var(--surface-2); border-color:var(--border); }
.note-dot{
  width:6px; height:6px; border-radius:50%; flex-shrink:0;
  background:var(--border-2); margin-top:6px;
}
.note.is-unread .note-dot{ background:var(--accent); box-shadow:0 0 0 3px rgba(0,224,198,.14); }
.note-body{ min-width:0; }
.note-body p{ font-size:12px; line-height:1.5; color:var(--text-dim); }
.note.is-unread .note-body p{ color:var(--text); }
.note-body small{ display:block; margin-top:2px; font-size:10px; color:var(--faint); }

/* ---------- Задание: описание и состояние ---------- */
.task-desc{
  margin-top:4px;
  font-size:11.5px; line-height:1.5; color:var(--faint);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.task.is-done .task-title{
  color:var(--muted);
  text-decoration:line-through;
  text-decoration-color:rgba(255,255,255,.18);
}
.task-check.is-complete{
  background:var(--accent); border-color:var(--accent);
  color:var(--accent-ink); cursor:default;
}
.task-check.is-complete:hover{ background:var(--accent); color:var(--accent-ink); }

.state{
  font-size:9.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  padding:2px 6px; border-radius:5px; white-space:nowrap;
}
.state-todo{ color:var(--muted); background:var(--surface-2); }
.state-progress{ color:#4da3ff; background:rgba(77,163,255,.10); }
.state-pending{ color:#ffd15c; background:rgba(255,209,92,.10); }
.state-done{ color:var(--accent); background:var(--accent-soft); }
.state-rejected{ color:var(--warn); background:var(--warn-soft); }

.chip-skill{ color:#c7bfff; border-color:rgba(155,140,255,.3); background:rgba(155,140,255,.08); }

.card-link{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:14px; padding-top:12px; width:100%;
  border-top:1px solid var(--border);
  font-size:11.5px; font-weight:600; color:var(--muted);
}
.card-link:hover{ color:var(--accent); gap:9px; }
.card-link .ico{ margin-left:auto; }

/* ---------- Запуск системы ---------- */
.setup{ display:flex; flex-direction:column; gap:2px; }
.setup-item{
  display:flex; align-items:flex-start; gap:10px;
  padding:9px 7px; border-radius:9px;
  border:1px solid transparent;
}
.setup-item.is-done{ background:var(--accent-soft); border-color:rgba(0,224,198,.2); }
.setup-mark{
  width:20px; height:20px; flex-shrink:0; margin-top:1px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; border:1.5px solid var(--border-2);
  color:var(--accent);
}
.setup-item.is-done .setup-mark{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.setup-txt{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
.setup-txt b{ font-size:12.5px; font-weight:600; }
.setup-txt small{ font-size:11px; color:var(--faint); line-height:1.45; }
.setup-state{
  flex-shrink:0; margin-top:2px;
  font-size:9px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--faint);
}
.setup-item.is-done .setup-state{ color:var(--accent); }

/* ---------- Отдел: команда ---------- */
.dept-desc{ font-size:12px; line-height:1.55; color:var(--muted); }
.dept-block{ margin-top:16px; }
.dept-label{
  display:block; margin-bottom:8px;
  font-size:9.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--faint);
}
.people{ display:flex; flex-direction:column; gap:2px; }
.person{
  display:flex; align-items:center; gap:9px;
  padding:5px 6px; border-radius:8px;
  border:1px solid transparent;
}
.person.is-me{ background:var(--accent-soft); border-color:rgba(0,224,198,.2); }
.person-txt{ display:flex; flex-direction:column; min-width:0; line-height:1.3; }
.person-txt b{ font-size:12px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.person-txt b em{
  font-style:normal; font-size:9px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent-ink); background:var(--accent);
  padding:1px 4px; border-radius:4px; margin-left:4px; vertical-align:1px;
}
.person-txt small{ font-size:10px; color:var(--faint); }

/* ---------- Событие: описание ---------- */
.event-desc{ font-size:11px; line-height:1.5; color:var(--faint); margin-top:6px; }
.kind-people .feed-dot{ color:#5fe06b; border-color:rgba(95,224,107,.3); background:rgba(95,224,107,.1); }

/* ============================================================================
   АДАПТИВ
   ============================================================================ */
@media (max-width:1180px){
  .dash-grid{ grid-template-columns:1fr; }
  .hero{ padding:24px; }
}

@media (max-width:1024px){
  .auth{ grid-template-columns:1fr; }
  .auth-brand{ min-height:auto; padding:28px 24px 26px; border-right:0; border-bottom:1px solid var(--border); }
  .auth-brand-main{ padding:26px 0 10px; }
  .auth-word{ font-size:clamp(46px, 12vw, 74px); }
  .auth-lead{ max-width:520px; }
  .auth-points{ display:none; }
  .auth-brand-foot{ margin-top:18px; }
  .auth-panel{ padding:26px 20px 40px; }
  .auth-card{ max-width:460px; }
  .auth-figure{ display:none; }
}

@media (max-width:960px){
  :root{ --sidebar-w:0px; }
  .shell{ grid-template-columns:1fr; }
  .sidebar{
    position:fixed; left:0; top:0; bottom:0;
    width:280px; height:100vh;
    transform:translateX(-100%);
    transition:transform .22s ease;
    box-shadow:var(--shadow);
  }
  .nav-open .sidebar{ transform:translateX(0); }
  .menu-btn{ display:inline-flex; }
  .main{ padding-top:18px; }
  .kpi-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

@media (max-width:700px){
  .topbar{ gap:10px; }
  .crumb{ display:none; }
  .topbar-head h1{ font-size:17px; }
  .topbar-sub{ display:none; }
  .um-name{ display:none; }
  .user-menu summary{ padding:3px; border:0; background:transparent; }
  .main{ gap:14px; }
  .hero{ flex-direction:column; align-items:flex-start; gap:20px; padding:20px; }
  .hero-level{ flex-direction:row; align-items:center; gap:14px; }
  .ring-wrap, .ring{ width:92px; height:92px; }
  .ring-label strong{ font-size:21px; }
  .ring-note{ text-align:left; }
  .card{ padding:16px; }
  .card-head{ flex-wrap:wrap; gap:8px; }
  .event{ gap:11px; padding:11px; }
  .app-foot{ flex-direction:column; gap:4px; }
  .alert{ font-size:12.5px; }
}

@media (max-width:520px){
  .kpi-grid{ grid-template-columns:1fr 1fr; gap:10px; }
  .kpi{ padding:13px 14px; }
  .kpi-val{ font-size:24px; }
  .kpi-hint{ font-size:10.5px; }
  .hero-title{ font-size:22px; }
  .event-date{ width:46px; }
  .event-foot{ flex-wrap:wrap; }
  .task-meta .task-note{ display:none; }
  .auth-card{ padding:26px 20px 24px; border-radius:16px; }
  .auth-card h2{ font-size:22px; }
}

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