*,*::before,*::after{box-sizing:border-box}

:root{
  --bg:#fff; --fg:#0a0a0a; --muted:#8a8a8a; --line:#ececec;
  --hover:#f6f6f6; --accent:#0a0a0a; --accent-fg:#fff;
  --like:#e0245e; --blue:#1d9bf0; --radius:14px;
}
html[data-theme="dark"]{
  --bg:#000; --fg:#f2f2f2; --muted:#767676; --line:#1d1d1d;
  --hover:#131313; --accent:#f2f2f2; --accent-fg:#000; --blue:#5ab0f0;
}

html,body{margin:0;padding:0;min-height:100%}
body{
  background:var(--bg); color:var(--fg);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  transition:background .2s,color .2s;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
input,textarea{font:inherit;color:inherit;background:none;border:0;outline:none;width:100%}
textarea{resize:none}
::selection{background:var(--fg);color:var(--bg)}

/* ---------- Каркас ---------- */
#app{display:flex;justify-content:center;max-width:1080px;margin:0 auto;min-height:100vh}

.sidebar{
  display:none;width:230px;flex:0 0 230px;
  position:sticky;top:0;height:100vh;
  padding:28px 18px 24px;flex-direction:column;gap:4px;
}
.logo{font-size:24px;font-weight:800;letter-spacing:-.8px;padding:0 12px 22px;user-select:none;display:block}
.logo span{color:var(--muted);font-weight:400}

.nav-item{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;border-radius:10px;
  font-weight:600;color:var(--muted);width:100%;
  transition:background .15s,color .15s;text-align:left;
  position:relative;
}
.nav-item:hover{background:var(--hover);color:var(--fg)}
.nav-item.active{color:var(--fg)}
.nav-item svg{flex:0 0 20px}
.side-foot{margin-top:auto;padding:12px;font-size:12px;color:var(--muted);border-top:1px solid var(--line)}
.side-me{display:flex;align-items:center;gap:10px;font-size:13px}

.main{width:100%;max-width:600px;min-width:0;padding-bottom:calc(72px + env(safe-area-inset-bottom))}

.topbar{
  position:sticky;top:0;z-index:10;
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;
  background:color-mix(in srgb,var(--bg) 85%,transparent);
  backdrop-filter:saturate(160%) blur(12px);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--line);
}
.topbar .logo{padding:0;font-size:20px}
.topbar-actions{display:flex;gap:2px;align-items:center}

.icon-btn{
  width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;color:var(--muted);
  transition:background .15s,color .15s;position:relative;
}
.icon-btn:hover{background:var(--hover);color:var(--fg)}
.icon-btn.active{color:var(--fg)}
html[data-theme="light"] .icon-sun{display:none}
html[data-theme="dark"] .icon-moon{display:none}

/* ---------- Аватары ---------- */
.avatar{
  flex:0 0 38px;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;
  color:#fff;font-weight:700;font-size:15px;
  user-select:none;overflow:hidden;
}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- Бейдж ---------- */
.badge{
  display:inline-grid;place-items:center;min-width:18px;height:18px;
  padding:0 5px;border-radius:9px;background:var(--like);color:#fff;
  font-size:11px;font-weight:700;line-height:1;
}
.badge:empty{display:none}
.icon-btn .badge, .nav-item .badge{
  position:absolute;top:4px;right:4px;transform:translate(30%,-30%);margin:0;
}
.nav-item .badge{top:6px;right:10px;transform:none;position:static;margin-left:auto}

/* ---------- Композер ---------- */
.composer{display:flex;gap:12px;padding:16px;border-bottom:1px solid var(--line)}
.composer .body{flex:1;min-width:0}
.composer textarea{min-height:44px;max-height:240px;font-size:16px;line-height:1.45}
.composer textarea::placeholder{color:var(--muted)}
.composer-foot{
  display:flex;align-items:center;justify-content:flex-end;gap:12px;
  margin-top:10px;padding-top:10px;border-top:1px solid var(--line);
}
.counter{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.counter.warn{color:var(--like)}

.attach{
  display:grid;place-items:center;width:34px;height:34px;
  border-radius:50%;color:var(--muted);cursor:pointer;
  transition:background .15s,color .15s;margin-right:auto;
}
.attach:hover{background:var(--hover);color:var(--fg)}
.composer-preview{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap}
.preview-item{position:relative;width:100px;height:100px;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.preview-item img{width:100%;height:100%;object-fit:cover;display:block}
.preview-x{
  position:absolute;top:4px;right:4px;
  width:24px;height:24px;border-radius:50%;
  background:rgba(0,0,0,.65);color:#fff;display:grid;place-items:center;
}
.preview-x:hover{background:rgba(0,0,0,.85)}

.btn{
  background:var(--accent);color:var(--accent-fg);
  padding:8px 18px;border-radius:20px;font-weight:600;font-size:14px;
  transition:opacity .15s,transform .1s;display:inline-block;
}
.btn:hover:not(:disabled){opacity:.85}
.btn:active:not(:disabled){transform:scale(.97)}
.btn:disabled{opacity:.3;cursor:default}
.btn-ghost{background:transparent;color:var(--fg);border:1px solid var(--line)}
.btn-ghost:hover:not(:disabled){background:var(--hover);opacity:1}
.btn-block{width:100%;text-align:center;padding:12px}

/* ---------- Посты ---------- */
.post{
  display:flex;flex-direction:column;padding:14px 16px;
  border-bottom:1px solid var(--line);
  transition:background .15s;
}
.post:hover{background:var(--hover)}
.post.is-new{animation:pop .35s ease}
@keyframes pop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.post-row{display:flex;gap:12px}
.post-main{flex:1;min-width:0}
.post-head{display:flex;align-items:baseline;gap:6px;font-size:14px;flex-wrap:wrap}
.post-name{font-weight:600}
.post-name:hover{text-decoration:underline}
.post-handle,.post-sep,.post-time{color:var(--muted);font-weight:400}
.post-time:hover{text-decoration:underline}
.post-body{cursor:pointer;display:block}
.post-text{margin:3px 0 10px;white-space:pre-wrap;overflow-wrap:anywhere}
.tag{color:var(--blue);font-weight:500}

.post-actions{display:flex;align-items:center;gap:4px;margin-left:-7px}
.act{
  display:flex;align-items:center;gap:5px;
  padding:5px 8px;border-radius:16px;
  color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums;
  transition:color .15s,background .15s,transform .1s;
}
.act:hover{background:var(--hover);color:var(--fg)}
.act:active{transform:scale(.92)}
.act-like:hover,.act-like.is-liked,.act-del:hover{color:var(--like)}
.act-like.is-liked svg{fill:currentColor}
.act-like.is-liked{animation:beat .3s ease}
@keyframes beat{50%{transform:scale(1.18)}}

.act-repost:hover,.act-repost.is-reposted{color:#0a9c4a}
html[data-theme="dark"] .act-repost:hover,
html[data-theme="dark"] .act-repost.is-reposted{color:#3ddc84}
.act-repost.is-reposted{animation:beat .3s ease}

.act-bookmark:hover,.act-bookmark.is-bookmarked{color:#f5a623}
.act-bookmark.is-bookmarked svg{fill:currentColor}
.act-bookmark.is-bookmarked{animation:beat .3s ease}

.act-report:hover{color:#f5a623}
.act-report.is-reported{color:var(--like)}
.act-report.is-reported svg{fill:currentColor;opacity:.7}

/* ---------- Репост-бейдж ---------- */
.repost-badge{
  display:flex;align-items:center;gap:6px;
  padding:0 0 6px 50px;
  font-size:12px;color:var(--muted);font-weight:500;
}
.repost-badge svg{width:14px;height:14px;opacity:.85}
.repost-badge a{font-weight:600}
.repost-badge a:hover{text-decoration:underline}

/* ---------- Скрытый пост ---------- */
.post.is-hidden{opacity:.55}
.hidden-badge{
  display:inline-block;padding:2px 8px;margin:2px 0 4px;
  background:rgba(224,36,94,.12);color:var(--like);
  font-size:11px;font-weight:600;border-radius:6px;text-transform:uppercase;
  letter-spacing:.4px;
}

/* ---------- Медиа ---------- */
.post-media{
  display:block;margin:6px 0 4px;border-radius:16px;overflow:hidden;
  border:1px solid var(--line);max-width:100%;
}
.post-media img{display:block;width:100%;height:auto;max-height:520px;object-fit:cover}
.post-media-full{margin:8px 0}
.post-media-full img{max-height:640px}

/* ---------- Полный пост ---------- */
.post-full{flex-direction:column;gap:14px;padding:18px 16px}
.post-full-head{display:flex;align-items:center;gap:12px}
.post-full-text{font-size:19px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.post-full-time{font-size:13px;color:var(--muted)}

/* ---------- Профиль ---------- */
.profile-head{padding:20px 16px;border-bottom:1px solid var(--line)}
.profile-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:14px;flex-wrap:wrap}
.profile-actions{display:flex;gap:8px;flex-wrap:wrap}
.profile-name{margin:0;font-size:22px;font-weight:800;letter-spacing:-.4px}
.profile-handle{color:var(--muted);font-size:14px;margin-bottom:10px}
.profile-bio{margin:0 0 12px;white-space:pre-wrap;overflow-wrap:anywhere}
.profile-stats{display:flex;gap:16px;font-size:13px;color:var(--muted);flex-wrap:wrap}
.profile-stats b{color:var(--fg);font-weight:600}
.profile-stats a{color:var(--muted);transition:color .15s}
.profile-stats a:hover{color:var(--fg);text-decoration:underline}
.profile-actions .btn-ghost[data-user-report]{padding:8px 12px;color:var(--muted)}
.profile-actions .btn-ghost[data-user-report]:hover{color:var(--like)}

/* ---------- Табы / шапка страницы ---------- */
.tabs{display:flex;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:5}
.tab{
  flex:1;padding:14px;font-weight:600;font-size:14px;color:var(--muted);
  border-bottom:2px solid transparent;transition:color .15s,border-color .15s;
  text-align:center;
}
.tab:hover{color:var(--fg)}
.tab.active{color:var(--fg);border-color:var(--fg)}

.page-header{
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:var(--bg);z-index:8;
}
.page-header h2{margin:0;font-size:17px;font-weight:700;letter-spacing:-.3px}

/* ---------- Формы ---------- */
.auth{max-width:380px;margin:0 auto;padding:48px 24px}
.auth h1{margin:0 0 24px;font-size:26px;letter-spacing:-.5px}
.form{display:flex;flex-direction:column;gap:16px}
.form label{display:block;font-size:13px;color:var(--muted);font-weight:500}
.form input{
  display:block;margin-top:6px;padding:12px 14px;
  border:1px solid var(--line);border-radius:12px;
  font-size:15px;transition:border-color .15s;
}
.form input:focus{border-color:var(--fg)}
.form textarea{
  display:block;margin-top:6px;padding:12px 14px;
  border:1px solid var(--line);border-radius:12px;
  font-size:15px;min-height:90px;
}
.form textarea:focus{border-color:var(--fg)}
.form-error{color:var(--like);font-size:13px}
.auth-alt{text-align:center;margin-top:24px;font-size:14px;color:var(--muted)}
.auth-alt a{color:var(--fg);font-weight:600}
.auth-alt a:hover{text-decoration:underline}

.avatar-edit{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:24px}
.avatar-btn{position:relative;overflow:hidden}

/* ---------- Настройки ---------- */
.settings-section{
  margin-top:12px;padding-top:16px;
  border-top:1px solid var(--line);
}
.settings-section h3{
  margin:0 0 6px;font-size:15px;font-weight:700;letter-spacing:-.2px;
}
.settings-hint{
  margin:0 0 12px;color:var(--muted);font-size:12.5px;line-height:1.5;
}
.checkbox-list{
  display:flex;flex-direction:column;gap:8px;
  margin-top:12px;
}
.check-row{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;border:1px solid var(--line);border-radius:12px;
  cursor:pointer;transition:border-color .15s,background .15s;
  font-size:14px;font-weight:500;
}
.check-row:hover{background:var(--hover);border-color:var(--fg)}
.check-row input{
  width:18px;height:18px;accent-color:var(--accent);flex:0 0 auto;
  margin:0;padding:0;
}
.check-row span{flex:1}

/* ---------- Обзор ---------- */
.user-card{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);transition:background .15s}
.user-card:hover{background:var(--hover)}
.user-card .info{flex:1;min-width:0}
.user-card .name{font-weight:600;font-size:14px}
.user-card .handle{color:var(--muted);font-size:13px}
.user-card .bio{color:var(--muted);font-size:13px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- Поиск ---------- */
.search-box{padding:12px 16px;border-bottom:1px solid var(--line)}
.search-form{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;border:1px solid var(--line);border-radius:20px;
  color:var(--muted);transition:border-color .15s;
}
.search-form:focus-within{border-color:var(--fg);color:var(--fg)}
.search-form input{flex:1;font-size:15px;color:var(--fg)}

/* ---------- Уведомления ---------- */
.notif{
  display:flex;gap:12px;padding:14px 16px;align-items:flex-start;
  border-bottom:1px solid var(--line);transition:background .15s;
}
.notif:hover{background:var(--hover)}
.notif-body{flex:1;min-width:0}
.notif-line{font-size:14px;line-height:1.4}
.notif-line b{font-weight:600}
.notif-preview{
  color:var(--muted);font-size:13px;margin-top:4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.notif-time{color:var(--muted);font-size:12px;margin-top:4px}

/* ---------- DM ---------- */
.dm-row{position:relative}
.dm-row-time{margin-left:auto;color:var(--muted);font-size:12px;font-weight:400}
.dm-preview{color:var(--muted);font-size:13px;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-mine-mark{color:var(--fg);font-weight:500}
.dm-row-badge{position:static;margin-left:auto;transform:none}

.dm-peer{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.dm-peer b{font-size:15px;display:block;line-height:1.2}
.dm-peer .post-handle{font-size:12px}

.dm-thread{
  display:flex;flex-direction:column;
  height:calc(100vh - 60px - 56px - env(safe-area-inset-bottom));
  min-height:400px;
}
@media (min-width:768px){
  .dm-thread{height:calc(100vh - 60px)}
}
.dm-messages{
  flex:1;overflow-y:auto;padding:16px;
  display:flex;flex-direction:column;gap:2px;
  scroll-behavior:smooth;
}
.dm-messages .empty{margin:auto}

.dm-bubble{
  max-width:78%;padding:8px 13px;
  border-radius:18px;font-size:15px;line-height:1.4;
  overflow-wrap:anywhere;
  display:inline-flex;flex-direction:column;gap:2px;
}
.dm-mine{
  background:var(--accent);color:var(--accent-fg);
  align-self:flex-end;
  border-bottom-right-radius:6px;
}
.dm-theirs{
  background:var(--hover);color:var(--fg);
  align-self:flex-start;
  border-bottom-left-radius:6px;
}
.dm-time{font-size:10px;opacity:.6;align-self:flex-end;margin-top:2px;font-variant-numeric:tabular-nums}
.dm-mine .dm-time{opacity:.7;display:inline-flex;align-items:center;gap:2px}

.dm-check{
  display:inline-block;margin-left:4px;vertical-align:-2px;
  color:var(--muted);transition:color .15s;
}
.dm-check svg{display:block}
.dm-check.is-read{color:#3aa7ff}
html[data-theme="dark"] .dm-check.is-read{color:#5ab0f0}

.dm-form{
  display:flex;gap:8px;padding:10px 12px;
  border-top:1px solid var(--line);
  background:var(--bg);
}
.dm-form input{
  flex:1;padding:10px 16px;border:1px solid var(--line);
  border-radius:22px;font-size:15px;
  transition:border-color .15s;
}
.dm-form input:focus{border-color:var(--fg)}
.dm-send{
  width:44px;height:44px;padding:0;border-radius:50%;
  display:grid;place-items:center;
}

/* ---------- Админка ---------- */
.stats-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:12px;padding:16px;
}
.stat-card{
  padding:16px;border:1px solid var(--line);border-radius:14px;
  background:var(--bg);transition:border-color .15s;
}
.stat-card:hover{border-color:var(--fg)}
.stat-n{font-size:26px;font-weight:800;letter-spacing:-.6px;font-variant-numeric:tabular-nums}
.stat-l{font-size:12px;color:var(--muted);margin-top:4px;text-transform:uppercase;letter-spacing:.5px}
.stat-card.warn .stat-n{color:#f5a623}
.stat-card.danger .stat-n{color:var(--like)}

.admin-row{
  display:flex;align-items:flex-start;gap:12px;
  padding:12px 16px;border-bottom:1px solid var(--line);
  transition:background .15s;
}
.admin-row:hover{background:var(--hover)}
.admin-row.is-hidden-row{opacity:.55}
.admin-info{flex:1;min-width:0;font-size:14px}
.admin-text{margin-top:4px;color:var(--muted);font-size:13px;overflow-wrap:anywhere}
.admin-actions{display:flex;gap:2px;align-items:center;flex:0 0 auto}
.icon-btn.danger{color:var(--muted)}
.icon-btn.danger:hover{color:var(--like);background:var(--hover)}

.chip{
  display:inline-block;padding:1px 7px;margin-left:4px;
  background:var(--hover);color:var(--muted);
  font-size:10px;font-weight:700;border-radius:6px;
  text-transform:uppercase;letter-spacing:.4px;vertical-align:middle;
}
.chip-admin{background:rgba(29,155,240,.15);color:var(--blue)}
.chip-ban{background:rgba(224,36,94,.15);color:var(--like)}
.chip-ok{background:rgba(10,156,74,.15);color:#0a9c4a}
html[data-theme="dark"] .chip-ok{color:#3ddc84}

/* ---------- Заглушки ---------- */
.empty{padding:64px 24px;text-align:center;color:var(--muted);font-size:14px}
.loading{padding:64px 24px;text-align:center;color:var(--muted)}
.error{padding:32px 24px;text-align:center;color:var(--like)}

/* ---------- Нижняя навигация ---------- */
.bottom-nav{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  display:flex;justify-content:space-around;align-items:center;
  height:calc(58px + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-top:1px solid var(--line);
}
.bottom-nav .icon-btn{width:48px;height:48px}

/* ---------- Десктоп ---------- */
@media (min-width:768px){
  .sidebar{display:flex}
  .topbar{display:none}
  .bottom-nav{display:none}
  .main{
    border-left:1px solid var(--line);
    border-right:1px solid var(--line);
    padding-bottom:40px;
  }
}

/* ===== Cookie banner ===== */
.cookie-banner{
  position:fixed;left:16px;right:16px;bottom:calc(72px + env(safe-area-inset-bottom));
  z-index:50;
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  padding:14px 18px;
  background:var(--bg);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 8px 32px rgba(0,0,0,.12);
  max-width:600px;margin:0 auto;
  animation:cookieIn .3s ease;
}
html[data-theme="dark"] .cookie-banner{box-shadow:0 8px 32px rgba(0,0,0,.55)}
@keyframes cookieIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.cookie-banner .text{flex:1;min-width:200px;font-size:13.5px;line-height:1.5;color:var(--muted)}
.cookie-banner .text a{color:var(--fg);font-weight:600;text-decoration:underline}
.cookie-banner .actions{display:flex;gap:8px;flex:0 0 auto}
@media (min-width:768px){
  .cookie-banner{bottom:20px;left:50%;transform:translateX(-50%);right:auto;width:calc(100% - 40px)}
  .cookie-banner.hide{display:none}
}

/* ===== Язык: селект в настройках ===== */
.lang-select{
  display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;
}
.lang-option{
  padding:8px 14px;border:1px solid var(--line);border-radius:20px;
  font-size:14px;font-weight:500;color:var(--fg);cursor:pointer;
  transition:border-color .15s,background .15s;
}
.lang-option:hover{background:var(--hover)}
.lang-option.active{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}

/* ===== Быстрый переключатель языка в шапке ===== */
.lang-switch{
  display:inline-flex;gap:2px;align-items:center;
  padding:2px;border-radius:14px;background:var(--hover);
}
.lang-switch button{
  padding:4px 10px;border-radius:12px;font-size:12px;font-weight:600;
  color:var(--muted);transition:background .15s,color .15s;
  text-transform:uppercase;letter-spacing:.3px;
}
.lang-switch button:hover{color:var(--fg)}
.lang-switch button.active{background:var(--bg);color:var(--fg)}

/* ===== Юридические страницы ===== */
.legal{max-width:720px;margin:0 auto;padding:32px 24px 80px;line-height:1.65}
.legal h1{margin:0 0 6px;font-size:26px;letter-spacing:-.5px;font-weight:800}
.legal .meta{color:var(--muted);font-size:13px;margin-bottom:24px}
.legal h2{margin:28px 0 8px;font-size:18px;letter-spacing:-.2px;font-weight:700}
.legal p,.legal li{font-size:15px;color:var(--fg);margin:0 0 10px}
.legal ul{padding-left:20px;margin:0 0 12px}
.legal li{margin-bottom:6px}
.legal a{color:var(--blue);text-decoration:underline}

/* ===== Auth: чекбокс согласия ===== */
.terms-row{
  display:flex;align-items:flex-start;gap:10px;
  font-size:13px;color:var(--muted);line-height:1.5;
}
.terms-row input{margin-top:2px;width:16px;height:16px;accent-color:var(--accent);flex:0 0 auto}
.terms-row a{color:var(--fg);font-weight:600;text-decoration:underline}

/* ===== «Скоро» — бейдж для телефона ===== */
.chip-soon{
  display:inline-block;padding:2px 8px;margin-left:6px;
  background:rgba(245,166,35,.15);color:#c67b00;
  font-size:10px;font-weight:700;border-radius:6px;
  text-transform:uppercase;letter-spacing:.4px;
}
html[data-theme="dark"] .chip-soon{color:#f5a623}