/* ============================================================
   AN-PROD Projects Hub — style.css
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --bg:    #080C12;
  --bg1:   #0C1018;
  --bg2:   #111720;
  --bg3:   #1A2233;
  --surf:  rgba(13,17,26,.92);
  --sb:    rgba(255,255,255,.06);
  --ac:    #00D4FF;
  --ac2:   #0099CC;
  --glow:  rgba(0,212,255,.18);
  --tp:    #F0F4FF;
  --ts:    #8B9AB0;
  --td:    #4A5568;
  --green: #00E5A0;
  --red:   #FF4D6A;
  --gold:  #FFB020;
  --purp:  #8B5CF6;
  --hb:    66px;
  --r:     8px;
  --rl:    14px;
  --rx:    20px;
  --r2:    28px;
  --font:  'Inter',system-ui,sans-serif;
  --mono:  'JetBrains Mono','Fira Code',monospace;
  --sh:    0 4px 24px rgba(0,0,0,.5);
  --shl:   0 12px 48px rgba(0,0,0,.7);
  --sha:   0 0 40px rgba(0,212,255,.14);
  --ease:  .18s ease;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--tp);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 90% 55% at 15% -5%, rgba(0,212,255,.07) 0%, transparent 55%),
    radial-gradient(ellipse 70% 45% at 85% 105%, rgba(139,92,246,.05) 0%, transparent 50%),
    var(--bg);
}
a { color: var(--ac); text-decoration: none; transition: color var(--ease); }
a:hover { color: #33DDFF; }
p { color: var(--ts); line-height: 1.75; }
img { display: block; max-width: 100%; }

/* ── Topbar ──────────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--hb); z-index: 400;
  display: flex; align-items: center; gap: 1rem; padding: 0 2rem;
  background: rgba(8,12,18,.9);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(255,255,255,.05);
  transition: background var(--ease);
}
.nav.scrolled { background: rgba(8,12,18,.98); }
.nav-logo { display: flex; align-items: center; gap: .5rem; text-decoration: none; flex-shrink: 0; }
.nav-mark {
  width: 32px; height: 32px; border-radius: 9px;
  background: linear-gradient(135deg,#0099CC,#00D4FF);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 18px rgba(0,212,255,.35);
  color: #fff; font-size: .85rem;
}
.nav-name { font-size: .95rem; font-weight: 800; letter-spacing: -.025em; color: var(--tp); }
.nav-name span { color: var(--ac); }
.nav-links { display: flex; align-items: center; gap: .15rem; margin-left: .5rem; }
.nav-link {
  font-size: .875rem; font-weight: 500; color: var(--ts);
  padding: .42rem .875rem; border-radius: var(--r);
  transition: all var(--ease); text-decoration: none;
}
.nav-link:hover { color: var(--tp); background: rgba(255,255,255,.05); }
.nav-link.active { color: var(--ac); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: .5rem; }

/* Bell */
.bell-btn {
  position: relative; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
  color: var(--ts); font-size: .85rem; text-decoration: none;
  transition: all var(--ease);
}
.bell-btn:hover { background: rgba(0,212,255,.1); border-color: rgba(0,212,255,.2); color: var(--ac); }
.bell-cnt {
  position: absolute; top: -4px; right: -4px;
  min-width: 16px; height: 16px; border-radius: 100px;
  background: var(--red); border: 2px solid var(--bg);
  font-size: .58rem; font-weight: 700; color: #fff;
  display: flex; align-items: center; justify-content: center; padding: 0 2px;
}

/* User menu */
.user-menu { position: relative; }
.user-trigger {
  display: flex; align-items: center; gap: .45rem;
  background: none; border: none; cursor: pointer;
  padding: .25rem .5rem; border-radius: var(--rl);
  transition: background var(--ease);
}
.user-trigger:hover { background: rgba(255,255,255,.04); }
.user-av { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(0,212,255,.2); }
.user-nm { font-size: .875rem; font-weight: 500; color: var(--ts); }
.user-drop {
  position: absolute; top: calc(100% + .5rem); right: 0;
  min-width: 210px; background: #0d1320;
  border: 1px solid rgba(0,212,255,.14); border-radius: var(--rx);
  padding: .4rem; box-shadow: var(--shl);
  opacity: 0; pointer-events: none; transform: translateY(-6px);
  transition: all .2s; z-index: 300;
}
.user-drop.open { opacity: 1; pointer-events: all; transform: none; }
.user-email { padding: .45rem .875rem; font-size: .74rem; color: var(--td); border-bottom: 1px solid rgba(255,255,255,.05); margin-bottom: .25rem; }
.drop-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .52rem .875rem; border-radius: var(--r);
  font-size: .875rem; color: var(--ts); text-decoration: none;
  transition: all var(--ease);
}
.drop-item i { width: 14px; text-align: center; font-size: .8rem; color: var(--td); }
.drop-item:hover { background: rgba(0,212,255,.07); color: var(--tp); }
.drop-item:hover i { color: var(--ac); }
.drop-item.danger { color: var(--red); }
.drop-item.danger:hover { background: rgba(255,77,106,.07); }
.drop-sep { height: 1px; background: rgba(255,255,255,.05); margin: .3rem 0; }

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font); font-size: .875rem; font-weight: 600;
  padding: .6rem 1.25rem; border-radius: var(--rl);
  border: none; cursor: pointer; transition: all var(--ease);
  text-decoration: none; white-space: nowrap; line-height: 1;
}
.btn i { font-size: .85em; }
.btn-primary { background: linear-gradient(135deg,#0088BB,#00D4FF); color: #fff; box-shadow: 0 0 22px rgba(0,212,255,.28); }
.btn-primary:hover { box-shadow: 0 0 36px rgba(0,212,255,.5); transform: translateY(-1px); color: #fff; }
.btn-secondary { background: rgba(0,212,255,.08); border: 1px solid rgba(0,212,255,.2); color: var(--ac); }
.btn-secondary:hover { background: rgba(0,212,255,.15); color: #33DDFF; }
.btn-ghost { background: transparent; border: 1px solid rgba(255,255,255,.1); color: var(--ts); }
.btn-ghost:hover { border-color: rgba(255,255,255,.2); color: var(--tp); }
.btn-danger { background: rgba(255,77,106,.08); border: 1px solid rgba(255,77,106,.2); color: var(--red); }
.btn-danger:hover { background: rgba(255,77,106,.18); }
.btn-success { background: rgba(0,229,160,.08); border: 1px solid rgba(0,229,160,.2); color: var(--green); }
.btn-success:hover { background: rgba(0,229,160,.18); }
.btn-sm { padding: .4rem .875rem; font-size: .8rem; }
.btn-lg { padding: .825rem 1.75rem; font-size: 1rem; }
.btn-full { width: 100%; justify-content: center; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* ── Form ────────────────────────────────────────────────── */
.fg { margin-bottom: 1rem; }
.fl { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--td); margin-bottom: .35rem; }
.fi {
  width: 100%; background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--rl); color: var(--tp);
  font-family: var(--font); font-size: .9rem;
  padding: .65rem 1rem; outline: none;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.fi:focus { border-color: rgba(0,212,255,.4); box-shadow: 0 0 0 3px rgba(0,212,255,.07); }
.fi::placeholder { color: var(--td); }
textarea.fi { resize: vertical; min-height: 90px; line-height: 1.65; }
select.fi { cursor: pointer; }
select.fi option { background: #111720; }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.fhint { font-size: .74rem; color: var(--td); margin-top: .28rem; }

/* ── Layout ─────────────────────────────────────────────── */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
.wrap-sm { max-width: 820px; margin: 0 auto; padding: 0 1.5rem; }
.pt-nav { padding-top: var(--hb); }
.section { padding: 5rem 0; }

/* ── Card ────────────────────────────────────────────────── */
.card { background: var(--surf); border: 1px solid var(--sb); border-radius: var(--rx); }
.card-head { display: flex; align-items: center; justify-content: space-between; padding: .9rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.05); }
.card-title { font-size: .88rem; font-weight: 700; }

/* ── Alert ───────────────────────────────────────────────── */
.alert { border-radius: var(--rl); padding: .75rem 1rem; font-size: .875rem; display: flex; align-items: flex-start; gap: .5rem; margin-bottom: 1rem; }
.alert i { flex-shrink: 0; margin-top: .05rem; }
.alert-err  { background: rgba(255,77,106,.07); border: 1px solid rgba(255,77,106,.2); color: #FB7185; }
.alert-ok   { background: rgba(0,229,160,.07); border: 1px solid rgba(0,229,160,.2); color: #34D399; }
.alert-info { background: rgba(0,212,255,.07); border: 1px solid rgba(0,212,255,.2); color: var(--ac); }

/* ── Toast ───────────────────────────────────────────────── */
#toasts { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999; display: flex; flex-direction: column; gap: .45rem; }
.toast {
  background: rgba(13,17,26,.97); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--rl); padding: .72rem 1.1rem; font-size: .875rem; color: var(--tp);
  box-shadow: var(--shl); animation: toastIn .25s ease both;
  min-width: 250px; max-width: 340px; display: flex; align-items: center; gap: .55rem;
}
.toast.ok  { border-left: 3px solid var(--green); }
.toast.err { border-left: 3px solid var(--red); }
.toast.inf { border-left: 3px solid var(--ac); }
@keyframes toastIn { from { opacity:0; transform:translateX(14px); } to { opacity:1; transform:none; } }

/* ── Project card ─────────────────────────────────────────── */
.grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(320px,1fr)); gap: 1.4rem; }
.pc {
  background: rgba(12,16,22,.94); border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--r2); overflow: hidden;
  transition: transform .3s cubic-bezier(.25,.46,.45,.94), border-color .3s, box-shadow .3s;
  text-decoration: none; display: flex; flex-direction: column;
  position: relative;
}
.pc:hover { transform: translateY(-5px); border-color: rgba(0,212,255,.22); box-shadow: 0 20px 56px rgba(0,0,0,.6), var(--sha); }
.pc::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(0,212,255,.45),transparent); opacity:0; transition:opacity .3s; }
.pc:hover::before { opacity:1; }
.pc-img { position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--bg2); }
.pc-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s; filter:brightness(.85) saturate(1.1); }
.pc:hover .pc-img img { transform:scale(1.06); filter:brightness(.95); }
.pc-img-ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--bg2),rgba(0,212,255,.05)); }
.pc-img-ph i { font-size:2.8rem; color:var(--ac); opacity:.25; }
.pc-over { position:absolute; inset:0; background:rgba(8,12,18,.75); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; gap:.5rem; opacity:0; transition:opacity .22s; }
.pc:hover .pc-over { opacity:1; }
.pc-badges { position:absolute; top:.65rem; left:.65rem; display:flex; gap:.3rem; flex-wrap:wrap; }
.badge {
  font-size:.63rem; font-weight:700; padding:.18rem .52rem;
  border-radius:100px; text-transform:uppercase; letter-spacing:.06em;
  display:inline-flex; align-items:center; gap:.28rem;
}
.b-free    { background:rgba(0,229,160,.12); border:1px solid rgba(0,229,160,.25); color:var(--green); }
.b-premium { background:rgba(255,176,32,.1);  border:1px solid rgba(255,176,32,.25); color:var(--gold); }
.b-feat    { background:rgba(0,212,255,.1);   border:1px solid rgba(0,212,255,.25); color:var(--ac); }
.pc-wl { position:absolute; top:.65rem; right:.65rem; width:30px; height:30px; border-radius:50%; background:rgba(8,12,18,.75); border:1px solid rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:.85rem; transition:all var(--ease); z-index:2; }
.pc-wl:hover,.pc-wl.on { background:rgba(255,77,106,.15); border-color:rgba(255,77,106,.3); }
.pc-body { padding:1.1rem; flex:1; display:flex; flex-direction:column; gap:.3rem; }
.pc-cat { font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ac); }
.pc-title { font-size:1rem; font-weight:700; color:var(--tp); letter-spacing:-.015em; line-height:1.3; }
.pc-desc { font-size:.83rem; color:var(--ts); line-height:1.6; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; flex:1; }
.pc-stack { display:flex; flex-wrap:wrap; gap:.28rem; margin-top:.45rem; }
.stag { font-size:.66rem; font-weight:600; padding:.15rem .48rem; border-radius:4px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); color:var(--td); }
.pc-foot { display:flex; align-items:center; justify-content:space-between; margin-top:.875rem; padding-top:.875rem; border-top:1px solid rgba(255,255,255,.05); }
.pc-meta { display:flex; align-items:center; gap:.5rem; font-size:.74rem; color:var(--td); }
.pc-arr { width:28px; height:28px; border-radius:50%; background:rgba(0,212,255,.08); border:1px solid rgba(0,212,255,.15); display:flex; align-items:center; justify-content:center; color:var(--ac); font-size:.75rem; transition:all var(--ease); }
.pc:hover .pc-arr { background:rgba(0,212,255,.18); box-shadow:0 0 10px rgba(0,212,255,.2); }
/* Stars */
.stars { display:inline-flex; align-items:center; gap:.08rem; color:var(--gold); font-size:.8rem; }
.stars .e { color:rgba(255,255,255,.15); }

/* ── Filter bar ──────────────────────────────────────────── */
.fbar { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; margin-bottom:2.5rem; }
.search { display:flex; align-items:center; gap:.4rem; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:100px; padding:.52rem 1.1rem; flex:1; max-width:360px; transition:border-color var(--ease); }
.search:focus-within { border-color:rgba(0,212,255,.3); }
.search i { color:var(--td); font-size:.82rem; flex-shrink:0; }
.search input { background:none; border:none; outline:none; color:var(--tp); font-family:var(--font); font-size:.875rem; width:100%; }
.search input::placeholder { color:var(--td); }
.ftabs { display:flex; gap:.25rem; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); border-radius:100px; padding:.28rem; }
.ftab { font-size:.8rem; font-weight:600; padding:.4rem .9rem; border-radius:100px; border:none; background:transparent; color:var(--td); cursor:pointer; transition:all var(--ease); white-space:nowrap; }
.ftab:hover { color:var(--ts); }
.ftab.on { background:rgba(0,212,255,.12); color:var(--ac); }
.fcnt { margin-left:auto; font-size:.8rem; color:var(--td); }

/* ── Section heading ─────────────────────────────────────── */
.sec-tag { display:inline-flex; align-items:center; gap:.4rem; font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ac); background:rgba(0,212,255,.08); border:1px solid rgba(0,212,255,.16); padding:.28rem .72rem; border-radius:100px; margin-bottom:.875rem; }
.sec-h { font-size:clamp(1.5rem,3.5vw,2.1rem); font-weight:800; letter-spacing:-.03em; margin-bottom:.5rem; }
.sec-h .a { color:var(--ac); }
.sec-sub { font-size:.92rem; color:var(--ts); max-width:520px; line-height:1.8; }

/* ── Hero (home) ─────────────────────────────────────────── */
.hero { min-height:92vh; display:flex; align-items:center; padding-top:var(--hb); position:relative; overflow:hidden; }
.hero-grid { position:absolute; inset:0; z-index:0; background-image:linear-gradient(rgba(0,212,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,212,255,.04) 1px,transparent 1px); background-size:60px 60px; mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 30%,transparent 100%); }
.hero-glow { position:absolute; top:-15%; left:50%; transform:translateX(-50%); width:860px; height:480px; background:radial-gradient(ellipse at center,rgba(0,212,255,.11) 0%,transparent 68%); pointer-events:none; }
.hero-content { position:relative; z-index:1; max-width:740px; }
.hero-eye { display:inline-flex; align-items:center; gap:.45rem; font-size:.76rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ac); margin-bottom:1.4rem; }
.hero-eye::before { content:''; width:22px; height:2px; background:linear-gradient(90deg,transparent,var(--ac)); }
.hero-h { font-size:clamp(2.4rem,6vw,4.6rem); font-weight:900; line-height:1.05; letter-spacing:-.04em; margin-bottom:1.4rem; }
.hero-h .grad { background:linear-gradient(135deg,#fff 30%,#00D4FF 60%,#A78BFA); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero-p { font-size:1.05rem; color:var(--ts); line-height:1.85; max-width:540px; margin-bottom:2.25rem; }
.hero-btns { display:flex; gap:.875rem; flex-wrap:wrap; }
.hero-stats { display:flex; gap:2.5rem; margin-top:3.25rem; padding-top:2.5rem; border-top:1px solid rgba(255,255,255,.06); flex-wrap:wrap; }
.hero-stat-v { font-size:1.75rem; font-weight:800; letter-spacing:-.03em; }
.hero-stat-l { font-size:.72rem; color:var(--td); margin-top:.12rem; text-transform:uppercase; letter-spacing:.06em; }

/* ── Pillars (home about section) ─────────────────────────── */
.pillars { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; margin-top:3rem; }
.pillar { background:rgba(0,212,255,.04); border:1px solid rgba(0,212,255,.1); border-radius:var(--rx); padding:1.5rem; }
.pillar i { font-size:1.25rem; color:var(--ac); display:block; margin-bottom:.75rem; }
.pillar h3 { font-size:.95rem; font-weight:700; margin-bottom:.35rem; }
.pillar p { font-size:.83rem; margin:0; line-height:1.65; }

/* ── Project detail ──────────────────────────────────────── */
.detail-layout { display:grid; grid-template-columns:1fr 300px; gap:2.5rem; align-items:start; }
.detail-sidebar { position:sticky; top:calc(var(--hb)+1rem); background:var(--bg2); border:1px solid rgba(0,212,255,.12); border-radius:var(--r2); padding:1.5rem; }
.price-big { font-size:2.2rem; font-weight:800; letter-spacing:-.03em; margin-bottom:1.25rem; }
.price-big.free { color:var(--green); }
.side-actions { display:flex; flex-direction:column; gap:.55rem; margin-bottom:1.25rem; }
.side-sep { height:1px; background:rgba(255,255,255,.06); margin:.875rem 0; }
.side-row { display:flex; align-items:center; justify-content:space-between; font-size:.82rem; padding:.32rem 0; border-bottom:1px solid rgba(255,255,255,.04); gap:.75rem; }
.side-row:last-child { border-bottom:none; }
.side-lbl { color:var(--td); flex-shrink:0; }
.side-val { color:var(--ts); font-weight:500; text-align:right; }
.tech-list { display:flex; flex-wrap:wrap; gap:.45rem; }
.tech-tag { display:inline-flex; align-items:center; gap:.35rem; font-size:.78rem; font-weight:600; padding:.32rem .75rem; border-radius:var(--r); background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09); color:var(--ts); transition:all var(--ease); }
.tech-tag:hover { border-color:rgba(0,212,255,.3); color:var(--ac); }
.sec-lbl { font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ac); display:flex; align-items:center; gap:.45rem; margin-bottom:.875rem; }
.sec-lbl::before { content:''; width:14px; height:2px; background:var(--ac); }

/* ── Preview overlay ─────────────────────────────────────── */
.prev-overlay { position:fixed; inset:0; z-index:900; background:rgba(4,7,12,.97); display:flex; flex-direction:column; opacity:0; pointer-events:none; transition:opacity .22s; }
.prev-overlay.open { opacity:1; pointer-events:all; }
.prev-bar { display:flex; align-items:center; gap:.75rem; padding:.72rem 1.4rem; background:rgba(8,12,18,.98); border-bottom:1px solid rgba(0,212,255,.1); flex-shrink:0; }
.prev-title { font-size:.88rem; font-weight:700; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dev-btns { display:flex; gap:.2rem; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); border-radius:var(--rl); padding:.25rem; }
.dev-btn { font-size:.76rem; font-weight:600; padding:.38rem .72rem; border-radius:var(--r); border:none; background:transparent; color:var(--td); cursor:pointer; display:flex; align-items:center; gap:.28rem; transition:all var(--ease); }
.dev-btn:hover { color:var(--ts); }
.dev-btn.on { background:rgba(0,212,255,.12); color:var(--ac); }
.prev-body { flex:1; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:1.1rem; background:#13161e; }
.prev-wrap { height:100%; transition:width .35s cubic-bezier(.25,.46,.45,.94); border-radius:var(--rl); overflow:hidden; box-shadow:0 0 0 1px rgba(0,212,255,.2),var(--shl); }
.prev-iframe { width:100%; height:100%; border:none; background:#fff; }

/* ── Comments ────────────────────────────────────────────── */
.comment { display:flex; gap:.825rem; }
.c-av { width:36px; height:36px; border-radius:50%; object-fit:cover; flex-shrink:0; border:2px solid rgba(255,255,255,.08); }
.c-box { flex:1; min-width:0; }
.c-head { display:flex; align-items:center; gap:.45rem; margin-bottom:.32rem; flex-wrap:wrap; }
.c-name { font-weight:600; font-size:.875rem; }
.c-time { font-size:.73rem; color:var(--td); }
.c-body { font-size:.9rem; color:var(--ts); line-height:1.7; }
.c-acts { display:flex; gap:.65rem; margin-top:.4rem; }
.c-act { font-size:.75rem; color:var(--td); background:none; border:none; cursor:pointer; display:flex; align-items:center; gap:.25rem; transition:color var(--ease); }
.c-act:hover { color:var(--ac); }
.c-replies { margin-left:2.6rem; padding-left:.875rem; border-left:2px solid rgba(255,255,255,.06); display:flex; flex-direction:column; gap:.75rem; margin-top:.75rem; }
.reply-form { display:none; margin-top:.65rem; }
.reply-form.open { display:flex; gap:.5rem; align-items:flex-start; }
.reply-form textarea { flex:1; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:var(--rl); color:var(--tp); font-family:var(--font); font-size:.85rem; padding:.55rem .875rem; outline:none; resize:none; line-height:1.55; min-height:60px; }
.reply-form textarea:focus { border-color:rgba(0,212,255,.4); }

/* ── Rating stars (interactive) ──────────────────────────── */
.star-pick { display:flex; gap:.18rem; }
.sp { background:none; border:none; cursor:pointer; font-size:1.5rem; color:rgba(255,255,255,.14); transition:color .1s; line-height:1; padding:0; }
.sp.lit,.sp:hover,.sp.hv { color:var(--gold); }

/* ── Changelog page ──────────────────────────────────────── */
.cl-page { max-width:740px; margin:0 auto; padding:2rem 1.5rem 6rem; }
.cl-feed { display:flex; flex-direction:column; gap:0; }
.cl-entry { display:flex; gap:1.4rem; position:relative; padding-bottom:2.25rem; }
.cl-entry::before { content:''; position:absolute; left:17px; top:38px; bottom:0; width:2px; background:rgba(255,255,255,.06); }
.cl-entry:last-child::before { display:none; }
.cl-dot { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:800; flex-shrink:0; position:relative; z-index:1; }
.cl-dot.major   { background:linear-gradient(135deg,#0088BB,#00D4FF); color:#fff; box-shadow:0 0 16px rgba(0,212,255,.4); }
.cl-dot.minor   { background:rgba(0,229,160,.12); border:2px solid rgba(0,229,160,.3); color:var(--green); }
.cl-dot.patch   { background:rgba(255,255,255,.06); border:2px solid rgba(255,255,255,.12); color:var(--ts); }
.cl-dot.hotfix  { background:rgba(255,176,32,.1); border:2px solid rgba(255,176,32,.25); color:var(--gold); }
.cl-dot.security{ background:rgba(255,77,106,.1); border:2px solid rgba(255,77,106,.2); color:var(--red); }
.cl-card { background:var(--bg2); border:1px solid rgba(255,255,255,.07); border-radius:var(--rx); overflow:hidden; transition:border-color .2s; flex:1; }
.cl-card:hover { border-color:rgba(0,212,255,.18); }
.cl-head { padding:.9rem 1.1rem; border-bottom:1px solid rgba(255,255,255,.05); }
.cl-v { font-size:.95rem; font-weight:800; letter-spacing:-.02em; display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; }
.cl-tbadge { font-size:.6rem; font-weight:700; padding:.15rem .48rem; border-radius:100px; text-transform:uppercase; letter-spacing:.06em; }
.cl-major    { background:rgba(0,212,255,.1);   border:1px solid rgba(0,212,255,.22);   color:var(--ac); }
.cl-minor    { background:rgba(0,229,160,.08);   border:1px solid rgba(0,229,160,.18);  color:var(--green); }
.cl-patch    { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); color:var(--td); }
.cl-hotfix   { background:rgba(255,176,32,.08);  border:1px solid rgba(255,176,32,.2);  color:var(--gold); }
.cl-security { background:rgba(255,77,106,.08);  border:1px solid rgba(255,77,106,.2);  color:var(--red); }
.cl-subtitle { font-size:.83rem; color:var(--ts); margin-top:.22rem; }
.cl-date { font-size:.72rem; color:var(--td); margin-top:.18rem; display:flex; align-items:center; gap:.3rem; }
.cl-body { padding:.9rem 1.1rem; font-size:.88rem; color:var(--ts); line-height:1.8; white-space:pre-line; }
.cl-load { text-align:center; padding:2rem; font-size:.875rem; color:var(--td); cursor:pointer; }
.cl-load:hover { color:var(--ac); }

/* ── Account sidebar ─────────────────────────────────────── */
.acc-layout { display:grid; grid-template-columns:220px 1fr; gap:2rem; align-items:start; }
.acc-side { background:var(--bg2); border:1px solid rgba(255,255,255,.07); border-radius:var(--r2); overflow:hidden; position:sticky; top:calc(var(--hb)+1rem); }
.acc-av-block { padding:1.5rem; text-align:center; border-bottom:1px solid rgba(255,255,255,.06); }
.acc-av-block img { width:72px; height:72px; border-radius:50%; object-fit:cover; border:3px solid rgba(0,212,255,.2); margin:0 auto .75rem; }
.acc-nm { font-weight:700; font-size:.95rem; }
.acc-em { font-size:.76rem; color:var(--td); margin-top:.12rem; }
.acc-nav { padding:.4rem 0; }
.acc-link { display:flex; align-items:center; gap:.6rem; padding:.55rem 1.2rem; font-size:.875rem; color:var(--ts); text-decoration:none; transition:all var(--ease); border-left:2px solid transparent; }
.acc-link i { width:13px; text-align:center; font-size:.8rem; color:var(--td); }
.acc-link:hover { color:var(--tp); background:rgba(255,255,255,.03); }
.acc-link.on { color:var(--ac); border-left-color:var(--ac); background:rgba(0,212,255,.05); }
.acc-link.on i { color:var(--ac); }

/* Toggle switch */
.tgl { position:relative; width:44px; height:24px; flex-shrink:0; }
.tgl input { opacity:0; width:0; height:0; position:absolute; }
.tgl-tr { position:absolute; inset:0; border-radius:100px; background:rgba(255,255,255,.1); cursor:pointer; transition:background .2s; }
.tgl input:checked + .tgl-tr { background:var(--ac); }
.tgl-tr::after { content:''; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.4); transition:transform .2s; }
.tgl input:checked + .tgl-tr::after { transform:translateX(20px); }
.tgl-row { display:flex; align-items:center; justify-content:space-between; padding:.72rem 0; border-bottom:1px solid rgba(255,255,255,.04); }
.tgl-row:last-child { border-bottom:none; }
.tgl-lbl { font-size:.875rem; font-weight:500; }
.tgl-sub { font-size:.76rem; color:var(--td); margin-top:.1rem; }

/* Tag chips */
.tag-input-wrap { display:flex; flex-wrap:wrap; gap:.35rem; min-height:44px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:var(--rl); padding:.48rem .75rem; cursor:text; transition:border-color var(--ease); }
.tag-input-wrap:focus-within { border-color:rgba(0,212,255,.4); }
.chip { display:inline-flex; align-items:center; gap:.32rem; background:rgba(0,212,255,.1); border:1px solid rgba(0,212,255,.2); color:#33DDFF; font-size:.76rem; font-weight:600; padding:.2rem .55rem; border-radius:100px; }
.chip button { background:none; border:none; cursor:pointer; color:inherit; opacity:.6; padding:0; font-size:.68rem; line-height:1; }
.chip button:hover { opacity:1; }
.tag-bare { background:none; border:none; outline:none; color:var(--tp); font-family:var(--font); font-size:.875rem; min-width:90px; flex:1; }

/* Notification item */
.notif-item { display:flex; gap:.825rem; padding:.875rem 1rem; border-bottom:1px solid rgba(255,255,255,.04); text-decoration:none; color:inherit; transition:background var(--ease); position:relative; cursor:pointer; }
.notif-item:hover { background:rgba(255,255,255,.02); }
.notif-item.unread { background:rgba(0,212,255,.03); }
.notif-item.unread::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--ac); border-radius:0 2px 2px 0; }
.notif-ico { width:38px; height:38px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:.85rem; }
.notif-ico.np   { background:rgba(0,212,255,.1); color:var(--ac); }
.notif-ico.cm   { background:rgba(139,92,246,.1); color:var(--purp); }
.notif-ico.inf  { background:rgba(255,255,255,.07); color:var(--ts); }
.notif-body { flex:1; min-width:0; }
.notif-title { font-size:.875rem; font-weight:600; color:var(--tp); margin-bottom:.18rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.notif-sub { font-size:.78rem; color:var(--ts); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.notif-time { font-size:.7rem; color:var(--td); margin-top:.22rem; }
.notif-dot { width:8px; height:8px; border-radius:50%; background:var(--ac); flex-shrink:0; margin-top:.35rem; }

/* Flash */
#flash { position:fixed; top:calc(var(--hb)+.75rem); left:50%; transform:translateX(-50%); z-index:600; background:var(--bg2); border-radius:100px; padding:.58rem 1.4rem; font-size:.875rem; box-shadow:var(--shl); animation:toastIn .3s ease both; white-space:nowrap; display:flex; align-items:center; gap:.45rem; }
#flash.ok  { border:1px solid rgba(0,229,160,.3); color:var(--green); }
#flash.err { border:1px solid rgba(255,77,106,.3); color:var(--red); }

/* Admin */
.adm-layout { display:grid; grid-template-columns:230px 1fr; min-height:100vh; }
.adm-side { background:rgba(8,12,18,.99); border-right:1px solid rgba(255,255,255,.05); position:fixed; left:0; top:0; bottom:0; width:230px; display:flex; flex-direction:column; overflow-y:auto; z-index:200; }
.adm-logo { display:flex; align-items:center; gap:.5rem; padding:1.25rem 1.4rem 1.5rem; text-decoration:none; }
.adm-main { margin-left:230px; min-height:100vh; background:var(--bg1); display:flex; flex-direction:column; }
.adm-topbar { display:flex; align-items:center; justify-content:space-between; padding:1.1rem 2rem; background:rgba(8,12,18,.6); border-bottom:1px solid rgba(255,255,255,.05); position:sticky; top:0; z-index:100; backdrop-filter:blur(12px); }
.adm-content { padding:2rem; flex:1; }
.adm-nav-link { display:flex; align-items:center; gap:.6rem; padding:.52rem 1.4rem; font-size:.875rem; color:var(--ts); text-decoration:none; transition:all var(--ease); border-left:2px solid transparent; }
.adm-nav-link i { width:14px; text-align:center; font-size:.82rem; }
.adm-nav-link:hover { color:var(--tp); background:rgba(255,255,255,.03); }
.adm-nav-link.on { color:var(--ac); border-left-color:var(--ac); background:rgba(0,212,255,.05); }
.adm-sec { font-size:.6rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--td); padding:.5rem 1.4rem .22rem; }
.adm-sep { height:1px; background:rgba(255,255,255,.05); margin:.5rem 1.4rem; }
.adm-stat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:.875rem; margin-bottom:2rem; }
.adm-stat { background:var(--bg2); border:1px solid rgba(255,255,255,.07); border-radius:var(--rx); padding:1.1rem; }
.adm-sv { font-size:1.65rem; font-weight:800; margin:.3rem 0 .18rem; }
.adm-sl { font-size:.66rem; color:var(--td); text-transform:uppercase; letter-spacing:.08em; }
.tbl { width:100%; border-collapse:collapse; }
.tbl th { font-size:.64rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--td); padding:.62rem 1rem; border-bottom:1px solid rgba(255,255,255,.06); text-align:left; white-space:nowrap; background:rgba(255,255,255,.02); }
.tbl td { padding:.72rem 1rem; border-bottom:1px solid rgba(255,255,255,.03); font-size:.855rem; vertical-align:middle; }
.tbl tr:last-child td { border-bottom:none; }
.tbl tr:hover td { background:rgba(255,255,255,.012); }
.td-th { width:48px; height:32px; border-radius:6px; object-fit:cover; background:var(--bg2); }
.td-tr { max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.adm-card { background:var(--bg2); border:1px solid rgba(255,255,255,.07); border-radius:var(--r2); overflow:hidden; }
.adm-ch { display:flex; align-items:center; justify-content:space-between; padding:.88rem 1.4rem; border-bottom:1px solid rgba(255,255,255,.05); }
.adm-ct { font-size:.875rem; font-weight:700; }
.adm-body { padding:1.4rem; }
.upload-z { border:2px dashed rgba(0,212,255,.2); border-radius:var(--rl); padding:1.75rem; text-align:center; cursor:pointer; transition:all .2s; color:var(--td); }
.upload-z:hover { border-color:rgba(0,212,255,.4); background:rgba(0,212,255,.04); color:var(--ac); }
.upload-z i { font-size:1.75rem; display:block; margin-bottom:.45rem; }

/* Footer */
.footer { border-top:1px solid rgba(255,255,255,.05); padding:2.5rem 0 2rem; margin-top:5rem; }
.footer-inner { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
.footer-copy { font-size:.82rem; color:var(--td); }
.footer-links { display:flex; gap:1.5rem; }
.footer-links a { font-size:.82rem; color:var(--td); }
.footer-links a:hover { color:var(--ac); }

/* Empty */
.empty { text-align:center; padding:4rem 2rem; color:var(--td); }
.empty i { font-size:2.5rem; opacity:.2; display:block; margin-bottom:.875rem; }
.empty p { font-size:.88rem; }

/* Responsive */
@media(max-width:1024px){.adm-side{transform:translateX(-100%);transition:transform .3s;}.adm-side.open{transform:none;}.adm-main{margin-left:0;}.detail-layout{grid-template-columns:1fr;}.acc-layout{grid-template-columns:1fr;}.acc-side{position:static;}}
@media(max-width:768px){:root{--hb:60px;}.nav{padding:0 1rem;}.nav-links{display:none;}.wrap{padding:0 1rem;}.grid{grid-template-columns:1fr;}.pillars{grid-template-columns:1fr;}.frow{grid-template-columns:1fr;}.hero-stats{gap:1.5rem;}.adm-content{padding:1.25rem;}.adm-topbar{padding:1rem 1.25rem;}}
@media(max-width:480px){.hero-btns{flex-direction:column;}.grid{grid-template-columns:1fr;}.dev-btns{display:none;}}