:root{
  --bg:#F3F2EE;
  --surface:#FFFFFF;
  --surface-2:#FAFAF8;
  --ink:#1B211E;
  --ink-2:#4A524D;
  --muted:#8A908A;
  --line:#E7E6E0;
  --green:#16A97B;
  --green-dark:#128C66;
  --green-soft:#E6F5EF;
  --amber:#B47F16;
  --amber-soft:#F8EFDC;
  --teal:#2A7F92;
  --teal-soft:#E2F0F3;
  --r-lg:16px;
  --r-md:12px;
  --r-sm:9px;
  --shadow:0 1px 2px rgba(27,33,30,.04), 0 8px 24px -12px rgba(27,33,30,.16);
  --font-d:"Manrope", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --font-b:"Inter", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-b);
  font-size:14px;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
a{color:inherit;text-decoration:none}

/* ── шапка ────────────────────────────────────────────── */
.topbar{
  display:flex;align-items:center;gap:22px;
  padding:12px 22px;background:var(--surface);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20;
}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--font-d);font-weight:800;font-size:16px;letter-spacing:-.01em}
.brand i{width:11px;height:11px;border-radius:50%;background:var(--green);display:block}
.icon-btn{
  width:30px;height:30px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--muted);transition:.16s;
}
.icon-btn:hover{color:var(--green);border-color:var(--green);background:var(--green-soft)}
.nav{display:flex;align-items:center;gap:4px;margin-left:6px}
.nav a{
  padding:7px 13px;border-radius:999px;color:var(--ink-2);font-weight:500;
  display:flex;align-items:center;gap:7px;transition:.16s;
}
.nav a:hover{background:var(--surface-2);color:var(--ink)}
.nav a.is-active{background:var(--ink);color:#fff}
.nav .badge{
  min-width:17px;height:17px;padding:0 5px;border-radius:999px;
  background:var(--green);color:#fff;font-size:11px;font-weight:700;
  display:grid;place-items:center;font-family:var(--font-d);
}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.whoami{color:var(--muted)}
.whoami b{color:var(--ink);font-weight:600}
.btn-ghost{padding:7px 14px;border-radius:999px;border:1px solid var(--line);transition:.16s}
.btn-ghost:hover{border-color:var(--ink);background:var(--surface-2)}

/* ── каркас ───────────────────────────────────────────── */


/* ── сайдбар ──────────────────────────────────────────── */
.side{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:12px;position:sticky;top:76px}
.side-row{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-sm);
  color:var(--ink-2);transition:.14s;
}
.side-row:hover{background:var(--surface-2);color:var(--ink)}
.side-row.is-active{background:var(--surface-2);color:var(--ink);font-weight:600}
.side-row .n{margin-left:auto;color:var(--muted);font-size:12px;font-family:var(--font-d);font-weight:600}
.side-cap{
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  font-weight:600;padding:16px 10px 6px;display:flex;align-items:center;
}
.side-cap button{margin-left:auto;width:20px;height:20px;border-radius:6px;background:var(--surface-2);color:var(--muted);line-height:1}
.side-cap button:hover{background:var(--green-soft);color:var(--green)}
.dot{width:8px;height:8px;border-radius:3px;flex:none}
.side hr{border:0;border-top:1px solid var(--line);margin:14px 0 0}

/* ── заголовок страницы ───────────────────────────────── */
.head{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.head h1{
  font-family:var(--font-d);font-size:26px;font-weight:800;letter-spacing:-.02em;margin:0;
}
.head p{margin:4px 0 0;color:var(--muted)}
.btn-add{
  margin-left:auto;background:var(--green);color:#fff;font-weight:600;
  padding:11px 18px;border-radius:999px;display:flex;align-items:center;gap:8px;
  box-shadow:0 6px 16px -8px rgba(22,169,123,.9);transition:.16s;
}
.btn-add:hover{background:var(--green-dark);transform:translateY(-1px)}

/* ── панель фильтров ──────────────────────────────────── */
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.search{
  display:flex;align-items:center;gap:9px;background:var(--surface);
  border:1px solid var(--line);border-radius:999px;padding:0 15px;height:38px;min-width:250px;
}
.search:focus-within{border-color:var(--green);box-shadow:0 0 0 3px var(--green-soft)}
.search input{border:0;outline:0;background:none;font:inherit;width:100%;color:var(--ink)}
.search svg{color:var(--muted);flex:none}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{
  height:38px;padding:0 15px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-2);display:flex;align-items:center;gap:7px;transition:.14s;
}
.chip:hover{border-color:var(--ink)}
.chip span{color:var(--muted);font-family:var(--font-d);font-weight:700;font-size:12px}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.chip[aria-pressed="true"] span{color:rgba(255,255,255,.6)}
.view{margin-left:auto;display:flex;gap:3px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:3px}
.view button{width:34px;height:30px;border-radius:999px;display:grid;place-items:center;color:var(--muted)}
.view button[aria-pressed="true"]{background:var(--ink);color:#fff}

/* ── секции ───────────────────────────────────────────── */
.sect{margin-bottom:26px}
.sect-head{display:flex;align-items:center;gap:10px;margin:0 2px 12px}
.sect-head h2{
  font-family:var(--font-d);font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin:0;
}
.sect-head .rule{flex:1;height:1px;background:var(--line)}
.sect-head .hint{color:var(--muted);font-size:12px}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:14px}

/* ── карточка ─────────────────────────────────────────── */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px;display:flex;flex-direction:column;gap:14px;transition:.18s;
  animation:rise .38s both;
}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.card:hover{border-color:#D6D5CE;box-shadow:var(--shadow);transform:translateY(-2px)}
.card--admin{background:linear-gradient(180deg,#F6FBF9 0%,var(--surface) 62%);border-color:#DCEDE6}
.card-top{display:flex;align-items:flex-start;gap:12px}

.ava{
  width:46px;height:46px;border-radius:14px;flex:none;position:relative;
  display:grid;place-items:center;font-family:var(--font-d);font-weight:700;font-size:15px;
  background:var(--tint,#EFEEE9);color:var(--tone,#5B6159);
}
.ava .presence{
  position:absolute;right:-3px;bottom:-3px;width:13px;height:13px;border-radius:50%;
  background:#C8CBC6;border:2.5px solid var(--surface);
}
.ava .presence.on{background:var(--green)}
.ava .presence.on::after{
  content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--green);
  animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{0%{opacity:.7;transform:scale(1)}70%,100%{opacity:0;transform:scale(2)}}

.who{min-width:0;flex:1}
.who h3{margin:1px 0 3px;font-family:var(--font-d);font-size:15.5px;font-weight:700;letter-spacing:-.01em}
.who .mail{color:var(--muted);font-size:13px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who .mail:hover{color:var(--green)}
.who .seen{margin:6px 0 0;color:var(--muted);font-size:12px}
.who .seen.on{color:var(--green);font-weight:500}

.role{
  flex:none;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  font-family:var(--font-d);padding:5px 10px;border-radius:7px;
}
.role--owner{background:var(--amber-soft);color:var(--amber)}
.role--co{background:var(--teal-soft);color:var(--teal)}
.role--user{background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}

/* доступ — сигнатурный элемент: 4 слота = 4 проекта */
.access{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);padding:11px 12px}
.access-top{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.access-top b{font-size:12px;font-weight:600;color:var(--ink-2)}
.access-top .val{margin-left:auto;font-family:var(--font-d);font-weight:700;font-size:12px;color:var(--muted)}
.access-top .val.has{color:var(--green)}
.slots{display:flex;gap:5px}
.slot{
  flex:1;height:7px;border-radius:99px;background:#fff;
  border:1px dashed #D8D7D0;
}
.slot.on{background:var(--green);border:1px solid var(--green)}
.access .none{font-size:12px;color:var(--muted)}

.acts{display:flex;gap:6px;margin-top:auto;padding-top:2px}
.act{
  flex:1;height:34px;border-radius:var(--r-sm);border:1px solid var(--line);
  display:grid;place-items:center;color:var(--muted);background:var(--surface);transition:.14s;
}
.act:hover{color:var(--green);border-color:var(--green);background:var(--green-soft)}
.act--danger:hover{color:#C4463A;border-color:#EBC4C0;background:#FBEEEC}

/* карточка «добавить» */
.card-add{
  border:1.5px dashed #D5D4CD;border-radius:var(--r-lg);background:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:26px;color:var(--muted);min-height:180px;transition:.16s;text-align:center;
}
.card-add:hover{border-color:var(--green);color:var(--green);background:var(--green-soft)}
.card-add b{font-family:var(--font-d);font-size:14px;font-weight:700;color:inherit}
.card-add small{font-size:12px;max-width:180px;line-height:1.4}

/* ── компактный режим ─────────────────────────────────── */
body.compact .grid{grid-template-columns:1fr;gap:8px}
body.compact .card{flex-direction:row;align-items:center;gap:18px;padding:12px 16px}
body.compact .card-top{flex:1.4;align-items:center}
body.compact .who .seen{display:none}
body.compact .access{flex:1;background:none;border:0;padding:0;max-width:210px}
body.compact .acts{flex:none;margin:0}
body.compact .act{width:34px;flex:none}
body.compact .card-add{flex-direction:row;min-height:0;padding:14px}

.empty{
  display:none;text-align:center;padding:52px 20px;color:var(--muted);
  border:1.5px dashed #D5D4CD;border-radius:var(--r-lg);
}
.empty b{display:block;font-family:var(--font-d);color:var(--ink);font-size:15px;margin-bottom:4px}
body.no-results .empty{display:block}
body.no-results .sect{display:none}

:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:900px){
  
  .side{display:none}
  .nav{overflow:auto}
  .topbar{gap:12px;padding:10px 14px}
  .whoami{display:none}
  body.compact .card{flex-wrap:wrap}
  body.compact .access{max-width:none;flex-basis:100%}
}