/* ============================================================
   ИТД / Nowkie — стили
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#151518;
  --bg-elev:#222224;
  --bg-elev-2:#2a2a2c;
  --bg-elev-3:#2c2c2f;
  --bg-input:#2a2a2c;
  --border:rgba(255,255,255,.1);
  --text:#f5f5f5;
  --text-dim:rgba(255,255,255,.5);
  --text-dim-2:rgba(255,255,255,.35);
  --white:#ffffff;
  --blue:#0080FF;
  --green:#00ba7c;
  --pink:#f91880;
  --gold:#ffdc5f;
  --red:#ef4444;
  --radius-xl:36px;
  --radius-lg:20px;
  --radius-md:14px;
  --radius-full:999px;
  --shadow-modal:0 8px 32px rgba(0,0,0,.25);
  --sidebar-w:224px;
}

body[data-theme="light"]{
  --bg:#f5f5f5;
  --bg-elev:#ffffff;
  --bg-elev-2:#f0f0f0;
  --bg-elev-3:#ebebeb;
  --bg-input:#f0f0f0;
  --border:rgba(0,0,0,.1);
  --text:#1a1a1a;
  --text-dim:#7a7a7a;
  --text-dim-2:#9a9a9a;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
.hidden{display:none !important;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
input,textarea,select{font-family:inherit;}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-thumb{background:var(--bg-elev-3);border-radius:99px;}
::-webkit-scrollbar-track{background:transparent;}

/* ============ Кнопки ============ */
.btn{
  border:none;border-radius:var(--radius-full);
  padding:12px 24px;font-size:14.5px;font-weight:600;
  transition:transform .12s ease, background .15s ease, opacity .15s ease;
  white-space:nowrap;
}
.btn:active{transform:scale(.96);}
.btn-white{background:#fff;color:#000;}
.btn-white:hover{background:#e9e9e9;}
.btn-ghost{background:var(--bg-elev-3);color:var(--text);}
.btn-ghost:hover{background:var(--bg-elev-2);}
.btn-blue{background:var(--blue);color:#fff;}
.btn-blue:hover{background:#2f6fe0;}
.btn-danger{background:var(--pink);color:#fff;}
.btn-danger:hover{background:#d63d84;}
.btn-block{width:100%;display:block;}
.btn:disabled{opacity:.45;cursor:not-allowed;}

/* ============ Auth screen ============ */
.auth-screen{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 20%, #0d0d10 0%, #000 70%);
  z-index:500;
  animation:fadeIn .3s ease;
}
.auth-box{
  width:380px;max-width:92vw;background:var(--bg-elev);border:1px solid var(--border);
  border-radius:var(--radius-xl);padding:32px 28px;
  animation:popIn .25s ease;
}
.auth-logo{font-size:26px;font-weight:800;letter-spacing:.5px;margin-bottom:20px;}
.auth-ver{font-size:12px;color:var(--text-dim);font-weight:500;margin-left:6px;}
.auth-tabs{display:flex;background:var(--bg-elev-3);border-radius:var(--radius-full);padding:4px;margin-bottom:20px;}
.auth-tab{flex:1;background:transparent;border:none;color:var(--text-dim);padding:9px 0;border-radius:var(--radius-full);font-weight:600;font-size:14px;transition:all .15s ease;}
.auth-tab.active{background:#fff;color:#000;}
.auth-form label{display:block;font-size:13px;color:var(--text-dim);margin:14px 0 6px;font-weight:500;}
.auth-form .hint{font-weight:400;color:var(--text-dim-2);}
.auth-form input[type=text],.auth-form input[type=password]{
  width:100%;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:11px 14px;color:var(--text);font-size:14px;outline:none;transition:border .15s ease;
}
.auth-form input:focus{border-color:var(--blue);}
.auth-form button[type=submit]{margin-top:20px;}
.auth-error{color:var(--red);font-size:13px;margin-top:8px;min-height:16px;}
.clan-picker{display:flex;flex-wrap:wrap;gap:8px;max-height:120px;overflow-y:auto;padding:4px;}
.clan-opt{
  width:38px;height:38px;border-radius:50%;background:var(--bg-input);border:2px solid transparent;
  display:flex;align-items:center;justify-content:center;font-size:18px;transition:all .12s ease;
}
.clan-opt.selected{border-color:var(--blue);background:var(--bg-elev-3);transform:scale(1.08);}
.reg-avatar-upload{
  display:flex;align-items:center;gap:10px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-full);
  padding:8px 14px 8px 8px;font-size:13px;color:var(--text-dim);cursor:pointer;width:fit-content;
}
.reg-avatar-upload:hover{border-color:var(--blue);}

/* ============ App shell ============ */
body{display:flex;justify-content:center;}
.app{display:flex;min-height:100vh;width:100%;max-width:1360px;margin:0 auto;}
.sidebar{
  width:var(--sidebar-w);flex-shrink:0;padding:24px 16px;display:flex;flex-direction:column;
  position:fixed;top:0;height:100vh;overflow-y:auto;z-index:80;
  /* без явного left — при position:fixed без него элемент остаётся на своей
     "статической" позиции (там, где он был бы во флексе), но больше не
     двигается при прокрутке страницы. Это надёжнее, чем sticky. */
}
.sidebar-spacer{width:var(--sidebar-w);flex-shrink:0;}
.logo{font-size:20px;font-weight:800;margin:4px 4px 28px;}
.ver{font-size:11px;color:var(--text-dim);font-weight:500;margin-left:4px;}
.nav{display:flex;flex-direction:column;gap:2px;}
.nav-item{
  display:flex;align-items:center;gap:13px;background:transparent;border:none;color:var(--text-dim);
  padding:13px 16px;border-radius:var(--radius-md);font-size:16px;font-weight:500;text-align:left;
  transition:background .15s ease,color .15s ease;position:relative;
}
.nav-item:hover{background:var(--bg-elev);color:var(--text);}
.nav-item.active{background:var(--bg-elev);color:var(--text);font-weight:700;}
.nav-icon{font-size:17px;width:20px;text-align:center;display:flex;align-items:center;justify-content:center;}
.nav-icon svg{width:21px;height:21px;display:block;}
.icon{display:inline-flex;align-items:center;justify-content:center;line-height:0;}
.icon svg{width:16px;height:16px;display:block;}
.nav-badge{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  background:var(--pink);color:#fff;font-size:10px;font-weight:700;border-radius:99px;
  padding:1px 6px;
}
.sidebar-bottom{margin-top:auto;display:flex;flex-direction:column;gap:2px;}
.nav-item.nukcta{color:#f6c945;}
.nav-item.nukcta:hover{background:var(--bg-elev);}
.nav-item.logout:hover{color:var(--red);}

/* ============ Main / views ============ */
.main{flex:1;min-width:0;padding:24px 24px 80px;max-width:820px;margin:0 auto;}
.view-title{font-size:24px;font-weight:800;margin:4px 0 20px;}
.view{animation:fadeInUp .22s ease;}

.coin-balance{
  display:flex;align-items:center;gap:8px;background:var(--bg-elev);border-radius:var(--radius-full);
  padding:10px 14px;font-weight:700;font-size:14px;margin:2px 4px 10px;color:#f0c239;
}
.coin-balance .icon svg{width:17px;height:17px;}

.avatar-wrap.editable{cursor:pointer;}
.avatar-edit-overlay{
  position:absolute;inset:0;border-radius:50%;background:rgba(0,0,0,.5);display:flex;align-items:center;
  justify-content:center;opacity:0;transition:opacity .15s ease;color:#fff;
}
.avatar-wrap.editable:hover .avatar-edit-overlay{opacity:1;}
.avatar-edit-overlay .icon svg{width:18px;height:18px;}
.avatar-badge-clan{
  position:absolute;bottom:-2px;right:-2px;width:18px;height:18px;border-radius:50%;background:var(--bg-elev-2);
  display:flex;align-items:center;justify-content:center;font-size:10px;border:2px solid var(--bg-elev);
}

.feed-tabs{
  display:inline-flex;background:var(--bg-elev);border-radius:var(--radius-full);padding:5px;margin-bottom:20px;
}
.feed-tab{
  background:transparent;border:none;color:var(--text-dim);padding:12px 26px;border-radius:var(--radius-full);
  font-weight:700;font-size:15px;transition:all .15s ease;
}
.feed-tab.active{background:var(--bg-elev-3);color:var(--text);}

.card{
  background:var(--bg-elev);border-radius:var(--radius-xl);padding:22px;margin-bottom:18px;
  animation:fadeInUp .25s ease;
}
.card-title{font-size:17px;font-weight:700;margin:0 0 14px;}

/* ============ Composer ============ */
.composer{display:flex;gap:14px;align-items:flex-start;}
.composer textarea{
  flex:1;background:transparent;border:none;color:var(--text);font-size:16px;resize:none;outline:none;
  min-height:26px;padding-top:10px;font-family:inherit;
}
.composer textarea::placeholder{color:var(--text-dim);}
.composer-row{display:flex;justify-content:space-between;align-items:center;margin-top:12px;}
.composer-icons{display:flex;gap:16px;}
.composer-icons button{background:none;border:none;color:var(--text-dim);font-size:18px;padding:5px;border-radius:9px;transition:all .15s;}
.composer-icons button:hover{color:var(--text);background:var(--bg-elev-3);}
.composer-preview{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.composer-preview img{width:88px;height:88px;object-fit:cover;border-radius:14px;}

/* ============ Avatars ============ */
.avatar{
  width:48px;height:48px;border-radius:50%;background:var(--bg-elev-3);display:flex;align-items:center;
  justify-content:center;font-size:21px;flex-shrink:0;position:relative;overflow:hidden;
}
.avatar img{width:100%;height:100%;object-fit:cover;}
.avatar-sm{width:34px;height:34px;font-size:16px;}
.avatar-lg{width:116px;height:116px;font-size:42px;border:4px solid var(--bg);}
.avatar-wrap{position:relative;display:inline-block;}
.avatar-online-dot{
  position:absolute;bottom:1px;right:1px;width:12px;height:12px;border-radius:50%;
  background:var(--green);border:2px solid var(--bg-elev);
}
.avatar-lg .avatar-online-dot{width:18px;height:18px;border:3px solid var(--bg);}
.avatar-badge{
  position:absolute;bottom:-2px;right:-2px;width:16px;height:16px;border-radius:50%;background:var(--bg-elev-2);
  display:flex;align-items:center;justify-content:center;font-size:9px;border:2px solid var(--bg-elev);
}

/* ============ Post card ============ */
.post{background:var(--bg-elev);border-radius:var(--radius-xl);margin-bottom:18px;overflow:hidden;animation:fadeInUp .25s ease;transition:box-shadow .15s ease;}
.post:hover{box-shadow:0 8px 28px rgba(0,0,0,.22);}
.post-clickable{cursor:pointer;}
.post-head{display:flex;align-items:center;gap:13px;padding:18px 20px 11px;position:relative;}
.post-head-info{flex:1;min-width:0;}
.post-author-row{display:flex;align-items:center;gap:6px;}
.post-author{font-weight:700;font-size:16px;}
.post-time{color:var(--text-dim);font-size:13px;margin-top:1px;}
.verified-badge{width:16px;height:16px;border-radius:50%;background:var(--blue);display:inline-flex;align-items:center;justify-content:center;font-size:9px;color:#fff;flex-shrink:0;}
.post-menu{background:none;border:none;color:var(--text-dim);font-size:19px;padding:6px;border-radius:9px;}
.post-menu:hover{background:var(--bg-elev-3);color:var(--text);}
.post-text{padding:0 20px 13px;font-size:15.5px;line-height:1.55;white-space:pre-wrap;word-break:break-word;}
.post-text a.hashtag{color:var(--blue);}
.post-media{width:100%;max-height:560px;object-fit:cover;display:block;background:var(--bg-elev-2);}
.post-media-wrap{cursor:pointer;}
.post-repost-box{margin:0 20px 14px;border:1px solid var(--border);border-radius:18px;overflow:hidden;}
.post-repost-box .post-media{border-radius:0;max-height:400px;}
.post-repost-box .post-head{padding:13px 16px 9px;}
.post-repost-box .post-text{padding:0 16px 11px;font-size:14.5px;}
.post-footer{display:flex;align-items:center;gap:20px;padding:13px 20px;color:var(--text-dim);font-size:14px;flex-wrap:wrap;}
.post-action{display:flex;align-items:center;gap:6px;background:none;border:none;color:var(--text-dim);font-size:14px;padding:5px 8px;border-radius:9px;transition:all .15s;}
.post-action:hover{background:var(--bg-elev-3);color:var(--text);}
.post-action.active{color:var(--pink);}
.post-repost-btn:hover{color:var(--green);}
.post-capture-btn:hover{color:var(--gold);}
.post-captured{display:flex;align-items:center;gap:6px;color:var(--gold);font-weight:600;}
.captured-emoji{font-size:15px;}
.post-views{margin-left:auto;display:flex;align-items:center;gap:6px;}
.post-like.pulse .icon{animation:likePulse .4s ease;}
@keyframes likePulse{0%{transform:scale(1);}30%{transform:scale(1.4) rotate(-8deg);}60%{transform:scale(.92);}100%{transform:scale(1);}}

/* ============ Comments ============ */
.comments-section{border-top:1px solid var(--border);padding:14px 18px;}
.comments-sort{display:flex;align-items:center;gap:6px;color:var(--text-dim);font-size:14px;margin-bottom:12px;cursor:pointer;position:relative;width:fit-content;}
.comments-sort-menu{
  position:absolute;top:26px;left:0;background:var(--bg-elev);border:1px solid var(--border);border-radius:16px;
  overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.25);z-index:20;min-width:180px;padding:6px;
  animation:popIn .2s cubic-bezier(.16,1,.3,1);
}
.comments-sort-menu button{display:block;width:100%;text-align:left;background:none;border:none;color:var(--text);padding:11px 12px;font-size:14px;border-radius:10px;transition:background .15s ease;}
.comments-sort-menu button:hover{background:var(--bg-elev-3);}
.comment{display:flex;gap:10px;margin-bottom:16px;}
.comment-replies{margin-left:42px;border-left:2px solid var(--border);padding-left:14px;margin-bottom:4px;}
.comment-replies .comment{margin-bottom:14px;}
.comment-body{flex:1;min-width:0;}
.comment-head{display:flex;align-items:center;gap:6px;font-size:14px;}
.comment-author{font-weight:700;}
.comment-author.post-author-row .post-author{font-size:13.5px;font-weight:700;}
.comment-author.post-author-row .pin-badge-sm{margin-left:1px;}
.comment-time{color:var(--text-dim);font-size:12px;}
.comment-text{font-size:14px;margin-top:2px;line-height:1.4;word-break:break-word;}
.comment-media{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;}
.comment-media img{width:120px;height:120px;object-fit:cover;border-radius:12px;cursor:pointer;}
.comment-actions{display:flex;gap:14px;margin-top:6px;font-size:13px;color:var(--text-dim);}
.comment-actions span{cursor:pointer;}
.comment-actions span:hover{color:var(--text);}
.comment-input-row{display:flex;align-items:center;gap:10px;background:var(--bg-input);border-radius:var(--radius-full);padding:10px 16px;margin-top:8px;}
.comment-input-row input{flex:1;background:none;border:none;outline:none;color:var(--text);font-size:14px;}
.comment-input-row button{background:none;border:none;color:var(--text-dim);font-size:16px;display:flex;align-items:center;flex-shrink:0;}
.comment-input-row button:hover{color:var(--text);}
.comment-input-row button .icon svg{width:16px;height:16px;}
.comment-input-row button:disabled{opacity:.4;cursor:default;}
.comment-reply-banner{
  display:flex;align-items:center;justify-content:space-between;background:var(--bg-elev-2);border-radius:12px;
  padding:8px 12px;margin-top:10px;font-size:13px;color:var(--text-dim);
}
.comment-reply-banner button{background:none;border:none;color:var(--text-dim);font-size:14px;}
.comment-reply-banner button:hover{color:var(--text);}

/* ============ Вложения к комментарию (прикреплённые фото) ============ */
.comment-attach-preview{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.comment-attach-thumb{position:relative;width:64px;height:64px;border-radius:12px;overflow:hidden;background:var(--bg-elev-2);flex-shrink:0;}
.comment-attach-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.comment-attach-remove{
  position:absolute;top:3px;right:3px;width:18px;height:18px;border-radius:50%;background:#000000b3;color:#fff;
  border:none;font-size:10px;display:flex;align-items:center;justify-content:center;line-height:1;padding:0;
}
.comment-attach-remove:hover{background:#000000e0;color:#fff;}
.comment-attach-spinner{
  position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.45);
}
.comment-attach-thumb.uploading .comment-attach-spinner{display:flex;}
.comment-attach-thumb.uploading img{filter:brightness(.6);}
.comment-attach-spinner::after{
  content:"";width:20px;height:20px;border-radius:50%;border:2.5px solid rgba(255,255,255,.35);
  border-top-color:#fff;animation:commentAttachSpin .7s linear infinite;
}
@keyframes commentAttachSpin{to{transform:rotate(360deg);}}

/* ============ Search ============ */
.search-input-wrap{position:relative;margin-bottom:18px;}
.search-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--text-dim);}
.search-input-wrap input{
  width:100%;background:var(--bg-elev);border:none;border-radius:var(--radius-full);padding:14px 16px 14px 44px;
  color:var(--text);font-size:15px;outline:none;
}
.clans-grid{display:flex;flex-wrap:wrap;gap:10px;}
.clan-pill{
  display:flex;align-items:center;gap:8px;background:var(--bg-elev-2);border-radius:var(--radius-full);
  padding:8px 14px;font-weight:600;font-size:14px;
}
.clan-pill .emoji{font-size:17px;}
.hashtag-list{display:flex;flex-direction:column;gap:10px;}
.hashtag-row{
  display:flex;align-items:center;gap:14px;background:var(--bg-elev-2);border-radius:var(--radius-lg);
  padding:14px 18px;transition:background .15s;
}
.hashtag-row:hover{background:var(--bg-elev-3);}
.hashtag-rank{color:var(--text-dim);font-weight:700;width:16px;}
.hashtag-name{color:var(--blue);font-weight:700;}
.hashtag-count{color:var(--text-dim);font-size:13px;margin-top:2px;}
.spinner{
  width:22px;height:22px;border:3px solid var(--bg-elev-3);border-top-color:var(--text-dim);border-radius:50%;
  animation:spin .7s linear infinite;margin:20px auto;
}
.search-user-row{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;transition:background .15s;}
.search-user-row:hover{background:var(--bg-elev-2);}

/* ============ Skeleton-загрузка (вместо голого спиннера в ленте) ============ */
.skeleton{position:relative;overflow:hidden;background:var(--bg-elev-3);border-radius:8px;}
.skeleton::after{
  content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);
  animation:skeletonShimmer 1.3s ease-in-out infinite;
}
@keyframes skeletonShimmer{100%{transform:translateX(100%);}}
.skeleton-post{background:var(--bg-elev);border-radius:var(--radius-xl);padding:20px;margin-bottom:18px;}
.skeleton-post-head{display:flex;align-items:center;gap:13px;margin-bottom:16px;}
.skeleton-avatar{width:48px;height:48px;border-radius:50%;flex-shrink:0;}
.skeleton-lines{flex:1;display:flex;flex-direction:column;gap:8px;}
.skeleton-line{height:12px;border-radius:6px;}
.skeleton-media{width:100%;height:280px;border-radius:18px;}

/* ============ Shop ============ */
.shop-header-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
.shop-header-row .view-title{margin:0;}
.shop-balance{display:flex;align-items:center;gap:8px;background:var(--bg-elev);border-radius:var(--radius-full);padding:10px 16px;font-weight:700;color:#f0c239;font-size:14px;}
.shop-balance .icon svg{width:17px;height:17px;}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;}
.shop-item{background:var(--bg-elev);border-radius:var(--radius-lg);padding:18px;text-align:center;}
.shop-item-icon{font-size:34px;margin-bottom:10px;}
.shop-item-swatch{width:28px;height:28px;border-radius:50%;margin:0 auto 10px;border:2px solid var(--border);}
.shop-item-title{font-weight:700;font-size:14px;margin-bottom:4px;}
.shop-item-desc{color:var(--text-dim);font-size:12px;margin-bottom:12px;min-height:32px;}
.shop-item-price{display:flex;align-items:center;justify-content:center;gap:6px;font-weight:700;color:#f0c239;margin-bottom:10px;}
.shop-item-price .icon svg{width:15px;height:15px;}

/* ============ Empty state (event) ============ */
.empty-state{text-align:center;margin-top:120px;color:var(--text);}
.empty-sparkle{font-size:34px;margin-bottom:10px;}
.empty-state h2{font-size:20px;margin:0 0 8px;}
.empty-state p{color:var(--text-dim);margin:0;}
.empty-state mark{background:transparent;color:inherit;}

/* ============ Notifications ============ */
.notif-item{
  display:flex;align-items:center;gap:14px;background:var(--bg-elev);border-radius:var(--radius-xl);
  padding:16px 18px;margin-bottom:14px;
}
.notif-body{flex:1;min-width:0;}
.notif-text{font-size:14px;}
.notif-text b{font-weight:700;}
.notif-snippet{color:var(--text-dim);font-size:13px;margin-top:2px;}
.notif-date{color:var(--text-dim-2);font-size:12px;margin-top:4px;}
.notif-item .btn{flex-shrink:0;}

/* ============ Profile ============ */
.profile-banner{
  height:220px;border-radius:var(--radius-xl);background:linear-gradient(135deg,var(--bg-elev),var(--bg-elev-3));
  position:relative;margin-bottom:64px;background-size:cover;background-position:center;
}
.profile-banner-edit{
  position:absolute;right:16px;top:16px;width:40px;height:40px;border-radius:50%;background:var(--bg-elev-2);
  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:15px;
}
.profile-avatar-row{position:absolute;left:22px;bottom:-54px;display:flex;align-items:flex-end;gap:12px;}
.profile-clan-badge{
  width:40px;height:40px;border-radius:50%;background:var(--bg-elev-2);border:3px solid var(--bg);
  display:flex;align-items:center;justify-content:center;font-size:19px;margin-bottom:2px;
}
.profile-head-actions{position:absolute;right:0;bottom:-54px;display:flex;gap:10px;align-items:center;}
.profile-name{font-size:24px;font-weight:800;display:flex;align-items:center;gap:8px;margin:8px 0 2px;}
.profile-name .post-author{font-size:24px;font-weight:800;}
.profile-name .verified-badge{width:18px;height:18px;font-size:10px;}
.profile-name .pin-badge-sm .pin-emoji{font-size:17px;}
.profile-username{color:var(--text-dim);font-size:15px;font-weight:500;}
.profile-stats{display:flex;gap:20px;color:var(--text-dim);font-size:14.5px;margin:12px 0 6px;}
.profile-stats b{color:var(--text);}
.profile-meta{color:var(--text-dim);font-size:13px;display:flex;align-items:center;gap:6px;margin-bottom:20px;}
.profile-tabs{display:flex;background:var(--bg-elev);border-radius:var(--radius-full);padding:5px;margin-bottom:20px;width:fit-content;}
.profile-tab{background:transparent;border:none;color:var(--text-dim);padding:12px 30px;border-radius:var(--radius-full);font-weight:700;font-size:15px;}
.profile-tab.active{background:var(--bg-elev-3);color:var(--text);}
.profile-pin{display:inline-flex;align-items:center;gap:6px;background:var(--bg-elev-2);border-radius:var(--radius-full);padding:4px 10px 4px 4px;font-size:12px;color:var(--text-dim);}

/* ============ Пины (награды) ============ */
.pin-badge{position:relative;display:inline-flex;align-items:center;cursor:help;vertical-align:middle;}
.pin-badge-sm{margin-left:2px;}
.pin-badge-sm .pin-emoji{font-size:13px;}
.pin-badge-lg{
  display:inline-flex;align-items:center;gap:8px;background:var(--bg-elev-2);border-radius:var(--radius-full);
  padding:7px 14px 7px 8px;font-size:13px;font-weight:600;color:var(--text);
}
.pin-badge-lg .pin-emoji{font-size:17px;}
.pin-tooltip{
  position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);
  background:#000000e6;color:#ffffffd9;border:none;border-radius:8px;padding:8px 10px;
  font-size:12px;line-height:1.4;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .15s ease;z-index:60;display:flex;flex-direction:column;gap:2px;
}
.pin-tooltip::after{
  content:"";position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);
  width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:5px solid rgba(0,0,0,.9);
}
.pin-badge:hover .pin-tooltip{opacity:1;visibility:visible;}
.pin-tooltip .line1{font-weight:600;color:#ffffffd9;}
.pin-tooltip .line2{color:#ffffff80;font-size:10px;margin-top:0;max-width:220px;white-space:normal;}

/* мерцающий блеск на бейдже ИТД НУКСТА (не синий — нейтральный белый отблеск) */
.pin-emoji{position:relative;display:inline-block;}
.pin-badge-sm .pin-emoji, .pin-badge-lg .pin-emoji{
  animation:pinShine 2.6s ease-in-out infinite;
  filter:drop-shadow(0 0 3px rgba(255,255,255,.35));
}
@keyframes pinShine{
  0%,100%{filter:drop-shadow(0 0 2px rgba(255,255,255,.25));opacity:.92;}
  50%{filter:drop-shadow(0 0 6px rgba(255,255,255,.75));opacity:1;}
}

/* ============ Мерцающее имя (даётся ИТД НУКСТА) — цветовой градиент как в референсе ============ */
.name-glow{
  background:linear-gradient(270deg,#0288d1,#26c6da);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-weight:800;
}

/* ============ Modals (общее) ============ */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(2px);display:flex;align-items:center;
  justify-content:center;z-index:600;animation:fadeIn .18s ease;
}
.modal{
  background:var(--bg-elev);border-radius:20px;box-shadow:var(--shadow-modal);
  animation:popIn .2s cubic-bezier(.2,1,.3,1);position:relative;
}
.modal h2{margin:0 0 4px;font-size:19px;font-weight:800;}
.modal-close{
  position:absolute;top:-44px;right:0;width:36px;height:36px;border-radius:50%;background:var(--bg-elev-2);
  border:1px solid var(--border);color:var(--text);font-size:15px;display:flex;align-items:center;justify-content:center;
}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;}

/* Repost */
.modal-repost{width:420px;max-width:92vw;padding:24px;}
.repost-input-row{display:flex;gap:12px;margin:16px 0;}
.repost-input-row textarea{
  flex:1;background:var(--bg-input);border:1px solid var(--border);border-radius:14px;padding:12px 14px;
  color:var(--text);font-size:14px;resize:none;min-height:70px;outline:none;font-family:inherit;
}
.repost-target{background:var(--bg-input);border-radius:14px;padding:12px 14px;display:flex;align-items:center;gap:10px;font-weight:600;font-size:14px;}

/* Settings */
.modal-settings{width:720px;max-width:94vw;height:560px;max-height:88vh;display:flex;padding:0;overflow:hidden;}
.settings-layout{display:flex;width:100%;height:100%;}
.settings-nav{width:220px;flex-shrink:0;border-right:1px solid var(--border);padding:24px 12px;overflow-y:auto;}
.settings-nav h2{padding:0 12px;margin-bottom:14px;}
.settings-nav-item{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:none;color:var(--text-dim);
  padding:11px 12px;border-radius:12px;font-size:14px;font-weight:600;margin-bottom:2px;
}
.settings-nav-item:hover{background:var(--bg-elev-2);}
.settings-nav-item.active{background:#fff;color:#000;}
body[data-theme="light"] .settings-nav-item.active{background:#000;color:#fff;}
.settings-content{flex:1;padding:24px 28px;overflow-y:auto;}
.settings-content h2{margin-bottom:18px;}
.settings-field{margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--border);}
.settings-field:last-child{border-bottom:none;}
.settings-field-head{display:flex;justify-content:space-between;align-items:center;gap:16px;}
.settings-field-label{font-weight:600;font-size:14px;}
.settings-field-desc{color:var(--text-dim);font-size:12px;margin-top:2px;}
.settings-field input[type=text],.settings-field textarea{
  background:var(--bg-input);border:1px solid var(--border);border-radius:12px;padding:10px 14px;color:var(--text);
  font-size:14px;outline:none;width:220px;font-family:inherit;
}
.settings-field textarea{width:100%;min-height:70px;resize:vertical;margin-top:8px;}
.settings-section-label{font-size:11px;font-weight:700;color:var(--text-dim-2);text-transform:uppercase;letter-spacing:.5px;margin:20px 0 6px;}
.settings-danger{color:var(--red);font-weight:600;font-size:14px;text-align:center;margin-top:20px;background:none;border:none;}
.toggle{
  position:relative;width:44px;height:26px;border-radius:99px;background:var(--bg-elev-3);flex-shrink:0;
  transition:background .2s ease;border:none;
}
.toggle::after{
  content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;
  transition:transform .2s ease;box-shadow:0 1px 3px rgba(0,0,0,.4);
}
.toggle.on{background:var(--green);}
.toggle.on::after{transform:translateX(18px);}
.select-pill{
  background:var(--bg-input);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-full);
  padding:9px 16px;font-size:14px;font-weight:600;outline:none;
}
.pins-grid{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;}
.pin-option{
  display:flex;align-items:center;gap:10px;background:var(--bg-input);border:2px solid transparent;border-radius:14px;
  padding:10px 14px;font-size:13px;cursor:pointer;transition:border-color .15s;
}
.pin-option.selected{border-color:var(--blue);}
.pin-option-hoverable{position:relative;}
.pin-option-hoverable .pin-tooltip{left:14px;transform:none;}
.pin-option-hoverable .pin-tooltip::after{left:14px;transform:none;}
.pin-option-hoverable:hover .pin-tooltip{opacity:1;visibility:visible;}
.blacklist-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);}
.blacklist-empty{color:var(--text-dim);font-size:14px;text-align:center;padding:30px 0;}

/* Premium modal */
.modal-nukcta{width:440px;max-width:92vw;max-height:88vh;padding:0;overflow:hidden;border-radius:26px;}
.nukcta-scroll{padding:28px;overflow-y:auto;max-height:88vh;}
.nukcta-scroll h2{font-size:21px;}
.nukcta-label{color:var(--text-dim);font-size:11px;font-weight:700;letter-spacing:.6px;margin:18px 0 10px;text-transform:uppercase;}
.nukcta-preview{display:flex;align-items:center;gap:10px;margin-bottom:6px;background:var(--bg-elev-2);border-radius:16px;padding:12px 14px;}
.nukcta-preview b{font-size:14px;}
.nukcta-banner{
  background:linear-gradient(160deg,#efe9f7,#e3ddf2);border-radius:20px;padding:22px 0;margin:10px 0 20px;
  display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);
}
.nukcta-illustration{width:200px;height:167px;animation:nukctaFloat 3s ease-in-out infinite;}
.nukcta-eye{animation:nukctaBlink 4.5s ease-in-out infinite;transform-box:fill-box;transform-origin:center;}
.nukcta-head{animation:nukctaSway 3s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%;}
.nukcta-ghost{animation:nukctaGhostBob 2.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center;}
.nukcta-ghost-2{animation-delay:.5s;}
.nukcta-plus{animation:nukctaPulse 2s ease-in-out infinite;transform-box:fill-box;transform-origin:center;}
@keyframes nukctaFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
@keyframes nukctaSway{0%,100%{transform:rotate(-2deg);}50%{transform:rotate(2deg);}}
@keyframes nukctaBlink{0%,90%,100%{transform:scaleY(1);}94%{transform:scaleY(.1);}}
@keyframes nukctaGhostBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
@keyframes nukctaPulse{0%,100%{opacity:.5;transform:scale(.9);}50%{opacity:1;transform:scale(1.15);}}
.nukcta-section{margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--border);}
.nukcta-section:last-of-type{border-bottom:none;}
.nukcta-section-title{font-size:11px;font-weight:700;color:var(--text-dim-2);text-transform:uppercase;letter-spacing:.6px;margin-bottom:12px;}
.info-dot{opacity:.5;}
.nukcta-item{display:flex;align-items:center;gap:12px;font-weight:600;font-size:14.5px;padding:10px 0;}
.nukcta-dot{width:16px;height:16px;border-radius:50%;display:inline-block;flex-shrink:0;}
.nukcta-dot.blue{background:linear-gradient(135deg,#7dd3fc,#3b82f6);}
.nukcta-dot.pink{background:linear-gradient(135deg,#f9a8d4,#c084fc);}
.badge-soon{font-size:10px;background:var(--bg-elev-3);color:var(--text-dim);padding:2px 7px;border-radius:7px;margin-left:6px;font-weight:700;}
.nukcta-price-note{color:var(--text-dim);font-size:13px;text-align:center;margin:16px 0;display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;line-height:1.5;}
.nukcta-price-note .icon svg{width:14px;height:14px;flex-shrink:0;}
#nukctaPay{display:flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;font-size:15px;}
#nukctaPay .icon svg{width:17px;height:17px;}
.nukcta-terms{color:var(--text-dim-2);font-size:11px;text-align:center;margin-top:10px;line-height:1.5;}
.nukcta-terms a{color:var(--text-dim);text-decoration:underline;}

/* Verification modal */
.modal-verification{width:460px;max-width:92vw;padding:24px;}
.ver-desc{color:var(--text-dim);font-size:14px;margin:8px 0 18px;line-height:1.5;}
.ver-upload{
  display:flex;flex-direction:column;align-items:center;gap:6px;border:2px dashed var(--border);border-radius:16px;
  padding:32px 16px;cursor:pointer;transition:border-color .15s;
}
.ver-upload:hover, .ver-upload.dragover{border-color:var(--blue);}
.ver-icon{font-size:28px;color:var(--text-dim);}
.ver-title{font-weight:700;font-size:14px;}
.ver-sub{color:var(--text-dim);font-size:12px;}
.ver-checkbox{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--text-dim);margin-top:16px;line-height:1.4;cursor:pointer;}
.ver-checkbox input{margin-top:2px;}

/* Banner editor */
.modal-banner-editor{width:1000px;max-width:96vw;padding:16px;}
.be-toolbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid var(--border);margin-bottom:12px;}
.be-tool,.be-icon{background:none;border:none;color:var(--text-dim);font-size:16px;width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;}
.be-tool:hover,.be-icon:hover{background:var(--bg-elev-2);color:var(--text);}
.be-tool.active{background:var(--bg-elev-3);color:var(--text);}
.be-sep{width:1px;height:22px;background:var(--border);margin:0 4px;}
.be-size{width:22px;height:22px;border-radius:50%;border:2px solid transparent;background:var(--bg-elev-3);position:relative;}
.be-size::after{content:"";position:absolute;inset:0;margin:auto;border-radius:50%;background:var(--text);}
.be-size[data-size="2"]::after{width:3px;height:3px;}
.be-size[data-size="4"]::after{width:5px;height:5px;}
.be-size[data-size="8"]::after{width:8px;height:8px;}
.be-size[data-size="14"]::after{width:12px;height:12px;}
.be-size[data-size="22"]::after{width:16px;height:16px;}
.be-size.active{border-color:var(--blue);}
.be-colors{display:flex;gap:4px;}
.be-color{width:20px;height:20px;border-radius:50%;border:2px solid transparent;}
.be-color.active{border-color:var(--blue);transform:scale(1.15);}
#beZoomLabel{font-size:12px;color:var(--text-dim);width:38px;text-align:center;}
.be-canvas-wrap{background:repeating-conic-gradient(#3a3a3e 0% 25%, #2c2c30 0% 50%) 50%/16px 16px;border-radius:12px;overflow:auto;display:flex;align-items:center;justify-content:center;padding:12px;}
#beCanvas{background:#c9c9cf;border-radius:6px;cursor:crosshair;touch-action:none;}
.be-footer{display:flex;justify-content:flex-end;gap:10px;margin-top:14px;}

/* Confirm dialog */
.modal-confirm{width:420px;max-width:90vw;padding:22px;}
.modal-confirm p{margin:0;font-size:14px;line-height:1.5;}

/* ============ Отдельная страница поста (permalink) ============ */
.post-page-header{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.post-page-back{
  background:var(--bg-elev);border:none;color:var(--text);width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s ease;
}
.post-page-back:hover{background:var(--bg-elev-3);}
.post-page-back .icon svg{width:18px;height:18px;}
.post-page-card{margin-bottom:0;}
.post-page-card .comments-section{border-top:1px solid var(--border);}
.post-page-comments{margin-top:0;}
.post-page .post{cursor:default;}

/* Corner footer */
.corner-footer{
  position:fixed;right:24px;bottom:20px;text-align:right;font-size:13px;color:var(--text-dim);
  display:flex;flex-direction:column;gap:6px;
}
.corner-footer a:hover{color:var(--text);}
.corner-copy{color:var(--text-dim-2);margin-top:6px;font-size:12px;}

/* Toast */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--bg-elev-2);
  border:1px solid var(--border);color:var(--text);padding:12px 20px;border-radius:var(--radius-full);
  font-size:14px;box-shadow:var(--shadow-modal);z-index:900;animation:toastIn .2s ease;
}

/* ============ Animations ============ */
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
@keyframes popIn{from{opacity:0;transform:scale(.94) translateY(6px);}to{opacity:1;transform:scale(1) translateY(0);}}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,10px);}to{opacity:1;transform:translate(-50%,0);}}

/* ============ Responsive ============ */
@media (max-width: 860px){
  .sidebar{position:fixed;left:0;top:0;bottom:0;width:78px;padding:16px 8px;z-index:100;}
  .sidebar-spacer{display:none;}
  .sidebar .logo,.nav-item span:not(.nav-icon){display:none;}
  .nav-item{justify-content:center;padding:12px;}
  .app{padding-left:0;}
  .main{margin-left:78px;padding:16px;max-width:100%;}
  .corner-footer{display:none;}
  .modal-settings{flex-direction:column;height:80vh;}
  .settings-layout{flex-direction:column;}
  .settings-nav{width:100%;border-right:none;border-bottom:1px solid var(--border);display:flex;overflow-x:auto;padding:12px;}
  .settings-nav h2{display:none;}
}