:root{
  --bg-1: #071226;
  --bg-2: #042033;
  --card: #071b2a;
  --accent: #39c5ff;
  --muted: #9fb6c6;
  --glass: rgba(255,255,255,0.03);
  --radius: 12px;
  --tile-h: 180px;
  --gap: 14px;
  --ui-font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
html{
  height:100%;
}

body{
  margin:0;
}

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

body.page-carpfish{
  min-height:100%;
  font-family:var(--ui-font);
  background:linear-gradient(180deg,var(--bg-1),var(--bg-2));
  color:#e6eef8;
  -webkit-font-smoothing:antialiased;
}

body.page-carpfish .container{max-width:1140px;margin:18px auto;padding:18px}
body.page-carpfish header{display:flex;align-items:center;justify-content:space-between;gap:12px}
body.page-carpfish h1{margin:0;font-size:20px;font-weight:800;letter-spacing:-0.2px}
body.page-carpfish .subtitle{color:var(--muted);font-size:13px}
body.page-carpfish .controls{display:flex;gap:8px;align-items:center}
body.page-carpfish .btn{background:var(--accent);color:#04202b;border:0;padding:8px 12px;border-radius:10px;font-weight:800;cursor:pointer}
body.page-carpfish .small{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted);padding:6px 10px;border-radius:9px;cursor:pointer}

body.page-carpfish .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--gap);margin-top:18px}
body.page-carpfish .tile{
  background:linear-gradient(180deg,var(--glass), transparent);
  border-radius:var(--radius);padding:14px;min-height:var(--tile-h);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:0 8px 30px rgba(0,0,0,0.6);transition:transform .12s ease, box-shadow .12s ease;
  text-align:center;
}
body.page-carpfish .tile:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,0.6)}
body.page-carpfish .tile .title{font-weight:900;margin-bottom:6px}
body.page-carpfish .tile .desc{color:var(--muted);font-size:13px}

body.page-carpfish main#mainArea{margin-top:22px}
body.page-carpfish .listView .muted{color:var(--muted);margin-top:8px;text-align:center}

body.page-carpfish .game-area{background:linear-gradient(180deg,#081827,#06151f);padding:14px;border-radius:12px;color:#fff;min-height:360px}
body.page-carpfish .backbar{display:flex;gap:8px;align-items:center;margin-bottom:12px}
body.page-carpfish .game-header{display:flex;align-items:center;gap:12px}
body.page-carpfish .game-title{font-weight:900}
body.page-carpfish .score-pill{background:#062f39;color:#bff0ff;padding:6px 10px;border-radius:8px;font-weight:800}
body.page-carpfish .game-root{min-height:320px;position:relative}
body.page-carpfish .game-over{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  background:rgba(0,0,0,0.9);
  color:#fff;
  padding:20px 30px;
  border-radius:12px;
  text-align:center;
  animation:fadeIn 0.3s ease;
  z-index:100;
}
body.page-carpfish .game-over .score{
  font-size:24px;
  font-weight:800;
  margin:10px 0;
  color:var(--accent);
}
body.page-carpfish .game-over .retry{
  background:var(--accent);
  color:#042033;
  border:0;
  padding:8px 16px;
  border-radius:8px;
  font-weight:800;
  margin-top:10px;
  cursor:pointer;
}
@keyframes fadeIn {
  from { opacity:0; transform:translate(-50%, -60%); }
  to { opacity:1; transform:translate(-50%, -50%); }
}

/* 2048 styles */
body.page-carpfish .g2048-board{
  background:#bbada0;padding:12px;border-radius:8px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
  max-width:520px;margin:0 auto;
  perspective:1000px;
}
body.page-carpfish .g2048-cell{
  height:82px;border-radius:6px;background:#cdc1b4;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:22px;color:#776e65;
  transition:all .3s ease;
  box-shadow:0 4px 8px rgba(0,0,0,0.1);
  position:relative;
}
body.page-carpfish .g2048-cell.new{
  animation:pop3d .4s cubic-bezier(.17,.67,.21,1.69) forwards;
}
@keyframes pop3d{
  0%{transform:scale(0.85) translateY(-10px)}
  100%{transform:scale(1) translateY(0)}
}
body.page-carpfish .g2048-cell:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 16px rgba(0,0,0,0.15);
}

/* Memory flip */
body.page-carpfish .mem-grid{
  display:grid;grid-template-columns:repeat(6,1fr);gap:8px;
  max-width:680px;margin:0 auto;
  perspective:2000px;
  transform-style:preserve-3d;
}
body.page-carpfish .mem-card{
  height:78px;border-radius:10px;overflow:hidden;
  border:0;background:transparent;perspective:1200px;
  transform-style:preserve-3d;
  transition:transform .3s ease;
}
body.page-carpfish .mem-card:hover{
  transform:translateZ(20px) scale(1.05);
}

body.page-carpfish .mem-inner{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;
  transition:transform .5s ease;
}
body.page-carpfish .mem-inner.revealed{
  transform:rotateY(180deg);
}
body.page-carpfish .mem-front, body.page-carpfish .mem-back{
  position:absolute;top:0;left:0;width:100%;height:100%;
  backface-visibility:hidden;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:26px;font-weight:700;
}
body.page-carpfish .mem-front{background:linear-gradient(135deg,#123,#234);color:#fff}
body.page-carpfish .mem-back{background:#0ea5ff;color:#021026;transform:rotateY(180deg)}

body.page-carpfish .whack-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  max-width:520px;margin:0 auto;
}
body.page-carpfish .whack-hole{
  height:120px;border-radius:10px;background:radial-gradient(circle at center,#1b3342,#071b2a);
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
}
body.page-carpfish .whack-mole{
  width:70px;height:70px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#ffd27f,#d1903b);
  position:absolute;bottom:-70px;transition:bottom 0.2s ease;
  box-shadow:0 8px 18px rgba(0,0,0,0.6);
}
body.page-carpfish .whack-mole.up{bottom:20px}

body.page-carpfish .card-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
body.page-carpfish .card{background:#071b2a;border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:10px;box-shadow:0 6px 18px rgba(0,0,0,0.4)}
body.page-carpfish .card .title{font-weight:900;font-size:18px}
body.page-carpfish .card .copy{color:#9fb6c6;font-size:13px;line-height:1.5}

body.page-carpfish .snake-grid{display:grid;grid-template-columns:repeat(20,1fr);gap:3px;max-width:420px;margin:0 auto}
body.page-carpfish .snake-cell{width:18px;height:18px;border-radius:4px;background:#06121f}

body.page-carpfish .pong-table{position:relative;width:100%;max-width:640px;height:380px;margin:0 auto;background:#06121f;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,0.05);box-shadow:inset 0 0 40px rgba(0,0,0,0.6)}
body.page-carpfish .pong-paddle{position:absolute;width:12px;height:70px;background:linear-gradient(180deg,#39c5ff,#0582ca);border-radius:6px}
body.page-carpfish .pong-ball{position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 0 20px rgba(57,197,255,0.5)}

body.page-carpfish .tower-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;max-width:600px;margin:0 auto}
body.page-carpfish .tower-cell{height:80px;border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,0.06),rgba(255,255,255,0.01));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}

body.page-carpfish .inv-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:12px}
body.page-carpfish .inv-item{height:60px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:28px}

body.page-carpfish .maze-game{background:#06121f;border-radius:12px;position:relative;overflow:hidden}
body.page-carpfish .maze-player{position:absolute;width:24px;height:24px;border-radius:6px;background:#39c5ff;box-shadow:0 0 12px rgba(57,197,255,0.6)}
body.page-carpfish .maze-exit{position:absolute;width:40px;height:40px;border-radius:50%;background:#8bc34a;box-shadow:0 0 16px rgba(139,195,74,0.5)}

body.page-carpfish .chess-board{display:grid;grid-template-columns:repeat(8,1fr);width:320px;height:320px;border-radius:10px;overflow:hidden;box-shadow:0 6px 20px rgba(0,0,0,0.4);margin:0 auto}
body.page-carpfish .chess-square{display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700}
body.page-carpfish .chess-square.light{background:#f0d9b5;color:#4e342e}
body.page-carpfish .chess-square.dark{background:#b58863;color:#fff}

body.page-carpfish .doodle-platform{position:absolute;width:80px;height:16px;background:#3cb371;border-radius:8px}
body.page-carpfish .doodle-player{position:absolute;width:40px;height:40px;background:#ffeb3b;border-radius:50%;box-shadow:0 0 16px rgba(255,235,59,0.6)}

body.page-carpfish .racer-road{position:relative;width:100%;max-width:600px;height:400px;margin:0 auto;border-radius:16px;background:#101820;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,0.6)}
body.page-carpfish .road-line{position:absolute;left:50%;width:6px;height:40px;margin-left:-3px;background:rgba(255,255,255,0.4);border-radius:4px}
body.page-carpfish .racer-car{position:absolute;width:50px;height:90px;border-radius:12px;background:linear-gradient(180deg,#ff5722,#d84315);box-shadow:0 8px 20px rgba(0,0,0,0.5)}

body.page-carpfish .fruit-canvas{background:#061827;border-radius:12px;width:100%;max-width:640px;height:400px;margin:0 auto;box-shadow:0 10px 26px rgba(0,0,0,0.5)}

body.page-carpfish .tower-path{stroke:#39c5ff;stroke-width:4;fill:none;stroke-dasharray:6 6;animation:pathGlow 2s linear infinite;filter:drop-shadow(0 0 6px rgba(57,197,255,0.6))}
@keyframes pathGlow{
  0%{stroke-dashoffset:0}
  100%{stroke-dashoffset:-12}
}

body.page-account,
body.page-home{
  height:100%;
  overflow:hidden;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:
    radial-gradient(circle at 15% 20%, rgba(56,189,248,0.22), transparent 55%),
    radial-gradient(circle at 80% 0%, rgba(139,92,246,0.18), transparent 55%),
    radial-gradient(circle at 20% 80%, rgba(16,185,129,0.18), transparent 60%),
    #020617;
  color:#e6f1ff;
}

body.page-home .page{height:100vh;display:flex;flex-direction:column}
body.page-home .topbar{flex:0 0 48px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 12px;
  background:rgba(8,20,39,0.78);box-shadow:0 2px 12px rgba(3,7,18,0.5);border:1px solid rgba(148,191,224,0.15);border-radius:14px;margin:12px}
body.page-home .topbar-left, body.page-home .topbar-right {
  display:flex;align-items:center;gap:8px;
}
body.page-home .top-btn{
  background:rgba(14,165,233,0.16);color:#d3ecff;border:1px solid rgba(148,191,224,0.25);padding:6px 14px;border-radius:999px;
  font-weight:700;font-size:13px;text-decoration:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
}
body.page-home .top-btn:hover{background:rgba(14,165,233,0.28);color:#f4fbff;border-color:rgba(148,191,224,0.45)}
body.page-home .top-btn.accent{background:linear-gradient(135deg,#0ea5ff,#38bdf8);color:#03121f;border:0}
body.page-home .top-btn.accent:hover{background:linear-gradient(135deg,#38bdf8,#0ea5ff)}

body.page-home .big-banner{
  flex:1;
  display:flex;flex-direction:column;
  border-bottom:6px solid rgba(148,191,224,0.12);
  background:linear-gradient(140deg,#0ea5ff,#6366f1);
  color:#021026;
  border-radius:28px;
  margin:12px;
  box-shadow:0 24px 50px rgba(3,7,18,0.45);
  position:relative;
}
body.page-home .big-top, body.page-home .big-bottom{
  flex:1;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:12px;
}
body.page-home .big-top{font-weight:900;font-size:clamp(20px,5vw,56px);color:#07121f;background:linear-gradient(180deg,rgba(255,255,255,0.35),transparent);}
body.page-home .big-bottom{font-weight:800;font-size:clamp(20px,4.2vw,48px);color:#f4fbff;background:linear-gradient(180deg,rgba(5,11,25,0.28),transparent)}

body.page-home .bottom-row{
  flex:0 0 40vh;
  display:flex;gap:12px;padding:12px;
  background:linear-gradient(180deg,rgba(2,6,23,0.85),rgba(4,20,39,0.92));
  box-sizing:border-box;
  border-radius:20px;
  margin:0 12px 12px;
  border:1px solid rgba(148,191,224,0.12);
  box-shadow:0 18px 40px rgba(3,7,18,0.45);
}
body.page-home .small-banner{
  flex:1;display:flex;align-items:center;justify-content:center;
  border-radius:16px;background:linear-gradient(135deg,#0f172a,#1e293b);
  color:#eaf4ff;font-weight:800;font-size:clamp(12px,2.4vw,20px);
  box-shadow:0 16px 36px rgba(3,7,18,0.5);
  border:1px solid rgba(148,191,224,0.16);
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:1.5px;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
body.page-home .small-banner:hover{
  transform:translateY(-4px);
  box-shadow:0 26px 52px rgba(3,7,18,0.55);
  border-color:rgba(148,191,224,0.32);
}

@media (max-height:420px){
  body.page-home .bottom-row{flex-basis:45vh;padding:8px;gap:8px}
  body.page-home .small-banner{font-size:12px}
}

/* Account page */
body.page-account{
  --accent:#2f9e44;
  background:radial-gradient(circle at 15% 20%,rgba(47,158,68,0.2),transparent 50%),radial-gradient(circle at 85% 40%,rgba(32,131,207,0.18),transparent 55%),#04111d;
  min-height:100vh;
  color:#d8e2ec;
  font-family:"Segoe UI",sans-serif;
  padding:40px 20px;
  box-sizing:border-box;
}
body.page-account .account-shell{
  max-width:960px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:24px;
}
body.page-account .account-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
body.page-account .account-main{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:24px;
  align-items:flex-start;
}
body.page-account .card{
  background:rgba(4,25,40,0.92);
  border-radius:16px;
  padding:24px;
  box-shadow:0 18px 32px rgba(0,0,0,0.35);
  backdrop-filter:blur(10px);
  display:flex;
  flex-direction:column;
  gap:16px;
}
body.page-account .account-form-card h1{
  margin:0;
  font-size:24px;
  font-weight:800;
  letter-spacing:0.5px;
}
body.page-account .account-subtext{
  margin:0;
  color:#92adc6;
  font-size:14px;
}
body.page-account .field-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:12px;
}
body.page-account .field{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:13px;
  color:#adc6da;
}
body.page-account .field input,
body.page-account .field textarea{
  background:rgba(8,32,45,0.9);
  border:1px solid rgba(147,191,224,0.25);
  border-radius:10px;
  padding:10px 12px;
  color:#f2f7fb;
  font-size:15px;
  resize:vertical;
}
body.page-account .field input:focus,
body.page-account .field textarea:focus{
  border-color:rgba(47,158,68,0.6);
  outline:none;
  box-shadow:0 0 0 2px rgba(47,158,68,0.2);
}
body.page-account .btn{
  border:0;
  border-radius:12px;
  font-weight:600;
  cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease,opacity .15s ease;
}
body.page-account .btn.primary{
  background:linear-gradient(120deg,#2f9e44,#3bc9db);
  color:#031018;
  padding:10px 20px;
  box-shadow:0 10px 20px rgba(59,201,219,0.25);
}
body.page-account .btn.primary:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 24px rgba(59,201,219,0.35);
}
body.page-account .btn.subtle{
  background:rgba(255,255,255,0.04);
  color:#a8c2da;
  padding:8px 16px;
  border:1px solid rgba(255,255,255,0.08);
}
body.page-account .btn.subtle[disabled]{
  opacity:0.4;
  cursor:not-allowed;
}
body.page-account .btn.tiny{
  padding:6px 10px;
  background:rgba(255,255,255,0.05);
  color:#d6e2ef;
  border:1px solid rgba(255,255,255,0.08);
}
body.page-account .btn.tiny:hover{
  transform:translateY(-1px);
}
body.page-account .btn.tiny.danger{
  color:#ff9797;
  border-color:rgba(255,151,151,0.35);
}
body.page-account .account-status{
  min-height:20px;
  font-size:13px;
  color:#7dd3a7;
}
body.page-account .account-status.error{
  color:#ff8787;
}
body.page-account .posts-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
body.page-account .post-form{
  display:flex;
  flex-direction:column;
  gap:12px;
}
body.page-account .post-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:14px;
}
body.page-account .post-item{
  background:rgba(7,25,40,0.88);
  border-radius:12px;
  padding:14px;
  border:1px solid rgba(255,255,255,0.04);
  display:flex;
  flex-direction:column;
  gap:10px;
}
body.page-account .post-meta{
  font-size:12px;
  color:#82a5c4;
  letter-spacing:0.5px;
  text-transform:uppercase;
}
body.page-account .post-body{
  margin:0;
  font-size:15px;
  line-height:1.5;
  color:#f3f7fb;
}
body.page-account .post-actions{
  display:flex;
  gap:8px;
}
body.page-account .hint{
  margin:0;
  font-size:13px;
  color:#7f9bb4;
}
body.page-account .account-db-card{
  display:flex;
  flex-direction:column;
  gap:16px;
}
body.page-account .account-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
body.page-account .account-entry{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(8,25,46,0.65);
  border:1px solid rgba(148,191,224,0.12);
}
body.page-account .account-entry-avatar{
  width:46px;
  height:46px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid rgba(148,191,224,0.25);
}
body.page-account .account-entry-avatar.placeholder{
  background:rgba(15,35,54,0.8);
}
body.page-account .account-entry-body{
  display:flex;
  flex-direction:column;
  gap:4px;
}
body.page-account .account-entry-name{
  font-weight:700;
  font-size:15px;
  color:#ecf4ff;
}
body.page-account .account-entry-meta{
  font-size:13px;
  color:#9fb6c6;
}
body.page-account .profile-preview{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:18px;
  padding:12px 16px;
  border-radius:14px;
  background:rgba(8,25,46,0.85);
  border:1px solid rgba(148,191,224,0.18);
}
body.page-account .profile-preview img{
  width:60px;
  height:60px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid rgba(148,191,224,0.35);
}
body.page-account .profile-preview-info{
  display:flex;
  flex-direction:column;
  gap:4px;
}
body.page-account .profile-preview-info #profileName{
  font-weight:700;
  font-size:15px;
  color:#f2f7ff;
}
body.page-account .profile-preview-info #profileEmail{
  font-size:13px;
  color:#9fb6c6;
}

/* Social feed page */
body.page-social{
  min-height:100vh;
  margin:0;
  font-family:"Segoe UI",sans-serif;
  background:radial-gradient(circle at 12% 18%,rgba(14,116,144,0.32),transparent 54%),radial-gradient(circle at 82% -10%,rgba(113,59,185,0.28),transparent 60%),#050c16;
  color:#e6eef8;
  padding:32px 20px 64px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  gap:24px;
}
body.page-social .social-topbar{
  position:sticky;
  top:0;
  left:0;
  right:0;
  z-index:50;
  margin:0 auto;
  padding:16px 24px;
  width:min(1180px,100%);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  background:rgba(6,24,40,0.92);
  border-radius:20px;
  border:1px solid rgba(148,191,224,0.16);
  box-shadow:0 24px 48px rgba(5,11,23,0.45);
  backdrop-filter:blur(14px);
}
body.page-social .brand{
  display:flex;
  gap:14px;
  align-items:flex-start;
}
body.page-social .logo-dot{
  width:18px;
  height:18px;
  border-radius:50%;
  background:linear-gradient(135deg,#0ea5ff,#38bdf8);
  box-shadow:0 0 14px rgba(14,165,233,0.9);
  margin-top:4px;
}
body.page-social .titles h1{
  margin:0;
  font-size:28px;
  letter-spacing:0.8px;
}
body.page-social .titles .tagline{
  margin:6px 0 0;
  color:#9fb6c6;
  font-size:13px;
}
body.page-social .top-actions{
  display:flex;
  gap:16px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}
body.page-social nav{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
body.page-social .chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 16px;
  border-radius:999px;
  background:rgba(255,255,255,0.08);
  color:#e6f4ff;
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  border:0;
  cursor:pointer;
  transition:transform .12s ease,background .12s ease,box-shadow .12s ease;
}
body.page-social .chip:hover{
  background:rgba(255,255,255,0.16);
  transform:translateY(-1px);
}
body.page-social .chip.action{
  background:linear-gradient(135deg,#0ea5ff,#38bdf8);
  color:#031321;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.6px;
  box-shadow:0 12px 24px rgba(14,165,233,0.28);
}
body.page-social .chip.action:hover{
  box-shadow:0 16px 32px rgba(14,165,233,0.35);
}
body.page-social .social-layout{
  width:min(1180px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:260px minmax(0,1fr) 260px;
  gap:20px;
  align-items:start;
}
body.page-social .social-sidebar,
body.page-social .social-right{
  display:flex;
  flex-direction:column;
  gap:20px;
}
body.page-social .card{
  background:rgba(7,26,42,0.9);
  border-radius:20px;
  border:1px solid rgba(148,191,224,0.16);
  box-shadow:0 24px 46px rgba(5,12,20,0.45);
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
body.page-social .card h2,
body.page-social .card h3{
  margin:0;
  font-size:18px;
  font-weight:800;
}
body.page-social .card p,
body.page-social .card li{
  font-size:13px;
  color:#9fb6c6;
  line-height:1.5;
}
body.page-social .card ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
body.page-social .quick-stats ul li{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:rgba(255,255,255,0.04);
  border-radius:12px;
  padding:10px 12px;
}
body.page-social .quick-stats .stat-label{
  color:#9fb6c6;
  font-size:13px;
}
body.page-social .quick-stats .stat-value{
  font-size:16px;
  font-weight:800;
  color:#e8f6ff;
}
body.page-social .composer-card{
  gap:18px;
}
body.page-social .composer-card header h2{
  font-size:22px;
}
body.page-social .hint{
  margin:4px 0 0;
  color:#8fa6bc;
  font-size:13px;
}
body.page-social .composer-form{
  display:flex;
  flex-direction:column;
  gap:16px;
}
body.page-social .field{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:13px;
  color:#a3bfdc;
}
body.page-social .field textarea,
body.page-social .field input{
  background:rgba(9,32,49,0.92);
  border:1px solid rgba(148,187,233,0.24);
  border-radius:12px;
  padding:10px 12px;
  color:#f1f6fc;
  font-size:15px;
  font-family:inherit;
  resize:vertical;
}
body.page-social .field textarea:focus,
body.page-social .field input:focus{
  border-color:rgba(14,165,233,0.6);
  outline:none;
  box-shadow:0 0 0 2px rgba(14,165,233,0.22);
}
body.page-social .upload-block{
  border:1px dashed rgba(148,191,224,0.28);
  border-radius:16px;
  padding:18px;
  background:rgba(7,26,42,0.6);
}
body.page-social .upload-actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
body.page-social .upload-actions .muted{
  color:#8fa6bc;
  font-size:13px;
}
body.page-social .upload{
  position:relative;
}
body.page-social .upload-block input[type="file"]{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  border:0;
  clip:rect(0,0,0,0);
  overflow:hidden;
}
body.page-social .media-preview{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  background:rgba(9,32,49,0.75);
  border:1px solid rgba(148,191,224,0.2);
  border-radius:14px;
}
body.page-social .media-preview.hidden{
  display:none;
}
body.page-social .media-preview .thumb{
  width:56px;
  height:56px;
  border-radius:12px;
  background:rgba(148,191,224,0.15);
  background-size:cover;
  background-position:center;
  position:relative;
}
body.page-social .media-preview .thumb.video::after{
  content:"▶";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#0ea5ff;
  font-size:20px;
}
body.page-social .composer-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
body.page-social .status{
  min-height:20px;
  font-size:13px;
  color:#7ad7ff;
}
body.page-social .status.error{
  color:#ff9aa5;
}
body.page-social .btn{
  border-radius:12px;
  font-weight:600;
  cursor:pointer;
  transition:transform .12s ease,box-shadow .12s ease,opacity .12s ease;
  border:0;
}
body.page-social .btn.primary{
  background:linear-gradient(135deg,#0ea5ff,#38bdf8);
  color:#031321;
  padding:10px 20px;
  box-shadow:0 16px 32px rgba(14,165,233,0.28);
}
body.page-social .btn.accent{
  background:linear-gradient(135deg,#fbbc04,#f97316);
  color:#031321;
  font-weight:700;
  padding:10px 18px;
  box-shadow:0 18px 36px rgba(249,115,22,0.3);
}
body.page-social .btn.accent:hover{
  transform:translateY(-1px);
  box-shadow:0 22px 42px rgba(249,115,22,0.38);
}
body.page-social .btn.primary:hover{
  transform:translateY(-1px);
  box-shadow:0 20px 36px rgba(14,165,233,0.32);
}
body.page-social .btn.secondary{
  background:rgba(255,255,255,0.08);
  color:#e8f4ff;
  padding:9px 16px;
  border:1px solid rgba(255,255,255,0.12);
}
body.page-social .btn.tiny{
  background:rgba(255,255,255,0.08);
  color:#e6f3ff;
  padding:6px 12px;
  border:1px solid rgba(255,255,255,0.12);
  font-size:12px;
}
body.page-social .btn.tiny.fullscreen-btn{
  background:rgba(14,165,233,0.18);
  color:#061622;
  border:1px solid rgba(14,165,233,0.4);
  font-weight:700;
}
body.page-social .btn.tiny.fullscreen-btn:hover{
  background:rgba(14,165,233,0.28);
  box-shadow:0 12px 24px rgba(14,165,233,0.25);
}
body.page-social .btn.tiny.ghost{
  background:transparent;
  border:1px solid rgba(148,191,224,0.32);
  color:#9fc9eb;
}
body.page-social .social-feed{
  display:flex;
  flex-direction:column;
  gap:32px;
}
body.page-social .feed-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:32px;
}
body.page-social .empty-hint{
  text-align:center;
  font-size:14px;
  color:#8fa6bc;
}

/* CarpStream viewer rebuild */
body.page-social{
  min-height:100vh;
  margin:0;
  font-family:var(--ui-font);
  background:radial-gradient(circle at 12% 18%,rgba(14,116,144,0.25),transparent 50%),radial-gradient(circle at 82% -10%,rgba(113,59,185,0.22),transparent 60%),#050c16;
  color:#e6f4ff;
  padding:24px 16px 48px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  gap:24px;
}
body.page-social .stream-topbar{
  width:min(1240px,100%);
  margin:0 auto;
  background:rgba(7,26,42,0.92);
  border-radius:20px;
  border:1px solid rgba(148,191,224,0.16);
  padding:18px 24px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  box-shadow:0 26px 54px rgba(5,12,23,0.45);
  backdrop-filter:blur(14px);
}
body.page-social .stream-topbar .brand{
  display:flex;
  gap:14px;
  align-items:flex-start;
}
body.page-social .stream-topbar h1{
  margin:0;
  font-size:30px;
  letter-spacing:-0.2px;
}
body.page-social .stream-topbar .tagline{
  margin:6px 0 0;
  color:#9fb6c6;
  font-size:13px;
}
body.page-social .stream-topbar .top-actions{
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:flex-end;
}
body.page-social .stream-topbar nav{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
body.page-social .stream-topbar .btn.primary{
  padding:10px 20px;
}
body.page-social .stream-main{
  width:min(1240px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:20px;
  align-items:start;
}
body.page-social .viewer{
  background:rgba(7,26,42,0.9);
  border-radius:24px;
  border:1px solid rgba(148,191,224,0.16);
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:22px;
  box-shadow:0 32px 60px rgba(5,12,23,0.4);
}
body.page-social .viewer-media{
  position:relative;
  width:100%;
  min-height:280px;
  background:rgba(5,14,23,0.6);
  border-radius:18px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
body.page-social .viewer-media::before{
  content:"";
  display:block;
  padding-top:56.25%;
}
body.page-social .viewer-media video,
body.page-social .viewer-media img,
body.page-social .viewer-media iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  object-fit:contain;
  background:#000;
}
body.page-social .viewer-empty{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-size:16px;
  color:#9fb6c6;
  text-align:center;
  padding:0 24px;
}
body.page-social .viewer-panel{
  display:flex;
  flex-direction:column;
  gap:16px;
}
body.page-social .viewer-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}
body.page-social .viewer-meta{
  display:flex;
  flex-direction:column;
  gap:4px;
}
body.page-social .viewer-author{
  font-weight:700;
  font-size:16px;
  color:#e6f4ff;
}
body.page-social .viewer-header time{
  font-size:12px;
  color:#8fa6bc;
}
body.page-social .viewer-caption{
  margin:0;
  font-size:17px;
  line-height:1.6;
  color:#e9f4ff;
}
body.page-social .viewer-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
body.page-social .viewer-actions .action-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,0.08);
  border:1px solid transparent;
  color:#e6f4ff;
  font-weight:600;
  cursor:pointer;
  transition:transform .12s ease, background .12s ease, border .12s ease;
}
body.page-social .viewer-actions .action-btn:hover{
  background:rgba(255,255,255,0.16);
  transform:translateY(-1px);
}
body.page-social .viewer-actions .action-btn.is-active{
  background:rgba(14,165,233,0.22);
  border-color:rgba(14,165,233,0.5);
  color:#05131f;
}
body.page-social .viewer-actions .action-btn.delete{
  background:rgba(255,78,109,0.12);
  color:#ff9fb4;
  border-color:rgba(255,78,109,0.25);
}
body.page-social .viewer-actions .action-btn.delete:hover{
  background:rgba(255,78,109,0.2);
}
body.page-social .viewer-actions .icon{
  font-size:18px;
}
body.page-social .viewer-actions .label{
  font-size:14px;
  font-weight:600;
}
body.page-social .comment-panel{
  background:rgba(5,18,31,0.8);
  border-radius:18px;
  border:1px solid rgba(148,191,224,0.14);
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
body.page-social .comment-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-weight:700;
}
body.page-social .comment-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
  max-height:220px;
  overflow-y:auto;
}
body.page-social .comment-list li{
  background:rgba(255,255,255,0.05);
  border-radius:12px;
  padding:10px 12px;
  font-size:14px;
  color:#d9e9ff;
  line-height:1.5;
}
body.page-social .comment-list strong{
  color:#8ed8ff;
}
body.page-social .comment-form{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
body.page-social .comment-form input{
  flex:1;
  min-width:160px;
  background:rgba(5,20,33,0.85);
  border:1px solid rgba(148,191,224,0.22);
  border-radius:12px;
  padding:10px 12px;
  color:#f6fbff;
  font-size:14px;
}
body.page-social .queue{
  background:rgba(7,26,42,0.9);
  border-radius:20px;
  border:1px solid rgba(148,191,224,0.18);
  padding:22px;
  box-shadow:0 28px 52px rgba(5,12,23,0.42);
  display:flex;
  flex-direction:column;
  gap:18px;
}
body.page-social .queue-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
body.page-social .queue-stats{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
body.page-social .queue-stats .stat{
  flex:1;
  min-width:120px;
  background:rgba(255,255,255,0.06);
  border-radius:12px;
  padding:10px 12px;
  display:flex;
  flex-direction:column;
  gap:4px;
  color:#9fb6c6;
}
body.page-social .queue-stats strong{
  font-size:18px;
  color:#e6f4ff;
}
body.page-social .post-rail{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height:520px;
  overflow-y:auto;
}
body.page-social .post-rail li{
  border-radius:14px;
  overflow:hidden;
}
body.page-social .post-rail button{
  width:100%;
  border:0;
  background:rgba(5,18,31,0.75);
  color:#dceeff;
  display:flex;
  gap:12px;
  padding:10px 12px;
  align-items:center;
  cursor:pointer;
  transition:background .12s ease, transform .12s ease;
}
body.page-social .post-rail button:hover{
  background:rgba(5,18,31,0.95);
  transform:translateX(2px);
}
body.page-social .post-rail li.active button{
  background:rgba(14,165,233,0.24);
  color:#03121b;
  box-shadow:0 14px 28px rgba(14,165,233,0.2);
}
body.page-social .rail-thumb{
  width:54px;
  height:54px;
  border-radius:12px;
  background:rgba(148,191,224,0.18);
  display:grid;
  place-items:center;
  font-size:20px;
  color:#9fc9eb;
  overflow:hidden;
}
body.page-social .rail-thumb.is-image{
  background:rgba(255,255,255,0.08);
}
body.page-social .rail-thumb.is-video{
  background:rgba(56,189,248,0.22);
  color:#04283b;
  font-weight:700;
}
body.page-social .rail-thumb.is-text{
  background:rgba(148,191,224,0.22);
  color:#0b2a3d;
  font-weight:700;
}
body.page-social .rail-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}
body.page-social .rail-body{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:4px;
  align-items:flex-start;
  text-align:left;
}
body.page-social .rail-title{
  font-weight:700;
  font-size:14px;
  color:inherit;
}
body.page-social .rail-time{
  font-size:12px;
  color:#9fb6c6;
}
body.page-social .composer-overlay{
  position:fixed;
  inset:0;
  background:rgba(2,9,18,0.76);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  z-index:60;
}
body.page-social .composer-overlay.hidden{
  display:none;
}
body.page-social .composer-panel{
  width:min(520px,100%);
  background:rgba(7,26,42,0.95);
  border-radius:24px;
  border:1px solid rgba(148,191,224,0.2);
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:18px;
  box-shadow:0 30px 60px rgba(4,10,20,0.5);
}
body.page-social .composer-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
body.page-social .composer-header h2{
  margin:0;
  font-size:22px;
  font-weight:800;
}
body.page-social .composer-form{
  display:flex;
  flex-direction:column;
  gap:16px;
}
body.page-social .composer-form .field{
  display:flex;
  flex-direction:column;
  gap:6px;
  color:#a3bfdc;
}
body.page-social .composer-form textarea,
body.page-social .composer-form input[type="url"],
body.page-social .composer-form input[type="file"]{
  background:rgba(9,32,49,0.88);
  border:1px solid rgba(148,191,224,0.24);
  border-radius:12px;
  padding:10px 12px;
  color:#f1f6fc;
  font-size:15px;
  font-family:inherit;
}
body.page-social .composer-form textarea:focus,
body.page-social .composer-form input:focus{
  border-color:#0ea5ff;
  outline:none;
  box-shadow:0 0 0 2px rgba(14,165,233,0.25);
}
body.page-social .composer-form .media-preview{
  display:flex;
  align-items:center;
  gap:12px;
  background:rgba(5,18,31,0.8);
  border:1px solid rgba(148,191,224,0.22);
  border-radius:14px;
  padding:10px 12px;
}
body.page-social .composer-form .media-preview.hidden{
  display:none;
}
body.page-social .composer-form .media-preview .thumb{
  width:52px;
  height:52px;
  border-radius:12px;
  background:rgba(148,191,224,0.18);
  background-size:cover;
  background-position:center;
}
body.page-social .composer-status{
  min-height:18px;
  font-size:13px;
  color:#7ad7ff;
}
body.page-social .composer-status.error{
  color:#ff9aa5;
}
body.page-social .composer-actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.action-btn:disabled,
.btn:disabled{
  opacity:0.45;
  cursor:not-allowed;
}

@media (max-width:1080px){
  body.page-social .stream-main{
    grid-template-columns:1fr;
  }
  body.page-social .queue{
    order:-1;
  }
}

@media (max-width:720px){
  body.page-social{
    padding:18px 12px 36px;
  }
  body.page-social .stream-topbar{
    flex-direction:column;
    align-items:flex-start;
  }
  body.page-social .stream-topbar .top-actions{
    align-items:flex-start;
  }
  body.page-social .viewer{
    padding:18px;
  }
  body.page-social .viewer-media::before{
    padding-top:60%;
  }
  body.page-social .viewer-actions{
    flex-wrap:wrap;
  }
  body.page-social .comment-form{
    flex-direction:column;
  }
  body.page-social .queue{
    padding:18px;
  }
  body.page-social .composer-panel{
    padding:18px;
  }
}
body.page-social .post-card{
  background:rgba(7,26,42,0.85);
  border-radius:20px;
  border:1px solid rgba(148,191,224,0.16);
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:18px;
  box-shadow:0 20px 38px rgba(5,12,23,0.4);
}
body.page-social .post-head{
  display:flex;
  align-items:center;
  gap:14px;
}
body.page-social .post-head .avatar{
  width:44px;
  height:44px;
  border-radius:50%;
  background:rgba(59,130,246,0.2);
  display:grid;
  place-items:center;
  font-weight:800;
  color:#9dd7ff;
  font-size:18px;
  overflow:hidden;
}
body.page-social .post-head .avatar.with-image{
  background-size:cover;
  background-position:center;
  color:transparent;
}
body.page-social .post-head .meta{
  display:flex;
  flex-direction:column;
  gap:4px;
}
body.page-social .post-head .author{
  font-weight:700;
  font-size:16px;
}
body.page-social .post-head .timestamp{
  font-size:12px;
  color:#a7bfd5;
}
body.page-social .post-head .delete-btn{
  margin-left:auto;
}
body.page-social .post-body{
  display:flex;
  flex-direction:column;
  gap:14px;
}
body.page-social .post-body .caption{
  margin:0;
  font-size:16px;
  line-height:1.6;
  color:#e9f4ff;
}
body.page-social .post-body .media-slot iframe,
body.page-social .post-body .media-slot video{
  width:100%;
  aspect-ratio:16/9;
  border:0;
  border-radius:16px;
  background:#01070d;
  box-shadow:0 20px 44px rgba(0,0,0,0.45);
}
body.page-social .post-body .media-slot img{
  width:100%;
  border-radius:16px;
  max-height:60vh;
  object-fit:cover;
  box-shadow:0 20px 44px rgba(0,0,0,0.45);
}
body.page-social .post-foot{
  display:flex;
  gap:12px;
}
body.page-social .post-comments{
  border-top:1px solid rgba(148,191,224,0.16);
  padding-top:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
body.page-social .post-comments h4{
  margin:0;
  font-size:14px;
  color:#a7bfd5;
}
body.page-social .comment-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:13px;
  color:#d4e7ff;
}
body.page-social .comment-list strong{
  color:#9dd7ff;
}
body.page-social .comment-form{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
body.page-social .comment-form .field{
  flex:1;
  margin:0;
}
body.page-social .comment-form input{
  width:100%;
  padding:9px 12px;
}
body.page-social .comment-form button{
  align-self:flex-start;
}
body.page-social .social-right .btn.secondary{
  align-self:flex-start;
}
body.page-social .sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
@media (max-width:1080px){
  body.page-social{
    padding:24px 16px 48px;
  }
  body.page-social .social-layout{
    grid-template-columns:1fr;
  }
  body.page-social .social-right,
  body.page-social .social-sidebar{
    order:1;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:16px;
  }
  body.page-social .social-feed{
    order:0;
  }
}
@media (max-width:720px){
  body.page-social{
    padding:24px 12px 48px;
  }
  body.page-social .social-topbar{
    position:static;
    width:100%;
    flex-direction:column;
    align-items:flex-start;
  }
  body.page-social .top-actions{
    width:100%;
    justify-content:flex-start;
  }
  body.page-social .composer-actions{
    flex-direction:column;
    align-items:flex-start;
  }
  body.page-social .comment-form{
    flex-direction:column;
    align-items:stretch;
  }
}
body.page-offline{
  min-height:100%;
  margin:0;
  font-family:var(--ui-font);
  background:linear-gradient(180deg,var(--bg-1),var(--bg-2));
  color:#e6eef8;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 16px;
}
body.page-offline .offline-card{
  background:rgba(7,27,42,0.9);
  border-radius:18px;
  box-shadow:0 24px 48px rgba(0,0,0,0.6);
  max-width:560px;
  width:100%;
  padding:32px;
  display:flex;
  flex-direction:column;
  gap:24px;
}
body.page-offline h1{
  margin:0 0 6px;
  font-size:26px;
  font-weight:800;
}
body.page-offline .subtitle{
  margin:0;
  color:var(--muted);
  font-size:14px;
}
body.page-offline .offline-section{
  display:flex;
  flex-direction:column;
  gap:12px;
}
body.page-offline .action-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
body.page-offline .offline-btn{
  border:0;
  border-radius:12px;
  padding:10px 16px;
  font-weight:700;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease;
}
body.page-offline .offline-btn.primary{
  background:var(--accent);
  color:#042033;
  box-shadow:0 14px 30px rgba(57,197,255,0.4);
}
body.page-offline .offline-btn.primary:hover{
  transform:translateY(-3px);
}
body.page-offline .offline-btn.secondary{
  background:transparent;
  color:var(--muted);
  border:1px solid rgba(255,255,255,0.08);
}
body.page-offline .status-text{
  font-size:13px;
  color:var(--muted);
  margin:0;
}
body.page-offline .offline-list{
  margin:0;
  padding-left:20px;
  display:flex;
  flex-direction:column;
  gap:6px;
  color:#d5e4f2;
}
@media (max-width:540px){
  body.page-offline{
    padding:24px 12px;
  }
  body.page-offline .offline-card{
    padding:24px;
  }
}
body.page-chats{
  min-height:100%;
  margin:0;
  font-family:var(--ui-font);
  background:linear-gradient(180deg,var(--bg-1),var(--bg-2));
  color:#e6eef8;
  display:flex;
  align-items:stretch;
  justify-content:center;
  padding:24px 12px 36px;
}
body.page-chats .chat-shell{
  width:100%;
  max-width:1280px;
  display:flex;
  flex-direction:column;
  gap:18px;
}
body.page-chats .chat-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
body.page-chats .chat-header h1{
  margin:0;
  font-size:28px;
  font-weight:800;
}
body.page-chats .chat-header .subtitle{
  margin:6px 0 0;
  color:var(--muted);
  font-size:14px;
}
body.page-chats .profile-chip{
  padding:8px 16px;
  border-radius:999px;
  background:rgba(255,255,255,0.12);
  font-weight:700;
  font-size:14px;
}
body.page-chats .chat-layout{
  display:grid;
  grid-template-columns:320px 1fr;
  gap:18px;
}
body.page-chats .chat-sidebar{
  background:rgba(7,27,42,0.85);
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.08);
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:18px;
  box-shadow:0 24px 50px rgba(0,0,0,0.45);
}
body.page-chats .chat-section h2{
  margin:0 0 10px;
  font-size:15px;
  text-transform:uppercase;
  letter-spacing:0.6px;
  color:#b8cde0;
}
body.page-chats .chat-section form{
  display:flex;
  flex-direction:column;
  gap:10px;
}
body.page-chats label span{
  display:block;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.7px;
  color:#8fa6bc;
  margin-bottom:4px;
}
body.page-chats input,
body.page-chats textarea,
body.page-chats select{
  width:100%;
  background:rgba(10,30,48,0.85);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:10px;
  padding:8px 10px;
  color:#f3f8ff;
  font-family:inherit;
  font-size:14px;
  outline:none;
}
body.page-chats textarea{
  resize:vertical;
}
body.page-chats input:focus,
body.page-chats textarea:focus,
body.page-chats select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(57,197,255,0.2);
}
body.page-chats .room-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
body.page-chats .room-btn{
  width:100%;
  border:1px solid rgba(255,255,255,0.05);
  border-radius:12px;
  background:rgba(8,22,39,0.8);
  color:#e6eef8;
  text-align:left;
  padding:10px 12px;
  cursor:pointer;
  transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
body.page-chats .room-btn:hover{
  transform:translateY(-2px);
  border-color:rgba(57,197,255,0.6);
  box-shadow:0 12px 24px rgba(0,0,0,0.4);
}
body.page-chats .room-btn.active{
  border-color:var(--accent);
  box-shadow:0 12px 28px rgba(57,197,255,0.35);
}
body.page-chats .room-name{
  font-weight:700;
  font-size:15px;
}
body.page-chats .tiny{
  font-size:12px;
}
body.page-chats .btn{
  border:0;
  border-radius:12px;
  padding:8px 14px;
  font-weight:700;
  cursor:pointer;
  color:#031522;
  background:var(--accent);
  transition:transform .12s ease, box-shadow .12s ease;
}
body.page-chats .btn.primary{
  background:linear-gradient(135deg,#39c5ff,#23a6ff);
  color:#06283a;
  box-shadow:0 16px 34px rgba(35,166,255,0.4);
}
body.page-chats .btn.secondary{
  background:rgba(255,255,255,0.08);
  color:#d2e9ff;
  border:1px solid rgba(255,255,255,0.18);
}
body.page-chats .btn.small{
  padding:6px 12px;
  font-size:13px;
}
body.page-chats .btn.tiny{
  padding:6px 10px;
  font-size:12px;
}
body.page-chats .btn.danger{
  background:rgba(244,63,94,0.16);
  color:#f8719d;
  border:1px solid rgba(244,63,94,0.35);
}
body.page-chats .btn:disabled{
  opacity:0.45;
  pointer-events:none;
}
body.page-chats .chat-main{
  background:rgba(7,23,36,0.9);
  border-radius:22px;
  border:1px solid rgba(255,255,255,0.08);
  display:grid;
  grid-template-columns:1fr 240px;
  overflow:hidden;
  box-shadow:0 28px 60px rgba(0,0,0,0.5);
}
body.page-chats .active-room{
  display:flex;
  flex-direction:column;
  padding:20px;
  gap:16px;
}
body.page-chats .room-header{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:center;
}
body.page-chats .room-header h2{
  margin:0;
  font-size:22px;
  font-weight:800;
}
body.page-chats .muted{
  color:var(--muted);
}
body.page-chats .room-actions{
  display:flex;
  align-items:center;
  gap:12px;
}
body.page-chats .room-pill{
  padding:6px 12px;
  border-radius:999px;
  background:rgba(255,255,255,0.12);
  font-size:12px;
  font-weight:700;
  letter-spacing:0.6px;
  text-transform:uppercase;
  color:#9dd7ff;
}
body.page-chats .chat-scroll{
  flex:1;
  overflow-y:auto;
  background:rgba(5,17,30,0.8);
  border:1px solid rgba(255,255,255,0.05);
  border-radius:18px;
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
body.page-chats .chat-scroll ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:14px;
}
body.page-chats .empty-chat{
  text-align:center;
  color:var(--muted);
  font-size:14px;
}
body.page-chats .message{
  display:flex;
}
body.page-chats .message .bubble{
  background:linear-gradient(135deg,rgba(57,197,255,0.2),rgba(8,41,62,0.9));
  border-radius:14px;
  padding:12px 14px;
  box-shadow:0 14px 28px rgba(7,19,32,0.46);
  width:100%;
}
body.page-chats .message header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:6px;
  font-size:12px;
  color:#9ec5de;
}
body.page-chats .message .text{
  margin:0;
  color:#f2f8ff;
  white-space:pre-wrap;
  word-break:break-word;
}
body.page-chats .message .image-block{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
body.page-chats .message .image-block img{
  max-width:100%;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 12px 24px rgba(0,0,0,0.45);
}
body.page-chats .message .image-block .caption{
  color:#9ec5de;
}
body.page-chats .chat-composer{
  display:flex;
  gap:12px;
  align-items:flex-end;
}
body.page-chats .chat-composer input{
  flex:1;
}
body.page-chats .chat-composer .attach-block{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-start;
  flex:0 0 auto;
  max-width:160px;
}
body.page-chats .chat-composer .image-preview{
  background:rgba(4,21,35,0.8);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:6px;
  max-width:160px;
}
body.page-chats .chat-composer .image-preview img{
  width:100%;
  max-height:120px;
  object-fit:cover;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.08);
}
body.page-chats .chat-composer .image-preview .tiny{
  color:var(--muted);
}
body.page-chats .chat-composer .image-preview .btn{
  align-self:flex-start;
}
body.page-chats .member-pane{
  background:rgba(4,21,35,0.9);
  border-left:1px solid rgba(255,255,255,0.05);
  padding:18px 18px 18px 16px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
body.page-chats .member-pane header{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
body.page-chats .member-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
body.page-chats .member-list .dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#58f29d;
  margin-right:8px;
  display:inline-block;
}
body.page-chats .member-list li{
  display:flex;
  align-items:center;
  font-size:13px;
  color:#d4eaff;
}
body.page-chats .member-note{
  font-size:12px;
}
body.page-chats .invite-code{
  display:flex;
  flex-direction:column;
  gap:6px;
  background:rgba(57,197,255,0.12);
  border:1px solid rgba(57,197,255,0.32);
  border-radius:12px;
  padding:12px;
}
body.page-chats .invite-code .label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.6px;
  color:#9dd7ff;
}
body.page-chats .invite-code code{
  background:rgba(4,21,35,0.7);
  padding:6px 8px;
  border-radius:8px;
  font-family:monospace;
  font-size:13px;
  letter-spacing:1px;
}
.hidden{
  display:none !important;
}
@media (max-width:960px){
  body.page-chats .chat-layout{
    grid-template-columns:1fr;
  }
  body.page-chats .chat-main{
    grid-template-columns:1fr;
  }
  body.page-chats .member-pane{
    border-left:0;
    background:rgba(4,21,35,0.7);
    border-top:1px solid rgba(255,255,255,0.05);
    border-radius:0 0 18px 18px;
    padding-top:16px;
  }
}
body.page-settings{
  min-height:100%;
  margin:0;
  font-family:var(--ui-font);
  background:linear-gradient(180deg,var(--bg-1),var(--bg-2));
  color:#e6eef8;
  padding:32px 16px 48px;
  display:flex;
  justify-content:center;
}
body.page-settings .settings-shell{
  width:100%;
  max-width:1200px;
  display:flex;
  flex-direction:column;
  gap:22px;
}
body.page-settings .settings-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}
body.page-settings .settings-header h1{
  margin:0;
  font-size:30px;
  font-weight:800;
}
body.page-settings .settings-header .subtitle{
  margin:6px 0 0;
  color:var(--muted);
  font-size:14px;
}
body.page-settings .btn{
  border:0;
  border-radius:12px;
  padding:8px 16px;
  font-weight:700;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease;
  font-family:inherit;
}
body.page-settings .btn.primary{
  background:linear-gradient(135deg,#39c5ff,#23a6ff);
  color:#06283a;
  box-shadow:0 16px 34px rgba(35,166,255,0.4);
}
body.page-settings .btn.secondary{
  background:rgba(255,255,255,0.08);
  color:#d2e9ff;
  border:1px solid rgba(255,255,255,0.18);
}
body.page-settings .btn.tertiary{
  background:transparent;
  color:#9fc9eb;
  border:1px solid rgba(159,201,235,0.4);
}
body.page-settings .btn:disabled{
  opacity:.5;
  pointer-events:none;
}
body.page-settings .settings-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:20px;
}
body.page-settings .settings-card{
  background:rgba(6,24,39,0.92);
  border-radius:20px;
  border:1px solid rgba(148,191,224,0.16);
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:16px;
  box-shadow:0 26px 52px rgba(0,0,0,0.5);
}
body.page-settings .settings-card header h2{
  margin:0;
  font-size:18px;
  font-weight:800;
}
body.page-settings .settings-card header p{
  margin:6px 0 0;
  color:var(--muted);
  font-size:13px;
}
body.page-settings form{
  display:flex;
  flex-direction:column;
  gap:14px;
}
body.page-settings label span{
  display:block;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.6px;
  margin-bottom:6px;
  color:#8fa6bc;
}
body.page-settings input,
body.page-settings textarea,
body.page-settings select{
  width:100%;
  background:rgba(10,30,48,0.88);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;
  padding:10px 12px;
  color:#f3f8ff;
  font-size:14px;
  font-family:inherit;
  outline:none;
}
body.page-settings textarea{
  resize:vertical;
}
body.page-settings input:focus,
body.page-settings textarea:focus,
body.page-settings select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(57,197,255,0.2);
}
body.page-settings .actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
body.page-settings .note{
  font-size:12px;
  color:var(--muted);
}
body.page-settings .toggle{
  display:flex;
  align-items:center;
  gap:14px;
  background:rgba(7,25,40,0.8);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:14px;
  padding:10px 12px;
  cursor:pointer;
}
body.page-settings .toggle strong{
  display:block;
  font-size:14px;
  color:#e6f2ff;
}
body.page-settings .toggle small{
  display:block;
  font-size:12px;
  color:var(--muted);
}
body.page-settings .toggle input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
body.page-settings .toggle .slider{
  width:46px;
  height:24px;
  border-radius:999px;
  background:rgba(255,255,255,0.15);
  position:relative;
  flex-shrink:0;
  transition:background .2s ease;
}
body.page-settings .toggle .slider::after{
  content:'';
  position:absolute;
  top:3px;
  left:3px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#071226;
  transition:transform .2s ease, background .2s ease;
  box-shadow:0 4px 10px rgba(0,0,0,0.4);
}
body.page-settings .toggle input:checked + .slider{
  background:linear-gradient(135deg,#39c5ff,#0ea5ff);
}
body.page-settings .toggle input:checked + .slider::after{
  transform:translateX(22px);
  background:#f2fbff;
}
body.page-settings .storage-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
}
body.page-settings .storage-status{
  margin:0;
}
body.page-settings .flash{
  animation:noteFlash 1.2s ease;
}
@keyframes noteFlash{
  0%{color:#39c5ff;}
  100%{color:var(--muted);}
}
@media (max-width:720px){
  body.page-settings{
    padding:24px 12px 36px;
  }
  body.page-settings .settings-header{
    flex-direction:column;
    align-items:flex-start;
  }
  body.page-settings .settings-grid{
    grid-template-columns:1fr;
  }
}
}body.page-social{
  min-height:100%;
  margin:0;
  font-family:var(--ui-font);
  background:linear-gradient(180deg,var(--bg-1),var(--bg-2));
  color:#e6f1ff;
  padding:32px 16px 48px;
  display:flex;
  justify-content:center;
}
body.page-social .social-shell{