/* ---------- Fonts ---------- */
@font-face { font-family:"Myriad Pro"; src:url("fonts/MyriadPro-Light.otf") format("opentype"); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"Myriad Pro"; src:url("fonts/MYRIADPRO-REGULAR.OTF") format("opentype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Myriad Pro"; src:url("fonts/MYRIADPRO-BOLD.OTF") format("opentype"); font-weight:700; font-style:normal; font-display:swap; }

/* ---------- Theme ---------- */
:root{
  --top:#1d1d1d;
  --bg:#1b1b1b;
  --border:#131313;
  --text:#e1e3e6;
  --muted:#9aa3ad;
  --topbar-h:56px;

  /* единый стиль кнопок */
  --btn:#242424;
  --btn-text:#ffffff;

  /* активная кнопка */
  --accent:#2e2e2e;
}

/* ---------- Base ---------- */
*{ box-sizing:border-box }
html,body{
  height:100%;
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Myriad Pro",system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Noto Sans",sans-serif;
  font-weight:400; /* обычный вес везде */
}
a{ color:inherit; text-decoration:none }
img{ max-width:100%; display:block }
body{ padding-top:var(--topbar-h); } /* под фиксированный топбар */
body.modal-open{ overflow:hidden; }

/* ---------- Topbar (fixed) ---------- */
.vk-topbar{
  position:fixed; top:0; left:0; right:0; z-index:2000;
  background:var(--top);
  border-bottom:1px solid var(--border);
  min-height:var(--topbar-h);
}
.vk-topbar__in{
  max-width:1200px;
  margin:0 auto;
  padding:12px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.vk-left{ display:flex; align-items:center; gap:12px }
.vk-brand img{ height:22px; width:auto; display:block }
.vk-id{ font-size:14px; color:var(--muted) }
.vk-actions{ display:flex; align-items:center; gap:10px }
/* активная вкладка в шапке */
.vk-actions a[aria-current="page"]{
  background:var(--accent);
}

/* ---------- ЕДИНЫЕ кнопки ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:8px 12px;
  border-radius:10px;
  background:var(--btn);
  color:var(--btn-text) !important;
  border:none; outline:none;
  font-weight:400; line-height:1;
  white-space:nowrap; user-select:none; cursor:pointer;
  transition:transform .08s ease, filter .15s ease, opacity .15s ease;
}
.btn:hover{ filter:brightness(1.06); transform:translateY(-1px); }
.btn:active{ filter:brightness(0.98); transform:none; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none; filter:none; }

/* ---------- Page layout ---------- */
main{ max-width:1200px; margin:20px auto; padding:0 24px }
.card{ border:1px solid var(--border); border-radius:12px; background:rgba(255,255,255,.02); padding:16px }
.muted{ color:var(--muted) }
.avatar{ width:32px; height:32px; border-radius:50%; object-fit:cover; background:#111; display:block }

/* ---------- Tables ---------- */
table{ width:100%; border-collapse:collapse; }
th,td{ padding:10px 12px; border-bottom:1px solid var(--border); text-align:left; }

/* липкая шапка таблицы — прямо под топбаром, НЕ прозрачная */
thead th{
  font-weight:400; color:#cfd6dd;
  background:var(--top);
  position:sticky; top:var(--topbar-h); z-index:10;
}

.num{ text-align:right; white-space:nowrap }
.delta{ color:#9aa3ad; font-size:90%; margin-left:6px }

/* ---------- Toolbar ---------- */
.toolbar{ display:flex; justify-content:space-between; align-items:center; margin:16px 0; gap:12px; }
.toolbar__left{ display:flex; align-items:center; gap:12px; flex-wrap:wrap }
.actions{ display:flex; gap:8px; flex-wrap:wrap }

/* ---------- Переключатель День/Неделя/Месяц ---------- */
.switch{ display:flex; gap:8px; align-items:center }
.switch a{
  padding:6px 10px; border-radius:8px;
  background:var(--btn); color:#fff; border:none; outline:none;
  display:inline-flex; align-items:center; justify-content:center;
}
.switch a.active{ background:var(--accent); color:#fff; }

/* ---------- Modal ---------- */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.6);
  display:none; align-items:center; justify-content:center; z-index:3000;
}
.modal{
  background:#0e0e0e; border:1px solid var(--border); border-radius:12px;
  width:min(720px,96vw); max-height:86vh;
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.4); overscroll-behavior:contain;
}
.modal-header{
  position:sticky; top:0; z-index:2;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px; background:#0e0e0e; border-bottom:1px solid var(--border);
}
/* тянем форму, чтобы список мог скроллиться */
.modal form{
  display:flex; flex-direction:column; gap:10px; padding:12px 16px;
  flex:1;           /* важно */
  min-height:0;     /* важно */
}
.modal-controls{ display:flex; align-items:center; gap:12px; }
.list{ border:1px solid var(--border); border-radius:8px; overflow:hidden; background:rgba(255,255,255,.02); }
.list-scroll{ flex:1; overflow:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
.row{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-bottom:1px solid #222; }
.row:last-child{ border-bottom:none; }
.row img{ width:28px; height:28px; border-radius:50%; object-fit:cover; }
.grow{ flex:1; min-width:0; }

/* ---------- Forms ---------- */
input[type="checkbox"]{ accent-color:#4a88d9; }

/* ---------- Auth OneTap centering ---------- */
.center-page{ position:fixed; inset:0; display:grid; place-items:center;
  margin:0!important; padding:0!important; max-width:none!important; min-height:100vh;
}

/* ---------- Responsive ---------- */
@media (max-width:520px){ :root{ --topbar-h:64px; } }

/* auth spinner */
.spinner{ display:none; margin-top:12px; }
.spinner.active{ display:block; }

.toolbar .toolbar__left #searchInput,
#searchInput{
  -webkit-appearance: textfield !important;
  appearance: none !important;
  background: var(--btn) !important;
  color: var(--btn-text) !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  height: 32px !important;
  line-height: 32px !important;
  box-shadow: none !important;
  outline: none !important;
  transition: none !important;
}
/* --- Modal visibility toggle --- */
.modal-backdrop[aria-hidden="false"] { 
  display: flex !important;   /* перекрываем базовый display:none */
}
.modal-backdrop[aria-hidden="true"]  { 
  display: none !important; 
}

/* На всякий: модалка выше всего */
.modal-backdrop { z-index: 3000; }

/* /groups/assets/style.css */

.sug-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; gap:12px; }
.sug-list { display:flex; flex-direction:column; gap:12px; }
.sug-card { border:1px solid var(--border); border-radius:12px; background:rgba(255,255,255,.02); padding:12px; }
.sug-head { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.sug-head img { width:28px; height:28px; border-radius:50%; object-fit:cover; }
.sug-author { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:14px; }
.sug-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

.sug-textarea { width:100%; border:1px solid var(--border); border-radius:8px; background:var(--btn); color:#fff; padding:8px; line-height:1.35; resize:none; overflow:hidden; }

.sug-atts { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.sug-att { border:1px solid var(--border); border-radius:8px; padding:6px; background:#111; display:flex; align-items:center; gap:8px; }
.sug-att img { width:120px; height:80px; object-fit:cover; border-radius:6px; display:block; cursor:zoom-in; }

.muted { color:var(--muted); }
.right { margin-left:auto; }
.sug-empty { color:var(--muted); padding:12px; }

.rowline { display:flex; align-items:center; gap:8px; margin-top:8px; flex-wrap:wrap; }
.rowline input[type="datetime-local"]{ height:32px; border:1px solid var(--border); border-radius:8px; background:var(--btn); color:#fff; padding:0 8px; }
.chip { display:inline-flex; align-items:center; gap:6px; padding:2px 8px; border-radius:999px; background:#1f1f1f; color:#cfd6dd; font-size:12px; }

.sug-comm-link { color:#fff; text-decoration:none; border-bottom:1px dashed rgba(255,255,255,.25); }
.sug-comm-link:hover { border-bottom-color:transparent; }

.tag { font-size:12px; margin-left:6px; }
.tag--green { color:#4ade80; font-weight:600; }

/* анимации */
.fade-in { animation: sugFadeIn .18s ease-out forwards; opacity:0; transform: translateY(6px); }
.fade-out { animation: sugFadeOut .18s ease-in forwards; }
@keyframes sugFadeIn { to { opacity:1; transform:none; } }
@keyframes sugFadeOut { to { opacity:0; height:0; margin:0; padding-top:0; padding-bottom:0; } }

/* модалка просмотра фото */
.img-modal { position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:9999; }
.img-modal--open { display:flex; }
.img-modal__backdrop { position:absolute; inset:0; background:rgba(0,0,0,.75); }
.img-modal__img { position:relative; max-width:96vw; max-height:92vh; border-radius:12px; box-shadow:0 10px 40px rgba(0,0,0,.5); }
.img-modal__close { position:absolute; top:14px; right:14px; width:36px; height:36px; border:1px solid var(--border); border-radius:10px; background:#111; color:#fff; font-size:20px; line-height:1; cursor:pointer; }