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

/* ═══════════════════════════════════════════════════════
   MONGOLIAN MEDIA GATE — red-brand, IMDB-style platform
   ═══════════════════════════════════════════════════════ */

:root{
  --bg:#0C0C0F; --bg2:#141418; --bg3:#1C1C22; --bg4:#26262E; --bg5:#32323C;
  --red:#D8232A; --red-bright:#F0454C; --red-deep:#9B1318; --red-dim:rgba(216,35,42,0.13);
  --blue:#3C9DF5; --blue-bright:#6FB6FF; --blue-dim:rgba(60,157,245,0.14);
  --gold:#F5C518; --green:#36C26B; --pink:#E85CA0;
  --tx:#F3F3F5; --tx2:#9C9CA6; --tx3:#62626C; --tx4:#3E3E48;
  --bd:rgba(255,255,255,0.08); --bd2:rgba(255,255,255,0.13);
  --radius:14px; --radius-sm:9px; --radius-lg:18px;
  --nav-h:64px; --sidebar-w:260px;
  --ease:cubic-bezier(0.22,1,0.36,1); --t:all .25s var(--ease);
  --shadow:0 10px 40px rgba(0,0,0,0.5);
  --shadow-red:0 6px 26px rgba(216,35,42,0.22);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html{ overflow-x:clip; }
body{
  font-family:'Inter',system-ui,sans-serif; background:var(--bg); color:var(--tx);
  min-height:100vh; overflow-x:clip; max-width:100%; -webkit-font-smoothing:antialiased;
}
body::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(55% 45% at 12% 0%, rgba(216,35,42,0.06) 0%, transparent 55%);
}
a{ text-decoration:none; color:inherit; }
button{ cursor:pointer; font-family:inherit; }
input,select,textarea{ font-family:inherit; }
img{ display:block; }
::selection{ background:var(--red-dim); color:var(--red-bright); }
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--bg4); border-radius:4px; }
::-webkit-scrollbar-thumb:hover{ background:var(--red-deep); }

/* shared bits */
.badge{ display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; vertical-align:middle; flex-shrink:0; }
.badge svg{ width:100%; height:100%; }
.pill{ font-size:10px; font-weight:700; padding:2px 9px; border-radius:20px; letter-spacing:.3px; white-space:nowrap; }
.pill-film{ background:var(--red-dim); color:var(--red-bright); }
.pill-music{ background:var(--blue-dim); color:var(--blue); }
.pill-content{ background:rgba(54,194,107,0.14); color:var(--green); }
.pill-other{ background:rgba(232,92,160,0.14); color:var(--pink); }
.star-chip{ display:inline-flex; align-items:center; gap:5px; font-weight:800; color:var(--gold); }
.star-chip svg{ width:15px; height:15px; }
.hidden{ display:none !important; }

/* ═══════════ SIDEBAR ═══════════ */
.sidebar{
  position:fixed; left:0; top:0; bottom:0; width:var(--sidebar-w); z-index:200;
  background:linear-gradient(180deg,var(--bg2),var(--bg)); border-right:1px solid var(--bd);
  display:flex; flex-direction:column; overflow-y:auto;
}
.side-logo{ display:flex; align-items:center; gap:11px; padding:18px 18px 16px; border-bottom:1px solid var(--bd); cursor:pointer; }
.side-logo svg{ width:44px; height:44px; flex-shrink:0; }
.side-logo-tx{ font-size:14px; font-weight:900; line-height:1.1; letter-spacing:.4px; }
.side-logo-tx b{ color:var(--red); }
.side-logo-sub{ font-size:8px; color:var(--tx3); letter-spacing:2px; margin-top:3px; }

.side-section{ padding:14px 12px 4px; }
.side-label{ font-size:10px; font-weight:700; color:var(--tx4); letter-spacing:2px; text-transform:uppercase; padding:0 10px; margin-bottom:7px; }
.side-link{ display:flex; align-items:center; gap:13px; padding:11px 12px; border-radius:var(--radius-sm); font-size:14px; font-weight:500; color:var(--tx2); transition:var(--t); cursor:pointer; position:relative; margin-bottom:2px; }
.side-link svg{ width:20px; height:20px; flex-shrink:0; transition:var(--t); }
.side-link:hover{ background:var(--bg3); color:var(--tx); }
.side-link.active{ background:linear-gradient(90deg,var(--red-dim),transparent); color:var(--red-bright); font-weight:600; }
.side-link.active svg{ color:var(--red-bright); }
.side-link.active::before{ content:''; position:absolute; left:0; top:7px; bottom:7px; width:3px; background:var(--red); border-radius:0 3px 3px 0; }
.side-badge{ margin-left:auto; background:var(--red); color:#fff; font-size:10px; font-weight:700; padding:2px 8px; border-radius:11px; }
.side-divider{ height:1px; background:var(--bd); margin:8px 16px; }

.side-bottom{ margin-top:auto; padding:14px 12px; border-top:1px solid var(--bd); }
.verify-btn{ width:100%; padding:12px; border:none; border-radius:var(--radius-sm); background:linear-gradient(135deg,var(--blue),#2C7BD6); color:#fff; font-size:13px; font-weight:800; display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:12px; transition:var(--t); }
.verify-btn:hover{ transform:translateY(-2px); box-shadow:0 6px 20px var(--blue-dim); }
.verify-btn svg{ width:17px; height:17px; }
.side-user{ display:flex; align-items:center; gap:11px; padding:9px; border-radius:var(--radius-sm); cursor:pointer; transition:var(--t); }
.side-user:hover{ background:var(--bg3); }
.side-user-ava{ width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,#3a1a1a,#1a1a2e); display:flex; align-items:center; justify-content:center; font-size:19px; border:2px solid var(--red); flex-shrink:0; }
.side-user-name{ font-size:13px; font-weight:700; display:flex; align-items:center; gap:5px; }
.side-user-role{ font-size:11px; color:var(--tx3); }

/* ═══════════ TOP BAR ═══════════ */
.topbar{
  position:fixed; top:0; left:var(--sidebar-w); right:0; height:var(--nav-h); z-index:100;
  background:rgba(12,12,15,0.82); backdrop-filter:blur(24px) saturate(140%); border-bottom:1px solid var(--bd);
  display:flex; align-items:center; gap:1rem; padding:0 1.6rem;
}
.menu-btn{ display:none; width:40px; height:40px; border-radius:10px; border:1px solid var(--bd); background:var(--bg3); color:var(--tx); align-items:center; justify-content:center; flex-shrink:0; transition:var(--t); }
.menu-btn:hover{ border-color:var(--red-dim); color:var(--red-bright); }
.menu-btn svg{ width:20px; height:20px; }
.backdrop{ display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:150; backdrop-filter:blur(2px); }
.backdrop.show{ display:block; }
.nav-search{ flex:1; max-width:480px; display:flex; align-items:center; gap:11px; background:var(--bg3); border:1px solid var(--bd); border-radius:24px; padding:0 17px; height:42px; transition:var(--t); }
.nav-search:focus-within{ border-color:var(--red-dim); background:var(--bg2); }
.nav-search input{ background:none; border:none; outline:none; color:var(--tx); font-size:14px; width:100%; }
.nav-search input::placeholder{ color:var(--tx3); }
.nav-search svg{ width:17px; height:17px; color:var(--tx3); flex-shrink:0; }
.nav-right{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.lang-toggle{ display:flex; background:var(--bg3); border:1px solid var(--bd); border-radius:22px; padding:2px; }
.lang-btn{ padding:6px 14px; font-size:12px; font-weight:700; color:var(--tx3); border:none; background:none; border-radius:18px; transition:var(--t); }
.lang-btn.active{ background:var(--red); color:#fff; }
.icon-btn{ width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--bg3); border:1px solid var(--bd); color:var(--tx2); transition:var(--t); position:relative; }
.icon-btn svg{ width:18px; height:18px; }
.icon-btn:hover{ border-color:var(--red-dim); color:var(--red-bright); transform:translateY(-1px); }
.icon-dot{ position:absolute; top:7px; right:8px; width:8px; height:8px; background:var(--red); border-radius:50%; border:2px solid var(--bg); }
.signin-btn{ padding:8px 18px; background:none; border:1px solid var(--bd2); border-radius:22px; color:var(--tx); font-size:13px; font-weight:700; transition:var(--t); }
.signin-btn:hover{ border-color:var(--red); color:var(--red-bright); }
.nav-ava{ width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,#3a1a1a,#1a1a2e); display:flex; align-items:center; justify-content:center; font-size:18px; border:2px solid var(--red); cursor:pointer; transition:var(--t); }
.nav-ava:hover{ transform:scale(1.05); }

/* ═══════════ MAIN ═══════════ */
.main{ margin-left:var(--sidebar-w); padding-top:var(--nav-h); min-height:100vh; min-width:0; }
.page{ display:none; animation:fade .4s var(--ease); }
.page.active{ display:block; }
@keyframes fade{ from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:translateY(0);} }

.page-pad{ padding:24px 30px; max-width:1100px; }
.page-head{ margin-bottom:22px; }
.page-title{ font-size:26px; font-weight:900; letter-spacing:.2px; margin-bottom:5px; }
.page-sub{ font-size:14px; color:var(--tx3); }
.sec-title{ font-size:17px; font-weight:800; display:flex; align-items:center; gap:10px; margin-bottom:15px; }
.sec-title::before{ content:''; width:3px; height:18px; background:var(--red); border-radius:2px; }
.sec-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:15px; }
.see-all{ font-size:13px; color:var(--red-bright); cursor:pointer; font-weight:600; }
.see-all:hover{ text-decoration:underline; }

/* ═══════════ HOME / FEED ═══════════ */
.feed-layout{ display:grid; grid-template-columns:1fr 320px; gap:0; min-width:0; }
.feed-main{ border-right:1px solid var(--bd); min-height:calc(100vh - var(--nav-h)); padding:22px; min-width:0; }
.feed-rail{ padding:22px 22px 22px 24px; }

/* showcase */
.showcase-wrap{ background:var(--bg2); border:1px solid var(--bd); border-radius:var(--radius); padding:16px; margin-bottom:20px; }
.show-tabs{ display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap; }
.show-tab{ padding:6px 13px; border-radius:18px; font-size:11.5px; font-weight:600; border:1px solid var(--bd); background:var(--bg3); color:var(--tx2); transition:var(--t); }
.show-tab.active{ background:var(--red); color:#fff; border-color:var(--red); }
.showcase{ display:flex; gap:12px; overflow-x:auto; padding-bottom:6px; }
.show-card{ width:140px; flex-shrink:0; background:var(--bg3); border:1px solid var(--bd); border-radius:12px; overflow:hidden; cursor:pointer; transition:var(--t); }
.show-card:hover{ border-color:var(--red-dim); transform:translateY(-3px); }
.show-poster{ height:120px; display:flex; align-items:center; justify-content:center; font-size:42px; position:relative; }
.show-rank{ position:absolute; top:6px; left:6px; background:var(--red); color:#fff; font-size:9px; font-weight:800; padding:2px 7px; border-radius:5px; letter-spacing:.3px; }
.show-rank.new{ background:var(--green); }
.show-rate{ position:absolute; bottom:6px; right:6px; background:rgba(0,0,0,0.82); color:var(--gold); font-size:11px; font-weight:800; padding:2px 6px; border-radius:5px; display:flex; align-items:center; gap:3px; }
.show-rate svg{ width:10px; height:10px; }
.show-body{ padding:9px 10px; }
.show-t{ font-size:12.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.show-s{ font-size:10.5px; color:var(--tx3); margin-top:1px; }

/* compose */
.compose{ display:flex; gap:13px; padding:16px; background:var(--bg2); border:1px solid var(--bd); border-radius:var(--radius); margin-bottom:16px; }
.compose-ava{ width:44px; height:44px; border-radius:50%; flex-shrink:0; background:linear-gradient(135deg,#3a1a1a,#1a1a2e); display:flex; align-items:center; justify-content:center; font-size:20px; border:2px solid var(--red); }
.compose-in{ flex:1; }
.compose-in textarea{ width:100%; background:none; border:none; outline:none; color:var(--tx); font-size:15px; resize:none; min-height:46px; font-family:inherit; line-height:1.5; }
.compose-in textarea::placeholder{ color:var(--tx3); }
.compose-bar{ display:flex; align-items:center; gap:5px; margin-top:9px; border-top:1px solid var(--bd); padding-top:11px; }
.tool{ width:36px; height:36px; border-radius:8px; border:none; background:none; color:var(--tx3); display:flex; align-items:center; justify-content:center; transition:var(--t); }
.tool svg{ width:18px; height:18px; }
.tool:hover{ background:var(--bg3); color:var(--red-bright); }
.tweet-btn{ margin-left:auto; padding:9px 24px; background:var(--red); color:#fff; border:none; border-radius:22px; font-size:13px; font-weight:700; transition:var(--t); }
.tweet-btn:hover{ background:var(--red-bright); transform:translateY(-1px); }

/* posts */
.post{ background:var(--bg2); border:1px solid var(--bd); border-radius:var(--radius); padding:17px; margin-bottom:14px; transition:var(--t); }
.post:hover{ border-color:var(--bd2); }
.post-head{ display:flex; align-items:flex-start; gap:12px; margin-bottom:12px; }
.post-ava{ width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; border:2px solid var(--bd); cursor:pointer; transition:var(--t); }
.post-ava:hover{ border-color:var(--red); }
.post-name{ font-size:14px; font-weight:700; display:flex; align-items:center; gap:6px; flex-wrap:wrap; cursor:pointer; }
.post-name:hover{ color:var(--red-bright); }
.post-meta{ font-size:12px; color:var(--tx3); margin-top:1px; }
.post-menu{ margin-left:auto; width:32px; height:32px; border-radius:50%; background:none; border:none; color:var(--tx3); display:flex; align-items:center; justify-content:center; transition:var(--t); }
.post-menu:hover{ background:var(--bg3); color:var(--tx); }
.post-text{ font-size:14.5px; line-height:1.65; margin-bottom:13px; }
.post-text .tag{ color:var(--blue-bright); cursor:pointer; }
.post-text .tag:hover{ text-decoration:underline; }
.post-work{ display:flex; gap:13px; background:var(--bg3); border:1px solid var(--bd); border-radius:12px; padding:12px; margin-bottom:13px; cursor:pointer; transition:var(--t); }
.post-work:hover{ border-color:var(--red-dim); }
.post-work-poster{ width:60px; height:84px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:28px; flex-shrink:0; }
.post-work-info{ flex:1; min-width:0; }
.post-work-title{ font-size:14px; font-weight:700; margin-bottom:3px; }
.post-work-sub{ font-size:12px; color:var(--tx3); margin-bottom:7px; }
.post-work-rate{ font-size:14px; }
.post-work-rate small{ color:var(--tx3); font-weight:500; font-size:11px; margin-left:2px; }
.post-video{ border-radius:12px; overflow:hidden; margin-bottom:13px; cursor:pointer; position:relative; border:1px solid var(--bd); aspect-ratio:16/9; background:var(--bg3); display:flex; align-items:center; justify-content:center; font-size:50px; transition:var(--t); }
.post-video:hover{ border-color:var(--red-dim); }
.post-video-ov{ position:absolute; inset:0; background:rgba(0,0,0,0.32); display:flex; align-items:center; justify-content:center; transition:var(--t); }
.post-video:hover .post-video-ov{ background:rgba(0,0,0,0.15); }
.play-circle{ width:60px; height:60px; border-radius:50%; background:var(--red); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-red); transition:var(--t); }
.play-circle svg{ color:#fff; margin-left:3px; width:22px; height:22px; }
.post-video:hover .play-circle{ transform:scale(1.1); }
.yt-tag{ position:absolute; bottom:10px; left:10px; background:rgba(0,0,0,0.82); border-radius:6px; padding:4px 9px; font-size:11px; font-weight:600; display:flex; align-items:center; gap:5px; backdrop-filter:blur(8px); }
.yt-tag svg{ color:#ff0000; width:13px; height:13px; }
.post-actions{ display:flex; align-items:center; gap:2px; }
.act{ display:flex; align-items:center; gap:7px; padding:8px 13px; border-radius:8px; border:none; background:none; color:var(--tx3); font-size:12.5px; font-weight:600; transition:var(--t); }
.act svg{ width:17px; height:17px; transition:var(--t); }
.act:hover{ background:var(--bg3); color:var(--tx); }
.act:hover svg{ transform:scale(1.15); }
.act.liked{ color:var(--red-bright); }
.act.shared{ color:var(--green); }
.act.share{ margin-left:auto; }

/* rail widgets */
.widget{ background:var(--bg2); border:1px solid var(--bd); border-radius:var(--radius); padding:18px; margin-bottom:16px; }
.widget-title{ font-size:12px; font-weight:700; color:var(--red-bright); margin-bottom:14px; text-transform:uppercase; letter-spacing:1.5px; display:flex; align-items:center; gap:8px; }
.trend{ display:flex; align-items:center; gap:11px; padding:9px 0; border-bottom:1px solid var(--bd); cursor:pointer; transition:var(--t); }
.trend:last-child{ border-bottom:none; padding-bottom:0; }
.trend:hover{ padding-left:4px; }
.trend-num{ font-size:14px; font-weight:800; color:var(--red-deep); width:16px; }
.trend-info{ flex:1; min-width:0; }
.trend-name{ font-size:13.5px; font-weight:600; }
.trend-count{ font-size:11px; color:var(--tx3); }
.sugg{ display:flex; align-items:center; gap:11px; padding:9px 0; }
.sugg-ava{ width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:19px; background:var(--bg4); flex-shrink:0; border:1px solid var(--bd); }
.sugg-info{ flex:1; min-width:0; }
.sugg-name{ font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; gap:5px; }
.sugg-role{ font-size:11px; color:var(--tx3); }
.follow-sm{ padding:6px 15px; background:none; border:1px solid var(--red-dim); border-radius:18px; color:var(--red-bright); font-size:12px; font-weight:700; transition:var(--t); white-space:nowrap; }
.follow-sm:hover{ background:var(--red); color:#fff; border-color:var(--red); }
.follow-sm.on{ background:var(--bg4); color:var(--tx2); border-color:var(--bd); }

/* ═══════════ CREATORS / CATEGORIES ═══════════ */
.cat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin-bottom:28px; }
.cat-card{ background:var(--bg2); border:1px solid var(--bd); border-radius:var(--radius); padding:18px; }
.cat-icon{ width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:24px; margin-bottom:12px; }
.cat-name{ font-size:16px; font-weight:800; margin-bottom:3px; }
.cat-count{ font-size:11px; color:var(--tx3); margin-bottom:13px; }
.role-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.role{ font-size:11.5px; font-weight:600; padding:5px 11px; border-radius:16px; background:var(--bg3); border:1px solid var(--bd); color:var(--tx2); cursor:pointer; transition:var(--t); }
.role:hover{ border-color:var(--red); color:var(--red-bright); }
.role b{ color:var(--tx3); font-weight:500; margin-left:3px; }

.filter-strip{ display:flex; gap:9px; flex-wrap:wrap; margin-bottom:22px; }
.chip{ padding:8px 17px; border-radius:20px; font-size:12.5px; font-weight:600; border:1px solid var(--bd); background:var(--bg2); color:var(--tx2); cursor:pointer; transition:var(--t); }
.chip:hover{ border-color:var(--red-dim); color:var(--red-bright); }
.chip.active{ background:var(--red); color:#fff; border-color:var(--red); }
.creators-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; }
.creator{ background:var(--bg2); border:1px solid var(--bd); border-radius:var(--radius-lg); overflow:hidden; cursor:pointer; transition:var(--t); }
.creator:hover{ border-color:var(--red-dim); transform:translateY(-4px); box-shadow:var(--shadow); }
.creator-cover{ height:70px; display:flex; align-items:center; justify-content:center; font-size:30px; position:relative; }
.creator-cover::after{ content:''; position:absolute; bottom:0; left:0; right:0; height:55%; background:linear-gradient(to top,var(--bg2),transparent); }
.creator-body{ padding:0 16px 16px; }
.creator-ava{ width:60px; height:60px; border-radius:50%; background:var(--bg3); border:3px solid var(--bg2); display:flex; align-items:center; justify-content:center; font-size:26px; margin-top:-30px; margin-bottom:10px; position:relative; z-index:1; }
.creator-name{ font-size:14.5px; font-weight:700; display:flex; align-items:center; gap:6px; }
.creator-role{ font-size:11.5px; color:var(--tx3); margin-bottom:11px; }
.creator-stats{ display:flex; gap:16px; margin-bottom:13px; }
.creator-stat-v{ font-size:14px; font-weight:700; }
.creator-stat-l{ font-size:10px; color:var(--tx3); }
.creator-follow{ width:100%; padding:9px; border-radius:var(--radius-sm); font-size:13px; font-weight:700; border:1px solid var(--red-dim); background:none; color:var(--red-bright); transition:var(--t); }
.creator-follow:hover{ background:var(--red); color:#fff; border-color:var(--red); }
.creator-follow.on{ background:var(--bg4); color:var(--tx2); border-color:var(--bd); }

/* ═══════════ PROFILE ═══════════ */
.prof-cover{ height:210px; position:relative; overflow:hidden; }
.prof-cover::after{ content:''; position:absolute; inset:0; background:repeating-linear-gradient(135deg,transparent,transparent 40px,rgba(255,255,255,0.015) 40px,rgba(255,255,255,0.015) 41px); }
.prof-cover-grad{ position:absolute; bottom:0; left:0; right:0; height:65%; background:linear-gradient(to top,var(--bg),transparent); }
.cover-edit{ position:absolute; top:16px; right:24px; padding:9px 16px; background:rgba(0,0,0,0.55); border:1px solid var(--bd2); border-radius:var(--radius-sm); color:var(--tx); font-size:12px; backdrop-filter:blur(12px); display:flex; align-items:center; gap:7px; transition:var(--t); }
.cover-edit:hover{ border-color:var(--red-dim); color:var(--red-bright); }
.cover-edit svg{ width:14px; height:14px; }
.prof-id{ padding:0 30px 22px; border-bottom:1px solid var(--bd); position:relative; }
.prof-ava-wrap{ display:inline-block; position:relative; margin-top:-54px; margin-bottom:13px; }
.prof-ava{ width:108px; height:108px; border-radius:50%; background:var(--bg3); border:4px solid var(--bg); display:flex; align-items:center; justify-content:center; font-size:50px; box-shadow:0 0 0 1px var(--bd); }
.prof-ava-badge{ position:absolute; bottom:6px; right:6px; width:30px; height:30px; border-radius:50%; background:var(--blue); border:3px solid var(--bg); display:flex; align-items:center; justify-content:center; }
.prof-ava-badge svg{ width:14px; height:14px; color:#fff; }
.prof-name-row{ display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap; }
.prof-name{ font-size:26px; font-weight:900; display:flex; align-items:center; gap:9px; }
.prof-handle{ font-size:13.5px; color:var(--tx3); margin-top:3px; }
.prof-actions{ margin-left:auto; display:flex; gap:9px; }
.btn-follow{ padding:10px 26px; background:var(--red); color:#fff; border:none; border-radius:var(--radius-sm); font-size:14px; font-weight:700; transition:var(--t); }
.btn-follow:hover{ background:var(--red-bright); transform:translateY(-2px); box-shadow:var(--shadow-red); }
.btn-follow.on{ background:none; border:1px solid var(--bd2); color:var(--tx); box-shadow:none; }
.btn-ghost{ padding:10px 18px; background:var(--bg3); border:1px solid var(--bd); border-radius:var(--radius-sm); color:var(--tx); font-size:14px; font-weight:600; display:flex; align-items:center; gap:8px; transition:var(--t); }
.btn-ghost svg{ width:16px; height:16px; }
.btn-ghost:hover{ border-color:var(--red-dim); color:var(--red-bright); }
.prof-bio{ font-size:14px; color:var(--tx2); line-height:1.7; margin:14px 0; max-width:580px; }
.prof-stats{ display:flex; gap:26px; flex-wrap:wrap; }
.prof-stat{ cursor:pointer; }
.prof-stat b{ font-size:18px; font-weight:800; }
.prof-stat span{ font-size:12px; color:var(--tx3); margin-left:5px; }

.prof-tabs{ display:flex; gap:4px; padding:0 30px; border-bottom:1px solid var(--bd); overflow-x:auto; }
.ptab{ padding:15px 18px; font-size:14px; font-weight:600; color:var(--tx3); border:none; background:none; border-bottom:2px solid transparent; white-space:nowrap; display:flex; align-items:center; gap:8px; transition:var(--t); }
.ptab svg{ width:16px; height:16px; }
.ptab:hover{ color:var(--tx); }
.ptab.active{ color:var(--red-bright); border-bottom-color:var(--red); }
.ptab-count{ font-size:11px; background:var(--bg4); padding:2px 8px; border-radius:11px; }
.prof-body{ padding:24px 30px; max-width:1100px; }
.pcontent{ display:none; }
.pcontent.active{ display:block; }

.add-btn{ padding:8px 16px; background:var(--red-dim); border:1px solid var(--red-dim); color:var(--red-bright); border-radius:var(--radius-sm); font-size:12.5px; font-weight:700; display:flex; align-items:center; gap:6px; transition:var(--t); }
.add-btn:hover{ background:var(--red); color:#fff; }
.add-btn svg{ width:15px; height:15px; }
.works{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px; }
.work{ background:var(--bg2); border:1px solid var(--bd); border-radius:12px; overflow:hidden; position:relative; transition:var(--t); }
.work:hover{ border-color:var(--red-dim); }
.work:hover .work-play{ opacity:1; }
.work-thumb{ height:140px; display:flex; align-items:center; justify-content:center; font-size:42px; position:relative; cursor:pointer; }
.work-play{ position:absolute; inset:0; background:rgba(0,0,0,0.4); display:flex; align-items:center; justify-content:center; opacity:0; transition:var(--t); }
.work-play .play-circle{ width:48px; height:48px; }
.work-play .play-circle svg{ width:18px; height:18px; }
.work-rate{ position:absolute; top:8px; left:8px; background:rgba(0,0,0,0.8); border-radius:6px; padding:2px 8px; font-size:11px; font-weight:800; color:var(--gold); display:flex; align-items:center; gap:3px; z-index:2; }
.work-rate svg{ width:11px; height:11px; }
.work-ops{ position:absolute; top:8px; right:8px; display:flex; gap:5px; z-index:2; }
.work-op{ width:28px; height:28px; border-radius:7px; background:rgba(0,0,0,0.72); border:none; color:#fff; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px); transition:var(--t); }
.work-op:hover{ background:var(--red); }
.work-op.del:hover{ background:var(--red-deep); }
.work-op svg{ width:14px; height:14px; }
.work-cap{ padding:11px; }
.work-cap-t{ font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.work-cap-s{ font-size:11px; color:var(--tx3); }
.work-add{ border:1px dashed var(--red-dim); background:var(--red-dim); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; min-height:140px; cursor:pointer; border-radius:12px; transition:var(--t); }
.work-add:hover{ border-color:var(--red); }
.work-add svg{ width:30px; height:30px; color:var(--red-bright); }
.work-add span{ font-size:12px; color:var(--tx3); }

/* rating + comments */
.detail{ background:var(--bg2); border:1px solid var(--bd); border-radius:var(--radius); padding:20px; max-width:680px; }
.detail-head{ display:flex; gap:15px; margin-bottom:17px; }
.detail-poster{ width:74px; height:100px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:36px; flex-shrink:0; }
.detail-title{ font-size:17px; font-weight:800; margin-bottom:7px; }
.rate-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.rate-big{ font-size:36px; font-weight:900; color:var(--gold); line-height:1; display:flex; align-items:center; gap:7px; }
.rate-big svg{ width:28px; height:28px; }
.rate-meta{ font-size:12px; color:var(--tx3); }
.rate-you{ font-size:12.5px; color:var(--tx2); margin:14px 0 9px; }
.rate-chips{ display:flex; gap:5px; flex-wrap:wrap; }
.rc{ width:34px; height:34px; border-radius:8px; border:1px solid var(--bd); background:var(--bg3); color:var(--tx2); font-size:13px; font-weight:700; transition:all .12s; }
.rc:hover{ border-color:var(--gold); color:var(--gold); transform:scale(1.08); }
.rc.sel{ background:var(--gold); color:#1a1500; border-color:var(--gold); }
.comments{ margin-top:20px; border-top:1px solid var(--bd); padding-top:17px; }
.comment-in{ display:flex; gap:11px; margin-bottom:17px; }
.comment-in-ava{ width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,#3a1a1a,#1a1a2e); display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; }
.comment-in input{ flex:1; background:var(--bg3); border:1px solid var(--bd); border-radius:22px; padding:10px 16px; color:var(--tx); font-size:13.5px; outline:none; transition:var(--t); }
.comment-in input:focus{ border-color:var(--red-dim); }
.comment-in button{ padding:10px 20px; background:var(--red); color:#fff; border:none; border-radius:22px; font-size:13px; font-weight:700; }
.comment{ display:flex; gap:11px; margin-bottom:15px; }
.comment-ava{ width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; }
.comment-body{ flex:1; }
.comment-bubble{ background:var(--bg3); border:1px solid var(--bd); border-radius:12px; padding:11px 14px; }
.comment-name{ font-size:12.5px; font-weight:700; display:flex; align-items:center; gap:6px; margin-bottom:3px; }
.comment-tx{ font-size:13.5px; line-height:1.5; }
.comment-foot{ display:flex; gap:15px; margin-top:6px; padding-left:4px; font-size:11px; color:var(--tx3); }
.comment-foot span{ cursor:pointer; }
.comment-foot span:hover{ color:var(--red-bright); }

/* ═══════════ MARKETPLACE ═══════════ */
.products{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:16px; }
.product{ background:var(--bg2); border:1px solid var(--bd); border-radius:var(--radius); overflow:hidden; transition:var(--t); }
.product:hover{ border-color:var(--red-dim); transform:translateY(-3px); box-shadow:var(--shadow); }
.prod-img{ height:150px; display:flex; align-items:center; justify-content:center; font-size:50px; position:relative; }
.prod-tag{ position:absolute; top:9px; left:9px; background:rgba(0,0,0,0.72); border-radius:6px; padding:3px 9px; font-size:10px; font-weight:700; backdrop-filter:blur(4px); }
.prod-body{ padding:14px; }
.prod-title{ font-size:14px; font-weight:700; margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.prod-seller{ font-size:11.5px; color:var(--tx3); display:flex; align-items:center; gap:4px; margin-bottom:11px; }
.prod-foot{ display:flex; align-items:center; justify-content:space-between; }
.prod-price{ font-size:16px; font-weight:800; color:var(--red-bright); }
.buy-btn{ padding:7px 15px; background:var(--red); color:#fff; border:none; border-radius:8px; font-size:12px; font-weight:700; transition:var(--t); }
.buy-btn:hover{ background:var(--red-bright); }

/* ═══════════ FORMS (verify / login / contact) ═══════════ */
.form-card{ background:var(--bg2); border:1px solid var(--bd); border-radius:var(--radius-lg); padding:24px; }
.fg{ margin-bottom:16px; }
.fl{ font-size:12px; font-weight:600; color:var(--tx3); margin-bottom:8px; display:block; letter-spacing:.3px; }
.fi,.fs,.fta{ width:100%; background:var(--bg3); border:1px solid var(--bd); border-radius:var(--radius-sm); padding:11px 15px; color:var(--tx); font-size:14px; outline:none; transition:var(--t); font-family:inherit; }
.fi:focus,.fs:focus,.fta:focus{ border-color:var(--red); box-shadow:0 0 0 3px var(--red-dim); }
.fta{ resize:vertical; min-height:100px; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.submit-btn{ width:100%; padding:14px; background:var(--red); color:#fff; border:none; border-radius:var(--radius-sm); font-size:15px; font-weight:700; transition:var(--t); display:flex; align-items:center; justify-content:center; gap:8px; }
.submit-btn:hover{ background:var(--red-bright); transform:translateY(-2px); box-shadow:var(--shadow-red); }
.submit-btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }
.submit-btn svg{ width:17px; height:17px; }

.cat-select{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-bottom:16px; }
.cs{ padding:14px 8px; border:1px solid var(--bd); background:var(--bg3); border-radius:10px; text-align:center; cursor:pointer; transition:var(--t); }
.cs:hover{ border-color:var(--red-dim); }
.cs.sel{ border-color:var(--red); background:var(--red-dim); }
.cs-icon{ font-size:23px; margin-bottom:6px; }
.cs-label{ font-size:12px; font-weight:600; color:var(--tx2); }
.cs.sel .cs-label{ color:var(--red-bright); }

.upload{ border:1.5px dashed var(--bd2); border-radius:var(--radius-sm); padding:22px; text-align:center; cursor:pointer; transition:var(--t); }
.upload:hover{ border-color:var(--red); background:var(--red-dim); }
.upload.has{ border-color:var(--green); border-style:solid; background:rgba(54,194,107,0.08); }
.upload svg{ width:28px; height:28px; color:var(--tx3); margin-bottom:9px; }
.upload.has svg{ color:var(--green); }
.upload-t{ font-size:13px; font-weight:600; color:var(--tx2); }
.upload-s{ font-size:11px; color:var(--tx3); margin-top:3px; }
.secure-note{ display:flex; gap:9px; align-items:flex-start; background:var(--bg3); border:1px solid var(--bd); border-radius:var(--radius-sm); padding:12px; margin-top:11px; }
.secure-note svg{ width:16px; height:16px; color:var(--green); flex-shrink:0; margin-top:1px; }
.secure-note span{ font-size:11.5px; color:var(--tx3); line-height:1.5; }

.check{ display:flex; gap:11px; align-items:flex-start; cursor:pointer; margin-bottom:16px; }
.check input{ display:none; }
.check .box{ width:20px; height:20px; border:1.5px solid var(--bd2); border-radius:6px; flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:var(--t); margin-top:1px; }
.check input:checked + .box{ background:var(--red); border-color:var(--red); }
.check .box svg{ width:13px; height:13px; color:#fff; opacity:0; }
.check input:checked + .box svg{ opacity:1; }
.check-tx{ font-size:12.5px; color:var(--tx2); line-height:1.55; }
.check-tx a{ color:var(--red-bright); text-decoration:underline; cursor:pointer; }

.pending{ display:none; background:var(--blue-dim); border:1px solid rgba(60,157,245,0.3); border-radius:12px; padding:16px; margin-top:16px; text-align:center; }
.pending.show{ display:block; }
.pending-title{ font-size:14px; font-weight:700; color:var(--blue); display:flex; align-items:center; justify-content:center; gap:7px; margin-bottom:4px; }
.pending-title svg{ width:16px; height:16px; }
.pending-p{ font-size:12.5px; color:var(--tx2); }
.verify-hero{ background:var(--bg2); border:1px solid var(--bd); border-radius:var(--radius-lg); padding:24px; text-align:center; margin-bottom:20px; }
.verify-hero-badge{ width:64px; height:64px; border-radius:50%; background:var(--blue-dim); display:flex; align-items:center; justify-content:center; margin:0 auto 14px; }
.verify-hero-badge svg{ width:36px; height:36px; }
.verify-hero h2{ font-size:20px; font-weight:800; margin-bottom:8px; }
.verify-hero p{ font-size:13.5px; color:var(--tx2); line-height:1.7; }

/* success (contact) */
.success{ display:none; background:rgba(54,194,107,0.1); border:1px solid rgba(54,194,107,0.35); border-radius:12px; padding:15px; text-align:center; margin-top:14px; }
.success.show{ display:block; }
.success-t{ font-size:13.5px; font-weight:700; color:var(--green); display:flex; align-items:center; justify-content:center; gap:7px; margin-bottom:3px; }
.success-t svg{ width:16px; height:16px; }
.success-p{ font-size:12px; color:var(--tx2); }

/* ═══════════ AUTH ═══════════ */
.auth-wrap{ max-width:430px; margin:30px auto; }
.auth-logo{ text-align:center; margin-bottom:24px; }
.auth-logo svg{ width:56px; height:56px; }
.auth-logo-tx{ font-size:17px; font-weight:900; margin-top:9px; }
.auth-logo-tx b{ color:var(--red); }
.auth-tabs{ display:flex; background:var(--bg3); border-radius:var(--radius-sm); padding:4px; margin-bottom:20px; }
.auth-tab{ flex:1; padding:10px; text-align:center; font-size:13px; font-weight:700; border:none; background:none; color:var(--tx3); border-radius:6px; transition:var(--t); }
.auth-tab.active{ background:var(--red); color:#fff; }
.social-row{ display:flex; gap:9px; margin-bottom:16px; }
.social-btn{ flex:1; padding:11px; background:var(--bg3); border:1px solid var(--bd); border-radius:var(--radius-sm); color:var(--tx2); font-size:12.5px; font-weight:600; display:flex; align-items:center; justify-content:center; gap:8px; transition:var(--t); }
.social-btn:hover{ border-color:var(--bd2); color:var(--tx); }
.or-line{ display:flex; align-items:center; gap:12px; margin:16px 0; color:var(--tx3); font-size:11px; }
.or-line::before,.or-line::after{ content:''; flex:1; height:1px; background:var(--bd); }

/* ═══════════ COMPANY ═══════════ */
.company-hero{ position:relative; padding:40px 24px 32px; text-align:center; overflow:hidden; border-bottom:1px solid var(--bd); }
.company-hero-bg{ position:absolute; inset:0; background:radial-gradient(60% 80% at 50% 0%,rgba(216,35,42,0.1) 0%,transparent 60%); }
.company-hero-in{ position:relative; z-index:1; }
.company-hero svg.logo{ width:66px; height:66px; margin-bottom:16px; }
.company-eyebrow{ display:inline-block; font-size:10px; font-weight:700; letter-spacing:2.5px; color:var(--red-bright); background:var(--red-dim); border:1px solid var(--red-dim); padding:5px 14px; border-radius:20px; margin-bottom:16px; }
.company-name{ font-size:27px; font-weight:900; letter-spacing:.5px; margin-bottom:10px; }
.company-name b{ color:var(--red); }
.company-tag{ font-size:13.5px; color:var(--tx2); max-width:520px; margin:0 auto; line-height:1.7; }
.company-stats{ display:flex; justify-content:center; gap:36px; margin-top:26px; flex-wrap:wrap; }
.company-stat b{ font-size:26px; font-weight:900; color:var(--red-bright); display:block; }
.company-stat span{ font-size:11px; color:var(--tx3); }
.company-body{ padding:24px 30px; max-width:1000px; margin:0 auto; }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:28px; }
.info-card{ background:var(--bg2); border:1px solid var(--bd); border-radius:var(--radius); padding:20px; }
.info-card h4{ font-size:14px; font-weight:800; color:var(--red-bright); margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.info-card h4 svg{ width:16px; height:16px; }
.info-card p{ font-size:13px; color:var(--tx2); line-height:1.75; }
.svc{ display:flex; align-items:center; gap:11px; font-size:13px; color:var(--tx2); padding:9px 0; border-bottom:1px solid var(--bd); }
.svc:last-child{ border-bottom:none; }
.svc-ic{ width:32px; height:32px; border-radius:9px; background:var(--red-dim); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.team{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:28px; }
.member{ background:var(--bg2); border:1px solid var(--bd); border-radius:var(--radius); padding:18px; text-align:center; }
.member-ava{ width:64px; height:64px; border-radius:50%; margin:0 auto 11px; display:flex; align-items:center; justify-content:center; font-size:28px; border:2px solid var(--bd); }
.member-name{ font-size:14px; font-weight:700; }
.member-role{ font-size:11.5px; color:var(--red-bright); margin-top:2px; }
.contact-layout{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:16px; }
.contact-info{ background:linear-gradient(160deg,#1a0a0e,#141418); border:1px solid var(--bd); border-radius:var(--radius); padding:22px; }
.cinfo-row{ display:flex; gap:13px; align-items:flex-start; padding:13px 0; border-bottom:1px solid var(--bd); }
.cinfo-row:last-child{ border-bottom:none; }
.cinfo-ic{ width:38px; height:38px; border-radius:10px; background:var(--red-dim); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cinfo-ic svg{ width:18px; height:18px; color:var(--red-bright); }
.cinfo-l{ font-size:11px; color:var(--tx3); margin-bottom:2px; }
.cinfo-v{ font-size:13.5px; font-weight:600; }
.socials{ display:flex; gap:9px; margin-top:18px; }
.soc{ width:40px; height:40px; border-radius:10px; background:var(--bg3); border:1px solid var(--bd); display:flex; align-items:center; justify-content:center; transition:var(--t); cursor:pointer; }
.soc:hover{ border-color:var(--red); background:var(--red-dim); }
.soc svg{ width:18px; height:18px; color:var(--tx2); }
.contact-form{ background:var(--bg2); border:1px solid var(--bd); border-radius:var(--radius); padding:22px; }
.contact-form-title{ font-size:16px; font-weight:800; margin-bottom:4px; }
.contact-form-sub{ font-size:12.5px; color:var(--tx3); margin-bottom:18px; }
.company-foot{ border-top:1px solid var(--bd); padding:18px 30px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.company-foot span{ font-size:12px; color:var(--tx3); }

/* ═══════════ NOTIFICATIONS ═══════════ */
.notif-page{ max-width:660px; padding:24px 30px; }
.notif{ display:flex; gap:14px; padding:16px; border-radius:var(--radius); transition:var(--t); cursor:pointer; }
.notif:hover{ background:var(--bg2); }
.notif.unread{ background:var(--red-dim); }
.notif-ava{ width:46px; height:46px; border-radius:50%; background:var(--bg3); display:flex; align-items:center; justify-content:center; font-size:21px; flex-shrink:0; border:1px solid var(--bd); }
.notif-tx{ flex:1; font-size:14px; line-height:1.55; color:var(--tx2); }
.notif-tx b{ color:var(--tx); font-weight:600; }
.notif-time{ font-size:12px; color:var(--tx3); margin-top:4px; }
.notif-dot{ width:8px; height:8px; border-radius:50%; background:var(--red); flex-shrink:0; margin-top:18px; }

/* ═══════════ MESSAGES ═══════════ */
.msg-layout{ display:grid; grid-template-columns:300px 1fr; height:calc(100vh - var(--nav-h)); }
.msg-list{ border-right:1px solid var(--bd); overflow-y:auto; }
.msg-list-head{ padding:20px 18px 15px; border-bottom:1px solid var(--bd); font-size:20px; font-weight:800; }
.msg-item{ display:flex; gap:13px; padding:14px 18px; cursor:pointer; transition:var(--t); }
.msg-item:hover{ background:var(--bg3); }
.msg-item.active{ background:var(--bg3); box-shadow:inset 3px 0 0 var(--red); }
.msg-ava{ width:46px; height:46px; border-radius:50%; background:var(--bg4); display:flex; align-items:center; justify-content:center; font-size:21px; flex-shrink:0; }
.msg-info{ flex:1; min-width:0; }
.msg-top{ display:flex; justify-content:space-between; margin-bottom:3px; }
.msg-name{ font-size:14px; font-weight:600; display:flex; align-items:center; gap:5px; }
.msg-time{ font-size:11px; color:var(--tx3); }
.msg-prev{ font-size:13px; color:var(--tx3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.msg-unread{ width:8px; height:8px; border-radius:50%; background:var(--red); flex-shrink:0; margin-top:16px; }
.chat{ display:flex; flex-direction:column; height:100%; }
.chat-head{ padding:16px 21px; border-bottom:1px solid var(--bd); display:flex; align-items:center; gap:13px; }
.chat-msgs{ flex:1; overflow-y:auto; padding:21px; display:flex; flex-direction:column; gap:14px; }
.bubble{ max-width:62%; }
.bubble.mine{ align-self:flex-end; }
.bubble-in{ background:var(--bg3); border:1px solid var(--bd); border-radius:var(--radius); padding:12px 16px; font-size:14px; line-height:1.55; }
.bubble.mine .bubble-in{ background:var(--red); border-color:var(--red); color:#fff; }
.bubble-time{ font-size:11px; color:var(--tx3); margin-top:5px; text-align:right; }
.chat-input-bar{ padding:16px; border-top:1px solid var(--bd); display:flex; gap:11px; align-items:flex-end; }
.chat-input{ flex:1; background:var(--bg3); border:1px solid var(--bd); border-radius:var(--radius-sm); padding:12px 15px; color:var(--tx); font-size:14px; outline:none; resize:none; max-height:120px; font-family:inherit; transition:var(--t); }
.chat-input:focus{ border-color:var(--red-dim); }
.chat-send{ width:44px; height:44px; border-radius:var(--radius-sm); background:var(--red); border:none; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:var(--t); }
.chat-send:hover{ background:var(--red-bright); }
.chat-send svg{ width:18px; height:18px; color:#fff; }

/* ═══════════ MODALS ═══════════ */
.modal{ display:none; position:fixed; inset:0; background:rgba(5,4,8,0.9); z-index:1000; align-items:center; justify-content:center; backdrop-filter:blur(6px); padding:20px; }
.modal.open{ display:flex; }
.modal-box{ background:var(--bg2); border:1px solid var(--bd2); border-radius:var(--radius-lg); width:580px; max-width:95vw; max-height:90vh; overflow-y:auto; animation:modalIn .3s var(--ease); box-shadow:var(--shadow); }
.modal-box.wide{ width:760px; }
@keyframes modalIn{ from{opacity:0;transform:scale(.96) translateY(10px);} to{opacity:1;transform:scale(1) translateY(0);} }
.modal-head{ display:flex; align-items:center; justify-content:space-between; padding:20px 24px; border-bottom:1px solid var(--bd); }
.modal-title{ font-size:17px; font-weight:800; }
.modal-close{ width:36px; height:36px; border-radius:50%; background:var(--bg3); border:none; color:var(--tx2); display:flex; align-items:center; justify-content:center; transition:var(--t); }
.modal-close svg{ width:16px; height:16px; }
.modal-close:hover{ background:var(--bg4); color:var(--tx); }
.modal-body{ padding:24px; }
.modal-body.nopad{ padding:0; }
.yt-embed{ position:relative; padding-bottom:56.25%; background:#000; }
.yt-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:none; }

.uptype-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:20px; }
.uptype{ padding:15px 10px; border-radius:var(--radius-sm); border:1px solid var(--bd); background:var(--bg3); cursor:pointer; text-align:center; transition:var(--t); }
.uptype:hover{ border-color:var(--red-dim); }
.uptype.sel{ border-color:var(--red); background:var(--red-dim); }
.uptype-ic{ font-size:25px; margin-bottom:7px; }
.uptype-l{ font-size:12px; font-weight:600; color:var(--tx2); }
.yt-input-wrap{ position:relative; }
.yt-input-ic{ position:absolute; left:13px; top:50%; transform:translateY(-50%); }
.yt-input-ic svg{ color:#ff0000; width:18px; height:18px; }
.fi.yt-pad{ padding-left:40px; }
.yt-preview{ background:var(--bg3); border:1px solid var(--red-dim); border-radius:var(--radius-sm); padding:15px; display:flex; align-items:center; gap:13px; margin-top:11px; }
.yt-preview-thumb{ width:80px; height:45px; border-radius:6px; background:var(--bg4); display:flex; align-items:center; justify-content:center; font-size:24px; flex-shrink:0; }
.yt-preview-info{ flex:1; min-width:0; }
.yt-preview-title{ font-size:13px; font-weight:600; margin-bottom:3px; }
.yt-preview-url{ font-size:11px; color:var(--tx3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.yt-preview-ok{ width:24px; height:24px; border-radius:50%; background:rgba(54,194,107,0.2); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.yt-preview-ok svg{ color:var(--green); width:14px; height:14px; }

/* ═══════════ TOAST ═══════════ */
.toast{ position:fixed; bottom:2rem; left:50%; transform:translateX(-50%) translateY(20px); background:var(--bg3); border:1px solid var(--red-dim); border-radius:var(--radius); padding:14px 26px; font-size:14px; font-weight:600; color:var(--red-bright); z-index:9999; display:flex; align-items:center; gap:10px; opacity:0; transition:var(--t); pointer-events:none; box-shadow:var(--shadow); }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ═══════════ RESPONSIVE ═══════════ */
.market-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:20px; }
.sell-btn{ padding:11px 20px; background:var(--red); color:#fff; border:none; border-radius:var(--radius-sm); font-size:13.5px; font-weight:700; display:flex; align-items:center; gap:8px; transition:var(--t); flex-shrink:0; box-shadow:var(--shadow-red); }
.sell-btn:hover{ background:var(--red-bright); transform:translateY(-1px); }
.sell-btn svg{ width:16px; height:16px; }

/* ═══════════ ADMIN ═══════════ */
.admin-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:20px; }
.admin-pill{ font-size:10px; font-weight:800; letter-spacing:1px; padding:3px 9px; border-radius:6px; background:var(--red); color:#fff; vertical-align:middle; }
.admin-tabs{ display:flex; gap:4px; border-bottom:1px solid var(--bd); margin-bottom:22px; overflow-x:auto; }
.admin-tabs::-webkit-scrollbar{ display:none; }
.atab{ padding:12px 15px; font-size:13px; font-weight:600; color:var(--tx2); border:none; background:none; border-bottom:2px solid transparent; white-space:nowrap; display:flex; align-items:center; gap:7px; transition:var(--t); }
.atab svg{ width:15px; height:15px; }
.atab:hover{ color:var(--tx); }
.atab.active{ color:var(--red-bright); border-bottom-color:var(--red); }
.atab-badge{ background:var(--gold); color:#1a1500; font-size:10px; font-weight:800; padding:1px 7px; border-radius:10px; }
.apanel{ display:none; }
.apanel.active{ display:block; }

.admin-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:26px; }
.astat{ background:var(--bg2); border:1px solid var(--bd); border-radius:14px; padding:18px; }
.astat-ic{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:18px; margin-bottom:12px; }
.astat-v{ font-size:26px; font-weight:800; }
.astat-l{ font-size:12px; color:var(--tx3); margin-top:2px; }

.admin-section-title{ font-size:14px; font-weight:800; margin:0 0 14px; display:flex; align-items:center; gap:8px; }

.req-card{ background:var(--bg2); border:1px solid var(--bd); border-radius:14px; padding:18px; margin-bottom:14px; }
.req-top{ display:flex; gap:14px; align-items:flex-start; }
.req-ava{ width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:24px; flex-shrink:0; border:2px solid var(--bd); }
.req-name{ font-size:15px; font-weight:700; }
.req-sub{ font-size:12.5px; color:var(--tx3); margin-top:2px; }
.req-meta{ display:flex; flex-wrap:wrap; gap:7px; margin-top:11px; }
.req-chip{ font-size:11.5px; background:var(--bg3); border:1px solid var(--bd); border-radius:7px; padding:5px 10px; color:var(--tx2); display:flex; align-items:center; gap:5px; }
.req-chip svg{ width:13px; height:13px; }
.req-chip.doc{ color:var(--green); border-color:rgba(54,194,107,0.3); }
.req-time{ font-size:11.5px; color:var(--tx4); margin-left:auto; white-space:nowrap; }
.req-actions{ display:flex; gap:9px; margin-top:14px; }
.btn-approve{ flex:1; padding:10px; background:var(--green); color:#06210f; border:none; border-radius:9px; font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; gap:7px; transition:var(--t); }
.btn-approve:hover{ filter:brightness(1.12); }
.btn-reject{ flex:1; padding:10px; background:none; border:1px solid var(--red-dim); color:var(--red-bright); border-radius:9px; font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; gap:7px; transition:var(--t); }
.btn-reject:hover{ background:var(--red-dim); }
.btn-approve svg, .btn-reject svg{ width:15px; height:15px; }
.req-resolved{ margin-top:14px; padding:11px 13px; border-radius:9px; font-size:13px; font-weight:600; display:flex; align-items:center; gap:8px; }
.req-resolved.ok{ background:rgba(54,194,107,0.1); border:1px solid rgba(54,194,107,0.3); color:var(--green); }
.req-resolved.no{ background:var(--red-dim); border:1px solid var(--red-dim); color:var(--red-bright); }
.req-resolved svg{ width:16px; height:16px; }
.req-undo{ margin-left:auto; font-size:12px; color:var(--tx3); cursor:pointer; text-decoration:underline; font-weight:500; }
.req-undo:hover{ color:var(--tx); }

.admin-table{ background:var(--bg2); border:1px solid var(--bd); border-radius:14px; overflow:hidden; }
.atr{ display:flex; align-items:center; gap:12px; padding:13px 16px; border-bottom:1px solid var(--bd); }
.atr:last-child{ border-bottom:none; }
.atr-ava{ width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.atr-main{ flex:1; min-width:0; }
.atr-name{ font-size:13.5px; font-weight:700; display:flex; align-items:center; gap:6px; }
.atr-sub{ font-size:11.5px; color:var(--tx3); }
.status-badge{ font-size:10px; font-weight:700; padding:3px 9px; border-radius:20px; white-space:nowrap; }
.sb-verified{ background:var(--blue-dim); color:var(--blue); }
.sb-regular{ background:var(--bg4); color:var(--tx2); }
.sb-suspended{ background:var(--red-dim); color:var(--red-bright); }
.atr-actions{ display:flex; gap:6px; }
.atr-btn{ width:32px; height:32px; border-radius:8px; border:1px solid var(--bd); background:var(--bg3); color:var(--tx2); display:flex; align-items:center; justify-content:center; transition:var(--t); }
.atr-btn:hover{ border-color:var(--red-dim); color:var(--red-bright); }
.atr-btn.ok:hover{ border-color:rgba(54,194,107,0.4); color:var(--green); }
.atr-btn svg{ width:15px; height:15px; }

.activity-card{ background:var(--bg2); border:1px solid var(--bd); border-radius:14px; padding:4px 18px; }
.activity-item{ display:flex; gap:12px; align-items:center; padding:13px 0; border-bottom:1px solid var(--bd); }
.activity-item:last-child{ border-bottom:none; }
.activity-ic{ width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; }
.activity-tx{ flex:1; font-size:13px; color:var(--tx2); }
.activity-tx b{ color:var(--tx); font-weight:600; }
.activity-time{ font-size:11px; color:var(--tx4); white-space:nowrap; }

.side-link-admin .side-badge{ background:var(--gold); color:#1a1500; }

@media(max-width:1000px){
  .feed-layout{ grid-template-columns:1fr; }
  .feed-rail{ display:none; }
  .contact-layout,.grid2,.team{ grid-template-columns:1fr; }
}
@media(max-width:780px){
  :root{ --sidebar-w:0px; }
  .sidebar{ width:270px; transform:translateX(-100%); z-index:300; transition:transform .3s var(--ease); box-shadow:0 0 50px rgba(0,0,0,0.7); }
  .sidebar.open{ transform:translateX(0); }
  .menu-btn{ display:flex; }
  .topbar{ left:0; padding:0 14px; gap:10px; }
  .main{ margin-left:0; }
  .nav-search{ display:none; }
  .nav-right{ gap:8px; }
  .nav-right .icon-btn{ display:none; }
  .signin-btn{ padding:8px 16px; font-size:13px; }
  .msg-layout{ grid-template-columns:1fr; }
  .page-pad,.prof-id,.prof-tabs,.prof-body,.company-body,.notif-page{ padding-left:16px; padding-right:16px; }
}
@media(prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}

/* ═══════════ ADMIN PANEL ═══════════ */
.admin-banner{ display:flex; align-items:center; gap:14px; padding:18px 24px; background:linear-gradient(135deg,#1c0609,#0c0c0f); border-bottom:1px solid var(--bd); }
.admin-banner-ic{ width:46px; height:46px; border-radius:12px; background:var(--red-dim); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.admin-banner-ic svg{ width:24px; height:24px; color:var(--red-bright); }
.admin-banner-t{ font-size:19px; font-weight:800; }
.admin-banner-s{ font-size:12px; color:var(--tx3); }
.admin-tag{ margin-left:auto; font-size:10px; font-weight:800; letter-spacing:1px; color:var(--red-bright); background:var(--red-dim); border:1px solid var(--red-dim); padding:6px 13px; border-radius:20px; }
.admin-tabs{ display:flex; gap:4px; border-bottom:1px solid var(--bd); padding:0 16px; overflow-x:auto; background:var(--bg); position:sticky; top:var(--nav-h); z-index:5; }
.admin-tabs::-webkit-scrollbar{ display:none; }
.admin-tab{ padding:14px 15px; font-size:13px; font-weight:600; color:var(--tx2); border:none; background:none; border-bottom:2px solid transparent; white-space:nowrap; display:flex; align-items:center; gap:7px; transition:var(--t); }
.admin-tab svg{ width:16px; height:16px; }
.admin-tab:hover{ color:var(--tx); }
.admin-tab.active{ color:var(--red-bright); border-bottom-color:var(--red); }
.admin-tab-badge{ background:var(--red); color:#fff; font-size:10px; font-weight:700; padding:1px 7px; border-radius:10px; }
.apanel{ display:none; padding:22px 24px; }
.apanel.active{ display:block; }
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); gap:14px; margin-bottom:26px; }
.stat-card{ background:var(--bg2); border:1px solid var(--bd); border-radius:14px; padding:18px; }
.stat-card-ic{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:18px; margin-bottom:12px; }
.stat-card-v{ font-size:26px; font-weight:800; line-height:1; }
.stat-card-l{ font-size:12px; color:var(--tx3); margin-top:5px; }
.admin-sec-title{ font-size:16px; font-weight:800; display:flex; align-items:center; gap:9px; margin-bottom:14px; }
.admin-sec-title::before{ content:''; width:4px; height:18px; background:var(--red); border-radius:2px; }
.admin-sec-title .cnt{ font-size:12px; font-weight:600; color:var(--tx3); }
/* verification queue */
.vq-card{ background:var(--bg2); border:1px solid var(--bd); border-radius:14px; padding:16px; margin-bottom:12px; }
.vq-top{ display:flex; align-items:center; gap:13px; margin-bottom:14px; }
.vq-ava{ width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; border:2px solid var(--bd); }
.vq-name{ font-size:15px; font-weight:700; }
.vq-field{ font-size:12.5px; color:var(--red-bright); margin-top:2px; }
.vq-time{ margin-left:auto; font-size:11.5px; color:var(--tx3); }
.vq-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.vq-item{ background:var(--bg3); border:1px solid var(--bd); border-radius:9px; padding:10px 12px; }
.vq-item-l{ font-size:10.5px; color:var(--tx3); margin-bottom:3px; }
.vq-item-v{ font-size:13px; font-weight:600; display:flex; align-items:center; gap:6px; word-break:break-all; }
.vq-item-v a{ color:var(--blue); }
.vq-id-btn{ font-size:11px; color:var(--blue); background:var(--blue-dim); border:none; padding:4px 10px; border-radius:6px; cursor:pointer; font-weight:600; }
.vq-actions{ display:flex; gap:10px; }
.btn-approve{ flex:1; padding:11px; background:var(--green); color:#06210f; border:none; border-radius:9px; font-size:13.5px; font-weight:800; display:flex; align-items:center; justify-content:center; gap:7px; transition:var(--t); }
.btn-approve:hover{ filter:brightness(1.12); }
.btn-reject{ flex:1; padding:11px; background:none; border:1px solid var(--bd2); color:var(--tx2); border-radius:9px; font-size:13.5px; font-weight:700; display:flex; align-items:center; justify-content:center; gap:7px; transition:var(--t); }
.btn-reject:hover{ border-color:var(--red); color:var(--red-bright); }
.btn-approve svg,.btn-reject svg{ width:16px; height:16px; }
.vq-empty{ text-align:center; padding:54px 20px; color:var(--tx3); font-size:14px; }
.vq-empty svg{ width:46px; height:46px; color:var(--green); margin-bottom:12px; }
/* admin tables */
.atable{ background:var(--bg2); border:1px solid var(--bd); border-radius:14px; overflow:hidden; }
.atr{ display:flex; align-items:center; gap:13px; padding:13px 16px; border-bottom:1px solid var(--bd); }
.atr:last-child{ border-bottom:none; }
.atr-ava{ width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:19px; flex-shrink:0; border:1px solid var(--bd); }
.atr-main{ flex:1; min-width:0; }
.atr-name{ font-size:13.5px; font-weight:700; display:flex; align-items:center; gap:6px; }
.atr-sub{ font-size:11.5px; color:var(--tx3); overflow:hidden; text-overflow:ellipsis; }
.atr-actions{ display:flex; gap:7px; flex-shrink:0; }
.atr-btn{ padding:7px 12px; border-radius:8px; font-size:12px; font-weight:600; border:1px solid var(--bd2); background:none; color:var(--tx2); white-space:nowrap; transition:var(--t); }
.atr-btn:hover{ border-color:var(--red-dim); color:var(--tx); }
.atr-btn.danger:hover{ border-color:var(--red); color:var(--red-bright); }
.atr-btn.good{ border-color:rgba(54,194,107,0.4); color:var(--green); }
.status-pill{ font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:20px; flex-shrink:0; }
.status-active{ background:rgba(54,194,107,0.14); color:var(--green); }
.status-suspended{ background:var(--red-dim); color:var(--red-bright); }
.rep-reason{ font-size:11px; font-weight:600; color:var(--red-bright); background:var(--red-dim); padding:3px 10px; border-radius:20px; }
@media(max-width:680px){ .vq-grid,.stat-grid{ grid-template-columns:1fr 1fr; } .atr{ flex-wrap:wrap; } .atr-actions{ width:100%; } }

/* ═══════════════ ADMIN DASHBOARD ═══════════════ */
@keyframes fade{ from{opacity:0} to{opacity:1} }
.admin-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:20px; }
.admin-pill{ display:inline-block; vertical-align:middle; font-size:11px; font-weight:800; letter-spacing:1.5px; color:#fff; background:linear-gradient(135deg,var(--red),var(--red-deep)); padding:3px 11px; border-radius:8px; margin-left:8px; }
.admin-tabs{ display:flex; gap:4px; overflow-x:auto; border-bottom:1px solid var(--bd); margin-bottom:22px; scrollbar-width:none; }
.admin-tabs::-webkit-scrollbar{ display:none; }
.atab{ display:flex; align-items:center; gap:7px; padding:12px 16px; background:none; border:none; border-bottom:2px solid transparent; color:var(--tx3); font-size:13.5px; font-weight:600; white-space:nowrap; transition:var(--t); }
.atab:hover{ color:var(--tx); }
.atab.active{ color:var(--red-bright); border-bottom-color:var(--red); }
.atab-badge{ background:var(--red); color:#fff; font-size:10px; font-weight:700; padding:1px 7px; border-radius:10px; }
.apanel{ display:none; animation:fade .3s var(--ease); }
.apanel.active{ display:block; }

.admin-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:24px; }
.astat{ background:var(--bg2); border:1px solid var(--bd); border-radius:var(--radius); padding:18px; position:relative; overflow:hidden; }
.astat::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--tx4); }
.astat.warn::before{ background:var(--gold); }
.astat.danger::before{ background:var(--red); }
.astat-ic{ font-size:22px; margin-bottom:8px; }
.astat-v{ font-size:28px; font-weight:900; line-height:1; }
.astat-l{ font-size:12px; color:var(--tx3); margin-top:6px; }

.activity-card{ background:var(--bg2); border:1px solid var(--bd); border-radius:var(--radius); padding:20px; }
.activity-item{ display:flex; align-items:flex-start; gap:13px; padding:11px 0; border-bottom:1px solid var(--bd); }
.activity-item:last-child{ border-bottom:none; }
.activity-ic{ width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.activity-ic svg{ width:17px; height:17px; }
.activity-ic.green{ background:rgba(54,194,107,0.14); color:var(--green); }
.activity-ic.red{ background:var(--red-dim); color:var(--red-bright); }
.activity-ic.blue{ background:var(--blue-dim); color:var(--blue); }
.activity-tx{ font-size:13.5px; color:var(--tx2); line-height:1.5; }
.activity-tx b{ color:var(--tx); font-weight:700; }
.activity-time{ display:block; font-size:11px; color:var(--tx4); margin-top:2px; }

.req-card{ display:flex; align-items:center; gap:15px; background:var(--bg2); border:1px solid var(--bd); border-radius:var(--radius); padding:16px; margin-bottom:12px; transition:var(--t); }
.req-card:hover{ border-color:var(--bd2); }
.req-ava{ width:52px; height:52px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:25px; flex-shrink:0; }
.req-meta{ flex:1; min-width:0; }
.req-name{ font-size:15px; font-weight:700; display:flex; align-items:center; gap:6px; }
.req-sub{ font-size:12.5px; color:var(--red-bright); margin-top:2px; }
.req-info{ display:flex; gap:7px; margin-top:9px; flex-wrap:wrap; }
.req-chip{ display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--tx3); background:var(--bg3); border:1px solid var(--bd); padding:4px 9px; border-radius:7px; }
.req-chip svg{ width:12px; height:12px; }
.req-time{ font-size:11.5px; color:var(--tx4); white-space:nowrap; align-self:flex-start; }
.req-actions{ display:flex; gap:8px; flex-shrink:0; }
.btn-approve,.btn-reject,.btn-resolve{ display:flex; align-items:center; gap:6px; padding:9px 16px; border:none; border-radius:var(--radius-sm); font-size:13px; font-weight:700; transition:var(--t); white-space:nowrap; }
.btn-approve,.btn-resolve{ background:var(--green); color:#04210f; }
.btn-approve:hover,.btn-resolve:hover{ filter:brightness(1.1); transform:translateY(-1px); }
.btn-reject{ background:var(--red-dim); color:var(--red-bright); border:1px solid var(--red-dim); }
.btn-reject:hover{ background:var(--red); color:#fff; }
.btn-approve svg,.btn-reject svg,.btn-resolve svg{ width:15px; height:15px; }
.req-card.resolved{ opacity:.72; }
.req-status{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:700; }
.req-status svg{ width:16px; height:16px; }
.req-status.ok{ color:var(--green); }
.req-status.no{ color:var(--red-bright); }
.req-undo{ font-size:12px; font-weight:600; color:var(--tx3); background:var(--bg3); border:1px solid var(--bd); padding:7px 13px; border-radius:8px; transition:var(--t); }
.req-undo:hover{ color:var(--tx); border-color:var(--bd2); }

.atr{ display:flex; align-items:center; gap:14px; background:var(--bg2); border:1px solid var(--bd); border-radius:var(--radius); padding:13px 16px; margin-bottom:10px; transition:var(--t); }
.atr:hover{ border-color:var(--bd2); }
.atr-ava{ width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:21px; flex-shrink:0; }
.atr-thumb{ width:52px; height:44px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; }
.atr-main{ flex:1; min-width:0; }
.atr-name{ font-size:14.5px; font-weight:700; display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.atr-sub{ font-size:12px; color:var(--tx3); margin-top:2px; }
.atr-actions{ display:flex; gap:8px; flex-shrink:0; }
.atr-btn{ width:38px; height:38px; border-radius:10px; border:1px solid var(--bd); background:var(--bg3); color:var(--tx2); display:flex; align-items:center; justify-content:center; transition:var(--t); }
.atr-btn svg{ width:17px; height:17px; }
.atr-btn:hover{ color:var(--tx); border-color:var(--bd2); }
.atr-btn.on{ background:var(--blue-dim); border-color:var(--blue); color:var(--blue); }
.atr-btn.danger:hover{ background:var(--red); border-color:var(--red); color:#fff; }
.atr-btn.danger-on{ background:var(--red-dim); border-color:var(--red); color:var(--red-bright); }

.status-badge{ font-size:11px; font-weight:700; padding:5px 11px; border-radius:20px; white-space:nowrap; flex-shrink:0; }
.sb-verified{ background:var(--blue-dim); color:var(--blue); }
.sb-regular{ background:var(--bg4); color:var(--tx2); }
.sb-suspended{ background:var(--red-dim); color:var(--red-bright); }
.flag-pill{ font-size:10.5px; font-weight:700; color:var(--gold); background:rgba(245,197,24,0.13); padding:2px 8px; border-radius:6px; }

.report-card{ display:flex; align-items:center; gap:14px; background:var(--bg2); border:1px solid var(--bd); border-radius:var(--radius); padding:15px 16px; margin-bottom:11px; }
.report-card.resolved{ opacity:.68; }
.report-icon{ width:42px; height:42px; border-radius:11px; background:var(--red-dim); display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.report-main{ flex:1; min-width:0; }
.report-target{ font-size:14px; font-weight:700; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.report-reason{ font-size:12.5px; color:var(--tx3); margin-top:3px; }

.side-link-admin .side-badge{ background:var(--gold); color:#1a1500; }
.side-link-admin svg{ color:var(--gold); }
.side-link-admin.active{ background:linear-gradient(90deg,rgba(245,197,24,0.14),transparent); color:var(--gold); }
.side-link-admin.active svg{ color:var(--gold); }
.side-link-admin.active::before{ background:var(--gold); }

@media(max-width:680px){
  .admin-stats{ grid-template-columns:repeat(2,1fr); }
  .req-card{ flex-wrap:wrap; }
  .req-actions{ width:100%; }
  .btn-approve,.btn-reject{ flex:1; justify-content:center; }
}

/* --- admin layout corrections (match render structure) --- */
.req-card{ display:block; background:var(--bg2); border:1px solid var(--bd); border-radius:var(--radius); padding:16px; margin-bottom:12px; }
.req-top{ display:flex; align-items:flex-start; gap:15px; }
.req-name{ font-size:15px; font-weight:700; }
.req-sub{ font-size:12.5px; color:var(--red-bright); margin-top:2px; }
.req-meta{ display:flex; gap:7px; margin-top:9px; flex-wrap:wrap; }
.req-chip{ display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--tx3); background:var(--bg3); border:1px solid var(--bd); padding:4px 9px; border-radius:7px; }
.req-chip svg{ width:12px; height:12px; }
.req-chip.doc{ color:var(--green); border-color:rgba(54,194,107,.3); background:rgba(54,194,107,.1); }
.req-time{ font-size:11.5px; color:var(--tx4); white-space:nowrap; flex-shrink:0; }
.req-actions{ display:flex; gap:8px; margin-top:14px; }
.req-resolved{ display:flex; align-items:center; gap:8px; margin-top:14px; font-size:13px; font-weight:700; }
.req-resolved svg{ width:16px; height:16px; }
.req-resolved.ok{ color:var(--green); }
.req-resolved.no{ color:var(--red-bright); }
.req-undo{ margin-left:auto; font-size:12px; font-weight:600; color:var(--tx3); background:var(--bg3); border:1px solid var(--bd); padding:6px 13px; border-radius:8px; cursor:pointer; transition:var(--t); }
.req-undo:hover{ color:var(--tx); border-color:var(--bd2); }
.activity-item{ display:flex; align-items:center; gap:13px; padding:11px 0; border-bottom:1px solid var(--bd); }
.activity-item:last-child{ border-bottom:none; }
.activity-ic{ width:36px; height:36px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; }
.activity-tx{ flex:1; font-size:13.5px; color:var(--tx2); line-height:1.5; }
.activity-tx b{ color:var(--tx); font-weight:700; }
.activity-time{ font-size:11px; color:var(--tx4); white-space:nowrap; flex-shrink:0; }
.atr-btn.ok{ background:rgba(54,194,107,.13); border-color:rgba(54,194,107,.4); color:var(--green); }

/* ═══════════════ ABOUT US — redesigned (cinematic title-card) ═══════════════ */
.ab-hero{ position:relative; overflow:hidden; padding:74px 48px 64px; border-bottom:1px solid var(--bd);
  background:radial-gradient(82% 120% at 16% 0%, rgba(216,35,42,0.17), transparent 56%), linear-gradient(180deg,#120608 0%, var(--bg) 76%); }
.ab-grain{ position:absolute; inset:0; pointer-events:none; opacity:0.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.ab-hero-glow{ position:absolute; right:-4%; top:50%; transform:translateY(-50%); width:520px; height:520px; border-radius:50%; background:radial-gradient(circle, rgba(216,35,42,0.16), transparent 62%); filter:blur(22px); pointer-events:none; }
.ab-hero-rings{ position:absolute; right:-50px; top:50%; width:430px; height:430px; opacity:.55; pointer-events:none; transform:translateY(-50%); animation:abspin 100s linear infinite; }
.ab-hero-rings svg{ width:100%; height:100%; }
@keyframes abspin{ from{ transform:translateY(-50%) rotate(0); } to{ transform:translateY(-50%) rotate(360deg); } }
.ab-hero-in{ position:relative; z-index:2; max-width:760px; }
.ab-eyebrow{ display:inline-flex; align-items:center; gap:9px; font-size:11px; font-weight:700; letter-spacing:3px; color:var(--red-bright); margin-bottom:24px; text-transform:uppercase; }
.ab-dot{ width:7px; height:7px; border-radius:50%; background:var(--red); box-shadow:0 0 0 4px var(--red-dim); }
.ab-word{ font-size:clamp(44px,8vw,86px); font-weight:900; line-height:0.9; letter-spacing:-2px; margin:0 0 22px; color:var(--tx); }
.ab-word-red{ color:var(--red); }
.ab-manifesto{ font-size:clamp(20px,2.6vw,30px); font-weight:300; line-height:1.3; color:var(--tx); max-width:600px; margin:0 0 18px; }
.ab-hero-sub{ font-size:14px; color:var(--tx3); line-height:1.75; max-width:520px; margin:0 0 30px; }
.ab-cta-row{ display:flex; gap:12px; flex-wrap:wrap; }
.ab-btn{ display:inline-flex; align-items:center; gap:9px; padding:13px 22px; border-radius:var(--radius-sm); font-size:13.5px; font-weight:700; transition:var(--t); border:1px solid transparent; }
.ab-btn svg{ width:16px; height:16px; }
.ab-btn-red{ background:var(--red); color:#fff; box-shadow:var(--shadow-red); }
.ab-btn-red:hover{ background:var(--red-bright); transform:translateY(-2px); }
.ab-btn-ghost{ background:transparent; border-color:var(--bd2); color:var(--tx); }
.ab-btn-ghost:hover{ border-color:var(--red); color:var(--red-bright); }

.ab-stats{ padding:26px 48px; border-bottom:1px solid var(--bd); display:flex; align-items:center; gap:40px; flex-wrap:wrap; background:var(--bg2); }
.ab-stats-label{ display:flex; align-items:center; gap:11px; font-size:11px; font-weight:800; letter-spacing:2.5px; color:var(--tx3); text-transform:uppercase; flex-shrink:0; }
.ab-bar{ width:26px; height:2px; background:var(--red); }
.ab-stats-row{ display:flex; flex:1; flex-wrap:wrap; row-gap:14px; }
.ab-stat{ flex:1; min-width:120px; padding:0 26px; border-left:1px solid var(--bd); }
.ab-stat:first-child{ border-left:none; padding-left:0; }
.ab-stat b{ display:block; font-size:30px; font-weight:900; color:var(--tx); letter-spacing:-1px; }
.ab-stat span{ font-size:11.5px; color:var(--tx3); text-transform:uppercase; letter-spacing:1px; }

.ab-body{ max-width:1040px; margin:0 auto; padding:56px 48px; }
.ab-section{ margin-bottom:64px; }
.ab-section:last-child{ margin-bottom:0; }
.ab-kicker{ font-size:12px; font-weight:800; letter-spacing:2px; color:var(--red-bright); text-transform:uppercase; }
.ab-sec-head{ display:flex; align-items:center; gap:18px; margin-bottom:28px; }
.ab-sec-line{ flex:1; height:1px; background:var(--bd); }

.ab-story{ display:grid; grid-template-columns:1.5fr 1fr; gap:48px; align-items:start; }
.ab-story-main .ab-kicker{ margin-bottom:18px; display:block; }
.ab-lead{ font-size:clamp(20px,2.2vw,26px); font-weight:400; line-height:1.5; color:var(--tx); margin:0; }
.ab-mission{ border-left:2px solid var(--red); padding:4px 0 4px 22px; }
.ab-mission-label{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:800; color:var(--tx); margin-bottom:12px; }
.ab-mission-label svg{ width:16px; height:16px; color:var(--red-bright); }
.ab-mission p{ font-size:14px; color:var(--tx2); line-height:1.8; margin:0; }

.ab-svc-list{ border-top:1px solid var(--bd); }
.ab-svc{ display:flex; align-items:center; gap:20px; padding:18px 8px; border-bottom:1px solid var(--bd); transition:var(--t); }
.ab-svc:hover{ background:var(--bg2); padding-left:16px; }
.ab-svc-no{ font-size:13px; font-weight:800; color:var(--red); letter-spacing:1px; width:26px; flex-shrink:0; font-variant-numeric:tabular-nums; }
.ab-svc-ic{ width:42px; height:42px; border-radius:11px; background:var(--bg3); border:1px solid var(--bd); display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; transition:var(--t); }
.ab-svc:hover .ab-svc-ic{ background:var(--red-dim); border-color:var(--red); }
.ab-svc-tx{ font-size:15px; color:var(--tx); font-weight:500; }

.ab-team{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px; }
.ab-member{ background:var(--bg2); border:1px solid var(--bd); border-radius:var(--radius); padding:26px 18px; text-align:center; transition:var(--t); position:relative; overflow:hidden; }
.ab-member::before{ content:''; position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg,var(--red),transparent); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease); }
.ab-member:hover{ transform:translateY(-4px); border-color:var(--bd2); }
.ab-member:hover::before{ transform:scaleX(1); }
.ab-member-ava{ width:74px; height:74px; border-radius:50%; margin:0 auto 14px; display:flex; align-items:center; justify-content:center; font-size:32px; border:2px solid var(--bd); }
.ab-member-name{ font-size:15px; font-weight:700; }
.ab-member-role{ font-size:12px; color:var(--red-bright); margin-top:3px; }

.ab-contact{ display:grid; grid-template-columns:0.8fr 1.2fr; gap:18px; }
.ab-contact-info{ background:radial-gradient(120% 80% at 0% 0%, rgba(216,35,42,0.12), transparent 55%), linear-gradient(165deg,#180a0d,#141418); border:1px solid var(--bd); border-radius:var(--radius); padding:26px; display:flex; flex-direction:column; }
.ab-cinfo-rows{ flex:1; }
.ab-cinfo{ display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-bottom:1px solid rgba(255,255,255,0.06); }
.ab-cinfo:first-child{ padding-top:0; }
.ab-cinfo:last-child{ border-bottom:none; }
.ab-cinfo-ic{ width:40px; height:40px; border-radius:11px; background:var(--red-dim); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ab-cinfo-ic svg{ width:18px; height:18px; color:var(--red-bright); }
.ab-cinfo-l{ font-size:11px; color:var(--tx3); margin-bottom:3px; text-transform:uppercase; letter-spacing:.5px; }
.ab-cinfo-v{ font-size:14px; font-weight:600; color:var(--tx); }
.ab-socials{ display:flex; gap:10px; margin-top:20px; padding-top:20px; border-top:1px solid rgba(255,255,255,0.06); }
.ab-soc{ width:42px; height:42px; border-radius:11px; background:rgba(255,255,255,0.04); border:1px solid var(--bd); display:flex; align-items:center; justify-content:center; transition:var(--t); cursor:pointer; }
.ab-soc:hover{ border-color:var(--red); background:var(--red-dim); transform:translateY(-2px); }
.ab-soc svg{ width:18px; height:18px; color:var(--tx2); }
.ab-soc:hover svg{ color:var(--red-bright); }
.ab-contact-form{ background:var(--bg2); border:1px solid var(--bd); border-radius:var(--radius); padding:26px; }
.ab-form-title{ font-size:18px; font-weight:800; margin-bottom:5px; }
.ab-form-sub{ font-size:13px; color:var(--tx3); margin-bottom:20px; line-height:1.6; }

.ab-foot{ border-top:1px solid var(--bd); padding:26px 48px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; background:var(--bg2); }
.ab-foot-brand{ display:flex; align-items:center; gap:12px; }
.ab-foot-brand b{ display:block; font-size:13px; font-weight:800; letter-spacing:1px; }
.ab-foot-brand span{ display:block; font-size:11.5px; color:var(--tx3); margin-top:2px; }
.ab-foot-reg{ font-size:12px; color:var(--tx3); }

@media(max-width:900px){
  .ab-story,.ab-contact{ grid-template-columns:1fr; gap:28px; }
  .ab-hero-rings{ width:300px; right:-90px; opacity:.3; }
}
@media(max-width:680px){
  .ab-hero{ padding:48px 18px 44px; }
  .ab-word{ letter-spacing:-1px; }
  .ab-stats{ padding:22px 18px; gap:16px; flex-direction:column; align-items:flex-start; }
  .ab-stats-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px 20px; width:100%; }
  .ab-stat{ min-width:0; padding:0; border-left:none; }
  .ab-stat b{ font-size:24px; }
  .ab-body{ padding:40px 18px; }
  .ab-foot{ padding:22px 18px; }
}
@media(prefers-reduced-motion:reduce){ .ab-hero-rings{ animation:none; } }

/* ═══════════════ MY ORGANIZATION ═══════════════ */
.side-link-logout{ color:var(--tx3); }
.side-link-logout:hover{ color:var(--red-bright); background:var(--red-dim); }
.side-link-logout svg{ color:var(--tx4); }
.side-link-logout:hover svg{ color:var(--red-bright); }

.org-wrap{ max-width:880px; margin:0 auto; padding:28px 30px; }
.org-empty-card{ background:var(--bg2); border:1px solid var(--bd); border-radius:var(--radius); padding:36px 30px; text-align:center; max-width:560px; margin:10px auto 0; }
.org-empty-ic{ width:72px; height:72px; border-radius:20px; background:var(--red-dim); display:flex; align-items:center; justify-content:center; font-size:34px; margin:0 auto 18px; }
.org-empty-title{ font-size:19px; font-weight:800; margin-bottom:8px; }
.org-empty-sub{ font-size:13.5px; color:var(--tx3); line-height:1.7; max-width:420px; margin:0 auto 24px; }
.org-create-form{ text-align:left; }

.org-banner{ position:relative; display:flex; align-items:center; gap:18px; background:linear-gradient(135deg,#1a0a0e,#141418); border:1px solid var(--bd); border-radius:var(--radius); padding:22px; margin-bottom:16px; overflow:hidden; }
.org-banner-bg{ position:absolute; inset:0; background:radial-gradient(60% 120% at 100% 0%, rgba(216,35,42,0.14), transparent 60%); pointer-events:none; }
.org-ava{ position:relative; width:78px; height:78px; border-radius:20px; background:var(--bg3); border:1px solid var(--bd); display:flex; align-items:center; justify-content:center; font-size:38px; flex-shrink:0; }
.org-id{ position:relative; flex:1; min-width:0; }
.org-name-row{ display:flex; align-items:center; gap:8px; }
.org-name{ font-size:21px; font-weight:900; }
.org-type-d{ font-size:13px; color:var(--red-bright); font-weight:600; margin-top:2px; }
.org-pending{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--gold); background:rgba(245,197,24,0.12); border:1px solid rgba(245,197,24,0.25); padding:4px 10px; border-radius:20px; margin-top:10px; }
.org-pending svg{ width:13px; height:13px; }
.org-edit-btn{ position:relative; display:flex; align-items:center; gap:7px; padding:9px 16px; background:var(--bg3); border:1px solid var(--bd); border-radius:var(--radius-sm); color:var(--tx); font-size:13px; font-weight:600; transition:var(--t); flex-shrink:0; }
.org-edit-btn:hover{ border-color:var(--bd2); }
.org-edit-btn svg{ width:15px; height:15px; }

.org-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:24px; }
.org-stat{ background:var(--bg2); border:1px solid var(--bd); border-radius:var(--radius); padding:16px; text-align:center; }
.org-stat b{ display:block; font-size:24px; font-weight:900; }
.org-stat span{ font-size:11.5px; color:var(--tx3); text-transform:uppercase; letter-spacing:.5px; }

.org-sec-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.org-invite-btn{ display:flex; align-items:center; gap:7px; padding:9px 16px; background:var(--red); color:#fff; border:none; border-radius:var(--radius-sm); font-size:13px; font-weight:700; transition:var(--t); }
.org-invite-btn:hover{ background:var(--red-bright); transform:translateY(-1px); }
.org-invite-btn svg{ width:15px; height:15px; }

.org-member{ display:flex; align-items:center; gap:14px; background:var(--bg2); border:1px solid var(--bd); border-radius:var(--radius); padding:13px 16px; margin-bottom:10px; }
.org-member-ava{ width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; border:1px solid var(--bd); }
.org-member-main{ flex:1; min-width:0; }
.org-member-name{ font-size:14.5px; font-weight:700; display:flex; align-items:center; gap:8px; }
.org-owner-tag{ font-size:10px; font-weight:700; color:var(--gold); background:rgba(245,197,24,0.13); padding:2px 8px; border-radius:6px; text-transform:uppercase; letter-spacing:.5px; }
.org-member-role{ font-size:12px; color:var(--tx3); margin-top:2px; }
.org-member-x{ width:34px; height:34px; border-radius:9px; border:1px solid var(--bd); background:var(--bg3); color:var(--tx3); display:flex; align-items:center; justify-content:center; transition:var(--t); flex-shrink:0; }
.org-member-x:hover{ border-color:var(--red); color:var(--red-bright); background:var(--red-dim); }
.org-member-x svg{ width:16px; height:16px; }
.org-note{ margin-top:18px; font-size:12.5px; color:var(--tx3); background:var(--bg2); border:1px dashed var(--bd2); border-radius:var(--radius-sm); padding:13px 16px; display:flex; align-items:center; gap:9px; }

@media(max-width:680px){
  .org-wrap{ padding:20px 16px; }
  .org-banner{ flex-wrap:wrap; }
  .org-edit-btn{ width:100%; justify-content:center; }
  .org-stats{ gap:8px; }
  .org-stat b{ font-size:20px; }
}

/* marketplace: locked contact button for guests */
.buy-btn.buy-locked{ background:var(--bg3); color:var(--tx3); border:1px solid var(--bd); font-weight:600; }
.buy-btn.buy-locked:hover{ border-color:var(--red); color:var(--red-bright); background:var(--red-dim); }
.buy-btn svg{ flex-shrink:0; }

/* ═══════════════ ЗОХИОГЧИЙН ЭРХ / IP CONTRACT GENERATOR ═══════════════ */
.cr{ max-width:1000px; margin:0 auto; padding:26px 30px 60px; }
.cr-head{ margin-bottom:22px; }
.cr-head-top{ display:flex; justify-content:space-between; gap:24px; align-items:flex-start; flex-wrap:wrap; }
.cr-eyebrow{ display:inline-flex; align-items:center; gap:9px; font-size:11px; font-weight:800; letter-spacing:2.5px; color:var(--red-bright); text-transform:uppercase; margin-bottom:12px; }
.cr-title{ font-size:clamp(24px,3.4vw,34px); font-weight:900; letter-spacing:-0.5px; margin:0 0 10px; }
.cr-sub{ font-size:14px; color:var(--tx3); line-height:1.7; max-width:560px; margin:0; }
.cr-laws{ display:flex; flex-direction:column; gap:7px; align-items:flex-end; }
.cr-law-chip{ font-size:11px; font-weight:600; color:var(--tx2); background:var(--bg2); border:1px solid var(--bd); padding:5px 11px; border-radius:20px; white-space:nowrap; }
.cr-disclaimer{ margin-top:18px; font-size:12.5px; color:var(--gold); background:rgba(245,197,24,0.08); border:1px solid rgba(245,197,24,0.22); border-radius:var(--radius-sm); padding:12px 15px; line-height:1.6; }

.cr-tabs{ display:flex; gap:6px; border-bottom:1px solid var(--bd); margin-bottom:24px; overflow-x:auto; }
.cr-tab{ padding:12px 18px; background:none; border:none; border-bottom:2px solid transparent; color:var(--tx3); font-size:13.5px; font-weight:700; white-space:nowrap; transition:var(--t); display:flex; align-items:center; gap:7px; }
.cr-tab:hover{ color:var(--tx); }
.cr-tab.active{ color:var(--red-bright); border-bottom-color:var(--red); }
.cr-tab-badge{ background:var(--red); color:#fff; font-size:10px; min-width:17px; height:17px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; padding:0 5px; }

.cr-panel{ display:none; }
.cr-panel.active{ display:block; animation:crFade .25s var(--ease); }
@keyframes crFade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

.cr-card{ background:var(--bg2); border:1px solid var(--bd); border-radius:var(--radius); padding:22px; margin-bottom:16px; }
.cr-card-title{ display:flex; align-items:center; gap:10px; font-size:15px; font-weight:800; margin-bottom:18px; }
.cr-num{ width:26px; height:26px; border-radius:8px; background:var(--red-dim); color:var(--red-bright); display:inline-flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; flex-shrink:0; }
.cr-cite{ margin-left:auto; font-size:11px; font-weight:600; color:var(--blue); background:var(--blue-dim); padding:3px 9px; border-radius:6px; }

.cr-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.cr-field{ display:flex; flex-direction:column; }
.cr-col2{ grid-column:1 / -1; }
.cr-label{ font-size:12.5px; color:var(--tx2); font-weight:600; margin-bottom:6px; }
.cr-req{ color:var(--red-bright); }
.cr-input{ background:var(--bg); border:1px solid var(--bd2); border-radius:var(--radius-sm); padding:10px 12px; color:var(--tx); font-size:13.5px; font-family:inherit; transition:var(--t); width:100%; }
.cr-input:focus{ outline:none; border-color:var(--red); box-shadow:0 0 0 3px var(--red-dim); }
textarea.cr-input{ resize:vertical; min-height:48px; }
.cr-input.err{ border-color:var(--red); box-shadow:0 0 0 3px var(--red-dim); }
.cr-err{ font-size:11.5px; color:var(--red-bright); margin-top:5px; display:none; }
.cr-err.show{ display:block; }

.cr-co-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; font-size:12.5px; color:var(--tx3); }
.cr-btn-add{ background:var(--red-dim); color:var(--red-bright); border:1px solid var(--red); border-radius:var(--radius-sm); padding:8px 14px; font-size:12.5px; font-weight:700; white-space:nowrap; transition:var(--t); }
.cr-btn-add:hover{ background:var(--red); color:#fff; }
.cr-co-row{ display:grid; grid-template-columns:1fr 0.8fr 90px 38px; gap:9px; margin-bottom:9px; align-items:center; }
.cr-pct{ text-align:center; }
.cr-btn-remove{ width:38px; height:38px; border-radius:9px; border:1px solid var(--bd); background:var(--bg3); color:var(--tx3); display:flex; align-items:center; justify-content:center; font-size:15px; transition:var(--t); }
.cr-btn-remove:hover{ border-color:var(--red); color:var(--red-bright); background:var(--red-dim); }
.cr-co-empty{ font-size:12.5px; color:var(--tx4); padding:8px 0 4px; }

.cr-bar-wrap{ margin-top:18px; background:var(--bg); border:1px solid var(--bd); border-radius:var(--radius-sm); padding:14px 16px; }
.cr-bar-label{ display:flex; justify-content:space-between; font-size:12px; color:var(--tx2); margin-bottom:8px; font-weight:600; }
.cr-bar-pct{ font-weight:800; color:var(--green); }
.cr-bar-pct.over{ color:var(--red-bright); }
.cr-bar-track{ height:8px; background:var(--bg4); border-radius:4px; overflow:hidden; }
.cr-bar-fill{ height:100%; background:linear-gradient(90deg,var(--green),#4fd98a); border-radius:4px; transition:width .3s var(--ease),background .3s; }
.cr-bar-fill.over{ background:linear-gradient(90deg,var(--red),var(--red-bright)); }
.cr-bar-warn{ margin-top:9px; font-size:12px; color:var(--red-bright); font-weight:600; }

.cr-lic-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.cr-lic-card{ background:var(--bg); border:1.5px solid var(--bd2); border-radius:var(--radius); padding:16px; cursor:pointer; transition:var(--t); }
.cr-lic-card:hover{ border-color:var(--tx4); }
.cr-lic-card.active{ border-color:var(--red); background:var(--red-dim); }
.cr-lic-name{ font-size:14px; font-weight:800; }
.cr-lic-en{ font-size:11px; color:var(--tx4); text-transform:uppercase; letter-spacing:1px; margin:2px 0 8px; }
.cr-lic-desc{ font-size:12px; color:var(--tx3); line-height:1.5; }
.cr-lic-note{ margin-top:14px; font-size:12.5px; color:var(--tx2); background:var(--blue-dim); border:1px solid rgba(60,157,245,0.25); border-left:3px solid var(--blue); border-radius:var(--radius-sm); padding:12px 14px; line-height:1.6; }

.cr-checks-label{ font-size:12.5px; font-weight:700; color:var(--tx2); margin:18px 0 10px; }
.cr-checks{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.cr-check{ display:flex; align-items:center; gap:9px; font-size:13px; color:var(--tx2); cursor:pointer; }
.cr-check input{ width:16px; height:16px; accent-color:var(--red); flex-shrink:0; }

.cr-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; }
.cr-btn{ display:inline-flex; align-items:center; gap:8px; padding:12px 20px; border-radius:var(--radius-sm); font-size:13.5px; font-weight:700; border:1px solid transparent; transition:var(--t); }
.cr-btn-primary{ background:var(--red); color:#fff; box-shadow:var(--shadow-red); }
.cr-btn-primary:hover{ background:var(--red-bright); transform:translateY(-1px); }
.cr-btn-ghost{ background:var(--bg2); border-color:var(--bd2); color:var(--tx); }
.cr-btn-ghost:hover{ border-color:var(--red); color:var(--red-bright); }
.cr-ai{ font-weight:600; }

.cr-contract-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.cr-empty{ text-align:center; padding:70px 20px; color:var(--tx4); }
.cr-empty-ic{ font-size:46px; margin-bottom:14px; opacity:.6; }

/* generated contract document */
.cr-doc{ background:#fff; color:#1a1a1a; border-radius:var(--radius); padding:46px 52px; font-size:13.5px; line-height:1.75; }
.cr-doc h1{ font-size:19px; text-align:center; margin:0 0 6px; letter-spacing:.5px; color:#111; }
.cr-doc .cr-doc-meta{ text-align:center; font-size:12px; color:#666; margin-bottom:26px; padding-bottom:18px; border-bottom:2px solid #e3001b; }
.cr-doc h3{ font-size:14px; margin:22px 0 8px; color:#c8001a; font-weight:800; }
.cr-doc p{ margin:0 0 9px; }
.cr-doc .cr-doc-field{ margin:3px 0; }
.cr-doc .cr-doc-field b{ color:#000; }
.cr-doc-sign{ display:flex; justify-content:space-between; gap:40px; margin-top:40px; padding-top:14px; }
.cr-doc-sign>div{ flex:1; }
.cr-doc-sign .ln{ border-top:1px solid #333; margin-top:38px; padding-top:6px; font-size:12px; color:#444; }
.cr-doc small{ color:#777; }

.cr-checklist{ display:flex; flex-direction:column; gap:0; }
.cr-check-item{ display:flex; gap:13px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--bd); }
.cr-check-item:last-child{ border-bottom:none; }
.cr-check-item input{ width:18px; height:18px; accent-color:var(--red); margin-top:1px; flex-shrink:0; }
.cr-check-item .ci-num{ width:24px; height:24px; border-radius:7px; background:var(--bg3); color:var(--tx2); font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cr-check-main{ flex:1; }
.cr-check-t{ font-size:13.5px; font-weight:600; color:var(--tx); }
.cr-check-c{ font-size:11.5px; color:var(--blue); margin-top:3px; }

.cr-fee{ width:100%; border-collapse:collapse; font-size:13px; }
.cr-fee th,.cr-fee td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--bd); }
.cr-fee th{ color:var(--tx3); font-size:11.5px; text-transform:uppercase; letter-spacing:.5px; }
.cr-fee td:last-child,.cr-fee th:last-child{ text-align:right; font-weight:700; color:var(--tx); }
.cr-note-sm{ font-size:11.5px; color:var(--tx4); margin-top:10px; }

.cr-office{ display:flex; gap:16px; background:linear-gradient(135deg,#1a0a0e,#141418); border:1px solid var(--bd); border-radius:var(--radius); padding:20px 22px; margin-bottom:16px; }
.cr-office-ic{ font-size:34px; }
.cr-office-name{ font-size:15px; font-weight:800; margin-bottom:8px; }
.cr-office-row{ font-size:13px; color:var(--tx2); margin:4px 0; }

.cr-saved-item{ display:flex; align-items:center; gap:14px; background:var(--bg); border:1px solid var(--bd); border-radius:var(--radius); padding:14px 16px; margin-bottom:10px; }
.cr-saved-ic{ width:44px; height:44px; border-radius:11px; background:var(--red-dim); display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.cr-saved-main{ flex:1; min-width:0; }
.cr-saved-t{ font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cr-saved-meta{ font-size:11.5px; color:var(--tx3); margin-top:2px; }
.cr-saved-btns{ display:flex; gap:7px; flex-shrink:0; }
.cr-saved-btn{ padding:7px 13px; border-radius:8px; border:1px solid var(--bd); background:var(--bg3); color:var(--tx2); font-size:12px; font-weight:600; transition:var(--t); }
.cr-saved-btn:hover{ border-color:var(--red); color:var(--red-bright); }
.cr-saved-btn.del:hover{ background:var(--red-dim); }
.cr-empty-sm{ font-size:13px; color:var(--tx4); text-align:center; padding:30px 0; }

.cr-law-item{ border:1px solid var(--bd); border-radius:var(--radius-sm); margin-bottom:10px; overflow:hidden; }
.cr-law-q{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 16px; cursor:pointer; background:var(--bg); transition:var(--t); }
.cr-law-q:hover{ background:var(--bg3); }
.cr-law-tag{ font-size:11px; font-weight:800; color:var(--red-bright); background:var(--red-dim); padding:3px 9px; border-radius:6px; margin-right:10px; }
.cr-law-q-t{ flex:1; font-size:13.5px; font-weight:700; }
.cr-law-arrow{ color:var(--tx4); transition:transform .25s; }
.cr-law-item.open .cr-law-arrow{ transform:rotate(180deg); }
.cr-law-a{ max-height:0; overflow:hidden; transition:max-height .3s var(--ease); }
.cr-law-item.open .cr-law-a{ max-height:300px; }
.cr-law-a-in{ padding:0 16px 16px; font-size:13px; color:var(--tx2); line-height:1.7; }
.cr-bundle-check{ padding:9px 0; border-bottom:1px solid var(--bd); }

@media(max-width:760px){
  .cr{ padding:20px 16px 50px; }
  .cr-head-top{ flex-direction:column; }
  .cr-laws{ align-items:flex-start; flex-direction:row; flex-wrap:wrap; }
  .cr-grid,.cr-checks{ grid-template-columns:1fr; }
  .cr-lic-cards{ grid-template-columns:1fr; }
  .cr-co-row{ grid-template-columns:1fr 70px 34px; }
  .cr-co-row .cr-input:nth-child(2){ display:none; }
  .cr-doc{ padding:28px 22px; }
  .cr-doc-sign{ flex-direction:column; gap:20px; }
}

/* ═══════════════ THEME EDITIONS (Dark · Night · Light) ═══════════════ */
.theme-btn{ width:38px; height:38px; border-radius:10px; background:var(--bg3); border:1px solid var(--bd); color:var(--tx2); display:flex; align-items:center; justify-content:center; transition:var(--t); flex-shrink:0; }
.theme-btn:hover{ color:var(--red-bright); border-color:var(--red); background:var(--red-dim); }
.theme-btn svg{ width:18px; height:18px; }
html{ transition:background .35s var(--ease); }
body, .topbar, .sidebar, .page, .cr-card, .ab-section{ transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); }

/* NIGHT — true black, warm-toned, dimmed for low light */
:root[data-theme="night"]{
  --bg:#000000; --bg2:#0B0A09; --bg3:#15120F; --bg4:#1F1B17; --bg5:#29241E;
  --red:#D33A30; --red-bright:#EC5C4C; --red-deep:#8E1A14; --red-dim:rgba(211,58,48,0.14);
  --blue:#5BA3E8; --blue-bright:#84BDFF; --blue-dim:rgba(91,163,232,0.13);
  --gold:#E8B93C; --green:#3FB873; --pink:#E06BA0;
  --tx:#EAE2D7; --tx2:#978C7E; --tx3:#5F574C; --tx4:#3C372F;
  --bd:rgba(255,238,214,0.07); --bd2:rgba(255,238,214,0.12);
  --shadow:0 10px 40px rgba(0,0,0,0.72);
  --shadow-red:0 6px 26px rgba(211,58,48,0.20);
}
:root[data-theme="night"] body::before{ background:radial-gradient(55% 45% at 12% 0%, rgba(211,58,48,0.07) 0%, transparent 55%); }

/* LIGHT — day edition */
:root[data-theme="light"]{
  --bg:#FFFFFF; --bg2:#F6F6F8; --bg3:#EEEEF2; --bg4:#E3E3EA; --bg5:#D5D5DD;
  --red:#D8232A; --red-bright:#C41E25; --red-deep:#9B1318; --red-dim:rgba(216,35,42,0.10);
  --blue:#2E80D8; --blue-bright:#1E6FC8; --blue-dim:rgba(46,128,216,0.12);
  --gold:#B98700; --green:#1F9D55; --pink:#D43E8A;
  --tx:#16161A; --tx2:#56565F; --tx3:#86868F; --tx4:#B0B0BA;
  --bd:rgba(0,0,0,0.10); --bd2:rgba(0,0,0,0.15);
  --shadow:0 12px 40px rgba(0,0,0,0.12);
  --shadow-red:0 6px 26px rgba(216,35,42,0.18);
}
/* light: tame the decorative dark gradients so panels read as light */
:root[data-theme="light"] .contact-info,
:root[data-theme="light"] .ab-contact-info,
:root[data-theme="light"] .org-banner,
:root[data-theme="light"] .cr-office{ background:linear-gradient(135deg, rgba(216,35,42,0.05), var(--bg2)); }
:root[data-theme="light"] .admin-banner{ background:linear-gradient(135deg, rgba(216,35,42,0.06), var(--bg2)); }
:root[data-theme="light"] .ab-hero{ background:radial-gradient(82% 120% at 16% 0%, rgba(216,35,42,0.09), transparent 56%), linear-gradient(180deg,#ffffff 0%, var(--bg) 78%); }
:root[data-theme="light"] .ab-hero-glow{ opacity:.5; }
:root[data-theme="light"] .scrim, :root[data-theme="light"] .show-overlay{ }
:root[data-theme="light"] ::selection{ background:rgba(216,35,42,0.16); color:var(--red); }
:root[data-theme="light"] .nav-search input{ color:var(--tx); }

/* theme: adapt the translucent top bar (hardcoded for its blur) */
:root[data-theme="night"] .topbar{ background:rgba(0,0,0,0.85); }
:root[data-theme="light"] .topbar{ background:rgba(255,255,255,0.80); }
:root[data-theme="light"] .work-rate, :root[data-theme="light"] .show-rate{ background:rgba(0,0,0,0.55); }

/* ═══════════════ COPYRIGHT — COMMERCIAL / PRICING ═══════════════ */
.cr-tab-pro{ color:var(--gold) !important; }
.cr-tab-pro.active{ color:var(--gold) !important; border-bottom-color:var(--gold) !important; }
.cr-tab-pro:hover{ color:var(--gold) !important; filter:brightness(1.15); }

/* upsell banner (contract tab) */
.cr-upsell{ display:flex; align-items:center; gap:14px; background:linear-gradient(135deg, rgba(245,197,24,0.10), var(--bg2)); border:1px solid rgba(245,197,24,0.3); border-radius:var(--radius); padding:14px 18px; margin-bottom:16px; cursor:pointer; transition:var(--t); }
.cr-upsell:hover{ border-color:var(--gold); transform:translateY(-1px); }
.cr-upsell-ic{ font-size:26px; flex-shrink:0; }
.cr-upsell-main{ flex:1; }
.cr-upsell-main b{ display:block; font-size:14px; }
.cr-upsell-main span{ font-size:12.5px; color:var(--tx3); }
.cr-upsell-cta{ font-size:13px; font-weight:800; color:var(--gold); white-space:nowrap; }

/* registration service banner (verify tab) */
.cr-regbanner{ position:relative; overflow:hidden; background:linear-gradient(135deg,#1e0a0e,#141418); border:1px solid var(--red); border-radius:var(--radius); padding:26px; margin-bottom:16px; }
.cr-regbanner-bg{ position:absolute; inset:0; background:radial-gradient(70% 130% at 100% 0%, rgba(216,35,42,0.22), transparent 60%); pointer-events:none; }
.cr-regbanner-tag{ position:relative; display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:2px; color:#fff; background:var(--red); padding:4px 11px; border-radius:20px; margin-bottom:12px; }
.cr-regbanner h3{ position:relative; font-size:21px; font-weight:900; margin:0 0 8px; }
.cr-regbanner p{ position:relative; font-size:13.5px; color:var(--tx2); line-height:1.7; max-width:560px; margin:0 0 18px; }
.cr-regbanner-foot{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.cr-regbanner-price b{ font-size:24px; font-weight:900; color:#fff; }
.cr-regbanner-price span{ font-size:12px; color:var(--tx3); margin-left:8px; }

/* pricing head */
.cr-pricing-head{ text-align:center; margin-bottom:24px; }
.cr-pricing-head .cr-eyebrow{ justify-content:center; }
.cr-pricing-head .cr-sub{ margin:0 auto; }
.cr-plan-now{ display:inline-block; margin-left:6px; padding:3px 10px; background:var(--bg3); border:1px solid var(--bd); border-radius:20px; font-size:12px; }
.cr-plan-now b{ color:var(--red-bright); }

/* plan cards */
.cr-plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:18px; }
.cr-plan{ position:relative; background:var(--bg2); border:1.5px solid var(--bd); border-radius:var(--radius); padding:24px 20px; display:flex; flex-direction:column; }
.cr-plan.popular{ border-color:var(--red); box-shadow:var(--shadow-red); }
.cr-plan.active{ border-color:var(--green); }
.cr-plan-pop{ position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:var(--red); color:#fff; font-size:10.5px; font-weight:800; letter-spacing:1px; padding:4px 12px; border-radius:20px; }
.cr-plan-name{ font-size:15px; font-weight:800; }
.cr-plan-price{ font-size:30px; font-weight:900; margin:8px 0 2px; letter-spacing:-1px; }
.cr-plan-price span{ font-size:13px; font-weight:600; color:var(--tx3); letter-spacing:0; }
.cr-plan-tag{ font-size:12.5px; color:var(--tx3); margin-bottom:16px; }
.cr-plan-feats{ list-style:none; margin:0 0 18px; padding:0; flex:1; }
.cr-plan-feats li{ font-size:13px; color:var(--tx2); padding:6px 0 6px 24px; position:relative; }
.cr-plan-feats li::before{ content:'✓'; position:absolute; left:0; color:var(--green); font-weight:800; }

/* registration service highlighted block */
.cr-regserv{ display:grid; grid-template-columns:1.6fr 1fr; gap:0; border:1.5px solid var(--gold); border-radius:var(--radius); overflow:hidden; margin-bottom:16px; }
.cr-regserv-l{ padding:26px; background:linear-gradient(135deg, rgba(245,197,24,0.07), var(--bg2)); }
.cr-regserv-tag{ display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:1.5px; color:#1a1407; background:var(--gold); padding:4px 11px; border-radius:20px; margin-bottom:12px; }
.cr-regserv-l h3{ font-size:19px; font-weight:900; margin:0 0 8px; }
.cr-regserv-l p{ font-size:13px; color:var(--tx2); line-height:1.7; margin:0 0 14px; }
.cr-regserv-feat{ list-style:none; margin:0; padding:0; }
.cr-regserv-feat li{ font-size:12.5px; color:var(--tx2); padding:4px 0 4px 22px; position:relative; }
.cr-regserv-feat li::before{ content:'✓'; position:absolute; left:0; color:var(--gold); font-weight:800; }
.cr-regserv-r{ padding:26px; display:flex; flex-direction:column; justify-content:center; gap:16px; background:var(--bg2); border-left:1px solid var(--bd); }
.cr-regserv-price{ text-align:center; }
.cr-regserv-price span{ display:block; font-size:12px; color:var(--tx3); }
.cr-regserv-price b{ display:block; font-size:32px; font-weight:900; letter-spacing:-1px; margin:4px 0; }
.cr-regserv-price small{ font-size:11px; color:var(--tx4); }

/* add-ons */
.cr-addons{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.cr-addon{ display:flex; align-items:center; gap:12px; background:var(--bg); border:1px solid var(--bd); border-radius:var(--radius-sm); padding:12px 14px; }
.cr-addon-ic{ font-size:20px; flex-shrink:0; }
.cr-addon-main{ flex:1; min-width:0; }
.cr-addon-name{ font-size:13px; font-weight:600; }
.cr-addon-price{ font-size:12.5px; color:var(--gold); font-weight:700; margin-top:2px; }
.cr-addon-btn{ padding:7px 14px; border-radius:8px; border:1px solid var(--bd2); background:var(--bg3); color:var(--tx); font-size:12px; font-weight:700; transition:var(--t); white-space:nowrap; }
.cr-addon-btn:hover{ border-color:var(--red); color:var(--red-bright); background:var(--red-dim); }

/* checkout modal */
.cr-co-item{ display:flex; justify-content:space-between; align-items:center; gap:12px; background:var(--bg); border:1px solid var(--bd); border-radius:var(--radius-sm); padding:14px 16px; margin-bottom:16px; }
.cr-co-item-n{ font-size:14px; font-weight:700; }
.cr-co-item-s{ font-size:11.5px; color:var(--tx3); margin-top:2px; }
.cr-co-item-p{ font-size:17px; font-weight:900; white-space:nowrap; }
.cr-co-addtitle,.cr-co-paylabel{ font-size:12px; font-weight:700; color:var(--tx2); margin:0 0 9px; }
.cr-co-paylabel{ margin-top:18px; }
.cr-co-addon{ display:flex; align-items:center; gap:10px; padding:9px 0; font-size:13px; color:var(--tx2); cursor:pointer; border-bottom:1px solid var(--bd); }
.cr-co-addon input{ width:16px; height:16px; accent-color:var(--red); }
.cr-co-addon span{ flex:1; }
.cr-co-addon b{ color:var(--gold); font-size:12.5px; }
.cr-checkout-total{ display:flex; justify-content:space-between; align-items:center; margin-top:18px; padding-top:16px; border-top:2px solid var(--bd2); }
.cr-checkout-total span{ font-size:14px; font-weight:600; color:var(--tx2); }
.cr-checkout-total b{ font-size:24px; font-weight:900; color:var(--red-bright); }
.cr-pay-methods{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-bottom:18px; }
.cr-pay-m{ display:flex; align-items:center; justify-content:center; gap:7px; padding:11px; border:1px solid var(--bd2); border-radius:var(--radius-sm); font-size:13px; font-weight:600; cursor:pointer; transition:var(--t); }
.cr-pay-m input{ accent-color:var(--red); }
.cr-pay-m:has(input:checked){ border-color:var(--red); background:var(--red-dim); color:var(--red-bright); }
.cr-checkout-note{ text-align:center; font-size:11.5px; color:var(--tx4); margin-top:12px; }

@media(max-width:760px){
  .cr-plans{ grid-template-columns:1fr; }
  .cr-regserv{ grid-template-columns:1fr; }
  .cr-regserv-r{ border-left:none; border-top:1px solid var(--bd); }
  .cr-addons{ grid-template-columns:1fr; }
  .cr-pay-methods{ grid-template-columns:1fr; }
}

/* ═══════════════ EDITABLE PROFILE ═══════════════ */
/* let uploaded pictures fill the round avatar containers */
.prof-ava, .nav-ava, .side-user-ava, .compose-ava, .ep-ava{ overflow:hidden; }
.prof-ava img, .nav-ava img, .side-user-ava img, .compose-ava img, .ep-ava img{ width:100%; height:100%; object-fit:cover; display:block; }

.ep-ava-row{ display:flex; align-items:center; gap:16px; margin-bottom:14px; }
.ep-ava{ width:84px; height:84px; border-radius:50%; background:linear-gradient(135deg,#2e0a14,#1a0a2e); display:flex; align-items:center; justify-content:center; font-size:40px; flex-shrink:0; border:2px solid var(--bd2); }
.ep-ava-actions{ display:flex; flex-direction:column; gap:8px; }
.ep-ava-actions .cr-btn{ padding:9px 14px; font-size:12.5px; }
.ep-hint{ font-size:12px; color:var(--tx3); margin:4px 0 8px; }
.ep-emoji-row{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:18px; }
.ep-emoji{ width:40px; height:40px; border-radius:10px; border:1.5px solid var(--bd); background:var(--bg3); font-size:20px; display:flex; align-items:center; justify-content:center; transition:var(--t); }
.ep-emoji:hover{ border-color:var(--tx4); }
.ep-emoji.sel{ border-color:var(--red); background:var(--red-dim); }
.ep-note{ text-align:center; font-size:11.5px; color:var(--tx4); margin-top:12px; }
#edit-profile-modal .fg{ margin-bottom:13px; }